/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — single source of truth for the design system.
   ═══════════════════════════════════════════════════════════════════════════

   New semantic tokens: --purple, --teal, --ink, --body, --bg, --surface, etc.
   Backward-compat aliases bridge existing components and JS inline styles.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette ───────────────────────────────────────────────────────── */
  --purple:      #691CFF;
  --purple-soft: #F1E9FF;
  --purple-ink:  #4A12B8;
  --teal:        #00D6C5;
  --teal-soft:   #DCFBF7;
  --teal-ink:    #00837A;

  /* ── Neutrals ────────────────────────────────────────────────────────────── */
  --ink:       #1A1A2E;
  --body:      #4D4D4D;
  --muted:     #7A7D8A;
  --bg:        #F0F2F6;
  --surface:   #FFFFFF;
  --surface-2: #F7F8FA;
  --border:    #E3E5EC;
  --border-strong: #D4D6DE;

  /* ── Status ──────────────────────────────────────────────────────────────── */
  --error:        #E5484D;
  --error-soft:   #FFE5E6;
  --warning:      #E8A307;
  --warning-soft: #FFF4D6;
  --success:      #00A37A;
  --info:         #3A6FF8;
  --info-soft:    #E5EDFF;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.04);
  --shadow-md: 0 2px 8px rgba(20, 20, 40, 0.06), 0 1px 2px rgba(20, 20, 40, 0.04);
  --shadow-lg: 0 10px 30px rgba(20, 20, 40, 0.08), 0 2px 6px rgba(20, 20, 40, 0.04);

  /* ── Radii ───────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --text-h1:        22px;  --text-h1-lh:       28px;
  --text-h2:        16px;  --text-h2-lh:       22px;
  --text-h3:        14px;  --text-h3-lh:       20px;
  --text-body:      14px;  --text-body-lh:     20px;
  --text-body-sm:   13px;  --text-body-sm-lh:  18px;
  --text-label:     12px;  --text-label-lh:    16px;
  --text-caption:   11px;  --text-caption-lh:  14px;
  --text-mono:      13px;

  --font-feature-settings-default: 'cv02', 'cv03', 'cv04', 'cv11';

  /* ── Spacing (4px grid) ──────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Z-index ─────────────────────────────────────────────────────────────── */
  --z-base:           1;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-sidebar:      250;
  --z-modal-backdrop: 900;
  --z-modal:        1000;
  --z-toast:        1100;

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --transition-fast:    100ms ease;
  --transition-default: 150ms ease;
  --transition-slow:    250ms ease;

  /* ── Sidebar ─────────────────────────────────────────────────────────────── */
  --sidebar-w:     220px;
  --topbar-h:       52px;

  /* ══════════════════════════════════════════════════════════════════════════
     Backward-compat aliases — map old token names to new values.
     Existing components in styles.css and inline JS styles keep working.
     ══════════════════════════════════════════════════════════════════════════ */

  /* Semantic */
  --brand:          var(--purple);
  --brand-hover:    var(--purple-ink);
  --brand-subtle:   var(--purple-soft);
  --danger:         var(--error);
  --danger-hover:   #C7282D;
  --danger-subtle:  var(--error-soft);
  --success-subtle: rgba(0, 163, 122, 0.12);
  --warning-subtle: var(--warning-soft);
  --info-subtle:    var(--info-soft);

  /* Structural */
  --font-sans:        var(--font);
  --bg-base:          var(--bg);
  --bg-surface:       var(--surface);
  --bg-subtle:        var(--surface-2);
  --bg-muted:         #EDEEF2;
  --text-primary:     var(--ink);
  --text-secondary:   var(--body);
  --text-muted:       var(--muted);
  --text-subtle:      #A8AABA;
  --text-inverse:     #FFFFFF;
  --border-subtle:    var(--border);
  --border-default:   var(--border-strong);
  --modal-backdrop:   rgba(0, 0, 0, 0.45);
}

/* ── Dark theme ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --ink:       #EEEEF2;
  --body:      #C9CBD3;
  --muted:     #8A8D99;
  --bg:        #0F0F1A;
  --surface:   #1A1A28;
  --surface-2: #141420;
  --border:    #2A2A38;
  --border-strong: #353545;

  --purple-soft: #2A1A55;
  --teal-soft:   #0E2E2C;
  --error-soft:  #3A1618;
  --warning-soft: #3A2B0E;
  --info-soft:   #15203D;

  /* Structural aliases rebound to dark values */
  --bg-base:      var(--bg);
  --bg-surface:   var(--surface);
  --bg-subtle:    var(--surface-2);
  --bg-muted:     #1E1E2E;
  --text-primary:   var(--ink);
  --text-secondary: var(--body);
  --text-muted:     var(--muted);
  --text-subtle:    #64677A;
  --border-subtle:  var(--border);
  --border-default: var(--border-strong);
  --brand-subtle:   var(--purple-soft);
  --modal-backdrop: rgba(0, 0, 0, 0.60);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.40);
}