/* ============================================================================
   VEXELX SITE TOKENS
   generated from vexelx-brand/spec/tokens.css on 2026-08-17 — re-copy when the tin changes
   ----------------------------------------------------------------------------
   PART 1 (below, verbatim)  = the brand tin. Do not edit here; edit
     vexelx-brand/spec/tokens.css and paste it back between the two markers
     (`node build.js --check-tokens` diffs this copy against the tin).
   PART 2 (bottom of file)   = the SITE THEME LAYER: three themes (light /
     dark / system) expressed as semantic tokens (--bg, --surface, --ink,
     --muted, --hair, --accent-lemon, --accent-blue …). site.css and every
     section MUST use those semantic tokens — never a raw hex, never a
     --color-* primitive — so a change in the tin flows through every theme.
   ============================================================================ */

/* >>> BEGIN brand tin (verbatim copy of vexelx-brand/spec/tokens.css) >>> */
/* ============================================================================
   VEXELX BRAND TOKENS  ·  spec copy (2026-08-17)
   ----------------------------------------------------------------------------
   = theme/tokens.css (canonical, founder-reviewed 2026-08-16) verbatim, plus the
   BRAND block below the first :root — the mark's two-tone colours, the dark
   stage and its text inks. Edit theme/tokens.css first, then re-copy; the
   brand block is the only addition.
   ============================================================================ */

/* ============================================================================
   VEXELX DESIGN TOKENS  ·  v2 (round 1, founder-reviewed 2026-08-16)
   "Ink + lemon chrome · pen-ink data"
   ----------------------------------------------------------------------------
   Successor to lyon-tokens.reference.css. Keeps its spirit (white canvas, ink
   #1a1a1a, lemon #f7e731 as THE brand highlight, bone/ash/stone neutrals,
   Playfair 400 + Geist + Roboto Mono labels, hairlines not shadows, radius
   4/12/pill) and adds what the founder asked for:

     CANONICAL (no attribute, or data-variant="A"):
       chrome  = INK. Links, buttons, pills, focus, active nav are ink #1a1a1a;
                 lemon is the highlight surface (pill CTA, highlighter, marks).
       data    = PEN INK. Nothing black inside a graph: the recent/current-period
                 line, the primary single-series bar, chart hover states are
                 cobalt #2b47c9 (hover #1f34ac, wash #e8eeff); the prior period
                 is light grey #a3a3a0. Multi-series charts use the six validated
                 print inks below.
       + 6 print-ink categoricals, 1 sequential ramp, 1 diverging pair, and 4
         status inks that read as analysis, not alarm.
     REFERENCE ONLY: data-variant="B" (cobalt chrome) and "C" (petrol chrome)
       remain switchable for comparison; they change the interactive ink only.

   Cobalt ↔ slate rule (validator): cobalt #2b47c9 beside slate #4d74b0 is
   ΔE 13.7 normal-vision, under the 15 floor. So a chart uses EITHER the
   emphasis pair (cobalt / grey) OR the categorical set. If one chart must show
   both, cobalt takes the first slot and slate moves to the LAST — the 7-slot
   order #2b47c9,#ad4638,#0f9b97,#b3821a,#90466c,#749544,#4d74b0 passes every
   check (worst adjacent CVD ΔE 13.4, normal 19.1). Cobalt vs prior grey: 32.3.

   Single-font, THREE-SIZE rule for cards/alerts (founder, 2026-08-16):
   everything inside a story card, alert, KPI tile or legend body is Geist —
   emphasis by weight (500) and colour, never by a second family. The ONLY mono
   line is the card header ("CRITICAL · AD MONETISATION · DETECTED TUE 12 AUG ·
   06:10") and tile/legend labels, at --text-label 11px. Inside the body there
   are exactly three sizes (tokens --card-money / --card-base / --card-small):
     24  money line   Geist 500 · ink · tabular · the card's headline — biggest
     16  base         lede sentence(s), Action callout text · ink
     14  small        reasoning paragraph, footer row (pill, link, note) · graphite
   KPI tile: mono label 11 / value --tile-value 28 / delta --tile-delta 14.
   Nothing else. Action callout keeps the lemon-quiet background.

   Display face (founder, 2026-08-16): Playfair Display is canonical, 400 only,
   never bold. Instrument Serif and Fraunces are reference only (fonts/).

   Lemon rules (it is 1.28:1 on white — physics, not taste):
     lemon is a SURFACE (pill CTA, highlighter behind words, status pill,
     wash), a MARKER (dot ≥ 8px, mark colour on black) — never text, never a
     hairline, never under white text. Ink on lemon = 13.62:1.

   Layer 1  Primitives   raw palette + raw scales
   Layer 2  Semantic     what a thing MEANS (text-primary, surface-band…)
   Layer 3  Data/signal  status inks, categorical/sequential/diverging, chart chrome
   Variants at the bottom override ONLY the interactive tokens.

   ----------------------------------------------------------------------------
   MEASURED CONTRAST  (WCAG 2.x relative luminance; Python, scratchpad/table.py)
   ----------------------------------------------------------------------------
   ink #1a1a1a  (body text)                     17.40:1   on white
   graphite #444444 (secondary paragraph)        9.74:1   on white
   stone #6f6f6f (labels/axis)                   5.02:1   on white   (4.52 on bone)
   ink on lemon (pill CTA text)                 13.62:1
   white on lemon                                1.28:1   ** FAILS — never
   lemon on white                                1.28:1   ** FAILS as text/line
   lemon on black (mark colour on dark)         16.43:1
   ink on lemon-quiet #fdf9c9                   16.22:1
   A  ink link/button on white                  17.40:1   white text on ink 17.40:1
   B  cobalt #2b47c9 text on white               7.38:1   on bone 6.63 · white on it 7.38
      cobalt on lemon 5.77 · on wash #e8eeff 6.36 · hover #1f34ac on white 9.79
   C  petrol #0d6b6e text on white               6.28:1   on bone 5.65 · white on it 6.28
      petrol on lemon 4.91 · on wash #dcf4f4 5.47 · hover #005558 on white 8.61
   critical #8e2b23 on white  8.33 · on wash #fee9e5 7.14 · white on it 8.33
   warning  #8a6110 on white  5.53 · on wash #fdecd1 4.76 · white on it 5.53
   watch    #465e7e on white  6.64 · on wash #e5efff 5.73 · white on it 6.64
   win      #3e7232 on white  5.74 · on wash #e3f5df 5.03 · white on it 5.74
   data-1 slate     #4d74b0  4.73 white · 4.25 bone
   data-2 oxide     #ad4638  5.66 white · 5.09 bone
   data-3 verdigris #0f9b97  3.41 white · 3.07 bone
   data-4 ochre     #b3821a  3.43 white · 3.08 bone
   data-5 plum      #90466c  6.41 white · 5.76 bone
   data-6 moss      #749544  3.43 white · 3.08 bone
   prior-period line #a3a3a0  2.53 (de-emphasis reference line; legend carries it)

   DATAVIZ VALIDATOR  (dataviz skill · scripts/validate_palette.js)
   node validate_palette.js "#4d74b0,#ad4638,#0f9b97,#b3821a,#90466c,#749544" --mode light --surface "#ffffff"
     [PASS] Lightness band       all 6 inside L 0.43–0.77
     [PASS] Chroma floor         all 6 >= 0.1
     [PASS] CVD separation       worst adjacent #0f9b97↔#ad4638 ΔE 13.4 (deutan) · tritan 14.5
     [PASS] Normal-vision floor  worst adjacent #b3821a↔#0f9b97 ΔE 19.1 (normal)
     [PASS] Contrast vs surface  all 6 >= 3:1
     → ALL CHECKS PASS   (identical result with --surface "#f3f3f0", the bone band)
   --pairs all (scatter/bubble/map): the set caps at TWO slots (slate + oxide);
     slate↔verdigris is 13.3 normal-vision, below the 15 floor. Use small
     multiples or "Other" past two series in those forms.
   Ordinal subset of the sequential ramp (400→700) --ordinal: ALL CHECKS PASS.
   Status-vs-series separation (OKLab ΔE, unsimulated): critical↔oxide 9.0,
     warning↔ochre 11.8, watch↔slate 9.2, win↔moss 12.9, cobalt↔slate 13.7,
     petrol↔verdigris 14.6, petrol↔watch 6.9 (role + label mitigate that last one).
   ============================================================================ */

:root {

  /* ==========================================================================
     LAYER 1 — PRIMITIVES
     ========================================================================== */

  /* --- Neutrals (unchanged from v1) ---------------------------------------- */
  --color-pure-white:  #ffffff;
  --color-ink:         #1a1a1a;   /* all readable content                     */
  --color-graphite:    #444444;   /* NEW · secondary paragraphs (9.7:1)       */
  --color-stone:       #6f6f6f;   /* labels, captions, axis text (5.0:1)      */
  --color-ash:         #eeeeee;   /* hairlines, gridlines, hover surfaces     */
  --color-hairline-2:  #d9d9d5;   /* NEW · chart baseline / stronger rule     */
  --color-bone:        #f3f3f0;   /* section band                             */
  --color-linen:       #eadcce;   /* warm card                                */
  --color-mist:        #d9ecee;   /* rare cool surface                        */
  --color-pure-black:  #000000;   /* footer, max emphasis, ink hover          */

  /* --- Lemon (the brand highlight — stays) --------------------------------- */
  --color-lemon:       #f7e731;
  --color-lemon-quiet: #fdf9c9;   /* wash: callouts, "being worked on"        */

  /* --- Interactive ink candidates ----------------------------------------- */
  --color-cobalt:      #2b47c9;   /* B · pen ink                              */
  --color-cobalt-deep: #1f34ac;
  --color-cobalt-wash: #e8eeff;
  --color-petrol:      #0d6b6e;   /* C · petrol                               */
  --color-petrol-deep: #005558;
  --color-petrol-wash: #dcf4f4;

  /* --- Status inks (fixed, never themed) ---------------------------------- */
  --color-oxblood:     #8e2b23;   --color-oxblood-wash: #fee9e5;   /* critical */
  --color-amber-ink:   #8a6110;   --color-amber-wash:   #fdecd1;   /* warning  */
  --color-steel:       #465e7e;   --color-steel-wash:   #e5efff;   /* watch    */
  --color-leaf:        #3e7232;   --color-leaf-wash:    #e3f5df;   /* win      */

  /* --- Data inks (print inks, validated as a set — see header) ------------ */
  --color-data-slate:     #4d74b0;
  --color-data-oxide:     #ad4638;
  --color-data-verdigris: #0f9b97;
  --color-data-ochre:     #b3821a;
  --color-data-plum:      #90466c;
  --color-data-moss:      #749544;

  /* --- Type families ------------------------------------------------------ */
  /* Display = Playfair Display, canonical (founder 2026-08-16). 400 only.
     Instrument Serif / Fraunces are reference only — see fonts/index.html. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Type weights (no bold anywhere; display is 400 only) --------------- */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  /* --- Type scale (size / line-height / tracking) ------------------------- */
  --text-label:      11px; --leading-label:      1.45; --tracking-label:      0.14em;
  --text-caption:    12px; --leading-caption:    1.5;  --tracking-caption:    0.02em;
  --text-body-sm:    14px; --leading-body-sm:    1.6;  --tracking-body-sm:    0;
  --text-body:       16px; --leading-body:       1.55; --tracking-body:       -0.2px;
  --text-lede:       18px; --leading-lede:       1.5;  --tracking-lede:       -0.3px;
  --text-heading-sm: 20px; --leading-heading-sm: 1.3;  --tracking-heading-sm: -0.4px;
  --text-heading-md: 24px; --leading-heading-md: 1.25; --tracking-heading-md: -0.5px;
  --text-heading-lg: 32px; --leading-heading-lg: 1.15; --tracking-heading-lg: -0.6px;
  --text-heading-xl: 42px; --leading-heading-xl: 1.1;  --tracking-heading-xl: -0.8px;
  --text-display-sm: 40px; --leading-display-sm: 1.05; --tracking-display-sm: -0.01em;
  --text-display:    64px; --leading-display:    1.02; --tracking-display:    -0.015em;
  --text-display-lg: 88px; --leading-display-lg: 0.96; --tracking-display-lg: -0.02em;

  /* --- Card type scale (founder 2026-08-16) -------------------------------
     Exactly THREE sizes inside a story card / alert body, plus the mono header
     at --text-label. The money line is the card's headline — nothing in the
     body may be larger. One family (Geist); emphasis by weight and colour. */
  --card-money: 24px;  --leading-card-money: 1.2;  --tracking-card-money: -0.01em;
                       /* Geist 500 · ink · tabular numerals; the "→ from …" tail may be graphite */
  --card-base:  16px;  /* lede sentence(s), Action callout text · ink              */
  --card-small: 14px;  /* reasoning paragraph, footer row (pill, link, note) · graphite */
  --leading-card: 1.5; /* base and small                                            */
  /* KPI tile — same three-step logic: mono label 11 / value 28 / delta 14 */
  --tile-value: 28px;  --leading-tile-value: 1.1;  --tracking-tile-value: -0.02em;
  --tile-delta: var(--card-small);

  /* --- Spacing (4px base) ------------------------------------------------- */
  --spacing-4: 4px;   --spacing-8: 8px;    --spacing-12: 12px;  --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px;  --spacing-32: 32px;  --spacing-40: 40px;
  --spacing-48: 48px; --spacing-64: 64px;  --spacing-80: 80px;  --spacing-96: 96px;
  --spacing-120: 120px; --spacing-160: 160px;

  /* --- Radius ------------------------------------------------------------- */
  --radius-md:   4px;     /* inputs, buttons, highlighter marks */
  --radius-lg:   8px;     /* callouts                            */
  --radius-xl:   12px;    /* cards                               */
  --radius-pill: 9999px;  /* pills, pill CTAs, status chips      */

  /* --- Layout / elevation ------------------------------------------------- */
  --page-max-width: 1200px;
  --gutter: 24px;
  --shadow-none: none;               /* depth = surface colour, never shadow */
  --scrim: rgba(0, 0, 0, 0.45);


  /* ==========================================================================
     LAYER 2 — SEMANTIC
     ========================================================================== */

  /* Text */
  --text-primary:   var(--color-ink);       /* headlines, body, values          */
  --text-secondary: var(--color-graphite);  /* reasoning, sub-copy              */
  --text-muted:     var(--color-stone);     /* labels, captions, axis           */
  --text-inverse:   var(--color-pure-white);

  /* Surfaces */
  --surface-canvas:  var(--color-pure-white);
  --surface-band:    var(--color-bone);
  --surface-raised:  var(--color-pure-white);
  --surface-subtle:  var(--color-ash);
  --surface-warm:    var(--color-linen);
  --surface-cool:    var(--color-mist);
  --surface-inverse: var(--color-pure-black);

  /* Borders — hairline only */
  --border-hairline: 1px solid var(--color-ash);
  --border-strong:   1px solid var(--color-ink);
  --border-color:    var(--color-ash);

  /* Brand highlight — lemon (surface only) */
  --accent:           var(--color-lemon);
  --accent-ink:       var(--color-ink);        /* text ON lemon                */
  --accent-quiet:     var(--color-lemon-quiet);
  --accent-hover:     var(--color-ink);        /* lemon pill, hovered          */
  --accent-hover-ink: var(--color-pure-white);

  /* Interactive ink — DEFAULT = variant A (ink). Overridden per variant below. */
  --ink-interactive:       var(--color-ink);         /* links, ghost CTA, active nav, focus */
  --ink-interactive-hover: var(--color-pure-black);
  --ink-interactive-wash:  var(--color-lemon-quiet); /* Action callout bg, "Investigating" pill */
  --ink-on-interactive:    var(--color-pure-white);  /* text on a filled interactive button */
  --focus-ring: 2px solid var(--ink-interactive);
  --focus-offset: 2px;


  /* ==========================================================================
     LAYER 3 — DATA & SIGNAL
     ========================================================================== */

  /* Status — analysis, not alarm. Always paired with a label (mono, uppercase). */
  --status-critical:      var(--color-oxblood);   --status-critical-wash: var(--color-oxblood-wash);
  --status-warning:       var(--color-amber-ink); --status-warning-wash:  var(--color-amber-wash);
  --status-watch:         var(--color-steel);     --status-watch-wash:    var(--color-steel-wash);
  --status-win:           var(--color-leaf);      --status-win-wash:      var(--color-leaf-wash);

  /* Deltas (KPI tiles) — direction × whether up is good */
  --delta-good: var(--status-win);
  --delta-bad:  var(--status-critical);
  --delta-flat: var(--text-muted);

  /* Categorical — FIXED ORDER, assigned in sequence, never cycled, never re-ordered per chart. */
  --data-1: var(--color-data-slate);
  --data-2: var(--color-data-oxide);
  --data-3: var(--color-data-verdigris);
  --data-4: var(--color-data-ochre);
  --data-5: var(--color-data-plum);
  --data-6: var(--color-data-moss);

  /* Emphasis — PEN INK, fixed in every variant (never black inside a graph):
     recent/current-period line, primary single-series bar, hover crosshair/dots,
     the highlighted series when one series is emphasised and the rest go grey.
     Prior period / de-emphasised series recede to grey. */
  --data-emphasis:       var(--color-cobalt);        /* #2b47c9 */
  --data-emphasis-hover: var(--color-cobalt-deep);   /* #1f34ac */
  --data-emphasis-wash:  var(--color-cobalt-wash);   /* #e8eeff · hover band, area wash */
  --data-primary:        var(--data-emphasis);       /* single-series bars/columns */
  --data-prior:          #a3a3a0;                    /* prior period line / muted series */
  --data-muted:          #cfcfcb;                    /* de-emphasised bars when one is highlighted */

  /* Sequential — one hue (slate), light → dark. Ordinal use starts at 400. */
  --seq-100: #e1ecfc; --seq-200: #c6d9f6; --seq-300: #a2c0eb; --seq-400: #7ea3da;
  --seq-500: #5d87c5; --seq-600: #416cab; --seq-700: #2b528b;

  /* Diverging — oxide (negative) ← neutral → slate (positive). Equal arms. */
  --div-neg-3: #a94437; --div-neg-2: #cf8073; --div-neg-1: #e9bfb8;
  --div-mid:   #e9e8e4;
  --div-pos-1: #b7ccec; --div-pos-2: #759ad0; --div-pos-3: #3f69a7;

  /* Chart chrome */
  --chart-grid:      var(--color-ash);        /* hairline, solid, recessive */
  --chart-axis:      var(--color-hairline-2); /* baseline                   */
  --chart-axis-text: var(--color-stone);
  --chart-track:     var(--color-bone);
  --chart-surface:   var(--color-pure-white);
  --chart-hover:     var(--data-emphasis);       /* crosshair, hover dots  */
  --chart-hover-band: var(--data-emphasis-wash); /* band behind hovered column */
  --chart-tip-bg:    var(--color-pure-white);    /* tooltip: light, hairline, ink text */
  --chart-tip-ink:   var(--color-ink);
  --chart-tip-border: var(--color-hairline-2);
  --chart-gap:       2px;                     /* surface gap between fills  */
  --chart-line:      2px;
  --chart-bar-max:   24px;
}


/* ============================================================================
   BRAND — the mark, the wordmark, the dark stage (LOCKED 2026-08-16/17)
   ----------------------------------------------------------------------------
   FINAL 17 Aug (evening): the VX mark is THREE-colour, coloured per part —
   V bars = the data blue · V dot + X = the surface's ink · X rising bar = the
   accent. Dark: #7b93ff · #ffffff · #ffffff · #f7e731. Light: #2b47c9 ·
   #1a1a1a · #1a1a1a · #2b47c9 (yellow never sits on light, 1.28:1). Mono
   fallback = all ink / all white. Cobalt itself is 2.7:1 on the stage — on dark
   the blue is always the lifted tint #7b93ff (7.0:1 on #0b0b0c).
   (The morning's two-tone — white letters + lemon bar / ink + cobalt bar — is
   superseded; its tokens below are kept for readers, marked as such.)
   ============================================================================ */
:root {
  /* the mark's rising bar */
  --brand-mark-bar-light: #2b47c9;   /* = --color-cobalt · on white, bone, lemon tile, light chrome */
  --brand-mark-bar-dark:  #f7e731;   /* = --color-lemon  · on ink, the stage, dark chrome           */
  /* SUPERSEDED 17 Aug (evening) by the per-part tokens below (--brand-mark-{v,dot,x}-*):
     "letters" no longer share one colour — the V bars are blue, the dot and the X are neutral. */
  --brand-mark-letters-light: var(--color-ink);
  --brand-mark-letters-dark:  var(--color-pure-white);
  /* LOCKED 17 Aug (evening) — the mark is THREE-colour, coloured per part.
     V bars: blue · V dot: neutral · X: neutral · X rising bar: accent.
     dark = on ink / the stage / dark chrome; light = on white, bone, lemon tile, light chrome. */
  --brand-mark-v-dark:    #7b93ff;   /* blue lifted for dark surfaces (7.0:1 on #0b0b0c) */
  --brand-mark-v-light:   #2b47c9;   /* = --color-cobalt */
  --brand-mark-dot-dark:  #ffffff;
  --brand-mark-dot-light: #1a1a1a;
  --brand-mark-x-dark:    #ffffff;
  --brand-mark-x-light:   #1a1a1a;
  --brand-mark-bar-dark:  #f7e731;   /* = --color-lemon (rising bar of the X) */
  --brand-mark-bar-light: #2b47c9;   /* yellow is never on light surfaces → cobalt */
  /* data emphasis when a chart sits on a dark stage (hero demo, dark login) */
  --brand-blue-on-dark:   #7b93ff;   /* cobalt lifted · 7.0:1 on #0b0b0c · 6.2:1 on ink */
  /* the dark stage — website hero + "Powered by VEX" beat; the product stays light */
  --surface-stage:        #0b0b0c;
  --text-on-stage:        #ffffff;   /* 19.7:1 */
  --text-on-stage-secondary: #c9c9c4;/* sub-copy on the stage */
  --text-on-stage-muted:  #a3a3a0;   /* eyebrow / captions on the stage (7.8:1) */
  --border-on-stage:      #3a3a3d;   /* nav pill hairline on the stage */
  /* wordmark sizes (rendered height of vexelx-wordmark-*.svg = the Geist size of its neighbours) */
  --brand-wordmark-nav:     20px;    /* site nav 19–21 */
  --brand-wordmark-sidebar: 21px;    /* product sidebar, beside the 24 px mark */
  --brand-mark-min:         24px;    /* master geometry; 16–23 px uses vx-favicon.svg */
}


/* ============================================================================
   DARK THEME — the website's dark option (FINAL 17 Aug 2026, evening)
   ----------------------------------------------------------------------------
   The website offers Light / Dark / System. This block is the dark theme's
   semantic palette as plain --dark-* values: a site theme switcher maps them
   onto the semantic names above (e.g. --surface-canvas: var(--dark-surface-
   canvas)) under [data-theme="dark"] / prefers-color-scheme. Nothing above is
   renamed or changed. The PRODUCT stays light (its login may be dark); the hero
   is the stage with the ring in every theme.
   Every text ink here is measured ≥ 4.5:1 on canvas, band AND card (WCAG 2.x):
     ivory #ededf3      16.9 · 16.1 · 15.2       secondary #c9c9c4  11.8 · 11.3 · 10.7
     muted #a3a3a0       7.8 ·  7.4 ·  7.0       blue #7b93ff        7.0 ·  6.7 ·  6.3
     lemon (marker)     15.4 · 14.6 · 13.9       ink on lemon 13.6 · ink on ivory 14.9
     critical #f28b7d    8.2 ·  7.8 ·  7.4  (6.5 on its wash #3b1a17)
     warning  #e5b862   10.7 · 10.1 ·  9.6  (7.4 on its wash #382c10)
     watch    #9fb6dc    9.6 ·  9.1 ·  8.6  (7.2 on its wash #1e2838)
     win      #8fcb80   10.3 ·  9.8 ·  9.3  (7.2 on its wash #1c3319)
     ivory on the four washes 13.4 · 11.7 · 12.7 · 11.7 · on lemon-quiet-dark 11.5
   Cobalt #2b47c9 never appears on dark (2.7:1) — the data blue on dark is #7b93ff.
   Multi-series charts stay on light surfaces (the product); on dark a chart uses
   the emphasis pair only (#7b93ff + prior grey).
   ============================================================================ */
:root {
  /* surfaces */
  --dark-surface-canvas:  #0b0b0c;   /* = --surface-stage · the page                    */
  --dark-surface-band:    #121214;   /* section band (bone's job)                       */
  --dark-surface-raised:  #18181b;   /* cards, the nav pill, tooltips                   */
  --dark-surface-subtle:  #202023;   /* hover surfaces (ash's job)                      */
  --dark-surface-inverse: #ededf3;   /* filled button, footer emphasis                  */
  /* text */
  --dark-text-primary:    #ededf3;   /* ivory — ink's job                               */
  --dark-text-secondary:  #c9c9c4;   /* = --text-on-stage-secondary                     */
  --dark-text-muted:      #a3a3a0;   /* = --text-on-stage-muted                         */
  --dark-text-inverse:    #1a1a1a;   /* text on ivory or on lemon                       */
  /* borders — hairline only */
  --dark-border-color:    #2a2a2e;   /* hairline (cards, rows, gridlines)               */
  --dark-border-strong:   #3a3a3d;   /* = --border-on-stage · nav pill, chart baseline  */
  /* brand highlight — lemon, unchanged, still a surface or a marker only */
  --dark-accent:          #f7e731;
  --dark-accent-ink:      #1a1a1a;   /* text ON lemon (13.6:1)                          */
  --dark-accent-quiet:    #33300f;   /* Action callout wash, "Investigating" pill       */
  --dark-accent-hover:    #ededf3;   /* lemon pill, hovered → ivory pill                */
  --dark-accent-hover-ink:#1a1a1a;
  /* interactive ink — chrome is ivory on dark (links, ghost CTA, active nav, focus) */
  --dark-ink-interactive:       #ededf3;
  --dark-ink-interactive-hover: #ffffff;
  --dark-ink-interactive-wash:  #33300f;
  --dark-ink-on-interactive:    #1a1a1a;
  --dark-focus-ring: 2px solid #ededf3;
  /* data & signal */
  --dark-data-emphasis:       #7b93ff;   /* = --brand-blue-on-dark                       */
  --dark-data-emphasis-hover: #98abff;
  --dark-data-emphasis-wash:  #181d33;   /* hover band                                    */
  --dark-data-prior:          #7a7a7c;   /* prior-period line (4.6:1, a reference line)   */
  --dark-data-muted:          #3a3a3d;
  --dark-chart-grid:          #1e1e21;
  --dark-chart-axis:          #2a2a2e;
  --dark-chart-axis-text:     #a3a3a0;
  --dark-chart-tip-bg:        #18181b;
  --dark-chart-tip-ink:       #ededf3;
  --dark-chart-tip-border:    #3a3a3d;
  /* status inks, lifted for dark (same four jobs, same labels) */
  --dark-status-critical: #f28b7d;   --dark-status-critical-wash: #3b1a17;
  --dark-status-warning:  #e5b862;   --dark-status-warning-wash:  #382c10;
  --dark-status-watch:    #9fb6dc;   --dark-status-watch-wash:    #1e2838;
  --dark-status-win:      #8fcb80;   --dark-status-win-wash:      #1c3319;
  /* the mark on dark surfaces = the dark twin (see --brand-mark-*-dark above) */
}


/* ============================================================================
   REFERENCE VARIANTS — kept for comparison only. They move the interactive
   (chrome) ink; data emphasis stays cobalt everywhere.
   ============================================================================ */

:root[data-variant="B"] {                       /* reference · cobalt chrome */
  --ink-interactive:       var(--color-cobalt);
  --ink-interactive-hover: var(--color-cobalt-deep);
  --ink-interactive-wash:  var(--color-cobalt-wash);
}

:root[data-variant="C"] {                       /* reference · petrol chrome */
  --ink-interactive:       var(--color-petrol);
  --ink-interactive-hover: var(--color-petrol-deep);
  --ink-interactive-wash:  var(--color-petrol-wash);
}


/* ============================================================================
   BASE RESET + TYPE BINDING (safe to reuse in the dashboard shell)
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-weight-regular); }
p, figure, blockquote, dl, dd { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: var(--ink-interactive); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink-interactive-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Display voice — headlines only, 400 only, never bold. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

/* Label voice — mono, uppercase, the widest tracking in the system. */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Highlighter — lemon behind words. Ink text on it (13.6:1).
   Text sizes: a background on the mark. Display sizes (tight leading): the
   band is a ::before drawn from just above cap-height to just under the
   descenders, so it never paints over the line above. */
mark.hl {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.02em 0.14em;
  margin: 0 -0.06em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.display mark.hl, mark.hl.band {
  background: transparent; padding: 0; margin: 0;
  position: relative; z-index: 0; white-space: nowrap;
}
.display mark.hl::before, mark.hl.band::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.08em; right: -0.08em; top: 0.3em; bottom: 0.06em;
  background: var(--accent); border-radius: 2px;
}

/* Tabular numerals — any column of numbers / axis ticks. Not on hero values. */
.num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* <<< END brand tin <<< */


/* ============================================================================
   PART 2 — SITE THEME LAYER  (three themes: light · dark · system)
   ----------------------------------------------------------------------------
   HOW IT WORKS
     :root / [data-theme="light"]  → light palette (the canonical warm page)
     [data-theme="dark"]           → dark palette (page bg = the brand stage)
     no attribute / "system"       → follows prefers-color-scheme (pure CSS,
                                      works without JS; the head script only
                                      restores a saved choice before paint)
   Any element can carry data-theme to re-theme its own subtree: the hero
   stage on the light page is <section data-theme="dark">, the footer too.

   THE ONE RULE FOR EVERYONE WRITING MARKUP OR CSS IN THIS SITE
     Use only the semantic tokens below (--bg, --surface, --ink, --muted,
     --hair, --accent-lemon, --accent-blue, …). Never a raw hex, never a
     --color-* primitive, never --d-* — those are the tin, and the tin is
     re-copied wholesale when the console changes.

   KEEP IN SYNC: the [data-theme="dark"] block and the prefers-color-scheme
   block are byte-identical mappings by design (plain CSS cannot share a
   block). `node build.js` verifies they match and refuses to build if not.

   DARK PALETTE — measured (WCAG 2.x, `node tools/contrast.js`), worst surface
   is --surface-2 #232328; text needs ≥ 4.5, graphics ≥ 3:
     ink    #ededf3  16.9 stage · 13.4 surface-2      ink-2  #c9c9c4  11.8 · 9.4
     muted  #a3a3a0   7.8 · 6.2                        white  #ffffff  19.7 · 15.6
     blue   #7b93ff   7.0 · 5.6 · 5.6 on its wash      lemon  #f7e731  15.4 · 12.2 (marker/surface)
     ink on lemon 13.6 (CTA text) · ivory on lemon-quiet-dark #2a2712 12.9
     critical #dc7c73 6.7 · 5.3 · 5.8 on wash #2c1614   warning #d0a24a 8.4 · 6.7 · 6.7 on wash #2b220f
     watch    #8fa9dc 8.3 · 6.6 · 7.1 on wash #171d2e   win     #79bb6d 8.6 · 6.8 · 7.1 on wash #14231a
     data slate #7f9fd6 7.3 · oxide #d67f72 6.7 · verdigris #35bcb7 8.5 · ochre #d3a444 8.6
          plum #c47fa8 6.5 · moss #9dbd6a 9.3 (all on the stage; ≥ 5.2 on surface-2)
     prior line #6f6f74 3.9 · hairline #2a2a2e 1.4 · hairline-2 #3a3a3d 1.7 (decorative)
   ============================================================================ */

/* --- Dark primitives (the only new raw values in this file) ---------------- */
:root {
  --d-bg:        var(--surface-stage);   /* #0b0b0c — the brand stage        */
  --d-band:      #141417;                /* section band, one step lighter   */
  --d-surface:   #1a1a1e;                /* card / nav pill / input          */
  --d-surface-2: #232328;                /* hover, pressed, subtle fill      */
  --d-ink:       #ededf3;                /* ivory — body + headline ink      */
  --d-ink-2:     var(--text-on-stage-secondary); /* #c9c9c4 secondary copy   */
  --d-muted:     var(--text-on-stage-muted);     /* #a3a3a0 labels, captions */
  --d-white:     var(--color-pure-white);        /* the mark's letters       */
  --d-hair:      #2a2a2e;
  --d-hair-2:    var(--border-on-stage);         /* #3a3a3d nav pill hairline*/
  --d-lemon-quiet: #2a2712;              /* callout wash on dark             */
  --d-blue:      var(--brand-blue-on-dark);      /* #7b93ff                  */
  --d-blue-wash: #1a2040;
  --d-critical:  #dc7c73;  --d-critical-wash: #2c1614;
  --d-warning:   #d0a24a;  --d-warning-wash:  #2b220f;
  --d-watch:     #8fa9dc;  --d-watch-wash:    #171d2e;
  --d-win:       #79bb6d;  --d-win-wash:      #14231a;
  --d-data-1: #7f9fd6; --d-data-2: #d67f72; --d-data-3: #35bcb7;
  --d-data-4: #d3a444; --d-data-5: #c47fa8; --d-data-6: #9dbd6a;
  --d-data-prior: #6f6f74; --d-data-muted: #35353b;
  --d-scrim: rgba(0, 0, 0, 0.6);
}

/* --- LIGHT (canonical) ------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* surfaces */
  --bg:          var(--surface-canvas);        /* page                        */
  --bg-band:     var(--surface-band);          /* bone section band           */
  --surface:     var(--surface-raised);        /* card, nav pill, input       */
  --surface-2:   var(--surface-subtle);        /* hover / pressed / subtle    */
  --hair:        var(--color-ash);             /* hairline                    */
  --hair-2:      var(--color-hairline-2);      /* stronger rule, input border */

  /* text */
  --ink:         var(--color-ink);
  --ink-2:       var(--color-graphite);
  --muted:       var(--color-stone);
  --ink-inverse: var(--color-pure-white);
  --ink-strong:  var(--color-ink);             /* the mark's neutral parts    */

  /* brand accents */
  --accent-lemon:       var(--color-lemon);    /* surface only, never text    */
  --accent-lemon-ink:   var(--color-ink);      /* text ON lemon (13.6:1)      */
  --accent-lemon-quiet: var(--color-lemon-quiet);
  --on-lemon-quiet:     var(--color-ink);
  --accent-blue:        var(--color-cobalt);   /* data emphasis / mark bar    */
  --accent-blue-hover:  var(--color-cobalt-deep);
  --accent-blue-wash:   var(--color-cobalt-wash);

  /* interaction */
  --link:        var(--color-ink);
  --link-hover:  var(--color-pure-black);
  --focus:       var(--color-ink);
  --btn-primary-bg:        var(--accent-lemon);
  --btn-primary-ink:       var(--accent-lemon-ink);
  --btn-primary-hover-bg:  var(--color-ink);
  --btn-primary-hover-ink: var(--color-pure-white);
  --btn-ghost-border:      var(--color-ink);
  --btn-ghost-ink:         var(--color-ink);
  --btn-ghost-hover-bg:    var(--color-lemon-quiet);
  --nav-bg:      var(--surface);
  --nav-border:  var(--hair);
  --scrim-color: var(--scrim);

  /* status (analysis, not alarm) */
  --st-critical: var(--color-oxblood);   --st-critical-wash: var(--color-oxblood-wash);
  --st-warning:  var(--color-amber-ink); --st-warning-wash:  var(--color-amber-wash);
  --st-watch:    var(--color-steel);     --st-watch-wash:    var(--color-steel-wash);
  --st-win:      var(--color-leaf);      --st-win-wash:      var(--color-leaf-wash);

  /* data (fixed order, never cycled) */
  --dv-1: var(--color-data-slate);  --dv-2: var(--color-data-oxide); --dv-3: var(--color-data-verdigris);
  --dv-4: var(--color-data-ochre);  --dv-5: var(--color-data-plum);  --dv-6: var(--color-data-moss);
  --dv-prior: #a3a3a0; --dv-muted: #cfcfcb;
  --chart-grid-line: var(--color-ash); --chart-axis-line: var(--color-hairline-2); --chart-axis-ink: var(--color-stone);

  /* the mark, coloured per part (LOCKED 17 Aug) */
  --mark-v:   var(--brand-mark-v-light);
  --mark-dot: var(--brand-mark-dot-light);
  --mark-x:   var(--brand-mark-x-light);
  --mark-bar: var(--brand-mark-bar-light);
  --wordmark-v:    var(--mark-v);              /* set to var(--ink) for a neutral V */
  --wordmark-text: var(--ink);                 /* "exel"                      */

  /* brand Layer-2 aliases → keep the tin's own semantic names theme-aware */
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--muted); --text-inverse: var(--ink-inverse);
  --surface-canvas: var(--color-pure-white); --surface-band: var(--color-bone); --surface-raised: var(--color-pure-white); --surface-subtle: var(--color-ash);
  --border-color: var(--hair); --border-hairline: 1px solid var(--hair); --border-strong: 1px solid var(--ink);
  --accent: var(--accent-lemon); --accent-ink: var(--accent-lemon-ink); --accent-quiet: var(--accent-lemon-quiet);
  --accent-hover: var(--btn-primary-hover-bg); --accent-hover-ink: var(--btn-primary-hover-ink);
  --ink-interactive: var(--link); --ink-interactive-hover: var(--link-hover); --ink-interactive-wash: var(--accent-lemon-quiet); --ink-on-interactive: var(--ink-inverse);
  --focus-ring: 2px solid var(--focus);
  --status-critical: var(--st-critical); --status-critical-wash: var(--st-critical-wash);
  --status-warning: var(--st-warning);   --status-warning-wash: var(--st-warning-wash);
  --status-watch: var(--st-watch);       --status-watch-wash: var(--st-watch-wash);
  --status-win: var(--st-win);           --status-win-wash: var(--st-win-wash);
  --delta-good: var(--st-win); --delta-bad: var(--st-critical); --delta-flat: var(--muted);
  --data-1: var(--dv-1); --data-2: var(--dv-2); --data-3: var(--dv-3); --data-4: var(--dv-4); --data-5: var(--dv-5); --data-6: var(--dv-6);
  --data-emphasis: var(--accent-blue); --data-emphasis-hover: var(--accent-blue-hover); --data-emphasis-wash: var(--accent-blue-wash); --data-primary: var(--accent-blue);
  --data-prior: var(--dv-prior); --data-muted: var(--dv-muted);
  --chart-grid: var(--chart-grid-line); --chart-axis: var(--chart-axis-line); --chart-axis-text: var(--chart-axis-ink); --chart-track: var(--bg-band); --chart-surface: var(--surface);
  --chart-hover: var(--accent-blue); --chart-hover-band: var(--accent-blue-wash); --chart-tip-bg: var(--surface); --chart-tip-ink: var(--ink); --chart-tip-border: var(--hair-2);
}

/* --- DARK (explicit choice) ------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg); --bg-band: var(--d-band); --surface: var(--d-surface); --surface-2: var(--d-surface-2);
  --hair: var(--d-hair); --hair-2: var(--d-hair-2);
  --ink: var(--d-ink); --ink-2: var(--d-ink-2); --muted: var(--d-muted); --ink-inverse: var(--color-ink); --ink-strong: var(--d-white);
  --accent-lemon: var(--color-lemon); --accent-lemon-ink: var(--color-ink);
  --accent-lemon-quiet: var(--d-lemon-quiet); --on-lemon-quiet: var(--d-ink);
  --accent-blue: var(--d-blue); --accent-blue-hover: var(--d-white); --accent-blue-wash: var(--d-blue-wash);
  --link: var(--d-ink); --link-hover: var(--d-white); --focus: var(--d-ink);
  --btn-primary-bg: var(--accent-lemon); --btn-primary-ink: var(--accent-lemon-ink);
  --btn-primary-hover-bg: var(--d-white); --btn-primary-hover-ink: var(--color-ink);
  --btn-ghost-border: var(--d-ink); --btn-ghost-ink: var(--d-ink); --btn-ghost-hover-bg: var(--d-surface-2);
  --nav-bg: var(--d-surface); --nav-border: var(--d-hair-2); --scrim-color: var(--d-scrim);
  --st-critical: var(--d-critical); --st-critical-wash: var(--d-critical-wash);
  --st-warning: var(--d-warning);   --st-warning-wash: var(--d-warning-wash);
  --st-watch: var(--d-watch);       --st-watch-wash: var(--d-watch-wash);
  --st-win: var(--d-win);           --st-win-wash: var(--d-win-wash);
  --dv-1: var(--d-data-1); --dv-2: var(--d-data-2); --dv-3: var(--d-data-3); --dv-4: var(--d-data-4); --dv-5: var(--d-data-5); --dv-6: var(--d-data-6);
  --dv-prior: var(--d-data-prior); --dv-muted: var(--d-data-muted);
  --chart-grid-line: var(--d-hair); --chart-axis-line: var(--d-hair-2); --chart-axis-ink: var(--d-muted);
  --mark-v: var(--brand-mark-v-dark); --mark-dot: var(--brand-mark-dot-dark); --mark-x: var(--brand-mark-x-dark); --mark-bar: var(--brand-mark-bar-dark);
  --wordmark-v: var(--mark-v); --wordmark-text: var(--d-white);
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--muted); --text-inverse: var(--ink-inverse);
  --surface-canvas: var(--bg); --surface-band: var(--bg-band); --surface-raised: var(--surface); --surface-subtle: var(--surface-2);
  --border-color: var(--hair); --border-hairline: 1px solid var(--hair); --border-strong: 1px solid var(--ink);
  --accent: var(--accent-lemon); --accent-ink: var(--accent-lemon-ink); --accent-quiet: var(--accent-lemon-quiet);
  --accent-hover: var(--btn-primary-hover-bg); --accent-hover-ink: var(--btn-primary-hover-ink);
  --ink-interactive: var(--link); --ink-interactive-hover: var(--link-hover); --ink-interactive-wash: var(--accent-lemon-quiet); --ink-on-interactive: var(--ink-inverse);
  --focus-ring: 2px solid var(--focus);
  --status-critical: var(--st-critical); --status-critical-wash: var(--st-critical-wash);
  --status-warning: var(--st-warning);   --status-warning-wash: var(--st-warning-wash);
  --status-watch: var(--st-watch);       --status-watch-wash: var(--st-watch-wash);
  --status-win: var(--st-win);           --status-win-wash: var(--st-win-wash);
  --delta-good: var(--st-win); --delta-bad: var(--st-critical); --delta-flat: var(--muted);
  --data-1: var(--dv-1); --data-2: var(--dv-2); --data-3: var(--dv-3); --data-4: var(--dv-4); --data-5: var(--dv-5); --data-6: var(--dv-6);
  --data-emphasis: var(--accent-blue); --data-emphasis-hover: var(--accent-blue-hover); --data-emphasis-wash: var(--accent-blue-wash); --data-primary: var(--accent-blue);
  --data-prior: var(--dv-prior); --data-muted: var(--dv-muted);
  --chart-grid: var(--chart-grid-line); --chart-axis: var(--chart-axis-line); --chart-axis-text: var(--chart-axis-ink); --chart-track: var(--bg-band); --chart-surface: var(--surface);
  --chart-hover: var(--accent-blue); --chart-hover-band: var(--accent-blue-wash); --chart-tip-bg: var(--surface); --chart-tip-ink: var(--ink); --chart-tip-border: var(--hair-2);
}

/* --- SYSTEM (no attribute, or data-theme="system") → OS preference ---------- */
/* Byte-identical to the [data-theme="dark"] block above — build.js checks it. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]),
[data-theme="system"] {
  color-scheme: dark;
  --bg: var(--d-bg); --bg-band: var(--d-band); --surface: var(--d-surface); --surface-2: var(--d-surface-2);
  --hair: var(--d-hair); --hair-2: var(--d-hair-2);
  --ink: var(--d-ink); --ink-2: var(--d-ink-2); --muted: var(--d-muted); --ink-inverse: var(--color-ink); --ink-strong: var(--d-white);
  --accent-lemon: var(--color-lemon); --accent-lemon-ink: var(--color-ink);
  --accent-lemon-quiet: var(--d-lemon-quiet); --on-lemon-quiet: var(--d-ink);
  --accent-blue: var(--d-blue); --accent-blue-hover: var(--d-white); --accent-blue-wash: var(--d-blue-wash);
  --link: var(--d-ink); --link-hover: var(--d-white); --focus: var(--d-ink);
  --btn-primary-bg: var(--accent-lemon); --btn-primary-ink: var(--accent-lemon-ink);
  --btn-primary-hover-bg: var(--d-white); --btn-primary-hover-ink: var(--color-ink);
  --btn-ghost-border: var(--d-ink); --btn-ghost-ink: var(--d-ink); --btn-ghost-hover-bg: var(--d-surface-2);
  --nav-bg: var(--d-surface); --nav-border: var(--d-hair-2); --scrim-color: var(--d-scrim);
  --st-critical: var(--d-critical); --st-critical-wash: var(--d-critical-wash);
  --st-warning: var(--d-warning);   --st-warning-wash: var(--d-warning-wash);
  --st-watch: var(--d-watch);       --st-watch-wash: var(--d-watch-wash);
  --st-win: var(--d-win);           --st-win-wash: var(--d-win-wash);
  --dv-1: var(--d-data-1); --dv-2: var(--d-data-2); --dv-3: var(--d-data-3); --dv-4: var(--d-data-4); --dv-5: var(--d-data-5); --dv-6: var(--d-data-6);
  --dv-prior: var(--d-data-prior); --dv-muted: var(--d-data-muted);
  --chart-grid-line: var(--d-hair); --chart-axis-line: var(--d-hair-2); --chart-axis-ink: var(--d-muted);
  --mark-v: var(--brand-mark-v-dark); --mark-dot: var(--brand-mark-dot-dark); --mark-x: var(--brand-mark-x-dark); --mark-bar: var(--brand-mark-bar-dark);
  --wordmark-v: var(--mark-v); --wordmark-text: var(--d-white);
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--muted); --text-inverse: var(--ink-inverse);
  --surface-canvas: var(--bg); --surface-band: var(--bg-band); --surface-raised: var(--surface); --surface-subtle: var(--surface-2);
  --border-color: var(--hair); --border-hairline: 1px solid var(--hair); --border-strong: 1px solid var(--ink);
  --accent: var(--accent-lemon); --accent-ink: var(--accent-lemon-ink); --accent-quiet: var(--accent-lemon-quiet);
  --accent-hover: var(--btn-primary-hover-bg); --accent-hover-ink: var(--btn-primary-hover-ink);
  --ink-interactive: var(--link); --ink-interactive-hover: var(--link-hover); --ink-interactive-wash: var(--accent-lemon-quiet); --ink-on-interactive: var(--ink-inverse);
  --focus-ring: 2px solid var(--focus);
  --status-critical: var(--st-critical); --status-critical-wash: var(--st-critical-wash);
  --status-warning: var(--st-warning);   --status-warning-wash: var(--st-warning-wash);
  --status-watch: var(--st-watch);       --status-watch-wash: var(--st-watch-wash);
  --status-win: var(--st-win);           --status-win-wash: var(--st-win-wash);
  --delta-good: var(--st-win); --delta-bad: var(--st-critical); --delta-flat: var(--muted);
  --data-1: var(--dv-1); --data-2: var(--dv-2); --data-3: var(--dv-3); --data-4: var(--dv-4); --data-5: var(--dv-5); --data-6: var(--dv-6);
  --data-emphasis: var(--accent-blue); --data-emphasis-hover: var(--accent-blue-hover); --data-emphasis-wash: var(--accent-blue-wash); --data-primary: var(--accent-blue);
  --data-prior: var(--dv-prior); --data-muted: var(--dv-muted);
  --chart-grid: var(--chart-grid-line); --chart-axis: var(--chart-axis-line); --chart-axis-text: var(--chart-axis-ink); --chart-track: var(--bg-band); --chart-surface: var(--surface);
  --chart-hover: var(--accent-blue); --chart-hover-band: var(--accent-blue-wash); --chart-tip-bg: var(--surface); --chart-tip-ink: var(--ink); --chart-tip-border: var(--hair-2);
}
}