:root {
  /* base palette — lifted verbatim from css/styles.css */
  --gold: #f2bf62;      /* canvas */
  --off-white: #f2f1f8; /* accent */
  --slate: #3f3d56;     /* accent 2 */
  --ink: #2b2940;       /* heading ink (darker than slate) */
  --black: #000000;     /* body copy */
  --rust: #7a3b2e;      /* error / "bad" verdict */

  /* semantic aliases — use these in components */
  --surface-canvas: var(--gold);
  --surface-card: rgba(38, 36, 56, .02);
  --surface-card-hover: rgba(63, 61, 86, .12);
  --surface-grid-seam: rgba(38, 36, 56, .12);
  --surface-glow: rgba(63, 61, 86, .6);

  --text-heading: var(--ink);
  --text-body: var(--black);
  --text-muted: rgba(38, 36, 56, .55);
  --text-faint: rgba(38, 36, 56, .4);
  --text-on-accent: var(--slate);
  --text-on-dark: var(--off-white);

  --accent: var(--off-white);   /* primary accent fills (buttons, highlights) */
  --accent-2: var(--slate);     /* secondary accent (kickers, numerals, links) */

  --border-hairline: rgba(38, 36, 56, .14);
  --border-hairline-strong: rgba(38, 36, 56, .25);
  --border-focus: var(--slate);

  --status-bad: var(--rust);
  --status-warn: rgba(38, 36, 56, .6);
  --status-ok: var(--slate);
  --status-ok-bg: var(--off-white);
}