:root {
  /* ── Colors (exact design spec) ── */
  --navy:           #141C28;
  --navy-mid:       #1E2A3C;
  --navy-light:     #2A3A52;
  --amber:          #D4920E;
  --amber-hover:    #B87C0A;
  --amber-light:    rgba(212,146,14,0.12);
  --amber-pale:     rgba(212,146,14,0.12);
  --amber-border:   rgba(212,146,14,0.28);
  --accent:         #D4920E;

  --bg:             #EEECEA;
  --bg-elev:        #F4F2EF;
  --bg-card:        #FFFFFF;
  --card:           #FFFFFF;
  --card-sub:       #F8F7F5;

  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;
  --border-focus:   #D4920E;

  --text:           #1A1A1A;
  --text-primary:   #1A1A1A;
  --text-mid:       #42526A;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --text-mute:      #9CA3AF;
  --text-inv:       #FFFFFF;

  --success:        #22C55E;
  --success-bg:     #E8F5EE;
  --success-text:   #1E6B45;
  --error:          #EF4444;
  --error-bg:       #FCECEA;
  --error-text:     #B02A1E;

  --overlay:        rgba(20,28,40,0.6);
  --sidebar-bg:     #141C28;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-text:   rgba(255,255,255,0.55);
  --sidebar-text-strong: #ffffff;
  --sidebar-text-muted: rgba(255,255,255,0.40);
  --sidebar-hover:  rgba(255,255,255,0.07);
  --sidebar-section-border: rgba(255,255,255,0.08);

  /* ── Typography ── */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* Design spec type scale */
  --text-micro:   10px;
  --text-caption:  12px;
  --text-label:    14px;
  --text-body:     16px;
  --text-card:     20px;
  --text-section:  24px;
  --text-heading:  32px;
  --text-hero:     48px;

  /* Legacy aliases (used throughout existing CSS) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  36px;

  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;

  /* ── Spacing (design spec: 4 8 12 16 24 32 48 64) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-8:  48px;
  --sp-10: 64px;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── Radii ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Shadows (design spec) ── */
  --sh-card:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-elevated: 0 4px 12px rgba(0,0,0,0.08);
  --sh-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:  0 4px 12px rgba(0,0,0,0.08);
  --sh-lg:  0 4px 16px rgba(20,28,40,0.10), 0 8px 40px rgba(20,28,40,0.08);
  --sh-btn: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 3px rgba(20,28,40,0.22), 0 2px 10px rgba(212,146,14,0.18);
  --sh-btn-hover: inset 0 1px 0 rgba(255,255,255,0.24), 0 2px 6px rgba(20,28,40,0.26), 0 4px 18px rgba(212,146,14,0.26);
  --sh-btn-active: inset 0 2px 4px rgba(20,28,40,0.18);

  /* ── Transitions ── */
  --t-fast: 100ms ease;
  --t-base: 200ms ease;
  --t-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --sidebar-w:    260px;
  --bottom-nav-h: 64px;
  --header-h:     56px;
  --content-max:  860px;
}

/* ─────────────────────────────────────────
   DARK THEME
───────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #0F0F12;
  --bg-elev:        #17171C;
  --bg-card:        #1C1C22;
  --card:           #1C1C22;
  --card-sub:       #17171C;

  --border:         rgba(245,241,234,0.10);
  --border-strong:  rgba(245,241,234,0.18);

  --text:           #F5F1EA;
  --text-primary:   #F5F1EA;
  --text-mid:       rgba(245,241,234,0.80);
  --text-secondary: rgba(245,241,234,0.72);
  --text-muted:     rgba(245,241,234,0.50);
  --text-mute:      rgba(245,241,234,0.62);
  --text-inv:       #0F0F12;

  /* Keep amber accent intact for brand continuity */
  --amber-light:    rgba(212,146,14,0.16);
  --amber-pale:     rgba(212,146,14,0.14);
  --amber-border:   rgba(212,146,14,0.36);

  --success-bg:     rgba(34,197,94,0.14);
  --success-text:   #5BE39A;
  --error-bg:       rgba(239,68,68,0.14);
  --error-text:     #FCA5A5;

  --overlay:        rgba(0,0,0,0.70);

  /* Sidebar blends into bg in dark mode */
  --sidebar-bg:     #17171C;
  --sidebar-border: rgba(245,241,234,0.08);
  --sidebar-text:   rgba(245,241,234,0.65);
  --sidebar-text-strong: #F5F1EA;
  --sidebar-text-muted: rgba(245,241,234,0.45);
  --sidebar-hover:  rgba(245,241,234,0.06);
  --sidebar-section-border: rgba(245,241,234,0.08);

  --sh-card:     0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --sh-elevated: 0 4px 12px rgba(0,0,0,0.45);
  --sh-sm:       0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --sh-md:       0 4px 12px rgba(0,0,0,0.45);
  --sh-lg:       0 4px 16px rgba(0,0,0,0.55), 0 8px 40px rgba(0,0,0,0.35);
}

html { background: var(--bg); }