/* =====================================================================
   ValueLens design tokens — v0.1 (2026-07)
   Source: ValueLens_Design_System.dc.html + ValueLens_Direction.dc.html
           (directions 2A "The Blend", 3A/4A deep dives, 5A projects home,
            6A onboarding. Directions 1A/1B are explicitly NOT used.)

   Single source of truth for color, type, spacing, radii and elevation.
   Every surface (dashboard, console, home) imports this file; restyling
   happens here, not in per-page <style> blocks.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     COLOR — structural, not decorative.
     Neutrals carry the interface; teal marks interaction and product
     voice; red/green encode value direction ONLY.
     --------------------------------------------------------------- */

  /* Brand & accent */
  --vl-ink-900:      #131E2B;  /* nav rail, avatar/logomark blocks      */
  --vl-accent:       #24606B;  /* primary action, product voice         */
  --vl-accent-300:   #4FB0C0;  /* active markers on dark, bright accent */
  --vl-accent-700:   #17414A;  /* accent hover                          */
  --vl-accent-soft:  #F7FAFB;  /* accent-tinted row background          */

  /* Value direction — never decorative */
  --vl-up:           #2E7D57;
  --vl-up-bg:        #EAF5EE;
  --vl-down:         #B14434;
  --vl-down-bg:      #FBEEEC;

  /* Neutrals */
  --vl-ink-800:      #1A1F2B;  /* primary text                          */
  --vl-ink-600:      #3A4250;  /* body copy                             */
  --vl-ink-500:      #5B6472;  /* secondary text                        */
  --vl-ink-400:      #8A93A1;  /* micro-labels, muted                   */
  --vl-ink-300:      #A9B1BD;  /* disabled text                         */
  --vl-rule:         #C7CDD6;  /* baselines, big ghost numerals         */
  --vl-border-strong:#D4D9E0;  /* secondary button border               */
  --vl-border:       #E4E8EE;  /* card borders                          */
  --vl-hairline:     #EEF1F5;  /* dividers inside cards                 */
  --vl-surface-2:    #F0F2F5;  /* inset chips, toggle track             */
  --vl-surface:      #F7F8FA;  /* app canvas                            */
  --vl-paper:        #FFFFFF;  /* cards, bars                           */
  --vl-paper-dim:    #FBFBFA;  /* empty / placeholder cards             */

  /* Nav rail (on --vl-ink-900) */
  --vl-nav-item:       #C4CCD8;
  --vl-nav-item-on:    #FFFFFF;
  --vl-nav-item-bg-on: #1D2C3D;
  --vl-nav-label:      #5E6A7A;  /* section labels in the rail          */
  --vl-nav-meta:       #8794A4;  /* counts, secondary text in the rail  */
  --vl-nav-divider:    #24313F;

  /* ---------------------------------------------------------------
     CHART SERIES — bright hero, muted distinct peers.
     The primary company is the ONLY high-chroma line and is drawn
     heavier. Peers each get their own hue but desaturated. Red and
     green stay reserved for value direction, so peers avoid them.
     --------------------------------------------------------------- */
  --vl-series-primary:   #0E86A8;
  --vl-series-peer-1:    #BE922F;  /* amber       */
  --vl-series-peer-2:    #B0657F;  /* rose        */
  --vl-series-peer-3:    #517AA6;  /* slate-blue  */
  --vl-series-peer-4:    #7E6BA3;  /* purple      */
  --vl-series-peer-5:    #B4674B;  /* terracotta  */
  --vl-series-index:     #9AA3AF;  /* dashed      */
  --vl-series-width:     2.4px;    /* hero        */
  --vl-series-width-peer:1.75px;

  /* Sequential ramp — parts-of-whole (stacked bars, mix charts) */
  --vl-ramp-1: #1E5E7A;
  --vl-ramp-2: #3A7E96;
  --vl-ramp-3: #6F9BB0;
  --vl-ramp-4: #A9C3CE;
  --vl-ramp-5: #BE922F;  /* "other" bucket breaks the ramp deliberately */

  /* Bridge / waterfall — start neutral, levers ramp to accent, end up */
  --vl-bridge-start: #8A93A1;
  --vl-bridge-1:     #6F9BB0;
  --vl-bridge-2:     #4F94AB;
  --vl-bridge-3:     #3A7E96;
  --vl-bridge-4:     #24606B;
  --vl-bridge-end:   #2E7D57;

  /* Chart furniture */
  --vl-grid:      #EBEEF1;
  --vl-axis:      #C7CDD6;
  --vl-plot-band: #F4F6F8;

  /* ---------------------------------------------------------------
     TYPE — three families, clear jobs.
     Newsreader  → narrative voice: display, headlines, hero numbers
     Plex Sans   → UI and running copy
     Plex Mono   → every figure, ticker and micro-label
     --------------------------------------------------------------- */
  --vl-font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --vl-font-sans:  'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vl-font-mono:  'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Display / headings — Newsreader */
  --vl-display-size:   52px;  --vl-display-lh:   1.02;  --vl-display-weight: 500;
  --vl-h1-size:        40px;  --vl-h1-lh:        1.05;  --vl-h1-weight:      500;
  --vl-h2-size:        34px;  --vl-h2-lh:        1.1;   --vl-h2-weight:      500;
  --vl-h3-size:        27px;  --vl-h3-lh:        1.14;  --vl-h3-weight:      500;
  --vl-headline-size:  31px;  --vl-headline-lh:  1.15;  --vl-headline-weight:400;
  --vl-tracking-tight: -0.015em;  /* headings */
  --vl-tracking-display: -0.02em; /* display   */

  /* Body */
  --vl-narrative-size: 17px;  --vl-narrative-lh: 1.6;   /* Newsreader 400 */
  --vl-body-size:      14px;  --vl-body-lh:      1.55;  /* Plex Sans 400  */
  --vl-body-sm-size:   13px;  --vl-body-sm-lh:   1.55;

  /* Data */
  --vl-figure-size:    20px;  --vl-figure-weight: 500;  /* Plex Mono      */
  --vl-kpi-size:       44px;  --vl-kpi-lh:        1;    /* Newsreader 500 */
  --vl-stat-size:      38px;                            /* Newsreader 500 */

  /* Micro-label — Plex Mono, uppercase, letterspaced */
  --vl-micro-size:     11px;
  --vl-micro-size-sm:  10px;
  --vl-micro-tracking: 0.16em;
  --vl-micro-tracking-wide: 0.2em;  /* chapter eyebrows */

  /* ---------------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------------- */
  --vl-space-1:  4px;
  --vl-space-2:  8px;    /* tight     */
  --vl-space-3:  12px;
  --vl-space-4:  16px;   /* gap       */
  --vl-space-6:  24px;   /* card pad  */
  --vl-space-8:  32px;
  --vl-space-10: 40px;   /* page pad  */

  /* ---------------------------------------------------------------
     RADII
     --------------------------------------------------------------- */
  --vl-radius-chip:   5px;
  --vl-radius-input:  8px;
  --vl-radius-card:   10px;
  --vl-radius-panel:  12px;
  --vl-radius-pill:   20px;

  /* ---------------------------------------------------------------
     ELEVATION — hairlines, not boxes. Shadows are rare and shallow.
     --------------------------------------------------------------- */
  --vl-elev-flat:    none;                                    /* + 1px border */
  --vl-elev-raised:  0 1px 2px rgba(20, 32, 46, 0.08);        /* inputs, toggles */
  --vl-elev-overlay: 0 12px 28px -12px rgba(20, 32, 46, 0.35);/* popovers, dropdowns */

  /* Layout */
  --vl-rail-width:     220px;
  --vl-rail-width-wide:280px;  /* onboarding step rail */
  --vl-measure:        64ch;   /* narrative max width  */
}