:root {
  /* --- Base neutrals: true neutral, no warm or cool cast --- */
  --n-0: #ffffff;
  --n-25: #fafafa;
  --n-50: #f2f2f2;
  --n-100: #e4e4e4;
  --n-200: #cfcfcf;
  --n-400: #969696;
  --n-500: #767676;
  --n-700: #3b3b3b;
  --n-900: #1a1a1a;
  --n-1000: #000000;

  /* Dark tile micro-steps. Never used as text colors. */
  --tile-1: #202020;
  --tile-2: #232323;
  --tile-3: #1c1c1c;

  /* --- Accent: one interactive color, oxblood --- */
  --accent: #8c1d18;
  --accent-focus: #a52822;
  --accent-on-dark: #c4544c;
  --accent-wash: #f7eceb;

  /* --- Semantic surfaces --- */
  --canvas: var(--n-0);
  --canvas-alt: var(--n-50);
  --surface-card: var(--n-0);
  --surface-pearl: var(--n-25);
  --surface-dark: var(--tile-1);
  --surface-dark-alt: var(--tile-2);
  --surface-dark-deep: var(--tile-3);
  --surface-void: var(--n-1000);
  --surface-chip-glass: rgba(207, 207, 207, 0.64);
  --surface-frost: rgba(242, 242, 242, 0.8);

  /* --- Semantic text --- */
  --text-heading: var(--n-900);
  --text-body: var(--n-900);
  --text-muted: var(--n-700);
  --text-faint: var(--n-500);
  --text-disabled: var(--n-400);
  --text-on-dark: var(--n-0);
  --text-on-dark-muted: #cccccc;
  --text-on-accent: var(--n-0);
  --text-link: var(--accent);
  --text-link-on-dark: var(--accent-on-dark);

  /* --- Semantic lines --- */
  --hairline: var(--n-100);
  --hairline-soft: rgba(0, 0, 0, 0.06);
  --hairline-on-dark: rgba(255, 255, 255, 0.14);
  --focus-ring: var(--accent-focus);
}