:root {
  /* Base surfaces — warm near-black, not pure gray */
  --bg: #0d0c0a;
  --surface: #17140f;
  --surface-raised: #211c15;
  --border: #362e22;

  /* Full-color bento blocks, pulled from the dark palette set */
  --block-navy: #24485a;
  --block-maroon: #7a2420;
  --block-teal: #2c6b66;
  --block-amber: #a9761f;
  --block-green: #2f5c30;
  --pulse-strong: #ff5c8a;

  --cream: #f1ecdf;
  --cream-dim: #c7c0ae;
  --cream-faint: #8b8471;

  --correct: #4f9a5c;
  --incorrect: #c15a4f;

  /* Type: heavy condensed grotesk for headlines, plain sans for body/UI */
  --font-display: "Archivo Black", "Archivo", sans-serif;
  --font-body: "Archivo", "IBM Plex Sans", sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --gap: 20px;
  --max-width: 1040px;

  /* ---- Site-nav + category-grid accents ----------------------------------
     Added for the /lessons/-style chrome on practice.html and play.html.
     Values are copied exactly from englishvoiced.com's shared brand tokens
     (see krisgalezewski.github.io/lessons/assets/lesson-theme.css) so the
     "Quizzes" nav link and the practice-page category cards read as the
     same site rather than a bolted-on palette. --wrap matches the same
     header max-width used there too. */
  --wrap: 1300px;
  --quizzes: #9c2f5e;
  --quizzes-hi: #b23a6d;
  --quizzes-tint: #e086ab;

  /* Category card colours — same three brand hues /lessons/ uses for
     Grammar and Vocabulary; "Use of English" reuses its Practical-use
     amber so the two sites' section colours line up 1:1. */
  --cat-grammar: #a4193d;
  --cat-vocabulary: #116565;
  --cat-use-of-english: #9a7b12;
  /* Function Words (the English+ Function Words courses): a violet that
     sits between Grammar's crimson and Vocabulary's teal — "where
     vocabulary meets grammar" — and stays clear of the magenta --quizzes
     brand accent and Use of English's amber. */
  --cat-function-words: #5c3d98;
  --cat-ink: #f2efe6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

button, a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0 0 10px;
}

h1 { font-size: 44px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }

p { margin: 0 0 12px; color: var(--cream-dim); max-width: 60ch; }

a { color: var(--cream); }

button {
  font-family: var(--font-body);
  font-size: 16px;
  cursor: pointer;
}

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-faint);
  font-weight: 500;
}

::selection { background: var(--block-maroon); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}