:root{
  /* --- The eight named brand colours. LOCKED — do not add to or rename. --- */
  --harbor-navy:#29415C;   /* primary brand colour */
  --ink-navy:#16263E;      /* Harbor Navy dark shade — max weight */
  --brass-gold:#A6792A;    /* accent 1 — the beacon light */
  --pine:#355E45;          /* accent 2 — the tended ground */
  --claret:#6E2C3B;        /* thin-ribbon tertiary — rules, seal ring. Sparing. */
  --slate:#6E6A61;         /* neutral — secondary text, supporting UI */
  --graphite:#383B3D;      /* Slate dark shade */
  --parchment:#EDEAE2;     /* background ground */

  /* --- Derived grounds. Not separate named colours. --- */
  --surface:#F8F6F1;       /* elevated cards */
  --divider:#DDD8CB;       /* hairline rules, borders */
  /* Harbor Navy ramp — two authorized reversed-text steps, split by type size.
     mid  = large reversed display and the reversed tagline ONLY (4.8:1 on navy)
     light = reversed body and secondary text (7.0:1 on navy, 10.2:1 on ink) */
  --slate-navy-mid:#9DB1C2;
  --slate-navy-light:#C7D4DF;
  /* Brass Gold ramp step 2 — interactive states on DARK grounds only
     (7.8:1 on navy, 11.3:1 on ink, 1.1:1 on Parchment — invisible there). */
  --brass-gold-light:#F2DCAE;

  /* --- Interaction steps, derived so they can never drift from the eight. --- */
  --navy-hover:color-mix(in oklab,var(--harbor-navy) 82%,var(--ink-navy));
  --navy-press:var(--ink-navy);
  --navy-wash:color-mix(in oklab,var(--harbor-navy) 8%,var(--parchment));
  --gold-hover:color-mix(in oklab,var(--brass-gold) 86%,#000);
  --gold-wash:color-mix(in oklab,var(--brass-gold) 10%,var(--parchment));
  --gold-ink-hover:color-mix(in oklab,var(--gold-ink) 88%,#000);
  --pine-wash:color-mix(in oklab,var(--pine) 10%,var(--parchment));
  --claret-wash:color-mix(in oklab,var(--claret) 10%,var(--parchment));
  --slate-wash:color-mix(in oklab,var(--slate) 12%,var(--parchment));
  /* Brass Gold is too light to set micro type on its own wash (3.1:1).
     This is its type shade — a derivative, like Ink Navy is to Harbor Navy. */
  --gold-ink:#745C31;

  /* --- Semantic aliases. Design against these, not the raw names. --- */
  --page:var(--parchment);
  --surface-card:var(--surface);
  --surface-sunken:color-mix(in oklab,var(--divider) 45%,var(--parchment));
  --text-display:var(--harbor-navy);   /* Newsreader headings */
  --text-body:var(--graphite);         /* 9.39:1 on Parchment */
  --text-secondary:var(--slate);       /* 4.48:1 — 16px and up only */
  /* Below 16px Slate's 4.48:1 is a real shortfall, so small secondary text
     takes Graphite (9.39:1). Hierarchy at those sizes comes from size, weight
     and case, not tint. Authorized v3.2.0. */
  --text-secondary-small:var(--graphite);
  --text-inverse:var(--parchment);
  --text-accent:var(--brass-gold);
  --border-hairline:var(--divider);
  --border-strong:color-mix(in oklab,var(--slate) 55%,var(--divider));
  --rule-tertiary:var(--claret);
  --focus-ring:var(--brass-gold);
  /* Reversed-only, and deliberately broken here: this token has meaning ONLY
     inside .bha-reversed. Magenta so misuse is caught in QA rather than
     inheriting silently. If you see magenta text, the element wants
     --text-display (or its container is missing class="bha-reversed"). */
  --text-reversed-display:#FF00FF;
  /* Interactive states. On light grounds gold cannot carry them, so these
     resolve to navy here and are overridden inside .bha-reversed.
     SCOPE-DEPENDENT: any component that paints its own dark ground must carry
     class="bha-reversed", or these resolve navy-on-navy. Toast and Tooltip do. */
  --interactive-hover:var(--navy-hover);
  --interactive-current:var(--harbor-navy);

  /* Status. Pine and Claret carry these — no new hues enter the system. */
  --status-positive:var(--pine);
  --status-critical:var(--claret);
  --status-notice:var(--brass-gold);
  --status-neutral:var(--slate);
}

/* Reversed scope: place on any Harbor Navy or Ink Navy ground. */
.bha-reversed{
  --page:var(--harbor-navy);
  --surface-card:color-mix(in oklab,var(--harbor-navy) 88%,var(--ink-navy));
  --surface-sunken:var(--ink-navy);
  --text-display:var(--parchment);
  --text-body:var(--parchment);
  --text-secondary:var(--slate-navy-light);   /* body and small text — 6.94:1 */
  /* #C7D4DF already passes at any size on navy, so no split is needed here. */
  --text-secondary-small:var(--slate-navy-light);
  --text-reversed-display:var(--slate-navy-mid); /* large display only — 4.74:1 */
  --interactive-hover:var(--brass-gold-light);
  --interactive-current:var(--brass-gold-light);
  --focus-ring:var(--brass-gold-light);
  --text-inverse:var(--harbor-navy);
  --border-hairline:color-mix(in oklab,var(--parchment) 22%,var(--harbor-navy));
  --border-strong:var(--slate-navy-mid);
}