/* Storybook design tokens.
   World: a picture book on a tablet. Painted landscapes behind paper tags, gouache-coloured buttons, plum ink.
   Button variants: sun = the primary next step (one per screen), sky = secondary, ghost = leave or cancel.
   Spacing is a 4pt grid, there are three corner radii plus pills, shadows are tinted plum and soft.
   Dark mode lives only in the prefers-color-scheme block below; components that need a dark-only rule write
   @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .x{…}} and never a [data-theme=dark] block. */
/* Fonts are self-hosted from fonts/ (SIL OFL 1.1, licences beside them) so no request leaves the device.
   shortcut: shipped as TTF because no woff2 converter was allowed here, convert to woff2 (about 40% smaller) when one is. */
@font-face{font-family:'Lalezar';src:url('fonts/Lalezar-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Readex Pro';src:url('fonts/ReadexPro.ttf') format('truetype');font-weight:160 700;font-style:normal;font-display:swap}
:root{
  /* ink and paper; --shade is the plum shadow as RGB channels so every shadow can take its own alpha */
  --shade:45 42 74; --hi:.55;
  --ink:#2d2a4a; --ink-2:#5b5882; --paper:#fffefb; --paper-2:#f3f0ff; --line:rgb(var(--shade)/.12); --veil:rgba(255,255,255,.72);
  /* gouache colours, each with a deep shade used for edges, shadows and behind white glyphs */
  --sun:#ffc83d; --sun-d:#c98a00; --sun-dd:#a86a00; --sky:#58a8ff; --sky-d:#2f7fe0; --coral:#ff7a6b; --coral-d:#d4483f; --rose:#ff8fb3; --rose-d:#d1587f;
  --teal:#27b5a6; --teal-d:#12806f; --lilac:#9b8cff; --lilac-d:#6a59d3; --leaf:#58c06f; --leaf-d:#2c8f48; --tang:#ff9f43; --tang-d:#cf6f12;
  --gold:var(--sun); --gold-d:var(--sun-d); /* gold is an alias of sun for one release */
  --good:#1f8a4c; --good-bg:#d9f5e3; --bad:#b8324a; --bad-bg:#ffe2e8; --lock:#dedaf0; --sel:#fff0b8; --sel-ring:var(--teal-d);
  --title:var(--coral-d); --focus:#2d2a4a; --focus-halo:#fff;
  /* fixed in both themes: ink on bright gouache fills, and the result ribbon (white on it is 5.3:1) */
  --on-c:#2d2a4a; --ribbon:#c23b33; --ribbon-d:#93261f;
  /* land colours (set per land with --lc) */
  --lc:var(--sky);
  /* the sky behind the painted scene, seen only while a scene image loads */
  --app-bg:#7ec8ff;
  /* type: a chunky storybook display face and a highly readable UI face, both with Arabic and Latin */
  --font-display:'Lalezar','Comic Sans MS',system-ui,sans-serif;
  --font-ui:'Readex Pro',system-ui,sans-serif;
  --fs-xs:.875rem; --fs-sm:.95rem; --fs-md:1.1rem; --fs-lg:1.4rem; --fs-xl:2rem; --fs-2xl:3rem;
  /* game pieces (answers, letters, emoji): three sizes plus the hero number */
  --fs-piece-sm:1.6rem; --fs-piece:2.4rem; --fs-piece-lg:3.2rem; --fs-hero:4.8rem;
  /* spacing: 4pt grid; --tap is the smallest thing a child taps */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --gutter:max(var(--s4),env(safe-area-inset-left)); --tap:64px;
  /* corner radii: three steps and pills */
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  /* depth */
  --sh-1:0 1px 0 rgba(255,255,255,.8) inset,0 2px 4px rgb(var(--shade)/.1),0 8px 16px -8px rgb(var(--shade)/.3);
  --sh-2:0 1px 0 rgba(255,255,255,.8) inset,0 4px 8px rgb(var(--shade)/.1),0 18px 30px -14px rgb(var(--shade)/.4);
  --sh-press:0 2px 4px -2px rgb(var(--shade)/.4);
  /* the toy-button lip: resting depth for big and small pieces, and the depth left when pressed (the piece sinks by the difference) */
  --lip-h:6px; --lip-h-sm:4px; --press:2px;
  /* gouache material: the pressed bottom lip, the enamel gloss, the white enamel ring, the die-cut sticker edge */
  --bevel:inset 0 -5px 0 rgb(var(--shade)/.16),inset 0 2px 0 rgba(255,255,255,var(--hi));
  --bevel-sm:inset 0 -3px 0 rgb(var(--shade)/.2);
  --enamel:radial-gradient(circle at 32% 26%,rgba(255,255,255,var(--hi)),rgba(255,255,255,0) 46%);
  --ring-in:inset 0 0 0 3px rgba(255,255,255,.7);
  --art-drop:drop-shadow(0 3px 2px rgb(var(--shade)/.3)); /* contact shadow under a 3D icon; follows the theme's shade */
  --sticker-fx:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 4px rgb(var(--shade)/.3));
  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --t-fast:120ms; --t-ui:220ms; --t-move:320ms;
  --t-shake:450ms; --t-pop:400ms; --t-fill:300ms; --t-loop:1.8s; --t-drift:40s; /* a wrong-answer shake, a right-answer pop, a meter filling, one breath of an idle loop, the scene's slow drift */
}
/* the picture book at dusk: warm plum paper, a static dim over the scene (scene.css #scene::after), locked things recede */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --shade:8 6 28; --hi:.22;
    --ink:#f3f1ff; --ink-2:#c5c2e8; --paper:#2b2847; --paper-2:#3a365e; --line:rgba(255,255,255,.14); --veil:rgba(38,34,72,.84);
    --lock:#221f3b; --sel:color-mix(in srgb,var(--lilac) 25%,var(--paper)); --sel-ring:var(--teal); --good:#7be0a0; --good-bg:#1f6b43; --bad:#ff9aaa; --bad-bg:#7a2f3a;
    --title:var(--coral); --focus:#fff; --focus-halo:#2d2a4a; --scene-dim:rgba(24,20,64,.38); --app-bg:#2a2f5e;
    --sh-1:0 2px 4px rgba(0,0,0,.3),0 8px 16px -8px rgba(0,0,0,.5); --sh-2:0 4px 8px rgba(0,0,0,.3),0 18px 30px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}