/* ==========================================================================
   edcetera Design Tokens — single source of truth
   Spec: docs/ui-design-system.md

   TWO LAYERS:
     1) PRIMITIVES  — raw scale values (--navy-700, --neutral-500 …).
                      Do NOT reference these from component CSS.
     2) SEMANTIC    — role aliases (--primary, --surface, --text-secondary …).
                      Components reference ONLY these.

   Light-only today. The semantic layer is theme-ready: a
   :root[data-theme="dark"] block (scaffolded at the bottom) can remap every
   role without touching a single component rule.

   Load this BEFORE style.css:
     <link rel="stylesheet" href="/css/tokens.css">
     <link rel="stylesheet" href="/style.css">
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */
:root{
  /* ---- Navy — primary / structure (anchor: --navy-700 #1F3864) ---- */
  --navy-50:#F2F6FB;  --navy-100:#E4EBF5; --navy-200:#C4D2E8; --navy-300:#93AAD1;
  --navy-400:#5A7BB8; --navy-500:#345CA0; --navy-600:#294A82; --navy-700:#1F3864;
  --navy-800:#16294D; --navy-900:#0F2140; --navy-950:#0A1730;

  /* ---- Blue — accent / interactive (anchor: --blue-600 #0B50E6) ---- */
  --blue-50:#EFF4FE;  --blue-100:#DBE7FE; --blue-400:#5A8BF5;
  --blue-500:#2E6BF0; --blue-600:#0B50E6; --blue-700:#0A3FB8;

  /* ---- Orange — highlight (badges/flags only) ---- */
  --orange-50:#FFF3EC; --orange-100:#FFE7D6; --orange-500:#FA5A0F; --orange-600:#E24E08;

  /* ---- Neutral — Tailwind Slate (official neutral ramp) ---- */
  --neutral-0:#FFFFFF;   --neutral-50:#F8FAFC;  --neutral-100:#F1F5F9;
  --neutral-200:#E2E8F0; --neutral-300:#CBD5E1; --neutral-400:#94A3B8;
  --neutral-500:#64748B; --neutral-600:#475569; --neutral-700:#334155;
  --neutral-800:#1E293B; --neutral-900:#0F172A; --neutral-950:#020617;

  /* ---- Status ramps (solid / surface / text) ---- */
  --success-solid:#16A34A; --success-surface:#DCFCE7; --success-text:#166534;
  --warning-solid:#D97706; --warning-surface:#FEF3C7; --warning-text:#92400E;
  --danger-solid:#DC2626;  --danger-surface:#FEE2E2;  --danger-text:#991B1B;
  --info-solid:#0B50E6;    --info-surface:#EFF4FE;    --info-text:#0A3FB8;
  --neutral-solid:#7C3AED; --neutral-surface:#EDE9FE; --neutral-status-text:#5B21B6;

  /* ==========================================================================
     2. SEMANTIC — components use ONLY these
     ========================================================================== */

  /* ---- Surfaces ---- */
  --bg-page:        var(--neutral-50);
  --surface:        var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-raised: var(--neutral-0);

  /* ---- Text ---- */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-inverse:   #FFFFFF;

  /* ---- Borders ---- */
  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-100);

  /* ---- Primary (navy) — buttons / CTAs ---- */
  --primary:        var(--navy-700);
  --primary-hover:  var(--navy-600);
  --primary-active: var(--navy-800);
  --on-primary:     #FFFFFF;

  /* ---- Accent (blue) — links / focus / emphasis ---- */
  --accent:         var(--blue-600);
  --accent-hover:   var(--blue-500);
  --accent-active:  var(--blue-700);
  --on-accent:      #FFFFFF;

  /* ---- Interactive ---- */
  --link:       var(--blue-600);
  --link-hover: var(--blue-700);
  --focus-ring: var(--blue-500);

  /* ---- Highlight (orange) — sparingly ---- */
  --highlight:    var(--orange-500);
  --highlight-bg: var(--orange-50);

  /* ==========================================================================
     3. TYPOGRAPHY
     ========================================================================== */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.875rem;  /* 14 — body default */
  --text-md:   1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

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

  --tracking-tight:   -0.01em;
  --tracking-eyebrow:  0.06em;

  /* ==========================================================================
     4. 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;

  /* ==========================================================================
     5. RADIUS
     ========================================================================== */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --radius-pill:999px; --radius-full:50%;

  /* ==========================================================================
     6. ELEVATION — navy-tinted
     ========================================================================== */
  --shadow-xs:    0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:    0 2px 8px rgba(31,56,100,.08);
  --shadow-md:    0 8px 22px rgba(31,56,100,.12);
  --shadow-lg:    0 20px 48px rgba(31,56,100,.20);
  --shadow-focus: 0 0 0 3px rgba(46,107,240,.35);

  /* ==========================================================================
     7. MOTION
     ========================================================================== */
  --duration-fast:120ms; --duration-base:180ms; --duration-slow:260ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-exit:     cubic-bezier(.4,0,1,1);

  /* Layering ladder (docs/ui-fundamentals.md §4) — overlays reference these,
     never raw z-index literals. Order: panels < popovers < sticky UI <
     drawers < modals < popovers-over-modals < toast. Sibling panels that can
     coexist offset with calc(var(--z-panel) + n). */
  --z-panel:40;           /* non-blocking side panels (crm, chat, placements) */
  --z-popover:55;         /* anchored popovers (note picker, combo menus) */
  --z-sticky-ui:70;       /* floating chrome (dash drawers, AI assistant) */
  --z-drawer:95;          /* blocking drawers + backdrops just beneath */
  --z-modal:100;          /* blocking modals — one at a time */
  --z-popover-overlay:110;/* popovers anchored inside drawers/modals, tooltips */
  --z-toast:120;          /* transient feedback sits above everything */
  --z-skip:10000;         /* skip link */

  /* ==========================================================================
     8. LAYOUT
     ========================================================================== */
  --bp-sm:640px; --bp-md:820px; --bp-lg:1024px; --bp-xl:1280px;
  --shell-sidebar:260px; --shell-sidebar-collapsed:64px; --shell-topbar:52px;
  --container-wide:1280px; --container-read:920px;

  /* Overlay sizing */
  --modal-sm:420px; --modal-md:640px; --modal-lg:920px;
  --drawer-sm:320px; --drawer-md:360px; --drawer-lg:420px;

  /* ==========================================================================
     9. DATA VIZ (docs/dashboard-ui.md)
     Categorical series slots — assigned in FIXED order (slot 1 = first
     series), never cycled, never re-ranked when a filter drops a series.
     Validated with the dataviz palette checker against the white card
     surface: all slots ≥3:1 contrast, worst adjacent CVD ΔE 51.4 (target
     ≥12). A 7th+ series folds into "Other" (--viz-other) — never invent a
     hue. Status colors (--success/--warning/--danger solids) are RESERVED
     for state and never used as series colors.
     ========================================================================== */
  --viz-1:#0B50E6;  /* blue — brand accent */
  --viz-2:#E24E08;  /* orange — brand highlight */
  --viz-3:#0D9488;  /* teal */
  --viz-4:#B8860B;  /* gold */
  --viz-5:#6D28D9;  /* violet */
  --viz-6:#DB2777;  /* magenta */
  --viz-other:var(--neutral-400);

  /* Sequential ramp (continuous magnitude, one hue light→dark — brand blue).
     For discrete ordered marks start no lighter than --viz-seq-3. */
  --viz-seq-1:#DBE7FE; --viz-seq-2:#B6CDFB; --viz-seq-3:#8AAEF8;
  --viz-seq-4:#5A8BF5; --viz-seq-5:#2E6BF0; --viz-seq-6:#0B50E6; --viz-seq-7:#0A3FB8;

  /* Diverging pair (polarity): cool ↔ warm poles around a neutral midpoint. */
  --viz-div-pos:#0B50E6; --viz-div-mid:var(--neutral-200); --viz-div-neg:#E24E08;

  /* Chart chrome reuses semantic tokens — no viz-specific inks:
     gridlines --border-subtle · baseline/axis --border-strong ·
     axis labels --text-tertiary · values/legend text --text-secondary. */
}

/* ==========================================================================
   DARK THEME — scaffold only (light-only ships today).
   When dark mode is greenlit, fill in these role overrides. Because
   components reference roles, nothing below the semantic layer changes.
   ==========================================================================
:root[data-theme="dark"]{
  --bg-page:        var(--neutral-950);
  --surface:        var(--neutral-900);
  --surface-sunken: var(--neutral-800);
  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary:  var(--neutral-400);
  --border:         var(--neutral-800);
  --border-strong:  var(--neutral-700);
  --primary:        var(--navy-500);
  --primary-hover:  var(--navy-400);
  --accent:         var(--blue-500);
  ... (status surfaces/text remap as needed)
}
*/