/* 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);
}

/* ── 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);
  }
}

/* ── 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);
}

/* ── 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;
}