:root {
  /* 60% paper, 30% ink, 10% calm blue.
     Correct, wrong, and flagged stay outside the accent. */
  --color-stage: #E6DFD2;
  --color-bg: #F4F1EA;
  --color-surface: #FFFCF7;
  --color-fill: #E8E2D6;
  --color-line: #DDD6C8;
  --color-ink: #1C2421;
  --color-ink-body: rgba(28, 36, 33, 0.78);
  --color-ink-muted: rgba(28, 36, 33, 0.70);
  --color-indicator: rgba(28, 36, 33, 0.22);
  --color-accent: #1F5C7A;
  --color-accent-soft: rgba(31, 92, 122, 0.10);
  --color-accent-faint: rgba(31, 92, 122, 0.05);
  --color-accent-line: rgba(31, 92, 122, 0.28);
  --color-on-accent: #FFFFFF;
  --color-correct: #146B3A;
  --color-correct-soft: rgba(20, 107, 58, 0.12);
  --color-wrong: #B43244;
  --color-wrong-soft: rgba(180, 50, 68, 0.12);
  --color-flagged: #8A5A00;
  --color-flagged-soft: rgba(138, 90, 0, 0.14);

  --font-sans: "Atkinson Hyperlegible", "Avenir Next", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --weight-regular: 400;
  --weight-bold: 700;

  --text-title: 28px;
  --text-body: 18px;
  --text-ui: 15px;
  --text-meta: 13px;
  --leading-title: 1.2;
  --leading-body: 1.45;
  --leading-ui: 1.35;
  --leading-meta: 1.3;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --touch: 44px;
  --safe-top: 54px;
  --safe-bottom: 34px;
  --phone-w: 390px;
  --phone-h: 844px;

  --shadow-soft: 0 8px 24px rgba(72, 56, 32, 0.07);
  --shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 16px rgba(31, 92, 122, 0.16);
}