:root{
  /* ── SURFACES (clean white, subtle cool-gray page bg for depth) ── */
  --bg:#F7F8FA;--surf:#FFFFFF;--surf2:#F1F3F6;--surf-h:#EAEDF1;
  --bdr:#E4E7EC;--bdr2:#D2D7E0;

  /* ── TEXT ── */
  --tx:#14171F;--mt:#475569;--ht:#6B7280;

  /* ── BRAND ── */
  /* --gold/--sky: the brand fills (button bg, icons, chart lines, dots) — always paired with dark text on top.
     --gold-tx/--sky-tx: darker "on-light" variants for direct text/icon use so small text still clears WCAG AA on white. */
  --gold:#D6AD4E;--gold-h:#C99A2E;--gold-bg:rgba(214,173,78,.14);--gold-tx:#8A6212;
  --sky:#4FB6EC;--sky-h:#2FA3E0;--sky-bg:rgba(79,182,236,.14);--sky-tx:#1A75A3;

  /* 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:#1d9e75;--gn-bg:#eaf3de;--gn-tx:#3b6d11;
  --am:#ef9f27;--am-bg:#faeeda;--am-tx:#854f0b;
  --rd:#e24b4a;--rd-bg:#fcebeb;--rd-tx:#a32d2d;
  --bl:var(--sky);--bl-bg:var(--sky-bg);--bl-tx:var(--sky-tx);

  /* ── SHAPE / ELEVATION ── */
  --r:10px;--rl:14px;
  --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}
}