/* ============================================================================
   tokens.css — CANONICAL DESIGN TOKENS · SINGLE SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   Change a shade HERE and it propagates across the whole app. Nothing else
   should define these CSS variables — components only consume them via var().

   :root      = DARK theme (default)
   :root.light = LIGHT theme (cool blue-grey, adopted from the /schedule/ page)

   Values were captured from the resolved output of the prior (fragmented)
   shell.css + app.css token blocks (Phase 33.0.0 consolidation) so the visual
   result is byte-for-byte identical — this phase only unifies the SOURCE.
   ========================================================================== */
:root {
  /* ── Theme-invariant (same in light + dark) ── */
  --r: 6px; --r-sm: 3px; --r-lg: 10px; --r-xl: 16px;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Consolas', monospace;
  --sb-w: 220px; --sb-w-collapsed: 60px; --topbar-h: 52px;
  --t-shell: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px;
  --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --dur-fast: 80ms; --dur-base: 150ms; --dur-slow: 250ms;
  --ease-out: cubic-bezier(.2,.8,.4,1); --touch-min: 44px;

  /* ── DARK theme (default) ── */
  --bg: #0F1117; --surface: #1A1D24; --surface-2: #21252E; --surface-3: #272B35;
  --border: #2D3139; --border2: #3D4149;
  --t1: #F0F2F5; --t2: #9AA0AD; --t3: #5E6573;
  --accent: #3B82F6; --accent-l: rgba(59,130,246,.12); --accent-t: #93C5FD;
  --ok: #22C55E; --ok-l: rgba(34,197,94,.10); --ok-t: #86EFAC;
  --warn: #F59E0B; --warn-l: rgba(245,158,11,.10); --warn-t: #FCD34D;
  --risk: #EF4444; --risk-l: rgba(239,68,68,.10); --risk-t: #FCA5A5;
  --info: #38BDF8; --info-l: rgba(56,189,248,.10); --info-t: #BAE6FD;
  --critical: #A78BFA; --critical-l: rgba(167,139,250,.10); --critical-t: #DDD6FE;
  --neutral: #6B7280; --neutral-l: #1E2128; --primary: #3B82F6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,.40);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

:root.light {
  /* ── LIGHT theme (cool blue-grey, /schedule/ palette) ── */
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f1f3f6; --surface-3: #e9edf2;
  --border: #e4e7ec; --border2: #d0d5dd;
  --t1: #1a1d24; --t2: #5a6573; --t3: #8b95a3;
  --accent: #185fa5; --accent-l: #e6f1fb; --accent-t: #0c447c;
  --ok: #16A34A; --ok-l: #eef8f0; --ok-t: #15803D;
  --warn: #D97706; --warn-l: #fdf5e0; --warn-t: #B45309;
  --risk: #DC2626; --risk-l: #fdf0f0; --risk-t: #B91C1C;
  --info: #818CF8; --info-l: #F0F9FF; --info-t: #0C4A6E;
  --critical: #7C3AED; --critical-l: #F5F3FF; --critical-t: #4C1D95;
  --neutral: #6B7280; --neutral-l: #f1f3f6; --primary: #185fa5;
  --shadow-sm: 0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,.09),0 2px 4px rgba(16,24,40,.05);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.11),0 4px 8px rgba(16,24,40,.06);
}