:root{
  /* --- base neutrals --- */
  --ink:#0B0C0E;
  --ink-2:#16181C;
  --ink-3:#2B2F36;
  --slate:#555C68;
  --slate-2:#7C8390;
  --slate-3:#B4BAC4;
  --mist:#F6F7F8;
  --mist-2:#EEF0F2;
  --rule:#E6E8EB;
  --rule-strong:#D3D7DD;
  --paper:#FFFFFF;

  /* --- brand gold, sampled from the MLC mark (#EDB525) --- */
  --gold:#EDB525;
  --gold-soft:#F3CD6A;
  --gold-deep:#8F6510;
  --gold-wash:#FDF6E3;

  /* --- semantic surfaces --- */
  --surface-page:var(--paper);
  --surface-sunken:var(--mist);
  --surface-card:var(--paper);
  --surface-inverse:var(--ink);
  --surface-inverse-2:var(--ink-2);
  --surface-accent:var(--gold);
  --surface-accent-wash:var(--gold-wash);

  /* --- semantic text --- */
  --text-strong:var(--ink);
  --text-body:var(--slate);
  --text-muted:var(--slate-2);
  --text-accent:var(--gold-deep);
  --text-on-inverse:#FFFFFF;
  --text-on-inverse-body:#A3AAB6;
  --text-on-inverse-muted:#6B7380;
  --text-on-accent:var(--ink);

  /* --- semantic lines --- */
  --border-hairline:var(--rule);
  --border-control:var(--rule-strong);
  --border-strong:var(--ink);
  --border-inverse:var(--ink-3);
  --border-accent:var(--gold);
  --focus-ring:0 0 0 3px rgba(237,181,37,.35);

  /* --- status --- */
  --status-due-bg:var(--gold-wash);
  --status-due-text:var(--gold-deep);
  --status-ok:#1F7A4D;
  --status-ok-bg:#E8F5EE;
}