/* Design tokens, taken from the approved mockups (docs/design). */
:root {
  --color-bg: #0b1020;
  --color-surface: #151b30;
  --color-sunken: #10162a;
  --color-line: #2a3354;
  --color-line-soft: #1e2642;
  --color-text: #f4f1e6;
  --color-muted: #a3abc7;
  --color-dim: #7f88a8;
  --color-accent: #f2c94c;
  --color-on-accent: #0b1020;
  --color-correct: #5bd1a0;
  --color-correct-bg: #10301f;
  --color-correct-text: #d9f7e9;
  --color-wrong: #ff8a70;
  --color-wrong-bg: #33191a;
  --color-wrong-text: #ffd9cf;
  --color-wrong-line: #5a2c2a;
  --color-panel: #e9ecf4;
  --color-on-panel: #1f2036;
  --color-on-panel-muted: #4a5170;
  --color-slot: #8089a8;
  --color-highlight: #d9480f;

  --font: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-control: 14px;
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-panel: 24px;

  --control-height: 54px;
  --tap: 44px;
  --gutter: 20px;

  --fast: 140ms;
}