/* tokens.css — the one token set both apps are drawn with (MM-201, research/16 §3.2).
 *
 * Tokens only: no selectors that draw anything. kit.css builds the components from these,
 * child.css and parent.css the screens.
 *
 * Two axes, both settable on any element so kit.html can show every combination at once:
 *   data-theme="light|dark"      colour. Unset follows the system (prefers-color-scheme).
 *   data-variant="child|parent"  type scale, density, elevation. Unset is the child app.
 *
 * Every text colour here must reach 4.5:1 on the backgrounds it is used on, in both themes.
 * scripts/check-contrast.mjs reads this file and fails CI if one does not; its PAIRS list
 * is the contract — add a pair there when you put text on a new background.
 *
 * The light and dark blocks are written twice each (media query and attribute) because CSS
 * cannot share a block between them; test/tokens.test.js checks the copies agree.
 *
 * Provisional: the values follow the §3 direction without the MM-202 mockup sign-off.
 */

/* ── colour: light ─────────────────────────────────────────────────────────── */
:root, [data-theme="light"]{
  color-scheme:light;
  /* paper and surfaces */
  --paper:#F4F6F9; --card:#FFFFFF; --card-2:#FBFCFE;
  --line:#DFE5EE; --line-soft:#EDF1F6;
  --grid:rgba(47,91,208,.075);
  /* ink: body, secondary, tertiary — all three are text colours and meet 4.5:1 */
  --ink:#16233B; --ink-soft:#4C5A72; --ink-faint:#647187;
  /* her answers are ink-blue */
  --accent:#2F5BD0; --accent-ink:#FFFFFF; --accent-soft:#E8EEFC; --accent-edge:#BDD0F4;
  /* the gold stamp: --gold fills and edges, --gold-ink is gold you can read */
  --gold:#B8860F; --gold-ink:#86610C; --gold-soft:#FAF2DE;
  --ok:#177350; --ok-soft:#E3F4EC;
  --warn:#955711; --warn-soft:#FBF0DF;
  /* --err is for the grown-ups' destructive actions only; nothing she sees is red */
  --err:#A93A32; --err-soft:#FBE9E7;
  /* levels 0–4 (fills) and the text that sits on each */
  --lv0:#DDE3EC; --lv1:#F2C97D; --lv2:#9BC4E8; --lv3:#5FA88A; --lv4:#B8860F;
  --on-lv0:var(--ink); --on-lv1:var(--ink); --on-lv2:var(--ink); --on-lv3:var(--ink); --on-lv4:var(--ink);
  --pri-core:var(--err); --pri-imp:var(--warn); --pri-sup:var(--ink-soft); --pri-beyond:var(--accent);
  /* elevation */
  --shadow:0 1px 2px rgba(22,35,59,.06), 0 8px 24px -12px rgba(22,35,59,.14);
  --shadow-lift:0 -2px 6px rgba(22,35,59,.05), 0 -18px 48px -20px rgba(22,35,59,.28);
  --scrim:rgba(22,35,59,.38);
  --glow:rgba(184,134,15,.55);
  /* the settings switch knob stays white on both its off (--line) and on (--accent) track, in both themes;
     --hold is the fill that sweeps across the grown-ups' gate button while it is held (MM-946) */
  --knob:#FFFFFF; --knob-shadow:0 1px 3px rgba(0,0,0,.3); --hold:rgba(255,255,255,.28);
  /* the picture scenes (P2-822, core/scenes.js): fills only, never text; every shape is outlined
     in --ink-soft, so it stands off its background in both themes (scripts/check-contrast.mjs SHAPES).
     --sc-inside is a dark doorway (unknown); --sc-lit is the lit inside of an open cupboard, fridge,
     tin, basket or lunchbox, so open and empty reads as empty, never as dark; --sc-apple, the
     lunchbox's one apple, stands 3:1 off --sc-lit (it read as bare in dark as --sc-leaf) */
  --sc-sky:#DCEBFA; --sc-night:#2E3F66; --sc-moon:#F7EBB5; --sc-sun:#F5C542; --sc-cloud:#FFFFFF; --sc-cloud-grey:#B9C2D0; --sc-snow:#FFFFFF;
  --sc-grass:#CBE6BC; --sc-leaf:#74B06C; --sc-trunk:#9A7048; --sc-path:#E6E2DA; --sc-road:#B4BAC4; --sc-sand:#F4E2B4; --sc-sea:#9ACBEA; --sc-print:#D9C08A;
  --sc-wall:#F4EBDD; --sc-floor:#DCC7A3; --sc-wood:#C0915E; --sc-frame:#FFFFFF; --sc-glass:#C9E0F4; --sc-brick:#E8B49A; --sc-roof:#8C5A4A; --sc-door:#7A9A6A;
  --sc-inside:#3E4658; --sc-lit:#FFF3D1; --sc-apple:#4A9446; --sc-glow:#FBE7A6; --sc-metal:#C3CAD4; --sc-tyre:#3E4658; --sc-board:#FFFFFF; --sc-pen:#2F5BD0; --sc-page:#FFFFFF;
  --sc-bag:#E29A4C; --sc-brolly:#E88AA6; --sc-cream:#F6D2DC; --sc-cone:#D9A45A; --sc-cake:#F3C9D9; --sc-flame:#F59E2B; --sc-castle:#E7C77E;
  --sc-dog:#B07A4A; --sc-duck:#EFE6D2; --sc-trousers:#56637D;
  --sc-top-1:#5B8FD9; --sc-top-2:#5FA88A; --sc-top-3:#F2B84B; --sc-top-4:#9B7BD1;
  /* Progress by year (MM-917): one line colour per subject, never the status colours. Checked with the
     dataviz validator (lightness band, chroma, CVD and normal-vision) on ALL pairs, light and dark —
     all five lines share one plot (MM-917 validation re-stepped science, and non-verbal in dark;
     test/year-chart.test.js) — and 3:1 on --card (npm run contrast). Maths, English, verbal,
     non-verbal, science. */
  --chart-maths:#2A78D6; --chart-eng:#EB6834; --chart-vr:#00897A; --chart-nvr:#4A3AA7; --chart-sci:#E04893;
  --sc-skin-1:#F6D5BF; --sc-skin-2:#E0AE88; --sc-skin-3:#B57B53; --sc-skin-4:#8C5A3A; --sc-face:#16181F;
  --sc-hair-1:#3B2A20; --sc-hair-2:#1E1E22; --sc-hair-3:#D9B15A; --sc-hair-4:#B5622F;
}

/* ── colour: dark (system preference, unless the page says light) ─────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0E1420; --card:#18202F; --card-2:#1D2637;
    --line:#2A3446; --line-soft:#222B3B;
    --grid:rgba(123,163,255,.10);
    --ink:#E7ECF6; --ink-soft:#A3B0C6; --ink-faint:#8795AD;
    --accent:#7BA3FF; --accent-ink:#0E1420; --accent-soft:#1C2740; --accent-edge:#33456B;
    --gold:#E3B24F; --gold-ink:#E3B24F; --gold-soft:#2A2314;
    --ok:#4FC08D; --ok-soft:#142A21;
    --warn:#E0A257; --warn-soft:#2A2114;
    --err:#F08579; --err-soft:#2E1917;
    --lv0:#2A3446; --lv1:#7A5D26; --lv2:#2F5478; --lv3:#2E6B54; --lv4:#E3B24F;
    --on-lv0:var(--ink); --on-lv1:var(--ink); --on-lv2:var(--ink); --on-lv3:var(--ink); --on-lv4:#0E1420;
    --pri-core:var(--err); --pri-imp:var(--warn); --pri-sup:var(--ink-soft); --pri-beyond:var(--accent);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-lift:0 -2px 6px rgba(0,0,0,.3), 0 -18px 48px -20px rgba(0,0,0,.7);
    --scrim:rgba(0,0,0,.55);
    --glow:rgba(227,178,79,.6);
    --knob:#FFFFFF; --knob-shadow:0 1px 3px rgba(0,0,0,.3); --hold:rgba(255,255,255,.28);
    --sc-sky:#3A5478; --sc-night:#0A1020; --sc-moon:#EDE0A6; --sc-sun:#E3B24F; --sc-cloud:#7D8BA3; --sc-cloud-grey:#4E5970; --sc-snow:#E7ECF6;
    --sc-grass:#24402C; --sc-leaf:#3F7F4A; --sc-trunk:#7A5638; --sc-path:#353B47; --sc-road:#262C37; --sc-sand:#4D4128; --sc-sea:#24506F; --sc-print:#6B5A38;
    --sc-wall:#232836; --sc-floor:#3B3326; --sc-wood:#7C5B3B; --sc-frame:#8E9AB0; --sc-glass:#2B3F5C; --sc-brick:#6A3E31; --sc-roof:#4A3038; --sc-door:#4F6B45;
    --sc-inside:#080B12; --sc-lit:#5C5A50; --sc-apple:#8FD18A; --sc-glow:#6B5A2A; --sc-metal:#6C7688; --sc-tyre:#0E1420; --sc-board:#2C3548; --sc-pen:#7BA3FF; --sc-page:#E7ECF6;
    --sc-bag:#B8722E; --sc-brolly:#B5627E; --sc-cream:#D9A9B8; --sc-cone:#A87B3E; --sc-cake:#9A6A80; --sc-flame:#F2A541; --sc-castle:#9C8448;
    --sc-dog:#9A6A40; --sc-duck:#CFC6B2; --sc-trousers:#4A5670;
    --sc-top-1:#3F6CB0; --sc-top-2:#3F8A6C; --sc-top-3:#C9962F; --sc-top-4:#7C5FB0;
    --chart-maths:#3987E5; --chart-eng:#D95926; --chart-vr:#199E70; --chart-nvr:#8455B6; --chart-sci:#D55DB3;
    --sc-skin-1:#F6D5BF; --sc-skin-2:#E0AE88; --sc-skin-3:#B57B53; --sc-skin-4:#8C5A3A; --sc-face:#16181F;
    --sc-hair-1:#3B2A20; --sc-hair-2:#1E1E22; --sc-hair-3:#C9A14E; --sc-hair-4:#A5582A;
  }
}

/* ── colour: dark (asked for) ─────────────────────────────────────────────── */
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E1420; --card:#18202F; --card-2:#1D2637;
  --line:#2A3446; --line-soft:#222B3B;
  --grid:rgba(123,163,255,.10);
  --ink:#E7ECF6; --ink-soft:#A3B0C6; --ink-faint:#8795AD;
  --accent:#7BA3FF; --accent-ink:#0E1420; --accent-soft:#1C2740; --accent-edge:#33456B;
  --gold:#E3B24F; --gold-ink:#E3B24F; --gold-soft:#2A2314;
  --ok:#4FC08D; --ok-soft:#142A21;
  --warn:#E0A257; --warn-soft:#2A2114;
  --err:#F08579; --err-soft:#2E1917;
  --lv0:#2A3446; --lv1:#7A5D26; --lv2:#2F5478; --lv3:#2E6B54; --lv4:#E3B24F;
  --on-lv0:var(--ink); --on-lv1:var(--ink); --on-lv2:var(--ink); --on-lv3:var(--ink); --on-lv4:#0E1420;
  --pri-core:var(--err); --pri-imp:var(--warn); --pri-sup:var(--ink-soft); --pri-beyond:var(--accent);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lift:0 -2px 6px rgba(0,0,0,.3), 0 -18px 48px -20px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.55);
  --glow:rgba(227,178,79,.6);
  --knob:#FFFFFF; --knob-shadow:0 1px 3px rgba(0,0,0,.3); --hold:rgba(255,255,255,.28);
  --sc-sky:#3A5478; --sc-night:#0A1020; --sc-moon:#EDE0A6; --sc-sun:#E3B24F; --sc-cloud:#7D8BA3; --sc-cloud-grey:#4E5970; --sc-snow:#E7ECF6;
  --sc-grass:#24402C; --sc-leaf:#3F7F4A; --sc-trunk:#7A5638; --sc-path:#353B47; --sc-road:#262C37; --sc-sand:#4D4128; --sc-sea:#24506F; --sc-print:#6B5A38;
  --sc-wall:#232836; --sc-floor:#3B3326; --sc-wood:#7C5B3B; --sc-frame:#8E9AB0; --sc-glass:#2B3F5C; --sc-brick:#6A3E31; --sc-roof:#4A3038; --sc-door:#4F6B45;
  --sc-inside:#080B12; --sc-lit:#5C5A50; --sc-apple:#8FD18A; --sc-glow:#6B5A2A; --sc-metal:#6C7688; --sc-tyre:#0E1420; --sc-board:#2C3548; --sc-pen:#7BA3FF; --sc-page:#E7ECF6;
  --sc-bag:#B8722E; --sc-brolly:#B5627E; --sc-cream:#D9A9B8; --sc-cone:#A87B3E; --sc-cake:#9A6A80; --sc-flame:#F2A541; --sc-castle:#9C8448;
  --sc-dog:#9A6A40; --sc-duck:#CFC6B2; --sc-trousers:#4A5670;
  --sc-top-1:#3F6CB0; --sc-top-2:#3F8A6C; --sc-top-3:#C9962F; --sc-top-4:#7C5FB0;
  --chart-maths:#3987E5; --chart-eng:#D95926; --chart-vr:#199E70; --chart-nvr:#8455B6; --chart-sci:#D55DB3;
  --sc-skin-1:#F6D5BF; --sc-skin-2:#E0AE88; --sc-skin-3:#B57B53; --sc-skin-4:#8C5A3A; --sc-face:#16181F;
  --sc-hair-1:#3B2A20; --sc-hair-2:#1E1E22; --sc-hair-3:#C9A14E; --sc-hair-4:#A5582A;
}

/* ── everything that is not colour ────────────────────────────────────────── */
:root{
  /* families */
  --f-display:'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --f-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-num:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* spacing: a 4 px step */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  --gutter:16px;

  /* radius */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --r:var(--r-md);   /* the pre-kit name, still used by the screens */

  /* touch: nothing she or a parent taps is smaller than --touch (principle 5) */
  --touch:44px; --touch-lg:56px;

  /* motion: growth only (principle 4). Everything else is instant, so there is no
     "standard" duration to reach for. */
  --dur-instant:0ms;
  --dur-quick:120ms;     /* press feedback */
  --dur-move:240ms;      /* a level moving on the Done card */
  --dur-grow:600ms;      /* a star brightening */
  --ease-out:cubic-bezier(.2, 0, 0, 1);
  --ease-grow:cubic-bezier(.34, 1.4, .64, 1);   /* a small overshoot: it swells, then settles */

  /* safe areas (standalone iPad and phones with a home indicator) */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --tabbar-h:64px;
}
@media (min-width:700px){ :root{ --gutter:24px } }
/* Standalone (added to the home screen, MM-412): no browser toolbar under the page, so the
   tab bar, the dock and the sheets meet the glass itself. A home-button iPad reports no
   inset there, which leaves them against its rounded corners; keep a small floor. */
@media (display-mode:standalone){ :root{ --safe-bottom:max(env(safe-area-inset-bottom, 0px), var(--sp-2)) } }
@media (prefers-reduced-motion:reduce){
  /* 0.01 ms rather than 0 so animationend/transitionend still fire for code that waits */
  :root{ --dur-quick:.01ms; --dur-move:.01ms; --dur-grow:.01ms }
}

/* ── type scale and density: the child variant (default) ──────────────────── */
:root, [data-variant="child"]{
  --fs-label:14px;                                  /* tags, tab labels, meta */
  --fs-small:16px;                                  /* secondary lines */
  --fs-body:clamp(19px, 17.4px + .4vw, 20px);       /* 19 on a phone, 20 on an iPad */
  --fs-title:clamp(22px, 19px + .8vw, 26px);        /* card and sheet titles */
  --fs-prompt:clamp(24px, 20.8px + .8vw, 28px);     /* the question */
  --fs-display:clamp(30px, 22px + 2vw, 40px);       /* screen headings */
  --lh-body:1.5; --lh-tight:1.2;
  --card-pad:var(--sp-6); --card-r:var(--r-lg); --card-shadow:var(--shadow);
  --chip-h:var(--touch-lg); --chip-pad:var(--sp-5); --chip-fs:18px;
  --key-h:var(--touch-lg);
  --star-size:28px;
}

/* ── type scale and density: the parent variant ───────────────────────────── */
[data-variant="parent"]{
  --fs-label:12.5px;
  --fs-small:14.5px;
  --fs-body:17px;
  --fs-title:clamp(19px, 17.4px + .4vw, 21px);
  --fs-prompt:20px;
  --fs-display:clamp(26px, 20px + 1.5vw, 32px);
  --lh-body:1.6; --lh-tight:1.25;
  --card-pad:var(--sp-5); --card-r:var(--r-md); --card-shadow:none;
  --chip-h:var(--touch); --chip-pad:var(--sp-4); --chip-fs:15px;
  --key-h:var(--touch);
  --star-size:20px;
}