/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {
  --bg-primary: #0c0f14;
  --bg-secondary: #13161d;
  --bg-tertiary: #1a1e27;
  --bg-elevated: #21252f;
  --bg-hover: #282d3a;
  --bg-active: #2f3544;
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);
  --text-primary: #e8eaed;
  --text-secondary: #9aa0ab;
  --text-muted: #5f6673;
  --text-inverse: #0c0f14;
  --accent: #e8a838;
  --accent-dim: rgba(232,168,56,0.15);
  --accent-hover: #f0b94d;
  --blue: #5b8def; --blue-dim: rgba(91,141,239,0.14);
  --purple: #a78bfa; --purple-dim: rgba(167,139,250,0.14);
  --teal: #2dd4bf; --teal-dim: rgba(45,212,191,0.14);
  --amber: #f59e0b; --amber-dim: rgba(245,158,11,0.14);
  --green: #34d399; --green-dim: rgba(52,211,153,0.14);
  --red: #f87171; --red-dim: rgba(248,113,113,0.14);
  --grey: #6b7280; --grey-dim: rgba(107,114,128,0.14);
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', monospace;
  --page-px: 32px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 9999px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px var(--border-subtle);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px var(--border-subtle);
  --shadow-popup: 0 8px 32px rgba(0,0,0,0.5);
}
:root.light {
  --bg-primary: #f5f5f0; --bg-secondary: #ffffff; --bg-tertiary: #f0f0eb;
  --bg-elevated: #ffffff; --bg-hover: #eaeae4; --bg-active: #e0e0da;
  --border-subtle: rgba(0,0,0,0.06); --border-default: rgba(0,0,0,0.10); --border-strong: rgba(0,0,0,0.16);
  --text-primary: #1a1a1a; --text-secondary: #666; --text-muted: #999; --text-inverse: #fff;
  --accent: #c87d1a; --accent-dim: rgba(200,125,26,0.12); --accent-hover: #b06e10;
  --blue: #3b6fd8; --blue-dim: rgba(59,111,216,0.10);
  --purple: #7c5fc7; --purple-dim: rgba(124,95,199,0.10);
  --teal: #0e9f8e; --teal-dim: rgba(14,159,142,0.10);
  --amber: #c87d1a; --amber-dim: rgba(200,125,26,0.10);
  --green: #16a06a; --green-dim: rgba(22,160,106,0.10);
  --red: #dc4444; --red-dim: rgba(220,68,68,0.10);
  --grey: #888; --grey-dim: rgba(136,136,136,0.10);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px var(--border-subtle);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.10), 0 0 0 1px var(--border-subtle);
  --shadow-popup: 0 8px 32px rgba(0,0,0,0.15);
}