/* ============================================================================
   PHILIP DESIGN SYSTEM — TOKEN ARCHITECTURE
   ----------------------------------------------------------------------------
   Three layers, strictly ordered:

     1. PRIMITIVES  — raw, theme-agnostic scales (color ramps, spacing, type,
        radii, motion…). The palette. Components must NEVER reference these.
     2. SEMANTIC    — role tokens (surface, text, primary, danger, elevation…)
        that flip per theme. Components consume ONLY these.
     3. DENSITY     — a second axis, orthogonal to theme, that retunes control
        heights and rhythm for "comfortable" vs "compact" command-center work.

   Design intent: premium through restraint. Elevation comes from layered
   surfaces + hairline borders, not heavy shadow or glow. Radii are conservative.
   Accents are purposeful and few: blue = action, indigo = intelligence (AI),
   plus a disciplined status set. Dark is designed first, not inverted.
   ========================================================================== */

:root {
  /* ======================================================================
     1 · PRIMITIVES
     ==================================================================== */

  /* ---- Blue — primary / action ------------------------------------------ */
  --blue-50:  #eef4ff;
  --blue-100: #dbe7ff;
  --blue-200: #bcd2ff;
  --blue-300: #8fb2ff;
  --blue-400: #5b8bfa;
  --blue-500: #3b6ef0;
  --blue-600: #2857de;
  --blue-700: #1f45bd;
  --blue-800: #1d3c98;
  --blue-900: #1c3578;
  --blue-950: #131f47;

  /* ---- Indigo — intelligence / AI (a calm extension of blue, not purple) - */
  --indigo-50:  #eef0ff;
  --indigo-100: #e0e3ff;
  --indigo-200: #c6ccff;
  --indigo-300: #a3a9fc;
  --indigo-400: #8085f7;
  --indigo-500: #6366f1;
  --indigo-600: #514fdc;
  --indigo-700: #423fb8;
  --indigo-800: #383694;
  --indigo-900: #2f2e73;
  --indigo-950: #1c1b42;

  /* ---- Neutral — cool graphite, subtle blue undertone -------------------- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfbfc;
  --neutral-50:  #f6f7f9;
  --neutral-100: #eceef2;
  --neutral-150: #e0e3ea;
  --neutral-200: #ced2dc;
  --neutral-300: #aab0bd;
  --neutral-400: #848b99;
  --neutral-500: #5b626f;
  --neutral-600: #3f4550;
  --neutral-700: #2b303a;
  --neutral-750: #23262f;
  --neutral-800: #1a1d24;
  --neutral-850: #15171d;
  --neutral-900: #111318;
  --neutral-925: #0d0e12;
  --neutral-950: #0a0b0e;

  /* ---- Status hues ------------------------------------------------------- */
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;

  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;

  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;

  /* ---- Spacing — 4px base, extended for layout -------------------------- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem; /* 2  */
  --space-1:   0.25rem;  /* 4  */
  --space-1-5: 0.375rem; /* 6  */
  --space-2:   0.5rem;   /* 8  */
  --space-2-5: 0.625rem; /* 10 */
  --space-3:   0.75rem;  /* 12 */
  --space-3-5: 0.875rem; /* 14 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-7:   1.75rem;  /* 28 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */

  /* ---- Radii — conservative; pills reserved for genuine pills ----------- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-full: 9999px;

  /* ---- Border widths ---------------------------------------------------- */
  --border-width-hairline: 1px;
  --border-width-thick:    1.5px;
  --border-width-heavy:    2px;

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas,
    "Liberation Mono", monospace;
  /* Editorial serif — the "reading mode" for Analyst / reporting / long-form
     (Money Analyst, Projects reports, deep briefings). Used with restraint. */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Georgia", "Cambria",
    "Times New Roman", serif;

  /* Type scale — tuned for dense UI; base is 13–14px. */
  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-md:   0.875rem;  /* 14 — base UI */
  --text-base: 0.9375rem; /* 15 */
  --text-lg:   1.0625rem; /* 17 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.375rem;  /* 38 */
  --text-5xl:  3rem;      /* 48 */

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

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.011em;
  --tracking-normal:  0;
  --tracking-wide:    0.01em;
  --tracking-caps:    0.05em;

  /* ---- Sizing — control heights (density-aware; see DENSITY layer) ------ */
  --control-height-xs: 24px;
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --control-height-lg: 42px;

  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;

  /* ---- Opacity ---------------------------------------------------------- */
  --opacity-disabled: 0.45;
  --opacity-muted:    0.7;
  --opacity-faint:    0.4;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-header:   150;
  --z-drawer:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popover:  500;
  --z-toast:    600;
  --z-command:  700;
  --z-tooltip:  800;

  /* ---- Motion — restrained; communicates state, never decorates -------- */
  --ease-standard:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);

  --duration-instant: 70ms;
  --duration-fast:    120ms;
  --duration-normal:  180ms;
  --duration-slow:    280ms;

  /* ---- Breakpoints (reference; @media needs literals) ------------------- */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-laptop:  1024px;
  --bp-desktop: 1280px;
  --bp-wide:    1536px;

  /* ---- Layout constants ------------------------------------------------- */
  --sidebar-width:           248px;
  --sidebar-width-collapsed: 60px;
  --header-height:           52px;
  --commandbar-height:       48px;
  --content-max-width:       1440px;

  /* Focus ring — one recipe, used everywhere for consistency. */
  --focus-ring-width: 2px;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
}

/* ==========================================================================
   2 · SEMANTIC — DARK (default, first-class)
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — five deliberate elevation steps, near-black graphite. */
  --color-bg:              var(--neutral-950);
  --color-bg-subtle:       var(--neutral-925);
  --color-surface:         var(--neutral-900);
  --color-surface-raised:  var(--neutral-850);
  --color-surface-overlay: var(--neutral-800);
  --color-surface-sunken:  var(--neutral-925);
  --color-surface-hover:   rgba(255, 255, 255, 0.035);
  --color-surface-active:  rgba(255, 255, 255, 0.06);
  --color-surface-selected: rgba(59, 110, 240, 0.1);
  --color-surface-inset:   rgba(0, 0, 0, 0.22);
  --color-surface-translucent: rgba(17, 19, 24, 0.78);

  /* Borders — hairlines do most of the elevation work. */
  --color-border:        rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.13);
  --color-border-subtle: rgba(255, 255, 255, 0.045);
  --color-border-focus:  var(--blue-500);

  /* Text — four weights of emphasis. */
  --color-text:         #f3f5f8;
  --color-text-muted:   var(--neutral-300);
  --color-text-subtle:  var(--neutral-400);
  --color-text-faint:   var(--neutral-500);
  --color-text-inverse: var(--neutral-950);

  --color-focus: var(--blue-500);

  /* Primary — blue = action */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-400);
  --color-primary-active: var(--blue-600);
  --color-primary-fg:     #ffffff;
  --color-primary-subtle: rgba(59, 110, 240, 0.13);
  --color-primary-muted:  rgba(59, 110, 240, 0.22);
  --color-primary-text:   var(--blue-300);
  --color-primary-border: rgba(59, 110, 240, 0.4);

  /* Neutral status */
  --color-neutral-subtle: rgba(255, 255, 255, 0.055);
  --color-neutral-text:   var(--neutral-400);
  --color-neutral-border: rgba(255, 255, 255, 0.11);

  /* Success */
  --color-success:        var(--green-500);
  --color-success-fg:     #04140d;
  --color-success-subtle: rgba(16, 185, 129, 0.13);
  --color-success-text:   var(--green-400);
  --color-success-border: rgba(16, 185, 129, 0.38);

  /* Warning */
  --color-warning:        var(--amber-500);
  --color-warning-fg:     #231400;
  --color-warning-subtle: rgba(245, 158, 11, 0.13);
  --color-warning-text:   var(--amber-400);
  --color-warning-border: rgba(245, 158, 11, 0.38);

  /* Attention — needs your eyes (distinct warm orange, ≠ warning/danger) */
  --color-attention:        var(--orange-500);
  --color-attention-fg:     #241000;
  --color-attention-subtle: rgba(249, 115, 22, 0.14);
  --color-attention-text:   var(--orange-400);
  --color-attention-border: rgba(249, 115, 22, 0.4);

  /* Predicted — model forecast (distinct violet; ALWAYS paired with a confidence
     signal + dashed treatment so it can never read as a KNOWN fact). */
  --color-predicted:        #8b5cf6;
  --color-predicted-fg:     #ffffff;
  --color-predicted-subtle: rgba(139, 92, 246, 0.14);
  --color-predicted-text:   #c4b5fd;
  --color-predicted-border: rgba(139, 92, 246, 0.42);

  /* Danger */
  --color-danger:        var(--red-500);
  --color-danger-fg:     #ffffff;
  --color-danger-subtle: rgba(239, 68, 68, 0.13);
  --color-danger-text:   var(--red-400);
  --color-danger-border: rgba(239, 68, 68, 0.4);
  --color-danger-ring:   var(--red-500);

  /* Information */
  --color-info:        var(--cyan-500);
  --color-info-fg:     #04161a;
  --color-info-subtle: rgba(6, 182, 212, 0.13);
  --color-info-text:   var(--cyan-400);
  --color-info-border: rgba(6, 182, 212, 0.38);

  /* Disabled */
  --color-disabled-bg:     rgba(255, 255, 255, 0.04);
  --color-disabled-text:   var(--neutral-500);
  --color-disabled-border: rgba(255, 255, 255, 0.06);

  /* AI — indigo intelligence. Kept nearly flat; a wash, never a glow. */
  --color-ai:         var(--indigo-500);
  --color-ai-hover:   var(--indigo-400);
  --color-ai-active:  var(--indigo-600);
  --color-ai-fg:      #ffffff;
  --color-ai-subtle:  rgba(99, 102, 241, 0.13);
  --color-ai-muted:   rgba(99, 102, 241, 0.2);
  --color-ai-text:    var(--indigo-300);
  --color-ai-border:  rgba(99, 102, 241, 0.4);
  --color-ai-gradient: linear-gradient(180deg, var(--indigo-500) 0%, var(--indigo-600) 100%);

  /* Finance / trend semantics */
  --color-positive: var(--green-400);
  --color-negative: var(--red-400);

  /* Scrim + skeleton */
  --color-scrim:    rgba(0, 0, 0, 0.6);
  --color-skeleton: rgba(255, 255, 255, 0.055);

  /* Elevation — restrained. Higher steps add depth, not drama. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.48), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 22px 56px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);

  /* Data-visualization — categorical ramp + chrome (accessible on dark). */
  --viz-1: var(--blue-400);
  --viz-2: var(--indigo-400);
  --viz-3: var(--cyan-400);
  --viz-4: var(--green-400);
  --viz-5: var(--amber-400);
  --viz-6: var(--orange-400);
  --viz-7: var(--red-400);
  --viz-8: #c084fc;
  --viz-grid:  rgba(255, 255, 255, 0.06);
  --viz-track: rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   2 · SEMANTIC — LIGHT (a designed theme, not an inversion)
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --color-bg:              var(--neutral-50);
  --color-bg-subtle:       var(--neutral-100);
  --color-surface:         var(--neutral-0);
  --color-surface-raised:  var(--neutral-0);
  --color-surface-overlay: var(--neutral-0);
  --color-surface-sunken:  var(--neutral-100);
  --color-surface-hover:   rgba(17, 19, 24, 0.03);
  --color-surface-active:  rgba(17, 19, 24, 0.055);
  --color-surface-selected: rgba(40, 87, 222, 0.07);
  --color-surface-inset:   rgba(17, 19, 24, 0.035);
  --color-surface-translucent: rgba(255, 255, 255, 0.8);

  --color-border:        var(--neutral-150);
  --color-border-strong: var(--neutral-300);
  --color-border-subtle: var(--neutral-100);
  --color-border-focus:  var(--blue-500);

  --color-text:         var(--neutral-900);
  --color-text-muted:   var(--neutral-600);
  --color-text-subtle:  var(--neutral-500);
  --color-text-faint:   var(--neutral-400);
  --color-text-inverse: var(--neutral-0);

  --color-focus: var(--blue-500);

  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-500);
  --color-primary-active: var(--blue-700);
  --color-primary-fg:     #ffffff;
  --color-primary-subtle: rgba(40, 87, 222, 0.07);
  --color-primary-muted:  rgba(40, 87, 222, 0.13);
  --color-primary-text:   var(--blue-700);
  --color-primary-border: rgba(40, 87, 222, 0.26);

  --color-neutral-subtle: rgba(17, 19, 24, 0.045);
  --color-neutral-text:   var(--neutral-500);
  --color-neutral-border: var(--neutral-200);

  --color-success:        var(--green-600);
  --color-success-fg:     #ffffff;
  --color-success-subtle: rgba(5, 150, 105, 0.09);
  --color-success-text:   var(--green-700);
  --color-success-border: rgba(5, 150, 105, 0.28);

  --color-warning:        var(--amber-600);
  --color-warning-fg:     #ffffff;
  --color-warning-subtle: rgba(217, 119, 6, 0.1);
  --color-warning-text:   #b45309;
  --color-warning-border: rgba(217, 119, 6, 0.3);

  --color-attention:        var(--orange-600);
  --color-attention-fg:     #ffffff;
  --color-attention-subtle: rgba(234, 88, 12, 0.09);
  --color-attention-text:   #c2410c;
  --color-attention-border: rgba(234, 88, 12, 0.3);

  --color-predicted:        #7c3aed;
  --color-predicted-fg:     #ffffff;
  --color-predicted-subtle: rgba(124, 58, 237, 0.09);
  --color-predicted-text:   #6d28d9;
  --color-predicted-border: rgba(124, 58, 237, 0.3);

  --color-danger:        var(--red-600);
  --color-danger-fg:     #ffffff;
  --color-danger-subtle: rgba(220, 38, 38, 0.07);
  --color-danger-text:   var(--red-700);
  --color-danger-border: rgba(220, 38, 38, 0.26);
  --color-danger-ring:   var(--red-500);

  --color-info:        var(--cyan-600);
  --color-info-fg:     #ffffff;
  --color-info-subtle: rgba(8, 145, 178, 0.09);
  --color-info-text:   var(--cyan-600);
  --color-info-border: rgba(8, 145, 178, 0.28);

  --color-disabled-bg:     var(--neutral-100);
  --color-disabled-text:   var(--neutral-400);
  --color-disabled-border: var(--neutral-150);

  --color-ai:         var(--indigo-600);
  --color-ai-hover:   var(--indigo-500);
  --color-ai-active:  var(--indigo-700);
  --color-ai-fg:      #ffffff;
  --color-ai-subtle:  rgba(81, 79, 220, 0.08);
  --color-ai-muted:   rgba(81, 79, 220, 0.14);
  --color-ai-text:    var(--indigo-700);
  --color-ai-border:  rgba(81, 79, 220, 0.26);
  --color-ai-gradient: linear-gradient(180deg, var(--indigo-500) 0%, var(--indigo-600) 100%);

  --color-positive: var(--green-600);
  --color-negative: var(--red-600);

  --color-scrim:    rgba(17, 19, 24, 0.4);
  --color-skeleton: rgba(17, 19, 24, 0.06);

  --shadow-xs: 0 1px 1px rgba(17, 19, 24, 0.05);
  --shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.07), 0 1px 3px rgba(17, 19, 24, 0.05);
  --shadow-md: 0 4px 10px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.05);
  --shadow-lg: 0 10px 28px rgba(17, 19, 24, 0.1), 0 2px 6px rgba(17, 19, 24, 0.05);
  --shadow-xl: 0 22px 56px rgba(17, 19, 24, 0.14), 0 6px 14px rgba(17, 19, 24, 0.07);

  --viz-1: var(--blue-600);
  --viz-2: var(--indigo-600);
  --viz-3: var(--cyan-600);
  --viz-4: var(--green-600);
  --viz-5: var(--amber-600);
  --viz-6: var(--orange-600);
  --viz-7: var(--red-600);
  --viz-8: #9333ea;
  --viz-grid:  rgba(17, 19, 24, 0.07);
  --viz-track: rgba(17, 19, 24, 0.08);
}

/* Follow the OS when no theme is explicitly set. Mirrors the light block. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --color-bg:              var(--neutral-50);
    --color-bg-subtle:       var(--neutral-100);
    --color-surface:         var(--neutral-0);
    --color-surface-raised:  var(--neutral-0);
    --color-surface-overlay: var(--neutral-0);
    --color-surface-sunken:  var(--neutral-100);
    --color-surface-hover:   rgba(17, 19, 24, 0.03);
    --color-surface-active:  rgba(17, 19, 24, 0.055);
    --color-surface-selected: rgba(40, 87, 222, 0.07);
    --color-surface-inset:   rgba(17, 19, 24, 0.035);
    --color-surface-translucent: rgba(255, 255, 255, 0.8);

    --color-border:        var(--neutral-150);
    --color-border-strong: var(--neutral-300);
    --color-border-subtle: var(--neutral-100);

    --color-text:         var(--neutral-900);
    --color-text-muted:   var(--neutral-600);
    --color-text-subtle:  var(--neutral-500);
    --color-text-faint:   var(--neutral-400);
    --color-text-inverse: var(--neutral-0);

    --color-primary:        var(--blue-600);
    --color-primary-hover:  var(--blue-500);
    --color-primary-active: var(--blue-700);
    --color-primary-subtle: rgba(40, 87, 222, 0.07);
    --color-primary-muted:  rgba(40, 87, 222, 0.13);
    --color-primary-text:   var(--blue-700);
    --color-primary-border: rgba(40, 87, 222, 0.26);

    --color-neutral-subtle: rgba(17, 19, 24, 0.045);
    --color-neutral-text:   var(--neutral-500);
    --color-neutral-border: var(--neutral-200);

    --color-success-fg: #ffffff;
    --color-success-subtle: rgba(5, 150, 105, 0.09);
    --color-success-text:   var(--green-700);
    --color-success-border: rgba(5, 150, 105, 0.28);
    --color-warning-fg: #ffffff;
    --color-warning-subtle: rgba(217, 119, 6, 0.1);
    --color-warning-text:   #b45309;
    --color-warning-border: rgba(217, 119, 6, 0.3);
    --color-attention:        var(--orange-600);
    --color-attention-subtle: rgba(234, 88, 12, 0.09);
    --color-attention-text:   #c2410c;
    --color-attention-border: rgba(234, 88, 12, 0.3);
    --color-predicted:        #7c3aed;
    --color-predicted-subtle: rgba(124, 58, 237, 0.09);
    --color-predicted-text:   #6d28d9;
    --color-predicted-border: rgba(124, 58, 237, 0.3);
    --color-danger-fg: #ffffff;
    --color-danger-subtle: rgba(220, 38, 38, 0.07);
    --color-danger-text:   var(--red-700);
    --color-danger-border: rgba(220, 38, 38, 0.26);
    --color-info:        var(--cyan-600);
    --color-info-subtle: rgba(8, 145, 178, 0.09);
    --color-info-text:   var(--cyan-600);
    --color-info-border: rgba(8, 145, 178, 0.28);

    --color-ai:         var(--indigo-600);
    --color-ai-subtle:  rgba(81, 79, 220, 0.08);
    --color-ai-muted:   rgba(81, 79, 220, 0.14);
    --color-ai-text:    var(--indigo-700);
    --color-ai-border:  rgba(81, 79, 220, 0.26);

    --color-positive: var(--green-600);
    --color-negative: var(--red-600);
    --color-scrim:    rgba(17, 19, 24, 0.4);
    --color-skeleton: rgba(17, 19, 24, 0.06);

    --shadow-xs: 0 1px 1px rgba(17, 19, 24, 0.05);
    --shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.07), 0 1px 3px rgba(17, 19, 24, 0.05);
    --shadow-md: 0 4px 10px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.05);
    --shadow-lg: 0 10px 28px rgba(17, 19, 24, 0.1), 0 2px 6px rgba(17, 19, 24, 0.05);
    --shadow-xl: 0 22px 56px rgba(17, 19, 24, 0.14), 0 6px 14px rgba(17, 19, 24, 0.07);

    --viz-1: var(--blue-600); --viz-2: var(--indigo-600); --viz-3: var(--cyan-600);
    --viz-4: var(--green-600); --viz-5: var(--amber-600); --viz-6: var(--orange-600);
    --viz-7: var(--red-600); --viz-8: #9333ea;
    --viz-grid: rgba(17, 19, 24, 0.07); --viz-track: rgba(17, 19, 24, 0.08);
  }
}

/* ==========================================================================
   3 · DENSITY — orthogonal to theme. "comfortable" (default) vs "compact".
   Compact tightens control heights + rhythm for command-center screens
   without changing type legibility.
   ========================================================================== */
[data-density="compact"] {
  --control-height-xs: 22px;
  --control-height-sm: 27px;
  --control-height-md: 32px;
  --control-height-lg: 38px;
  --text-md:   0.8125rem; /* 13 */
  --text-base: 0.875rem;  /* 14 */
}

/* ==========================================================================
   ACCESSIBILITY — reduced motion zeroes out durations globally.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
  }
}