/**
 * VariantView Design Tokens
 *
 * Based on:
 * - USWDS "Magic Number" color system (50+ grade diff = AA compliant)
 * - IBM Plex font family
 * - 8px spacing grid
 * - Bret Victor's explorable explanations principles
 *
 * Color Philosophy: Every color has ONE semantic purpose. No decorative color.
 */

:root {
  /* ══════════════════════════════════════════════════════════════════════════
     BASELINE RHYTHM SYSTEM (Sassline-inspired)

     html font-size: 75% (12px, half of 24px rhythm)
     This makes: 1rem = 12px, 2rem = 24px = 1 grid line

     All vertical spacing should be rhythm multiples for perfect alignment.
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-rhythm: 2rem;           /* 24px - 1 baseline grid line */
  --vv-rhythm-half: 1rem;      /* 12px - half rhythm */
  --vv-rhythm-quarter: 0.5rem; /* 6px - quarter rhythm */
  --vv-rhythm-double: 4rem;    /* 48px - 2 grid lines */
  --vv-rhythm-triple: 6rem;    /* 72px - 3 grid lines */

  /* Baseline Grid Shift
     Uses cap unit for font-aware baseline alignment.
     cap = cap-height of first available font (measured from baseline).
     Formula: (line-height - cap-height) / 2 = half-leading above caps.
     Browser calculates exact pixel value at render time.
     Supported: Chrome 118+, Firefox 97+, Safari 17.2+ (89%+ global) */
  --vv-baseline-shift: calc((var(--vv-rhythm) - 1cap) / 2);

  /* ══════════════════════════════════════════════════════════════════════════
     WARM GRAYSCALE BASE (USWDS Gray-warm family)
     Using grades: 5 (lightest) to 90 (darkest)
     Warm undertones harmonize with salmon surface
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-color-gray-5: #f5f0ee;
  --vv-color-gray-10: #e8e3e1;
  --vv-color-gray-20: #cbc5c3;
  --vv-color-gray-30: #afaaa8;
  --vv-color-gray-50: #76706e;
  --vv-color-gray-60: #635e5c;             /* J10.1: WCAG AA fix — 5.31:1 on surface-tertiary */
  --vv-color-gray-70: #4a4544;
  --vv-color-gray-90: #1f1c1b;

  /* ══════════════════════════════════════════════════════════════════════════
     SURFACES - Sophisticated Salmon/Cream (FT-inspired)
     Light pink/salmon for reduced eye strain and distinct look
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-color-surface-primary: #fff8f6;      /* Very light salmon - page background */
  --vv-color-surface-secondary: #f9f0ed;    /* Slightly deeper salmon - sections */
  --vv-color-surface-tertiary: #f2e8e5;     /* Warm cream - table headers, accents */
  --vv-color-surface-card: #fff8f6;         /* Same as primary - unified look */

  /* ══════════════════════════════════════════════════════════════════════════
     TEXT
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-color-text-primary: var(--vv-color-gray-90);
  --vv-color-text-secondary: var(--vv-color-gray-70);
  --vv-color-text-tertiary: var(--vv-color-gray-50);
  --vv-color-text-disabled: var(--vv-color-gray-30);

  /* ══════════════════════════════════════════════════════════════════════════
     BORDERS
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-color-border-primary: var(--vv-color-gray-20);
  --vv-color-border-light: var(--vv-color-gray-10);

  /* ══════════════════════════════════════════════════════════════════════════
     SEMANTIC COLORS - Each has ONE purpose

     | Color   | Semantic Purpose              | Never Use For        |
     |---------|-------------------------------|----------------------|
     | Green   | Positive numeric (+12%, ↑)    | Text sentiment       |
     | Red     | Negative numeric (-8%, ↓)     | Text sentiment       |
     | Orange  | Warnings + OVERVALUED badge   | Numeric changes      |
     | Mint    | Positive text (green flags)   | Numbers              |
     | Magenta | Negative text (red flags)     | Numbers              |
     | Gold    | Key insight / Turbo trigger   | General highlights   |
     | Cyan    | UNDERVALUED badge only        | Numeric changes      |
     | Blue    | Interactive (Tangle, links)   | Data display         |
     ══════════════════════════════════════════════════════════════════════════ */

  /* GREEN: Positive numeric change (+12%, ↑ arrows, growth rates) */
  --vv-color-green-5: #ecf3ec;
  --vv-color-green-30: #7fb491;
  --vv-color-green-50: #4d8055;
  --vv-color-green-60: #2e6f40;
  --vv-color-numeric-positive: var(--vv-color-green-50);

  /* RED: Negative numeric change (-8%, ↓ arrows, declines) */
  --vv-color-red-5: #f9eded;
  --vv-color-red-30: #f2938c;
  --vv-color-red-50: #b50909;
  --vv-color-red-60: #8b0a03;
  --vv-color-numeric-negative: var(--vv-color-red-50);

  /* ORANGE: Warning (data staleness, high TV%, stretch targets, OVERVALUED) */
  --vv-color-orange-5: #fef2e4;
  --vv-color-orange-30: #ffbc78;
  --vv-color-orange-40: #e66f0e;
  --vv-color-orange-50: #c05600;
  --vv-color-orange-60: #a64b00;             /* J16.3: WCAG AA fix — 5.16:1 on surface-secondary */
  --vv-color-warning: var(--vv-color-orange-40);
  --vv-color-warning-bg: var(--vv-color-orange-5);

  /* MINT: Positive sentiment in text (bullish factors, catalysts, green flags) */
  --vv-color-mint-5: #dbf6f0;
  --vv-color-mint-30: #29e1cb;
  --vv-color-mint-50: #008659;
  --vv-color-mint-60: #007048;             /* J10.1: WCAG AA fix — 5.41:1 on mint-5 */
  --vv-color-sentiment-positive: var(--vv-color-mint-50);
  --vv-color-sentiment-positive-bg: var(--vv-color-mint-5);

  /* MAGENTA: Negative sentiment in text (risks, bearish factors, red flags) */
  --vv-color-magenta-5: #f9e0ea;
  --vv-color-magenta-30: #f09ac0;
  --vv-color-magenta-50: #ab2165;
  --vv-color-sentiment-negative: var(--vv-color-magenta-50);
  --vv-color-sentiment-negative-bg: var(--vv-color-magenta-5);

  /* GOLD: Key insight / Turbo trigger (the ONE thing to focus on) */
  --vv-color-gold-5: #fef0c8;
  --vv-color-gold-20: #fad980;
  --vv-color-gold-30: #e5a000;
  --vv-color-gold-50: #8e6c10;
  --vv-color-gold-60: #7a5e0e;             /* J10.1: WCAG AA fix — 5.39:1 on gold-5 */
  --vv-color-insight: var(--vv-color-gold-30);
  --vv-color-insight-bg: var(--vv-color-gold-5);
  --vv-color-insight-text: var(--vv-color-gold-50);

  /* CYAN: Signal badge UNDERVALUED (distinct from green for numbers) */
  --vv-color-cyan-5: #e7f6f8;
  --vv-color-cyan-30: #52daf2;
  --vv-color-cyan-50: #0081a1;
  --vv-color-signal-undervalued: var(--vv-color-cyan-50);
  --vv-color-signal-undervalued-bg: var(--vv-color-cyan-5);

  /* ORANGE variant: Signal badge OVERVALUED (distinct from red for numbers) */
  --vv-color-signal-overvalued: var(--vv-color-orange-50);
  --vv-color-signal-overvalued-bg: var(--vv-color-orange-5);

  /* GRAY: Signal badge FAIRLY_VALUED */
  --vv-color-signal-fair: var(--vv-color-gray-50);
  --vv-color-signal-fair-bg: var(--vv-color-gray-5);

  /* BLUE: Interactive elements (Tangle numbers, links, buttons) */
  --vv-color-blue-5: #eff6fb;
  --vv-color-blue-30: #73b3e7;
  --vv-color-blue-40: #4b96d5;
  --vv-color-blue-50: #2378c3;
  --vv-color-blue-60: #0b4778;
  --vv-color-blue-90: #0a2f4e;
  --vv-color-interactive: var(--vv-color-blue-50);
  --vv-color-interactive-hover: var(--vv-color-blue-60);
  --vv-color-interactive-bg: var(--vv-color-blue-5);
  --vv-color-tangle-value: var(--vv-color-blue-50);

  /* Text/borders ON interactive surfaces (white for contrast on blue backgrounds) */
  --vv-color-text-on-interactive: #ffffff;
  --vv-color-text-on-interactive-muted: rgba(255, 255, 255, 0.9);
  --vv-color-border-on-interactive: rgba(255, 255, 255, 0.2);
  --vv-color-border-on-interactive-strong: rgba(255, 255, 255, 0.3);

  /* Text ON bright visualization fills (grade-30 bar segments).
     Grade-30 fills (#29e1cb, #ffbc78) don't remap across themes,
     so labels stay dark in both modes. Contrast: ≥10:1 on mint-30, ≥13:1 on orange-30. */
  --vv-color-text-on-viz-fill: #1b1b1b;

  /* VIOLET: Historical limits / Industry constraints (distinct from orange overvalued) */
  --vv-color-violet-5: #f4f1f9;
  --vv-color-violet-30: #b8a2e3;
  --vv-color-violet-40: #9d84d2;
  --vv-color-violet-50: #8168b3;

  /* ══════════════════════════════════════════════════════════════════════════
     VISUALIZATION SEMANTIC TOKENS
     Unified visual grammar for all charts and interactive visualizations.

     This ensures consistent meaning across all components:
     - Ghost Sliders
     - Thesis Boundary Map (Heatmap)
     - Drawing the Forecast
     - Slopegraph

     Visual Grammar:
     | Concept           | Color         | Shape    | Line Style    |
     |-------------------|---------------|----------|---------------|
     | User (You)        | Blue          | Circle   | Dashed (6 3)  |
     | Market/Consensus  | Gray-40       | Diamond  | Dashed (2 3)  |
     | Constraints/Limits| Gray-70       | -        | Dotted (4 2)  |
     | History/Fact      | Gray-50       | -        | Solid         |
     ══════════════════════════════════════════════════════════════════════════ */

  /* User-controlled elements: "I can touch this. This represents ME." */
  --vv-color-viz-user: var(--vv-color-interactive);

  /* Market/Consensus reference: "External expectations - what others think" */
  --vv-color-viz-market: var(--vv-color-gray-50);
  --vv-color-viz-consensus: var(--vv-color-gray-30);

  /* Constraints/Limits: "This is a boundary" (gray-70 for neutral contrast on all terrain) */
  --vv-color-viz-constraint: var(--vv-color-gray-70);

  /* Historical data: "This actually happened" */
  --vv-color-viz-history: var(--vv-color-gray-50);

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY - IBM Plex
     ══════════════════════════════════════════════════════════════════════════ */

  /* Font Families */
  --vv-font-family-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vv-font-family-mono: "IBM Plex Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Font Sizes (Modular Scale: 1.25 ratio, base 16px visual)
     Values adjusted for 12px root: multiply by 4/3 to preserve visual size */
  --vv-font-size-xs: 0.853rem;   /* 10.24px */
  --vv-font-size-sm: 1.067rem;   /* 12.8px */
  --vv-font-size-base: 1.333rem; /* 16px */
  --vv-font-size-md: 1.667rem;   /* 20px */
  --vv-font-size-lg: 2.083rem;   /* 25px */
  --vv-font-size-xl: 2.604rem;   /* 31.25px */
  --vv-font-size-2xl: 3.255rem;  /* 39px */

  /* Font Weights */
  --vv-font-weight-normal: 400;
  --vv-font-weight-medium: 500;
  --vv-font-weight-semibold: 600;
  --vv-font-weight-bold: 700;

  /* Line Heights (generic - avoid for rhythm-critical text) */
  --vv-line-height-tight: 1.25;
  --vv-line-height-normal: 1.5;
  --vv-line-height-relaxed: 1.75;

  /* ══════════════════════════════════════════════════════════════════════════
     RHYTHM-AWARE LINE HEIGHTS
     Each font-size needs a specific line-height to snap to the 24px grid.
     Use these for true baseline alignment.

     | Font Size   | Line-Height | Computed | Grid Lines |
     |-------------|-------------|----------|------------|
     | 39px (2xl)  | 1.231       | 48px     | 2          |
     | 31.25px (xl)| 1.152       | 36px     | 1.5        |
     | 25px (lg)   | 1.44        | 36px     | 1.5        |
     | 20px (md)   | 1.2         | 24px     | 1          |
     | 16px (base) | 1.5         | 24px     | 1          |
     | 12.8px (sm) | 1.875       | 24px     | 1          |
     | 10.24px (xs)| 2.344       | 24px     | 1          |
     ══════════════════════════════════════════════════════════════════════════ */
  --vv-line-height-2xl: 1.231;   /* 39px → 48px (2 grid lines) */
  --vv-line-height-xl: 1.152;    /* 31.25px → 36px (1.5 grid lines) */
  --vv-line-height-lg: 1.44;     /* 25px → 36px (1.5 grid lines) */
  --vv-line-height-md: 1.2;      /* 20px → 24px (1 grid line) */
  --vv-line-height-base: 1.5;    /* 16px → 24px (1 grid line) */
  --vv-line-height-sm: 1.875;    /* 12.8px → 24px (1 grid line) */
  --vv-line-height-xs: 2.344;    /* 10.24px → 24px (1 grid line) */

  /* Letter Spacing */
  --vv-letter-spacing-tight: -0.025em;
  --vv-letter-spacing-normal: 0;
  --vv-letter-spacing-wide: 0.025em;
  --vv-letter-spacing-caps: 0.05em;

  /* ══════════════════════════════════════════════════════════════════════════
     SPACING (Rhythm-aligned, 12px root)
     Note: --vv-space-5 (2rem = 24px) = 1 baseline grid line
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-space-0: 0;
  --vv-space-1: 0.333rem;  /* 4px */
  --vv-space-2: 0.667rem;  /* 8px */
  --vv-space-3: 1rem;      /* 12px = half rhythm */
  --vv-space-4: 1.333rem;  /* 16px */
  --vv-space-5: 2rem;      /* 24px = 1 rhythm */
  --vv-space-6: 2.667rem;  /* 32px */
  --vv-space-8: 4rem;      /* 48px = 2 rhythm */
  --vv-space-10: 5.333rem; /* 64px */
  --vv-space-12: 8rem;     /* 96px = 4 rhythm */

  /* ══════════════════════════════════════════════════════════════════════════
     BORDERS & RADII
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-border-width: 1px;
  --vv-border-width-thick: 2px;

  --vv-radius-sm: 0.333rem;  /* 4px */
  --vv-radius-md: 0.5rem;    /* 6px */
  --vv-radius-lg: 0.667rem;  /* 8px */
  --vv-radius-full: 9999px;

  /* ══════════════════════════════════════════════════════════════════════════
     SHADOWS
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --vv-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --vv-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ══════════════════════════════════════════════════════════════════════════
     TRANSITIONS
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-transition-fast: 150ms ease;
  --vv-transition-normal: 250ms ease;
  --vv-transition-slow: 350ms ease;

  /* ══════════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-z-base: 0;
  --vv-z-dropdown: 100;
  --vv-z-sticky: 200;
  --vv-z-modal: 300;
  --vv-z-tooltip: 400;

  /* ══════════════════════════════════════════════════════════════════════════
     LAYOUT
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-max-width-content: 96rem;   /* 1152px */
  --vv-max-width-narrow: 64rem;    /* 768px */
  --vv-max-width-wide: 120rem;     /* 1440px */

  /* Prose max-widths (character-based for optimal readability) */
  --vv-max-width-prose-sm: 50ch;   /* Short descriptions, subtitles */
  --vv-max-width-prose: 60ch;      /* Standard body text */
  --vv-max-width-prose-lg: 65ch;   /* Slightly wider prose */

  /* Interactive Grid (single-company breakpoint-free table sizing — I11.2) */
  --vv-igrid-table-single-max: 560px;

  /* ══════════════════════════════════════════════════════════════════════════
     THREE-COLUMN LAYOUT (Stock Page)

     Grid structure: Nav | Reading | Context | Buffer
     - Nav: Stock header, mini-summary, section list (collapsible)
     - Reading: Main content with prose + full-width visualizations
     - Context: Sticky sidebar with assumptions, triggers, glossary
     - Buffer: Absorbs extra space on wide screens (Gestalt proximity)

     Design rationale:
     - Navigation: 240-320px accommodates stock header + section list
     - Collapsed nav: 60px for icon strip
     - Reading: 600px min for comfortable viz; 80ch max for readability
     - Context: 320px-50ch keeps it readable but not overpowering
     - Gap: 32px (--vv-space-6) for Tufte-style tighter layout
     ══════════════════════════════════════════════════════════════════════════ */

  /* Navigation Pane */
  --vv-layout-nav-min: 240px;        /* Min width for full navigation */
  --vv-layout-nav-max: 320px;        /* Max width for full navigation */
  --vv-layout-nav-collapsed: 60px;   /* Width when collapsed to icon strip */

  /* Reading Pane */
  --vv-layout-reading-min: 600px;    /* Min width for visualizations */
  --vv-layout-reading-max: 80ch;     /* Max width for prose readability */

  /* Context Pane */
  --vv-layout-context-min: 320px;    /* Min width for context sidebar */
  --vv-layout-context-max: 50ch;     /* Max width (character-based) */

  /* Layout Gap */
  --vv-layout-gap: var(--vv-space-6); /* 32px - tighter Tufte-style spacing */

  /* ══════════════════════════════════════════════════════════════════════════
     THREE-COLUMN BREAKPOINTS

     Wide (≥1400px): All columns at/near max, buffer visible
     Standard (1100-1399px): No buffer, Reading fills available space
     Collapsed (900-1099px): Navigation collapses to 60px icon strip
     Unsupported (<900px): Show friendly message, hide layout
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-breakpoint-wide: 1400px;      /* Full layout with buffer column */
  --vv-breakpoint-standard: 1100px;  /* No buffer, all columns visible */
  --vv-breakpoint-min: 900px;        /* Below this: unsupported message */

  /* ══════════════════════════════════════════════════════════════════════════
     GRID PAGE LAYOUT TOKENS

     Grid page uses 2-column layout: grid area + context pane.
     Grid area minimum 800px for 4-company comparison table.
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-layout-grid-min: 800px;             /* Min width for grid data area */

  /* ══════════════════════════════════════════════════════════════════════════
     GRID CELL SIGNAL TOKENS

     DISTINCT from --vv-color-signal-* (valuation: undervalued/overvalued/fair).
     These are for grid cell background tints based on forensic analysis signals.

     Naming: --vv-color-grid-signal-{signal}-bg
     Values: Faint tints from existing palette (mint-5, magenta-5, orange-5)
     ══════════════════════════════════════════════════════════════════════════ */

  --vv-color-grid-signal-positive-bg: var(--vv-color-mint-5);
  --vv-color-grid-signal-negative-bg: var(--vv-color-magenta-5);
  --vv-color-grid-signal-warning-bg: var(--vv-color-orange-5);
  --vv-color-grid-signal-neutral-bg: transparent;

  /* Highlight Differences: subtle gold/amber tint for divergent rows */
  --vv-color-grid-divergence-bg: color-mix(in srgb, var(--vv-color-gold-30) 15%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE
   All colors maintain 50+ magic number for accessibility
   ════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Surfaces */
  --vv-color-surface-primary: #1b1b1b;
  --vv-color-surface-secondary: #2d2d2d;
  --vv-color-surface-tertiary: #3d3d3d;
  --vv-color-surface-card: #252525;           /* Slightly lighter for cards */

  /* Text (lighter grades for dark bg) */
  --vv-color-text-primary: #f0f0f0;
  --vv-color-text-secondary: #c9c9c9;
  --vv-color-text-tertiary: #adadad;
  --vv-color-text-disabled: #757575;

  /* Borders */
  --vv-color-border-primary: #454545;
  --vv-color-border-light: #3d3d3d;

  /* ══════════════════════════════════════════════════════════════════════════
     BASE COLOR GRADES - Dark Mode Overrides
     The -5 (lightest) variants become dark backgrounds in dark mode
     ══════════════════════════════════════════════════════════════════════════ */

  /* Grayscale - complete scale for dark mode */
  --vv-color-gray-5: #2d2d2d;
  --vv-color-gray-10: #3d3d3d;
  --vv-color-gray-20: #4d4d4d;
  --vv-color-gray-30: #6d6d6d;
  --vv-color-gray-40: #5d5d5d;
  --vv-color-gray-50: #8d8d8d;
  --vv-color-gray-60: #ababab;             /* J10.2: bumped from #9d9d9d (4.05:1) to 4.74:1 on surface-tertiary */
  --vv-color-gray-70: #b0b0b0;
  --vv-color-gray-80: #c8c8c8;
  --vv-color-gray-90: #e0e0e0;

  /* Green shades for dark mode */
  --vv-color-green-5: #1a2d1f;
  --vv-color-green-30: #7fb491;
  --vv-color-green-50: #9fcfac;

  /* Red shades for dark mode */
  --vv-color-red-5: #2d1a1a;
  --vv-color-red-30: #f2938c;
  --vv-color-red-50: #f5a8a3;

  /* Orange shades for dark mode — USWDS orange-70v for bg tint */
  --vv-color-orange-5: #5f3617;
  --vv-color-orange-30: #ffbc78;
  --vv-color-orange-40: #ffc98a;
  --vv-color-orange-50: #ffd6a0;
  --vv-color-orange-60: #ffd6a0;             /* J16.3: alias to orange-50 dark — already passes */

  /* Mint shades for dark mode — USWDS mint-70v for bg tint */
  --vv-color-mint-5: #0c4e29;
  --vv-color-mint-30: #29e1cb;
  --vv-color-mint-50: #5eebd8;
  --vv-color-mint-60: #5eebd8;             /* Same as mint-50 dark — already 9.66:1 on mint-5 */

  /* Magenta shades for dark mode — USWDS magenta-70v for bg tint */
  --vv-color-magenta-5: #731f44;
  --vv-color-magenta-30: #f09ac0;
  --vv-color-magenta-50: #f4b0ce;

  /* Gold shades for dark mode */
  --vv-color-gold-5: #2d2818;
  --vv-color-gold-20: #fad980;
  --vv-color-gold-30: #ffe066;
  --vv-color-gold-40: #ffd84d;
  --vv-color-gold-50: #ffe680;
  --vv-color-gold-60: #ffe680;             /* Same as gold-50 dark — already 11.82:1 on gold-5 */
  --vv-color-gold-90: #3d3420;

  /* Cyan shades for dark mode */
  --vv-color-cyan-5: #1a2d30;
  --vv-color-cyan-30: #52daf2;
  --vv-color-cyan-50: #7ae3f5;

  /* Blue shades for dark mode */
  --vv-color-blue-5: #1a2535;
  --vv-color-blue-30: #73b3e7;
  --vv-color-blue-40: #81bcea;
  --vv-color-blue-50: #8fc4ed;

  /* ══════════════════════════════════════════════════════════════════════════
     SEMANTIC COLORS - Dark Mode
     Text colors use lighter grades; backgrounds use dark -5 variants
     ══════════════════════════════════════════════════════════════════════════ */

  /* Numeric colors - lighter for visibility on dark backgrounds */
  --vv-color-numeric-positive: #7fb491;
  --vv-color-numeric-negative: #f2938c;
  --vv-color-warning: #ffbc78;
  --vv-color-warning-bg: var(--vv-color-orange-5);

  /* Sentiment colors — bg tokens reference palette *-5 for consistency */
  --vv-color-sentiment-positive: #29e1cb;
  --vv-color-sentiment-positive-bg: var(--vv-color-mint-5);
  --vv-color-sentiment-negative: #f09ac0;
  --vv-color-sentiment-negative-bg: var(--vv-color-magenta-5);

  /* Insight/Turbo trigger */
  --vv-color-insight: #fad980;
  --vv-color-insight-bg: #2d2818;
  --vv-color-insight-text: #fad980;
  --vv-color-insight-10: rgba(250, 217, 128, 0.12);
  --vv-color-insight-20: rgba(250, 217, 128, 0.22);

  /* Interactive elements */
  --vv-color-interactive: #73b3e7;
  --vv-color-interactive-hover: #99cdf5;
  --vv-color-interactive-bg: #1a2535;
  --vv-color-tangle-value: #73b3e7;

  /* Text/borders ON interactive surfaces (same as light - white on blue works in both themes) */
  --vv-color-text-on-interactive: #ffffff;
  --vv-color-text-on-interactive-muted: rgba(255, 255, 255, 0.9);
  --vv-color-border-on-interactive: rgba(255, 255, 255, 0.2);
  --vv-color-border-on-interactive-strong: rgba(255, 255, 255, 0.3);

  /* Text ON viz fills — stays dark; grade-30 fills don't remap */
  --vv-color-text-on-viz-fill: #1b1b1b;

  /* Signal badges */
  --vv-color-signal-undervalued: #52daf2;
  --vv-color-signal-undervalued-bg: #1a2d30;
  --vv-color-signal-overvalued: #ffbc78;
  --vv-color-signal-overvalued-bg: var(--vv-color-orange-5);
  --vv-color-signal-fair: #8d8d8d;
  --vv-color-signal-fair-bg: #3d3d3d;

  /* Grid cell signals (dark mode) — reference palette tokens (now USWDS vivid 70) */
  --vv-color-grid-signal-positive-bg: var(--vv-color-mint-5);
  --vv-color-grid-signal-negative-bg: var(--vv-color-magenta-5);
  --vv-color-grid-signal-warning-bg: var(--vv-color-orange-5);
  --vv-color-grid-signal-neutral-bg: transparent;
  --vv-color-grid-divergence-bg: color-mix(in srgb, var(--vv-color-gold-30) 15%, transparent);

  /* Shadows (more subtle in dark mode) */
  --vv-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --vv-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --vv-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

/* System preference detection (when no explicit theme set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces */
    --vv-color-surface-primary: #1b1b1b;
    --vv-color-surface-secondary: #2d2d2d;
    --vv-color-surface-tertiary: #3d3d3d;
    --vv-color-surface-card: #252525;

    /* Text */
    --vv-color-text-primary: #f0f0f0;
    --vv-color-text-secondary: #c9c9c9;
    --vv-color-text-tertiary: #adadad;
    --vv-color-text-disabled: #757575;

    /* Borders */
    --vv-color-border-primary: #454545;
    --vv-color-border-light: #3d3d3d;

    /* Base color grades - dark backgrounds (complete scale) */
    --vv-color-gray-5: #2d2d2d;
    --vv-color-gray-10: #3d3d3d;
    --vv-color-gray-20: #4d4d4d;
    --vv-color-gray-30: #6d6d6d;
    --vv-color-gray-40: #5d5d5d;
    --vv-color-gray-50: #8d8d8d;
    --vv-color-gray-60: #ababab;             /* J10.2: bumped from #9d9d9d (4.05:1) to 4.74:1 on surface-tertiary */
    --vv-color-gray-70: #b0b0b0;
    --vv-color-gray-80: #c8c8c8;
    --vv-color-gray-90: #e0e0e0;

    --vv-color-green-5: #1a2d1f;
    --vv-color-green-30: #7fb491;
    --vv-color-green-50: #9fcfac;

    --vv-color-red-5: #2d1a1a;
    --vv-color-red-30: #f2938c;
    --vv-color-red-50: #f5a8a3;

    --vv-color-orange-5: #5f3617;             /* USWDS orange-70v */
    --vv-color-orange-30: #ffbc78;
    --vv-color-orange-40: #ffc98a;
    --vv-color-orange-50: #ffd6a0;
    --vv-color-orange-60: #ffd6a0;

    --vv-color-mint-5: #0c4e29;               /* USWDS mint-70v */
    --vv-color-mint-30: #29e1cb;
    --vv-color-mint-50: #5eebd8;
    --vv-color-mint-60: #5eebd8;

    --vv-color-magenta-5: #731f44;            /* USWDS magenta-70v */
    --vv-color-magenta-30: #f09ac0;
    --vv-color-magenta-50: #f4b0ce;

    --vv-color-gold-5: #2d2818;
    --vv-color-gold-20: #fad980;
    --vv-color-gold-30: #ffe066;
    --vv-color-gold-40: #ffd84d;
    --vv-color-gold-50: #ffe680;
    --vv-color-gold-60: #ffe680;
    --vv-color-gold-90: #3d3420;

    --vv-color-cyan-5: #1a2d30;
    --vv-color-cyan-30: #52daf2;
    --vv-color-cyan-50: #7ae3f5;

    --vv-color-blue-5: #1a2535;
    --vv-color-blue-30: #73b3e7;
    --vv-color-blue-40: #81bcea;
    --vv-color-blue-50: #8fc4ed;

    /* Semantic colors */
    --vv-color-numeric-positive: #7fb491;
    --vv-color-numeric-negative: #f2938c;
    --vv-color-warning: #ffbc78;
    --vv-color-warning-bg: var(--vv-color-orange-5);

    --vv-color-sentiment-positive: #29e1cb;
    --vv-color-sentiment-positive-bg: var(--vv-color-mint-5);
    --vv-color-sentiment-negative: #f09ac0;
    --vv-color-sentiment-negative-bg: var(--vv-color-magenta-5);

    --vv-color-insight: #fad980;
    --vv-color-insight-bg: #2d2818;
    --vv-color-insight-text: #fad980;
    --vv-color-insight-10: rgba(250, 217, 128, 0.12);
    --vv-color-insight-20: rgba(250, 217, 128, 0.22);

    --vv-color-interactive: #73b3e7;
    --vv-color-interactive-hover: #99cdf5;
    --vv-color-interactive-bg: #1a2535;
    --vv-color-tangle-value: #73b3e7;

    /* Text/borders ON interactive surfaces */
    --vv-color-text-on-interactive: #ffffff;
    --vv-color-text-on-interactive-muted: rgba(255, 255, 255, 0.9);
    --vv-color-border-on-interactive: rgba(255, 255, 255, 0.2);
    --vv-color-border-on-interactive-strong: rgba(255, 255, 255, 0.3);

    /* Text ON viz fills — stays dark; grade-30 fills don't remap */
    --vv-color-text-on-viz-fill: #1b1b1b;

    --vv-color-signal-undervalued: #52daf2;
    --vv-color-signal-undervalued-bg: #1a2d30;
    --vv-color-signal-overvalued: #ffbc78;
    --vv-color-signal-overvalued-bg: var(--vv-color-orange-5);
    --vv-color-signal-fair: #8d8d8d;
    --vv-color-signal-fair-bg: #3d3d3d;

    /* Grid cell signals (system dark) — reference palette tokens (now USWDS vivid 70) */
    --vv-color-grid-signal-positive-bg: var(--vv-color-mint-5);
    --vv-color-grid-signal-negative-bg: var(--vv-color-magenta-5);
    --vv-color-grid-signal-warning-bg: var(--vv-color-orange-5);
    --vv-color-grid-signal-neutral-bg: transparent;
    --vv-color-grid-divergence-bg: color-mix(in srgb, var(--vv-color-gold-30) 15%, transparent);

    /* Shadows */
    --vv-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --vv-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --vv-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   BREAKPOINTS (for reference - use in media queries)

   --vv-breakpoint-sm: 640px    Small tablets
   --vv-breakpoint-md: 768px    Tablets
   --vv-breakpoint-lg: 1024px   Desktop
   --vv-breakpoint-xl: 1280px   Large desktop
   ════════════════════════════════════════════════════════════════════════════ */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vv-transition-fast: 0ms;
    --vv-transition-normal: 0ms;
    --vv-transition-slow: 0ms;
  }
}

/* High contrast mode - stronger borders */
@media (prefers-contrast: high) {
  :root {
    --vv-color-border-primary: var(--vv-color-gray-70);
    --vv-color-border-light: var(--vv-color-gray-50);
    --vv-border-width: 2px;
  }
}