:root[data-theme="dark"] {
  --bg-primary: #0E0E10;      /* just dark -- neutral, no blue or teal cast */
  --bg-secondary: #17171A;    /* cards / chart surface */
  --bg-accent: #232327;

  --text-primary: #F2F2F0;
  --text-secondary: #A8A8A4;
  --text-muted: #8A8A86;
  --text-accent: #FFD60A;     /* on a dark surface the brand yellow reads fine */

  --border: rgba(242, 242, 240, 0.12);
  --border-strong: rgba(242, 242, 240, 0.24);

  --brand-primary: #FFD60A;
  --brand-primary-hover: #FFE04D;
  --on-brand: #17171A;

  /* Chart chrome */
  --chart-grid: #26262A;
  --chart-axis: #3A3A3F;
  --chart-neutral: #6E6E72;
  --chart-accent: #FFD60A;

  /* Same ordinal ramp re-stepped for the dark surface -- brightest is most
     urgent here, which is the inverse of light mode by design, not a flip of
     the hex values. */
  --sev-1: #FFD60A;
  --sev-2: #DFB600;
  --sev-3: #B89400;
  --sev-4: #8F7200;
  --sev-5: #665100;

  --cat-1: #E0B800;
  --cat-2: #7E90B0;

  --shadow-color: rgba(0, 0, 0, 0.5);
}