/**
 * Design tokens: colours, type, spacing. Change values here to restyle
 * the whole site — no other CSS file should hardcode a colour or font.
 */
:root {
  /* Colours */
  --color-ink: #1c1e22;
  --color-bg: #fafaf8;
  --color-accent: #f5c400;
  --color-incorrect: #c0392b;
  --color-correct: #2e7d32;

  --color-surface: #ffffff;
  --color-border: #dedad2;
  --color-muted: #5a5e66;

  /* Text on the accent colour needs to stay dark for contrast */
  --color-on-accent: #1c1e22;
  --color-on-dark: #fafaf8;

  /* Type */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Layout */
  --content-max: 40rem;
  --radius: 0.5rem;
  --focus-ring: 3px solid var(--color-ink);
}