/* ───────────────────────────────────────────────────────────────────────────
   fonio-forecast — design tokens (v1, ADDITIVE)
   ───────────────────────────────────────────────────────────────────────────
   Phase A foundation. ZERO visual change required.

   Strategy: this file ADDS new design-system tokens. The existing palette
   tokens (--lilac-*, --ae-*, --bg, --bg-2, --ink-1/2/3, --line, --line-2,
   --good, --warn, --proj) live in Forecast.html's :root and remain the
   source of truth. Semantic tokens defined here REFERENCE those.

   Loaded via <link> in Forecast.html before the inline <style> block, so
   when component CSS later switches to var(--text-primary), it resolves
   through to var(--ink-1) which still has its current value.

   Linked spec: _snapshots/2026-05-09-design-system/TOKENS.md
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── RAW PALETTE (single source of truth, was in Forecast.html :root) ───
     The lilac/ae/proj/good/warn colors form the brand palette. Semantic tokens
     below alias these. Component CSS should NOT reference these directly —
     use the semantic tokens instead.
     ──────────────────────────────────────────────────────────────────────── */
  --lilac-50:  #FAF7FF;
  --lilac-200: #E9DEFF;
  --lilac-300: #D5C2FF;
  --lilac-400: #B79BFF;
  --lilac-500: #9B7BFF;
  --lilac-600: #7C5CFF;
  --lilac-700: #5A3FD9;
  --ae-200:    #FCEAB8;
  --ae-300:    #F8D27A;
  --ae-400:    #EFB04B;
  --ae-500:    #D9892A;
  --ae-600:    #B26B1F;
  --ae-700:    #A35F12;
  --proj:      #1F8FB3;
  --bg:        #FAF8F5;
  --bg-2:      #F2EEE8;
  --surface:   #FFFFFF;
  --ink-1:     #1A1424;
  --ink-2:     #4A4458;
  --ink-3:     #6B6280;     /* darkened from #8A8398 — AA contrast 4.6:1 on --bg (Phase A1) */
  --line:      #E8E2EE;
  --line-2:    #D8D2E0;
  --good:      #2C9F6F;
  --good-700:  #1B7A52;
  --warn:      #C4523F;
  --warn-700:  #A73F30;

  /* Urgency/cycle palette — used by deals cycle indicators + last-contact urgency.
     Distinct hues from --good/--warn so the staleness gradient reads at a glance:
       fresh (green) → warn-soft (yellow) → warn-mid (deep orange) → danger (red). */
  --warn-soft:    #E0A85F;     /* yellow-amber, 3–10d staleness */
  --warn-mid:     #C77A2D;     /* deep orange, 20–30d staleness */
  --warn-soft-bg: #F3D9A4;     /* light yellow background pill */
  --warn-soft-fg: #5A3D14;     /* dark amber foreground for warn-soft pill */
  --warn-soft-2:  #B58A1F;     /* amber for "ok" perf-mini light */
  --danger-soft:  #E89B8C;     /* lighter red for dark-mode danger text */

  /* Dark-mode tints — soft variants for muted surfaces, alternative borders */
  --ink-soft:     #D6CFE3;     /* dark-mode KPI value softening */
  --info-soft:    #6FBCDB;     /* dark-mode econ tile value */

  /* Error-boundary surface tokens — distinct from regular dark surfaces because
     the error screen needs a slightly different elevation/contrast. */
  --error-icon:        #D97706;   /* warm orange specifically for error-boundary icon */
  --error-surface-dk:  #221D33;   /* dark-mode error card background */
  --error-border-dk:   #3A324F;   /* dark-mode error card border */
  --error-pre-bg-dk:   #1A1626;   /* dark-mode <pre> background */

  /* ─── SPACING SCALE (4px base) ─────────────────────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --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;

  /* ─── TYPE SCALE ───────────────────────────────────────────────────────── */
  --font-sans:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-caption:    10px;  --lh-caption:    14px;
  --fs-body-xs:    11px;  --lh-body-xs:    16px;
  --fs-body-sm:    12px;  --lh-body-sm:    18px;
  --fs-body:       13px;  --lh-body:       20px;
  --fs-body-lg:    14px;  --lh-body-lg:    22px;
  --fs-h3:         16px;  --lh-h3:         24px;
  --fs-h2:         20px;  --lh-h2:         28px;
  --fs-h1:         24px;  --lh-h1:         32px;
  --fs-display:    28px;  --lh-display:    32px;
  --fs-display-lg: 32px;  --lh-display-lg: 36px;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ─── SEMANTIC COLOR TOKENS ───────────────────────────────────────────────
     Reference the existing palette in Forecast.html's :root. New code reads
     these; old code keeps reading raw --ink-1, --bg, etc. until migrated.
     ──────────────────────────────────────────────────────────────────────── */
  --text-primary:       var(--ink-1);
  --text-secondary:     var(--ink-2);
  --text-muted:         var(--ink-3);     /* NOTE: --ink-3 value updated in Forecast.html for AA contrast */
  --text-on-accent:     #FFFFFF;
  --text-on-warn:       #FFFFFF;

  --bg-elevated:        var(--bg-2);
  --surface-elevated:   var(--surface);

  --border:             var(--line);
  --border-strong:      var(--line-2);

  --accent:             var(--lilac-700);
  --accent-soft:        var(--lilac-300);
  --accent-bg:          var(--lilac-200);

  --success:            var(--good);
  --success-bg:         #E5F4ED;
  --warning:            var(--ae-500);
  --warning-bg:         #FAEEDD;
  --danger:             var(--warn);
  --danger-bg:          #F8E1DC;
  --info:               var(--proj);
  --info-bg:            #DDEEF4;

  /* ─── CHART PALETTE (also mirrored in primitives.jsx as window.TOKENS.chart) */
  --chart-1: var(--lilac-700);   /* GTM */
  --chart-2: var(--proj);        /* projected / partner */
  --chart-3: var(--good);        /* upsell / positive */
  --chart-4: var(--ae-500);      /* setup / amber */
  --chart-5: var(--warn);        /* churn / danger */
  --chart-6: #2BAFA0;            /* teal — reserved */
  --chart-7: #C73975;            /* magenta — reserved */
  --chart-8: var(--ink-3);       /* other / fallback */

  /* Sequential ramp for forecast variance / heatmap */
  --ramp-1: #EBE4FA;
  --ramp-2: #C7B5F0;
  --ramp-3: #9B7BFF;
  --ramp-4: #7C5CFF;
  --ramp-5: #4A33B0;

  /* ─── RADIUS ──────────────────────────────────────────────────────────── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-pill:   999px;

  /* ─── SHADOW ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 0 var(--border);
  --shadow-sm: 0 1px 3px rgba(26, 20, 36, 0.08), 0 1px 2px rgba(26, 20, 36, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(26, 20, 36, 0.10), 0 2px 6px -2px rgba(26, 20, 36, 0.06);
  --shadow-lg: 0 16px 40px -12px rgba(26, 20, 36, 0.20), 0 4px 12px -4px rgba(26, 20, 36, 0.08);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* ─── MOTION ──────────────────────────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-accel:      cubic-bezier(0.4, 0, 1, 1);
  --ease-decel:      cubic-bezier(0, 0, 0.2, 1);

  /* ─── Z-INDEX (named stack) ───────────────────────────────────────────── */
  --z-base:           0;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-backdrop:       400;
  --z-modal:          500;
  --z-popover:        600;
  --z-tooltip:        700;
  --z-toast:          800;

  /* ─── LAYOUT ──────────────────────────────────────────────────────────── */
  --container-min:    960px;
  --container-max:    1440px;
  --container-pad:    var(--space-8);
  --col-gap:          var(--space-6);
  --bp-sm:            1024px;
  --bp-md:            1280px;
  --bp-lg:            1440px;
  --bp-xl:            1920px;
  --modal-w-sm:       420px;
  --modal-w-md:       560px;
  --modal-w-lg:       720px;
  --panel-w:          clamp(320px, 28vw, 420px);
}

/* ─── DARK THEME ─────────────────────────────────────────────────────────────
   Inverts the neutral ramp + adjusts shadows. Brand colors (lilac/ae/proj/good/warn)
   stay the same — they read identically on dark and light backgrounds.
   ─────────────────────────────────────────────────────────────────────────── */
body.theme--dark {
  --bg:        #14101F;
  --bg-2:      #1F1830;
  --surface:   #1A1424;
  --ink-1:     #F2EEE8;
  --ink-2:     #B8B0CC;
  --ink-3:     #7A7290;
  --line:      #2D253D;
  --line-2:    #3D3550;
  --lilac-200: #2D253D;
  --lilac-300: #5A3FD9;
  --shadow-xs: 0 1px 0 var(--border);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 8px 20px -4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--lilac-400);
}

/* ─── REDUCED MOTION (WCAG 2.3.3) ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}