/* ==========================================================================
   MDV Kids — the tokens, shared by every surface.
   ==========================================================================

   One file so the television and the back office cannot drift apart. The same
   family as Hub and Services: one ground, one accent, greys that were chosen
   rather than inherited. The kid twist lives in SHAPE and MOTION — squircles,
   a springier curve — and now in the ground itself.

   THE GROUND IS LIGHT, and carries four soft drifting circles borrowed from
   the lobby kiosk, so a family walking past the children's television and the
   kiosk in the foyer sees the same church. Each season retints the circles as
   well as the gradient — which is also what fixes rule 1 below properly, since
   the circles are spread over the whole screen rather than stacked at one end.

   Two surfaces stay dark ON PURPOSE and must not follow this: el banco, which
   is pretending to be a cash machine, and el pizarrón, where light ink on a
   dark board is what carries to the back of the room.

   TWO RULES FROM THE MEMBERS APP'S SEASONS, LEARNED EXPENSIVELY:

   1. A season is a FULL-HEIGHT gradient, not a tint at the top stop. Christmas
      as pine-over-silver measured a large colour difference at the anchor and
      still looked exactly like spring, because two thirds of the screen was
      unchanged. The eye takes the average.
   2. Christmas is red INTO green. The accent stays green because --danger is
      red, and an accent that matches the danger colour makes every confirm
      button look like a delete button.

   Easter is deliberately absent. This church does not observe it.
   ========================================================================== */

:root {
  /*
   * Declared, not left to the browser to infer.
   *
   * Without `color-scheme` Chrome is entitled to apply its own auto-dark to a
   * page, and its idea of dark is a filter over colours it did not choose —
   * which on a token-driven design lands as text the same value as the thing
   * behind it. The television and the iPad are light surfaces by decision, so
   * they say so; the back office overrides this to `light dark` because it is
   * the one surface that follows the laptop.
   */
  color-scheme: light;

  /* Ground: two stops, full height. Seasons replace both. */
  --sky-top: #f8f9fc;
  --sky-bottom: #eceff5;

  /*
   * The CLOUD sky — a different thing from the two above, which are the flat
   * ground the television falls back to when kids-sky.js cannot run.
   *
   * kids-sky.js reads these three off <html> every time data-season changes,
   * so a season recolours the sky without that file knowing what a season is.
   *
   * Watch the TOP one. The screen carries --ink (#10161c) and the deeper the
   * blue, the closer that gets to unreadable: #3876ba is 3.9:1, which is the
   * floor. Every season below is lighter than that, never darker.
   */
  --cloud-sky-top: #3876ba;
  --cloud-sky-bottom: #8cbfe8;
  --cloud-tint: #fbf8f2;

  /*
   * The four drifting circles, as "r g b" triplets so the alpha can differ per
   * layer. Seasons replace all four — see the blocks below.
   */
  --blob-a: 96 165 250;
  --blob-b: 74 222 128;
  --blob-c: 244 114 182;
  --blob-d: 251 191 36;

  /* Deep enough to carry white text on a chip and to read as a colour rather
     than a highlighter on a white ground. */
  --accent: #16a34a;
  --accent-ink: #ffffff;
  --accent-wash: rgb(22 163 74 / 0.12);

  --surface: rgb(255 255 255 / 0.82);
  --surface-2: rgb(16 22 28 / 0.05);
  --hairline: rgb(16 22 28 / 0.11);

  --ink: #10161c;
  --ink-soft: #59636d;
  --ink-faint: #8b949d;

  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;

  /*
   * Grain, for dithering the background.
   *
   * A 60vw radial gradient that fades from 30% alpha to nothing crosses only a
   * handful of 8-bit values over two thousand pixels, so Chrome draws it as
   * visible concentric rings — reported as the screen looking "glitched out",
   * and it is not a loading fault at all.
   *
   * Fine noise laid over the gradient breaks the step between one value and
   * the next into a scatter the eye reads as a smooth ramp. It is the standard
   * fix, and it is what a printer does with a halftone.
   *
   * Drawn as an SVG data URI rather than shipped as a PNG: it is a few hundred
   * bytes, it needs no extra request on a television that has just woken up,
   * and it cannot 404.
   */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E");

  /* The kid twist, as numbers. Bigger radii and a springier curve than the
     staff-facing apps use — everything else is shared. */
  --squircle: 28px;
  --squircle-sm: 18px;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   `hidden` means hidden.

   `[hidden] { display: none }` comes from the USER-AGENT stylesheet, which
   ANY author rule outranks. So an element a script puts away with
   `el.hidden = true` stays on the page the moment its own class sets a
   `display` — no error, no warning, just an element that is still there.

   That is not theoretical here. Four places in these stylesheets already
   patch it one class at a time (`.pk-needs[hidden]`, `.pic-up-state[hidden]`,
   `.wz-more[hidden]`, `.wz-when[hidden]`), and the fifth was the drawer's
   scrim: a full-screen layer at opacity 0 that swallowed every tap on every
   phone, because the media query gave it `display: block` — reported
   2026-09-13 as "the buttons don't seem to be working".

   Fourteen other places in this app toggle `.hidden` from script. One rule
   makes all of them correct instead of waiting for each to be found.

   `!important` is right here and nowhere else: an element marked hidden
   should be hidden, and there is no case where a stylesheet legitimately
   wants to override that.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   Seasons. Set by the server from the date — see Domain/Kids/Season.php.
   Easter is deliberately absent; this church does not observe it.
   -------------------------------------------------------------------------- */

[data-season='fall'] {
  /* Hazier and warmer, and the clouds take the light of a low sun. */
  --cloud-sky-top: #6c8cab;
  --cloud-sky-bottom: #e3d8c6;
  --cloud-tint: #fdf4e6;
  --sky-top: #fdf6ee;
  --sky-bottom: #f5e7d6;
  --blob-a: 234 88 12;
  --blob-b: 217 119 6;
  --blob-c: 180 83 9;
  --blob-d: 250 204 21;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --accent-wash: rgb(194 65 12 / 0.12);
  --ink-soft: #6b5847;
  --ink-faint: #9c8873;
}

/* Red INTO green, the whole height. See rule 2 above — and the accent stays
   green, because --danger is red and a confirm button the colour of a delete
   button is a confirm button nobody presses. */
[data-season='christmas'] {
  /*
   * Late afternoon in December: cold blue overhead, the sun already low, and
   * the clouds catching it.
   *
   * The first attempt was a plain bright winter blue on the reasoning that the
   * snow would carry the season on its own. It did not — Ian, 2026-09-14: "too
   * plain" — for two reasons. The snow was pale blue on a blue sky and
   * effectively invisible (fixed in kids-display.css), and a sky with no warmth
   * in it anywhere is a sky, not a Christmas. Still not red and green: a maroon
   * sky reads as broken, whereas a warm horizon reads as the time of year.
   *
   * Measured: at the height the content sits this is 5.7:1 against --ink before
   * the haze and about 9:1 after it, which is where the other three sit.
   */
  --cloud-sky-top: #3d6aa8;
  --cloud-sky-bottom: #f6d7c9;
  --cloud-tint: #fde8dd;
  --sky-top: #fdf1f1;
  --sky-bottom: #eaf4ec;
  --blob-a: 220 38 38;
  --blob-b: 22 163 74;
  --blob-c: 234 179 8;
  --blob-d: 190 24 60;
  --accent: #15803d;
  --accent-ink: #ffffff;
  --accent-wash: rgb(21 128 61 / 0.12);
  --ink-soft: #5e5a58;
  --ink-faint: #918a86;
}

[data-season='spring'] {
  /* The clearest of the four. */
  --cloud-sky-top: #4f9bd6;
  --cloud-sky-bottom: #bce6f3;
  --cloud-tint: #fffdf8;
  --sky-top: #f4fbf3;
  --sky-bottom: #e6f4ea;
  --blob-a: 132 204 22;
  --blob-b: 34 197 94;
  --blob-c: 244 114 182;
  --blob-d: 56 189 248;
  --accent: #4d7c0f;
  --accent-ink: #ffffff;
  --accent-wash: rgb(77 124 15 / 0.12);
  --ink-soft: #566153;
  --ink-faint: #869080;
}