/* ===== DESIGN TOKENS ===== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* Brand palette — deep petroleum + amber */
  --clr-bg:        #0d1117;
  --clr-bg-alt:    #131920;
  --clr-surface:   #1a2230;
  --clr-surface-2: #1f2d3d;
  --clr-border:    rgba(255,255,255,0.07);
  --clr-border-2:  rgba(255,255,255,0.12);

  --clr-accent:    #f59e0b;   /* amber */
  --clr-accent-2:  #fcd34d;
  --clr-accent-muted: rgba(245,158,11,0.12);

  --clr-text:      #e8edf4;
  --clr-text-muted:#7a8fa8;
  --clr-text-dim:  #4a5e74;

  /* Status colors */
  --clr-success:   #22c55e;
  --clr-success-bg:rgba(34,197,94,0.10);
  --clr-warn:      #f59e0b;
  --clr-warn-bg:   rgba(245,158,11,0.10);
  --clr-danger:    #ef4444;
  --clr-danger-bg: rgba(239,68,68,0.10);
  --clr-info:      #38bdf8;
  --clr-info-bg:   rgba(56,189,248,0.10);

  /* Shadows — color-tinted, layered */
  --shadow-sm:
    0 1px 2px rgba(0,0,0,0.30),
    0 2px 6px rgba(0,0,0,0.20);
  --shadow-md:
    0 2px 4px rgba(0,0,0,0.35),
    0 6px 16px rgba(0,0,0,0.25),
    0 16px 40px rgba(0,0,0,0.15);
  --shadow-accent:
    0 0 0 1px rgba(245,158,11,0.20),
    0 4px 20px rgba(245,158,11,0.10);
  --shadow-card:
    0 1px 3px rgba(0,0,0,0.4),
    0 8px 24px rgba(0,0,0,0.25),
    0 24px 64px rgba(0,0,0,0.15);

  /* Spacing 8px grid */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   48px;
  --sp-2xl:  80px;
  --sp-3xl:  120px;

  /* Typography */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;

  /* Transitions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-mid:  250ms;
  --t-slow: 400ms;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  60px;
}