/*
  Van Wagner MCR — design tokens.

  Three tones carry the entire field: charcoal (background), gray (secondary —
  anything that isn't the player, a hazard, or the score), and white (identity —
  "this matters"). SMPTE colors are reserved for transient state, never for
  object identity, so they stay legible against a field that's otherwise
  monochrome.
*/

:root {
  /* Field tones */
  --vw-charcoal: #181818;
  --vw-gray: #6b6b6b;
  --vw-white: #f4f4f0;

  /* SMPTE 75% color bars — used only for state, and for the game-over card */
  --vw-smpte-white: #c0c0c0;
  --vw-smpte-yellow: #c0c000;
  --vw-smpte-cyan: #00c0c0;
  --vw-smpte-green: #00c000;
  --vw-smpte-magenta: #c000c0;
  --vw-smpte-red: #c00000;
  --vw-smpte-blue: #0000c0;

  /* Semantic state colors (mapped from the bars above) */
  --vw-state-crash: var(--vw-smpte-red);
  --vw-state-kink: var(--vw-smpte-yellow);
  --vw-state-coil-cue: var(--vw-smpte-cyan);
  --vw-state-tier: var(--vw-smpte-green);

  /* Typography */
  --vw-font-display: 'Press Start 2P', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* 8px spacing scale — mirrors the game's 8-unit pixel grid */
  --vw-space-1: 8px;
  --vw-space-2: 16px;
  --vw-space-3: 24px;
  --vw-space-4: 32px;
  --vw-space-5: 48px;
  --vw-space-6: 64px;

  /* Flat, square — no rounded corners anywhere in the pixel-art aesthetic */
  --vw-radius: 0;

  --vw-focus-ring: var(--vw-white);
}