:root{
  /* ── SURFACES (clean white, subtle cool-gray page bg for depth) ── */
  --bg:#F8FAFC;--surf:#FFFFFF;--surf2:#F2F4F7;--surf-h:#EBEDF1;
  --bdr:#E5E7EB;--bdr2:#D3D7DF;

  /* ── TEXT ── */
  --tx:#111827;--mt:#6B7280;--ht:#9CA3AF;
  /* True near-black pair for small floating/dark surfaces that sit outside the light UI (chart
     tooltips, the Analytics "Dark Intelligence" header) — distinct from --tx on purpose. */
  --ink:#1a1a18;--ink-deep:#2d2d2a;

  /* ── BRAND ── */
  /* --gold/--sky: the brand fills (button bg, icons, chart lines, dots). Text/icons on a solid --gold
     or --sky fill always use --on-accent (near-black), never white — white-on-gold (#C9A227) computes
     to ~2.4:1, well under WCAG AA's 4.5:1 (see .btn-p, .lg-btn, .cal-cell.today,
     .tc.done). One shared token instead of each component hardcoding its own near-black.
     --gold-tx/--sky-tx: darker "on-light" variants for direct text/icon use so small text still clears WCAG AA on white. */
  --on-accent:#151008;
  --gold:#C9A227;--gold-h:#A48420;--gold-bg:#F9F3E1;--gold-tx:#786017;
  --sky:#5DA9E9;--sky-h:#3694E4;--sky-bg:#EBF6FE;--sky-tx:#1A6FA8;

  /* legacy alias: --navy previously carried every "primary interactive" role. Kept pointing at gold. */
  --navy:var(--gold);--navy-h:var(--gold-h);

  /* ── STATUS (tuned for white background) ── */
  --gn:#10B981;--gn-bg:#DEFCF2;--gn-tx:#0B835C;
  --am:#F59E0B;--am-bg:#FEF1DD;--am-tx:#895806;
  --rd:#EF4444;--rd-bg:#FCDEDE;--rd-tx:#840B0B;
  --bl:var(--sky);--bl-bg:var(--sky-bg);--bl-tx:var(--sky-tx);

  /* ── SHAPE / ELEVATION ── */
  /* --r-2xs/--r-xs: real, repeated existing radii (micro-chips, compact selects) formalized as
     tokens by /impeccable polish — not yet swapped in at their ~30 existing call sites app-wide. */
  --r-2xs:4px;--r-xs:7px;--r:8px;--rl:12px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 16px rgba(16,24,40,.08);
  --shadow-lg:0 16px 48px rgba(16,24,40,.14);
  --glass-bg:rgba(255,255,255,.85);
  --glass-blur:blur(20px) saturate(140%);

  --focus:0 0 0 2px var(--surf),0 0 0 4px var(--sky);
}

@media (prefers-reduced-transparency: reduce){
  :root{--glass-bg:var(--surf);--glass-blur:none}
}