:root {
  /* Base palette — client's existing brand charcoal + gold. Do not substitute. */
  --ink: #22242E;
  --slate: #3F4352;
  --slate-600: #565B6E;
  --slate-400: #8A8FA3;
  --slate-200: #C9CCD6;
  --slate-100: #E4E5E9;
  --gold: #D9A227;
  --gold-hover: #B8811E; /* primary button hover, from the board */
  --gold-deep: #8A5F14;
  --gold-100: #F7EBCF;
  --paper: #F2F2EF;
  --white: #FFFFFF;
  --error: #C0392B;

  /* Semantic aliases */
  --text-heading: var(--ink);
  --text-body: var(--ink);
  --text-secondary: var(--slate-600);
  --text-meta: var(--slate-400);
  --text-placeholder: var(--slate-400);
  --text-accent: var(--gold-deep);          /* the only gold-toned text on light */
  --text-on-dark: var(--white);
  --text-heading-on-dark: var(--gold);      /* 24px+ only */
  --text-disabled: var(--slate-400);
  --text-error: var(--error);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-field: var(--white);
  --surface-dark: var(--slate);
  --surface-tint: var(--gold-100);
  --surface-image-placeholder: var(--slate-200);
  --surface-disabled: var(--slate-100);

  --fill-primary: var(--gold);
  --fill-primary-hover: var(--gold-hover);
  --fill-secondary: var(--slate);

  --border-default: var(--slate-200);
  --border-strong: var(--ink);
  --border-error: var(--error);
  --divider: var(--slate-200);

  --focus-ring: var(--ink);
}