:root{
  /* brand — blue. one accent, four tints */
  --brand:            #064d90;   /* primary accent: stats, eyebrows, rules */
  --brand-line:       #008cff;   /* interactive: links, hover, focus       */
  --brand-accent:     #9edfff;   /* accent on dark grounds                 */
  --brand-soft:       #cdeeff;   /* tinted fills, callout backgrounds      */
  --brand-deep:       #051c23;   /* ink, and the dark ground               */

  /* text — ink at alpha, not separate greys */
  --text:             #051c23;
  --text-body:        #051c23cc;
  --text-muted:       #051c239e;

  /* surfaces */
  --surface:          #ffffff;
  --surface-grey:     #ededed;
  --surface-stone:    #f1f2ed;
  --surface-greyblue: #d8dddf;

  /* lines */
  --border:           #0000001a;
  --border-soft:      #00000010;

  /* semantic — real state only, never decoration */
  --destructive:      #d4183d;

  --radius:           .625rem;

  --font-display:     "Bricolage Grotesque","Geist",sans-serif;
  --font-sans:        "Geist",ui-sans-serif,system-ui,sans-serif;
  /* No mono is vendored — vendor/fonts ships Geist and Bricolage Grotesque
     only — so this stack fell through to whatever mono the OS happened to
     have, which is why the labels rendered in a face that is not the
     page's. Geist is the font the page actually loads. */
  --font-mono:        "Geist",ui-sans-serif,system-ui,sans-serif;

  /* dark grounds: map chrome + hero, derived from deep/accent */
  --overlay-ground:       rgba(5,28,35,.94);
  --overlay-ground-solid: rgba(5,28,35,.97);
  --overlay-line:         rgba(158,223,255,.18);
  --overlay-shadow:       0 6px 24px rgba(0,0,0,.55);
  --on-dark:              #ffffff;
  --on-dark-body:         #ffffffcc;
  --on-dark-muted:        #ffffff99;
  --on-dark-accent:       var(--brand-accent);

  /* compatibility aliases — migrate call sites, then delete */
  --ink:        var(--brand-deep);
  --deep:       var(--brand-deep);
  --darkground: var(--brand-deep);
  --paleblue:   var(--brand-accent);
  --accent:     var(--brand);         /* was an off-brand blue             */
  --mint:       var(--brand);         /* was the MASTER-brand green        */
  --sand:       var(--brand);         /* tan — no planning equivalent      */
  --warn:       var(--brand);         /* amber — no planning equivalent    */
  --hot:        var(--destructive);   /* error/failure states only         */
  --dim:        var(--text-body);
  --mute:       var(--text-muted);    /* was #6a828e — failed AA 4.04:1    */
  --line:       var(--border);
  --line-soft:  var(--border-soft);
  --ground:     #ececf0;
  --raised:     var(--surface-grey);
  /* Vertical rhythm: three steps on a 16px grid. Every block-level gap in
     the report is one of these. Type-level gaps inside a component (a
     caption under a heading, a bullet's leading) stay hand-set, and the
     few optical alignment offsets say so where they are written. */
  --sp-s:       16px;
  --sp-m:       32px;
  --sp-l:       64px;
  --r:          10px;
  --display:    var(--font-display);
  --body:       var(--font-sans);
  --mono:       var(--font-mono);
}