/* ============================================================================
   PLAY BREAK — DESIGN TOKENS
   The single source of truth for spacing, type, radius, shadow and colour.
   Nothing in styles.css or the activities should hard-code a colour or a size;
   they all reference a token from here, so Calm mode and Colourful mode are a
   one-attribute swap rather than a hunt through the stylesheet.

   Canvas cannot read CSS variables, so the same palette is mirrored in
   settings.js as PALETTE. If you change a scene colour here, change it there.
   ============================================================================ */

:root{
  /* ---- spacing: a 4px scale ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ---- radius: everything is rounded, nothing is sharp ---- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* ---- soft 2.5D depth. A solid offset "lip" plus a diffuse shadow reads as
          a moulded toy rather than a flat rectangle. ---- */
  --lip-1:0 3px 0;  --lip-2:0 5px 0;  --lip-3:0 7px 0;
  --shadow-1:0 2px 6px rgba(38,32,60,.10);
  --shadow-2:0 6px 18px rgba(38,32,60,.14);
  --shadow-3:0 14px 34px rgba(38,32,60,.18);

  /* ---- type ---- */
  --font-ui:'Comic Sans MS','Chalkboard SE',"Trebuchet MS",Arial,sans-serif;
  --t-xs:12px; --t-sm:14px; --t-md:17px; --t-lg:21px;
  --t-xl:27px; --t-2xl:36px; --t-3xl:52px;
  --lh-tight:1.2; --lh:1.55;

  /* ---- touch targets. WCAG asks 44px; children with motor differences do
          better with more, so the floor here is 56 and controls are 64. ---- */
  --tap-min:56px; --tap-ctrl:64px;

  /* ---- motion. Every transition reads its duration from here, so Still mode
          can zero them all at once (see [data-motion="still"] below). ---- */
  --dur-fast:120ms; --dur:220ms; --dur-slow:420ms;
  --ease:cubic-bezier(.34,1.24,.64,1);

  /* ================= COLOURFUL (default) ================= */
  --ink:#2b2740;
  --ink-soft:#5d5772;
  --paper:#fdf8f0;
  --surface:#ffffff;
  --surface-2:#f4eee4;
  --line:#e4dacb;
  --lip:#ded3c2;

  --brand:#2f7d95;
  --brand-deep:#22606f;
  --brand-tint:#e6f2f6;

  --go:#3aa76d;      --go-deep:#2c8354;
  --warn:#e0932c;    --warn-deep:#b8741c;
  --alert:#d2504c;   --alert-deep:#ad3f3c;

  --toy-red:#e0625f;  --toy-blue:#4a95d6;  --toy-amber:#f7d63f;
  --toy-green:#63b95c; --toy-purple:#a077d4; --toy-teal:#4fbdae;
  --toy-pink:#e089ab;

  --sky-1:#cfe9f7; --sky-2:#e8f4fb;
  --ground:#cfe3bd; --ground-2:#bcd6a8;
  --room-wall:#fbeedd; --room-floor:#e2cbab;

  --focus:#1b6ef3;   /* deliberately NOT a palette colour, so focus always reads */
}

/* ================= CALM =================
   Not "grey". Desaturated and lower-contrast between elements, while KEEPING
   text contrast high — a calm palette that made text harder to read would trade
   one accessibility problem for another. */
:root[data-appearance="calm"]{
  --paper:#f6f4f0;
  --surface:#ffffff;
  --surface-2:#eeebe5;
  --line:#ded9d0;
  --lip:#d8d2c8;

  --brand:#5f8593;  --brand-deep:#4a6b77;  --brand-tint:#eaf0f2;
  --go:#5f9b78;     --go-deep:#4b7c60;
  --warn:#c39a5f;   --warn-deep:#9d7a45;
  --alert:#bd7d7b;  --alert-deep:#9c6260;

  --toy-red:#c8817e;  --toy-blue:#7fa4c4;  --toy-amber:#dcc46e;
  --toy-green:#8bb383; --toy-purple:#a795c4; --toy-teal:#82b3ab;
  --toy-pink:#c9a3b4;

  --sky-1:#dfe8ee; --sky-2:#eef3f6;
  --ground:#d3ddc9; --ground-2:#c2cfb6;
  --room-wall:#f3eee6; --room-floor:#ded2c0;
}

/* ================= MOTION =================
   Still mode zeroes every CSS transition and animation. The canvas honours the
   same setting separately through settings.motionScale(), so "Still" really is
   still everywhere — not just in the DOM. */
:root[data-motion="still"]{
  --dur-fast:0ms; --dur:0ms; --dur-slow:0ms;
}
:root[data-motion="still"] *,
:root[data-motion="still"] *::before,
:root[data-motion="still"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
:root[data-motion="gentle"]{
  --dur-fast:180ms; --dur:340ms; --dur-slow:620ms;
  --ease:cubic-bezier(.4,.0,.2,1);   /* no overshoot in Gentle */
}

/* The OS setting is a floor, not a suggestion: if the child's device asks for
   reduced motion we damp everything even before they open our own panel. */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0ms; --dur:0ms; --dur-slow:0ms;
    --ease:linear;
  }
  :root *,:root *::before,:root *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}