/* Kids pack tokens. Games override the world colours; these are the neutral base and the taught colour swatches. */
:root {
  color-scheme: only light; /* opt out of browser auto-dark (BROWSER_COMPATIBILITY.md §5.4) */
  --bg: #fbf6ea; --surface: #ffffff; --surface-2: #f3ecdc; --ink: #2b2b2b; --ink-2: #6e6459; --line: #e2d6bd;
  --accent: #4caf6d; --accent-ink: #ffffff; --ok: #3bb273; --focus: #ffb703;
  --font-display: "Baloo 2", ui-rounded, "Nunito", system-ui, sans-serif;
  --font-learn: "Andika", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-ui: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --c-red: #e63946; --c-blue: #2b7de9; --c-yellow: #ffd60a; --c-green: #3bb273; --c-orange: #ff8c1a; --c-purple: #8e5bd6; --c-pink: #ff86b3; --c-brown: #8b5a2b; --c-black: #222222; --c-white: #ffffff; --c-grey: #9a9a9a;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(60 40 20 / .08), 0 3px 8px rgb(60 40 20 / .08);
  --shadow-2: 0 2px 4px rgb(60 40 20 / .08), 0 12px 28px rgb(60 40 20 / .14);
  --shadow-3: 0 4px 8px rgb(60 40 20 / .10), 0 24px 48px rgb(60 40 20 / .18);
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.4,0,1,1); --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-press: 80ms; --t-fast: 160ms; --t-base: 300ms; --t-slow: 600ms; --t-celebrate: 2400ms;
  --gutter: 16px; --top-h: 64px; --tap: 64px; --drag: 80px;
  --bp-md: 640px; --bp-lg: 960px;
}
:root[data-contrast="high"] { --ink-2: var(--ink); --line: #7a6a50; --surface-2: #fff; }
@media (prefers-reduced-motion: reduce) { :root { --t-press: 1ms; --t-fast: 80ms; --t-base: 160ms; --t-slow: 160ms; --t-celebrate: 400ms; } }
:root[data-motion="reduced"] { --t-press: 1ms; --t-fast: 80ms; --t-base: 160ms; --t-slow: 160ms; --t-celebrate: 400ms; }