:root {
  --font-sans: "Roboto", "Cairo", sans-serif;

  /* ─────────────────────────────────────────────────────────────
     PRIMARY — Indigo  #5E6AD2
     Used for: CTAs, active states, focus rings, key highlights.
     Keep restrained — accent only, not decorative fill.
  ───────────────────────────────────────────────────────────── */
  --color-primary:          #5E6AD2;
  --color-primary-hover:    #515CC0;
  --color-primary-soft:     #EEF0FF;
  --color-primary-soft-mid: rgba(94, 106, 210, 0.14);
  --color-primary-border:   #C7CDFC;
  --color-primary-rgb:      94, 106, 210;
  --color-focus-ring:       #A5B4FC;

  /* Aliases — existing code references these names */
  --color-accent:         var(--color-primary);
  --color-accent-hover:   var(--color-primary-hover);
  --color-accent-soft:    var(--color-primary-soft);
  --color-accent-soft-mid: var(--color-primary-soft-mid);
  --color-accent-border:  var(--color-primary-border);
  --color-accent-rgb:     var(--color-primary-rgb);

  /* ─────────────────────────────────────────────────────────────
     BACKGROUND & SURFACE  (light → warm-neutral)
  ───────────────────────────────────────────────────────────── */
  --color-bg:             #f7f8fa;
  --color-surface:        #ffffff;
  --color-surface-2:      #f2f4f7;
  --color-surface-3:      #e8eaee;

  /* Aliases */
  --color-surface-muted:  var(--color-surface-2);
  --color-surface-subtle: var(--color-surface-3);

  /* ─────────────────────────────────────────────────────────────
     BORDER
  ───────────────────────────────────────────────────────────── */
  --color-border:         #e3e7ec;
  --color-border-strong:  #cdd2d9;
  --color-border-subtle:  #eef0f4;

  /* ─────────────────────────────────────────────────────────────
     TEXT  (4-level hierarchy)
  ───────────────────────────────────────────────────────────── */
  --color-text:           #0f1824;
  --color-text-secondary: #4a5568;
  --color-text-muted:     #6b7787;
  --color-text-faint:     #9aa4b2;

  /* Alias */
  --color-text-soft:      var(--color-text-secondary);

  /* ─────────────────────────────────────────────────────────────
     SEMANTIC STATES
  ───────────────────────────────────────────────────────────── */
  --color-success:        #1d7a4f;
  --color-success-soft:   rgba(29, 122, 79, 0.08);
  --color-success-border: rgba(29, 122, 79, 0.20);

  --color-warning:        #9d7722;
  --color-warning-soft:   #fdf6e8;
  --color-warning-border: rgba(157, 119, 34, 0.22);

  --color-danger:         #b83843;
  --color-danger-hover:   #9e2e38;
  --color-danger-soft:    #fef2f2;
  --color-danger-border:  rgba(184, 56, 67, 0.20);

  --color-info:           #2758c7;
  --color-info-soft:      rgba(39, 88, 199, 0.08);
  --color-info-border:    rgba(39, 88, 199, 0.20);

  /* ─────────────────────────────────────────────────────────────
     GOLD  (credits widget only)
  ───────────────────────────────────────────────────────────── */
  --color-gold:           #9d7722;
  --color-gold-soft:      #fdf6e8;
  --color-gold-bright:    #c8960e;
  --color-gold-text:      #4d3a10;
  --color-gold-subtext:   #88744a;
  --color-gold-add:       #7c6730;
  --color-gold-border:    rgba(200, 177, 112, 0.34);
  --color-gold-bg-from:   #fffdfa;
  --color-gold-bg-to:     #fff6e6;

  /* ─────────────────────────────────────────────────────────────
     DARK SURFACES  (inverted elements, FAB, etc.)
  ───────────────────────────────────────────────────────────── */
  --color-dark:           #080808;
  --color-dark-elevated:  #111827;
  --color-dark-hover:     #1b2331;

  /* ─────────────────────────────────────────────────────────────
     UTILITY
  ───────────────────────────────────────────────────────────── */
  --color-overlay:        rgba(15, 23, 42, 0.35);
  --color-skeleton:       #eaecf0;
  --color-skeleton-shine: rgba(255, 255, 255, 0.65);
  --color-header-bg:      rgba(255, 255, 255, 0.97);
  --color-scrollbar:      #dde1e7;

  /* ─────────────────────────────────────────────────────────────
     SHAPE
  ───────────────────────────────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   13px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────────
     SHADOW
  ───────────────────────────────────────────────────────────── */
  --shadow-soft:   0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-panel:  0 18px 45px rgba(0, 0, 0, 0.09);
  --shadow-drawer: 12px 0 30px rgba(0, 0, 0, 0.08);
  --shadow-fab:    0 12px 30px rgba(0, 0, 0, 0.18);

  /* ─────────────────────────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────────────────────────── */
  --header-height:         72px;
  --sidebar-width:         260px;
  --sidebar-collapsed-width: 60px;
  --settings-width:        clamp(320px, 27vw, 390px);
  --content-gutter:        24px;
  --content-max-width:     860px;
  --card-max-width:        640px;

  /* ─────────────────────────────────────────────────────────────
     MOTION
  ───────────────────────────────────────────────────────────── */
  --transition-fast: 0.18s ease;
  --transition:      0.25s ease;
  --transition-slow: 0.3s ease;

  /* ─────────────────────────────────────────────────────────────
     Z-INDEX SCALE
  ───────────────────────────────────────────────────────────── */
  --z-header:            100;
  --z-sidebar:           1200;
  --z-sidebar-overlay:   1100;
  --z-settings:          1300;
  --z-settings-overlay:  1250;
  --z-fab:               1260;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE TOKEN OVERRIDES
   All surface/text/border tokens flip here.
   Component files should need zero dark-mode color changes
   if they reference only tokens.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Primary */
  --color-primary:          #7B87E8;
  --color-primary-hover:    #5E6AD2;
  --color-primary-soft:     rgba(94, 106, 210, 0.16);
  --color-primary-soft-mid: rgba(94, 106, 210, 0.24);
  --color-primary-border:   rgba(94, 106, 210, 0.32);
  --color-focus-ring:       rgba(94, 106, 210, 0.50);

  /* Background & surface */
  --color-bg:             #0d0f14;
  --color-surface:        #161920;
  --color-surface-2:      #1c1f27;
  --color-surface-3:      #22262f;

  /* Border */
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.14);
  --color-border-subtle:  rgba(255, 255, 255, 0.05);

  /* Text */
  --color-text:           #e8eaed;
  --color-text-secondary: #9ba4b0;
  --color-text-muted:     #6b7280;
  --color-text-faint:     #4a5568;

  /* Semantic */
  --color-success:        #34a06a;
  --color-success-soft:   rgba(52, 160, 106, 0.14);
  --color-warning:        #d4a843;
  --color-warning-soft:   rgba(157, 119, 34, 0.18);
  --color-danger:         #e05c5c;
  --color-danger-hover:   #cc4a4a;
  --color-danger-soft:    rgba(184, 56, 67, 0.18);
  --color-info:           #4d80e6;
  --color-info-soft:      rgba(77, 128, 230, 0.14);

  /* Gold */
  --color-gold:           #d4a843;
  --color-gold-soft:      rgba(157, 119, 34, 0.18);

  /* Dark surfaces (inverted in dark mode = light) */
  --color-dark:           #f0f2f5;
  --color-dark-elevated:  #e8eaed;
  --color-dark-hover:     #d1d5db;

  /* Utility */
  --color-overlay:        rgba(0, 0, 0, 0.65);
  --color-skeleton:       rgba(255, 255, 255, 0.06);
  --color-skeleton-shine: rgba(255, 255, 255, 0.04);
  --color-header-bg:      rgba(13, 15, 20, 0.94);
  --color-scrollbar:      rgba(255, 255, 255, 0.10);

  /* Shadow */
  --shadow-soft:   0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-panel:  0 18px 45px rgba(0, 0, 0, 0.45);
  --shadow-drawer: 12px 0 30px rgba(0, 0, 0, 0.45);
  --shadow-fab:    0 12px 30px rgba(0, 0, 0, 0.55);
}