/* Bright register, chosen by Xavi 2026-09-18 over the trencadis one.
   Everything below is expressed in these tokens, which is why re-skinning
   nine exercise renderers costs nothing. */
:root{
  --ground:#EAF6FF; --card:#FFFFFF; --ink:#15303F; --ink-2:#4F6D7F;
  --line:rgba(21,48,63,.13);
  --sea:#1FA7E1; --sea-2:#1589BC; --sea-soft:rgba(31,167,225,.13);
  --ok:#5FBF55; --ok-soft:rgba(95,191,85,.16);
  --no:#F2767B; --no-soft:rgba(242,118,123,.16);    /* coral: not right, not alarming */
  --gold:#FFB356;
  --grape:#BF95EC; --slate:#9EA0F3; --downy:#3FBFBC; --rose:#FB96BB;
  /* THE cartoon edge. --btn is the surface a raised control is painted in and
     --sink-d is how deep its edge sits; a button sets --btn and the shared
     rule at the end of ui.css mixes the edge from it.
     The FORMULA CANNOT LIVE HERE. A custom property whose value contains
     var() is resolved where it is DECLARED, not where it is used - so a
     --sink defined on :root would forever mix :root's --btn and every button
     would get the same grey edge whatever it set. Measured, not assumed. */
  --btn:var(--card); --sink-d:4px;
  /* for decorative slabs that are not buttons (.chip-t, .teach-pet, .start).
     --sink-s is the same edge at chip depth, for the small ones (.node-l). */
  --sink:0 4px 0 color-mix(in srgb,var(--card) 72%,var(--edge-mix));
  --sink-s:0 2px 0 color-mix(in srgb,var(--card) 72%,var(--edge-mix));
  /* game chrome (2026-09-18): ink on a level colour, glass pills, tinted
     node edges, the streak flame, gold that reads as text, locked discs,
     and the crest terracotta for C1 */
  --on-c:#15303F; --glass:rgba(255,255,255,.28);
  --edge-mix:#15303F; --edge:rgba(21,48,63,.28);
  --flame:#D9631A; --gold-ink:#9A5A08; --terra:#E8703F;
  --lock:#C3D3DF; --lock-ink:#6E8799; --lock-edge:#A9BCCB;
  /* senyera yellow as the accent (Xavi, 2026-09-18); red is kept for
     cancel/delete only. --road is the solid band the path discs sit on. */
  --accent:#F9C74F; --accent-ink:#5C4300; --accent-soft:rgba(249,199,79,.24);
  /* The road under the path nodes. --road-w is in USER UNITS (the road svg
     is a fixed 300px box with a matching viewBox), --road-o is the only
     part that differs per theme - see the dark block. */
  --road:#86A8BF; --road-w:14; --road-o:.85;
  /* --on-accent-soft: text on a TINTED accent surface, paired per theme.
     --paper: white in both themes, for a button that sits on a level colour. */
  --on-accent-soft:#5C4300; --paper:#FFFFFF;
  /* Paired tones for every tinted surface, and the one red (delete/cancel only). */
  --on-sea-soft:#0F5A7C; --on-ok-soft:#2E7A28; --on-no-soft:#B3383F; --sea-ink:#0F5A7C;
  --gold-soft:rgba(255,179,86,.18);
  --danger:#D64550; --danger-soft:rgba(214,69,80,.12); --on-danger-soft:#8A1F27;
  --display:"Nunito",system-ui,-apple-system,sans-serif;
  --ui:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  /* ── scales (docs/design-system.md). Theme-independent, so declared once.
     New rules take a value from here or justify a new step; they do not
     invent a number. Radii in ui.css are already snapped to these. ── */
  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:32px; --r-pill:999px;
  --t-3:.72rem; --t-2:.8rem; --t-1:.9rem; --t0:1rem; --t1:1.15rem; --t2:1.3rem; --t3:1.5rem; --t4:2rem; --t5:2.6rem;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.8rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  --bw:1.5px; --bw-hi:2px;

    /* ── the mascot (app/mascot.js) ──
       Senyera: warm gold leaning orange, soft red cheeks (Xavi 2026-09-19).
       These sit ON THE MASCOT'S BODY, not on the page, so they are the same in
       both themes - only --m-spark and --m-sweat sit on --ground and are
       redefined in the dark block below.
       Note --m-cheek is a SOFT red and is decorative. It does not break "red is
       reserved for cancel/delete" (§4g), which is a rule about UI affordances;
       nothing about a blush invites a tap. */
    --m-body:#F5BF3C; --m-ink:#15303F; --m-white:#FFFFFF;
    --m-shade:#CC9A2B;              /* the sunken edge, --m-body darkened */
    /* blush, tongue, AND the egg's speckles: those were half sky blue until
       2026-09-19, and blue on gold is the one pairing in this palette that
       fights. They are all this red now, told apart by opacity. */
    --m-cheek:#E2574C;
    --m-eyeline:#15303F; --m-eyeline-o:.55;
    /* the two that land on the page */
    --m-spark:#E8703F; --m-sweat:#2E8BC0;
}
:root[data-theme=dark]{
  --ground:#101C2A; --card:#1A2A3C; --ink:#E8F3FA; --ink-2:#93AFC4;
  --line:rgba(232,243,250,.15);
  --sea:#45BDEE; --sea-2:#7AD2F5; --sea-soft:rgba(69,189,238,.16);
  --ok:#6FD265; --ok-soft:rgba(111,210,101,.18);
  --no:#FF8F94; --no-soft:rgba(255,143,148,.18);
  --gold:#FFC073;
  --grape:#AE72E8; --slate:#8B8DF2; --downy:#4FD3D0; --rose:#FCA9C7;
  /* --sink needs no dark value: --edge-mix flips to black just below. */
  --on-c:#101C2A; --glass:rgba(255,255,255,.22);
  --edge-mix:#000000; --edge:rgba(0,0,0,.45);
  --flame:#FF9A5C; --gold-ink:#FFC880; --terra:#F5906A;
  --lock:#34506B; --lock-ink:#9DB6CC; --lock-edge:#22364A;
    --accent:#FFD166; --accent-ink:#4A3600; --accent-soft:rgba(255,209,102,.2);
    /* Solid, it read as a structural element rather than as a path. */
    --road:#2F4A63; --road-o:.5;
    --on-accent-soft:#FFD166; --paper:#FFFFFF;
    --on-sea-soft:#45BDEE; --on-ok-soft:#6FD265; --on-no-soft:#FF8F94; --sea-ink:#45BDEE;
    --gold-soft:rgba(255,192,115,.2);
    --danger:#FF7B84; --danger-soft:rgba(255,123,132,.16); --on-danger-soft:#FFB3B8;

    /* the mascot's own body colours are theme-independent; only what it throws
       onto the ground needs to change */
    --m-spark:#FFB356; --m-sweat:#6FC4E8;
}