/* Langeroo theme. GENERATED from brand/tokens.json by scripts/build-theme.py: edit the tokens,
   not this file. Every colour, font, size, radius and shadow the launcher, UI kit and games use. */
:root {
  /* Colour */
  --bg: #fffaf2;  /* Page background behind the launcher and around games */
  --surface: #ffffff;  /* Header bar, buttons, chips, cards on bg */
  --stage-bg: #fff3df;  /* The game stage: the framed area every game draws into */
  --card-bg: #ffffff;  /* Word cards, picture cards, menu options on stage-bg */
  --line: #e8d8bd;  /* Decorative edges that separate surfaces: card and stage borders, header rule */
  --line-strong: #9a8560;  /* Borders that mark a control (chips, select, outline buttons) on surface or bg */
  --ink: #1d2452;  /* All main text, outlines on pictures and labels, focus ring */
  --ink-soft: #565a85;  /* Secondary text: hints, descriptions, captions on bg, surface and stage-bg (6:1) */
  --brand: #1565c0;  /* Primary actions (primary button, speaker button), links, Level 2 */
  --brand-dark: #0d47a1;  /* Hover and pressed state of brand fills; link hover */
  --on-brand: #ffffff;  /* Text and icons on brand and brand-dark fills */
  --highlight: #fdd835;  /* Stars, selected chips' accent, the flashcard word card */
  --highlight-soft: #fff6c8;  /* Hover on labels; a picked word waiting to be placed; label targets */
  --level-1: #2e7d32;  /* Level 1 headings and topic accents (4.9:1 on bg) */
  --level-2: #1565c0;  /* Level 2 headings and topic accents (5.5:1 on bg) */
  --level-3: #7b1fa2;  /* Level 3 headings and topic accents (7.9:1 on bg) */
  --correct: #2e7d32;  /* Right answers: card border, tick badge, progress dot, 'Well done!' toast (white text 5.1:1) */
  --correct-soft: #e6f4e7;  /* Fill behind a right answer; correct text on it is 4.5:1 */
  --wrong: #c62828;  /* Wrong answers: card border and 'Try again' toast (white text 5.6:1) */
  --wrong-soft: #fdecea;  /* Fill behind a wrong answer */
  --later: #f9a825;  /* Progress dot for a round answered after a retry */
  --sky: #d6ecfb;  /* Sky in game scenes (Balloon Ride) */
  --wood: #c98b4a;  /* Wicker, wood and other brown things in game art (the Balloon Ride basket) */
  --joey-blue: #1e88e5;  /* Logo letter L and the Words section */
  --joey-orange: #fb8c00;  /* Logo letter a */
  --joey-green: #43a047;  /* Logo letter n */
  --joey-pink: #e91e63;  /* Logo letter g and the future Sounds (phonics) section */
  --joey-purple: #8e24aa;  /* Logo letter e */
  --joey-yellow: #fdd835;  /* Logo letter r; the app icon background */
  --joey-teal: #00acc1;  /* Logo letter o */
  --joey-coral: #f4511e;  /* Logo's last o */
  /* Type */
  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-word: "Andika", "Nunito", sans-serif;
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  /* Radius */
  --radius-label: 6px;
  --radius-small: 12px;
  --radius: 18px;
  --radius-pill: 999px;
  /* Shadow */
  --shadow: 0 2px 0 rgba(29, 36, 82, 0.06), 0 8px 24px rgba(29, 36, 82, 0.08);
  --card-shadow: 0 3px 0 rgba(29, 36, 82, 0.08), 0 10px 24px rgba(29, 36, 82, 0.10);
  /* Size */
  --tap-size: 48px;
}