/* ============================================================
   Lantern design tokens, kid wall (alpha.lantern.family, level 0)

   Copied from viewer/tokens.css in the household lab and reduced
   to what this one page uses. The @font-face block is deliberately
   NOT carried over: the hosted wall ships no font files and no CDN,
   so the display and body stacks fall through to the system faces.
   Light is the default. Dark follows prefers-color-scheme.
   ============================================================ */

:root{
  /* type */
  --font-display:-apple-system,'Avenir Next','Segoe UI',sans-serif;
  --font-body:-apple-system,'Helvetica Neue','Segoe UI',sans-serif;
  --text-xs:12px; --text-s:13.5px; --text-m:15px; --text-l:17px;
  --text-xl:20px; --text-2xl:25px;
  --leading-tight:1.2; --leading:1.45;
  /* space (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px;
  /* radius */
  --radius-s:8px; --radius-m:12px; --radius-l:16px;
  --radius-tile:20px; --radius-pill:999px;
  /* hit targets */
  --tap-min:44px;      /* parent surfaces */
  --tap-kid:64px;      /* kid surface primary actions */
  /* motion (respects prefers-reduced-motion below) */
  --ease:cubic-bezier(.33,1,.68,1); --dur-1:120ms; --dur-2:220ms;
  /* the six drawn-avatar colours, bit for bit assets/guardian/guardian.css's
     own six (kid-parity-ports Design 4). Theme invariant, same as there --
     assets/guardian/test/check-avatar-parity.mjs fails if the two drift. */
  --kid-teal:#177e78; --kid-coral:#bb4f2e; --kid-plum:#7c4d8f;
  --kid-sea:#2f6aa0; --kid-moss:#5c751c; --kid-rose:#b04a6e;
}

/* ---- FOREST & BUTTER (the wall's one committed world) -------
   Jeff's pick, 2026-09-01, from the variants board: scheme 3 ("Forest &
   Butter") replaces both the light theme and the amber-on-navy dark theme.
   The kid wall no longer follows the OS theme -- one world, day and night,
   so the surface a toddler learns is the surface they always get. Ember &
   Glow (#c93a06/#ff9346) stays the LOGO's pair only; the wall's own accent
   is butter #ffe08a on deep forest greens. */
:root{
  color-scheme:dark;
  --bg:#12261d;
  --surface:#1e3a2c;
  --surface-raised:#1e3a2c;
  --surface-sunken:#0c1a13;
  --line:#2c4d3a;
  --line-strong:#37604a;
  --ink:#eaf6ee;
  --ink-soft:#cfe8d8;
  --ink-faint:#8fb39e;
  --brand-fill:#ffe08a;
  --brand-fill-ink:#3a2f07;
  --brand-text:#ffe9ab;
  --focus:#8fe3ae;
  --shadow-1:0 1px 3px rgba(0,0,0,.35);
  --shadow-2:0 6px 20px rgba(0,0,0,.45);
  --scrim:rgba(3,10,7,.6);
}

/* ---- Base ---------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:var(--text-m);line-height:var(--leading);min-height:100vh}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}