/* Design tokens — ported from .claude/skills/ks1-design/tokens/*.css.
 *
 * `ks1-design` is ground truth for ALL visual design (CLAUDE.md, "Design
 * system"): where it and the prototype's inline `C` palette disagree — and
 * every subject and semantic colour does — the skill wins. Colour, spacing,
 * radius and shadow values below are copied verbatim from it; nothing here is
 * eyeballed off the prototype.
 *
 * LIGHT THEME ONLY. Closed decision, 2026-08-08 (plans README): the skill
 * defines no dark theme, and "marked exercise book" is inherently a
 * light-paper metaphor, so a dark variant is a redesign rather than a token
 * swap. There is deliberately no prefers-color-scheme block here — a later
 * session should not "fix" its absence by inventing a dark palette.
 *
 * Two deliberate divergences from the skill's token files, both documented:
 *
 * 1. FONTS ARE SELF-HOSTED. The skill's typography.css @imports Google Fonts
 *    from fonts.googleapis.com. Serving them from our own origin instead
 *    costs nothing visually (identical files, latin subset) and avoids
 *    sending every child's IP address to a third party on every page load,
 *    which is the spirit of CLAUDE.md's privacy invariants even though fonts
 *    aren't named there. The skill's own readme anticipates this ("provide
 *    OTF/TTF files if offline-first is required").
 * 2. THE TYPE SCALE IS MULTIPLIED BY --text-scale, so the accessibility
 *    toggle (PRD §7.7) scales every size together rather than body copy only.
 *    The base rem values are the skill's, unchanged at scale 1.
 */

/* --- self-hosted fonts (latin subset, from Google Fonts, OFL) ------------ */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/baloo-2.01fcdef17777.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter.65850a373e25.woff2") format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat.1fde3bbfa795.woff2") format('woff2');
}

/* The accessibility toggle's alternative face. Atkinson Hyperlegible is
 * drawn by the Braille Institute specifically to pull confusable letterforms
 * apart (b/d, I/l/1, O/0), which is the mechanism that helps a dyslexic
 * reader; it is OFL-licensed and comes from the same source as the three
 * above, so it self-hosts on the same terms. OpenDyslexic is the more
 * literally-named alternative and can be swapped in here if preferred — it
 * would be one @font-face and one font-family value. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-400.d444e1815a3a.woff2") format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-700.c6b471cbb2b9.woff2") format('woff2');
}

:root {
  /* --- colour: brand, navy ink ------------------------------------------ */
  --color-navy: #1e3a5f;
  --color-navy-light: #2a5080;
  --color-navy-dark: #111f33;

  /* --- colour: paper surface -------------------------------------------- */
  --color-paper: #f7f8fc;
  --color-paper-lines: #c5d5ea;
  --color-surface: #ffffff;
  --color-surface-raised: #eef1f8;

  /* --- colour: ink ------------------------------------------------------ */
  --color-ink: #1e3a5f;
  --color-ink-muted: #6b82a0;
  --color-border: #d0dce8;

  /* --- colour: marking -------------------------------------------------- */
  --color-red: #d32f2f;
  --color-red-light: #fde8e8;
  --color-green: #2e7d32;
  --color-green-light: #e8f5e9;
  --color-amber: #f59f00;
  --color-amber-light: #fff3cd;

  /* --- colour: subject -------------------------------------------------- */
  --color-maths: #1976d2;
  --color-maths-light: #e3f2fd;
  --color-gps: #7b1fa2;
  --color-gps-light: #f3e5f5;
  --color-reading: #00796b;
  --color-reading-light: #e0f2f1;

  /* --- typography: families --------------------------------------------- */
  --font-question: 'Baloo 2', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* --- typography: scale ------------------------------------------------ */
  /* Set by the accessibility toggle; every size below multiplies by it, so
   * one control moves the whole scale rather than a subset of it. */
  --text-scale: 1;

  --text-xs: calc(0.75rem * var(--text-scale));
  --text-sm: calc(0.875rem * var(--text-scale));
  --text-base: calc(1rem * var(--text-scale));
  --text-lg: calc(1.125rem * var(--text-scale));
  --text-xl: calc(1.25rem * var(--text-scale));
  --text-2xl: calc(1.5rem * var(--text-scale));
  --text-3xl: calc(1.875rem * var(--text-scale));
  --text-4xl: calc(2.25rem * var(--text-scale));
  --text-5xl: calc(3rem * var(--text-scale));

  /* --- typography: weights ---------------------------------------------- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* --- typography: leading ---------------------------------------------- */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* --- spacing ----------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- radii ------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* --- shadows (navy-tinted, never pure black) --------------------------- */
  --shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.12);
  --shadow-md: 0 4px 12px rgba(30, 58, 95, 0.15);
  --shadow-lg: 0 8px 24px rgba(30, 58, 95, 0.18);
  --shadow-card: 0 2px 8px rgba(30, 58, 95, 0.1), 0 1px 3px rgba(30, 58, 95, 0.07);
  --shadow-raised: 0 6px 20px rgba(30, 58, 95, 0.18), 0 2px 6px rgba(30, 58, 95, 0.1);

  /* --- transitions -------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-normal: 220ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- graph paper --------------------------------------------------------- */
  --bg-graph-lines-v: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 27px,
    var(--color-paper-lines) 27px,
    var(--color-paper-lines) 28px
  );
  --bg-graph-lines-h: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 27px,
    var(--color-paper-lines) 27px,
    var(--color-paper-lines) 28px
  );

  /* --- the "extra practice" / focus accent -------------------------------- */
  --color-focus-ring: var(--color-amber);
}

/* --- accessibility: text size (PRD §7.7) ---------------------------------
 * Three steps is enough. Attribute selectors on <html> beat bare :root on
 * specificity, so these override the default above without !important.
 * Applied before first paint by the inline script in base.html. */

html[data-text-scale='large'] {
  --text-scale: 1.15;
}

html[data-text-scale='larger'] {
  --text-scale: 1.3;
}

/* --- accessibility: dyslexia-friendly font (PRD §7.7) ---------------------
 * Swaps all three families, not just body copy. Caveat goes too: a looping
 * handwriting face is the hardest thing on the page to read, so leaving it in
 * place would undercut the point of the toggle. The feedback caption's rotation
 * is dropped alongside it in app.css. */

html[data-font='hyperlegible'] {
  --font-question: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-ui: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-hand: 'Atkinson Hyperlegible', system-ui, sans-serif;
}