/* ── SELF-HOSTED FONTS ─────────────────────────────────────────────────
   Added 2026-09-05. These used to come from fonts.googleapis.com, which the
   service worker lists as NETWORK_ONLY - so offline there were no font faces
   at ALL (measured: document.fonts empty) and every heading fell back to the
   browser's `cursive`, a serif italic. Not just a different look: the same
   heading measured 91px wide online and 82px offline, and that shift runs
   through every card title, button and chip. Shaun, 2026-09-05: "the layout
   is all messed up when offline".

   One variable file per family, latin subset, 72KB for both. Google serves
   the same woff2 for every weight of a variable family - the five weights we
   ask for came back as two distinct files (verified by checksum), so the
   font-weight RANGE below is what selects 600/700/800, not five downloads.

   swap, so text paints immediately in the fallback and re-renders when the
   file lands - a child never waits on a font. Both files are in sw.js's
   APP_SHELL, so they are there on the very first offline launch. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/baloo2-var.woff2') format('woff2');
}
/* Fredoka replaced Baloo 2 as the display face on 2026-09-05, at Shaun's
   request. Self-hosted for the same reason the other two are: the service
   worker lists fonts.googleapis.com as NETWORK_ONLY, so a Google Fonts <link>
   means NO display face at all offline and every heading falls back to the
   browser's `cursive` serif italic - the "layout is all messed up when
   offline" bug fixed earlier the same day. Latin subset, variable, 29KB.
   Add it to sw.js's APP_SHELL alongside the other two. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fredoka-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-var.woff2') format('woff2');
}


/* ── TYPOGRAPHY SYSTEM (2026-09-05) ────────────────────────────────────
   Two tokens, so the display/body faces are a one-line change instead of
   200+ hand-written declarations. Baloo 2 stays in the stack behind Fredoka:
   it is still on the device from the previous build and both are rounded
   display faces, so a cold first paint has a correct-shaped fallback.

   ROOT SCALE. The app had no html font-size at all, so every rem resolved
   against the browser's 16px, and 1029 of its 1032 font sizes are rem (only
   3 are px) - which is why a root bump is the whole-app fix here and not a
   per-screen one. Measured before this change at 320px: section subtitles
   12.5px, bottom-nav labels 11.5px, card titles 13.4px. */
:root {
  --font-display: 'Fredoka', 'Baloo 2', system-ui, -apple-system, sans-serif;
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { font-size: 18px; }
@media (min-width: 768px) { html { font-size: 20px; } }

body {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility/Onboarding: Utility for hiding and lime background */
.hidden { display: none; }
.lime-bg { background: var(--lime) !important; }
/* Import Tailwind output (to be generated) */
@import "./tailwind-output.css";

/* Custom styles (optional, for overrides) */
/* Place any custom CSS below this line */

/* LingoKids-style swipe carousel — hide scrollbar */
.ndw-lingo-swipe::-webkit-scrollbar { display: none; }
.ndw-lingo-swipe { -ms-overflow-style: none; scrollbar-width: none; }

/* Accessibility: minimum touch target 48px for all interactive elements */
button, [role="button"], input[type="checkbox"], input[type="radio"], select {
  min-height: 44px;
}
/* Dyslexia: increased line height and letter spacing */
.a11y-dyslexia * { line-height: 1.8 !important; letter-spacing: 0.04em !important; }
/* Large text boost */
.a11y-large-text { font-size: 110% !important; }
.a11y-large-text .gc-t, .a11y-large-text .gc-e { font-size: 110% !important; }
/* Reduced motion — kill all animations */
.a11y-reduced-motion *, .a11y-reduced-motion *::before, .a11y-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}