/* Forked from demo app.css L1-33 @7aafc93 (the :root token block, html.older and the narrow-phone gap). Changes: the new tokens
   of core DESIGN §7.3 appended in a second :root block; --grape and --mint added so three/core.js COLORS has a token for every
   colour (check-tokens). Light theme only (color-scheme: light), as the demo. */
/* Animister demo — palette v3 (docs/research/kids-6-10-2026-10-19/C-design-code.md).
   Paper canvas, one coral action accent with ink labels, at most three
   functional hues in chrome (coral, cobalt, green), one signal ring.
   Layout follows the device width: phone < 640, tablet 640–959, desktop
   ≥ 960 (content up to 1200 px). Both age modes have four tabs (bottom bar
   < 960, header ≥ 960); flow screens have a back button. Nothing active
   sits in the bottom 24 px (+ safe area). */
:root {
  --paper: #F7F1E7; --card: #FFFBF3; --sand: #E9DAC3; --sand-deep: #DFCDB2;
  --ink: #181612; --muted: #63594C; --hair: #E0D6C5;
  --coral: #F45B35; --coral-deep: #AF3517; --coral-field: #FBE7DF;
  --green: #1F6B45; --cobalt: #4C63D8; --signal: #8CF03C; --night: #241E33; --butter: #F3D773;
  --font: "SF Pro Rounded", ui-rounded, "Nunito", "Varela Round", "Segoe UI Variable Display", system-ui, -apple-system, sans-serif;
  /* Type in rem, so it follows the reader's text size; muted kid text is never under 17 px. */
  --body: 1.25rem; --label: 1.0625rem; --muted-size: 1.0625rem; --radius: 24px; --tile: 20px;
  /* Child targets: 60 px or more, 16 px apart in 6-8 and 12 px in 9-10. */
  --tap: 60px; --tap-gap: 16px;
  --line: #8F8270; /* control outlines: 3.3:1 on paper (--hair is for rules only, 1.3:1) */
  /* Motion tokens (design code 4.5.1): durations are never hand-typed. calm is
     the reduced-motion fade that replaces a spring. */
  --t-micro: 180ms; --t-card: 300ms; --t-layout: 360ms; --t-pop: 450ms; --t-portal: 760ms; --t-calm: 150ms;
  --gutter: 20px; --head: 72px;
  --edge: calc(24px + env(safe-area-inset-bottom));   /* nothing active below this */
  --dock: calc(110px + env(safe-area-inset-bottom));  /* clear of the tab bar */
  --shadow: 0 6px 16px rgba(93, 63, 26, .10);
  --shadow-lift: 0 10px 24px rgba(93, 63, 26, .18);
  --press: inset 0 -5px 0 rgba(93, 63, 26, .12), inset 0 3px 0 rgba(255, 255, 255, .35);
  --spring: cubic-bezier(.34, 1.28, .64, 1);
  color-scheme: light;
}
html.older { --body: 1.0625rem; --label: 0.9375rem; --tap-gap: 12px; }
/* Under 360 px a 16 px gap would push four-across targets under 60 px. */
@media (max-width: 359px) { :root { --tap-gap: 12px; } }

/* New tokens (core DESIGN §7.3, WP0). */
:root {
  --grape: #7559B8; --mint: #A8DFC1; /* three/core.js COLORS, so every 3D colour has its token */
  /* Stage HUD pads: 96 px (72 pt), D-13. */
  --pad: 96px; --pad-gap: 14px;
  /* Chrome over the live stage ('overlay' header, HUD labels). */
  --overlay-bg: rgba(255, 251, 243, .86); --overlay-ink: var(--ink);
  /* Layers: the stage under the view, the header over both, sheets, the break card and toasts on top. */
  --z-stage: 0; --z-view: 10; --z-top: 20; --z-sheet: 50; --z-break: 80; --z-toast: 90;
  /* The D-34 portrait glow when a Real 3D body is ready to hatch, and nothing else. */
  --glow-ready: 0 0 0 4px color-mix(in srgb, var(--signal) 55%, transparent);
}