/* ============================================================
   PRINCESS theme — unicorn sky
   Raw tokens mirrored from design/themes/princess/tokens.css,
   then mapped onto the semantic roles styles/base.css consumes.
   ============================================================ */

:root{
  /* ---- raw tokens (design contract) ---- */
  --sky-white:#FFFBFE; --cloud:#FFFFFF; --rose-petal:#FBB6CE; --lilac:#C9AEEF;
  --mint:#A7E8CE; --butter:#FBD86B;
  --rose-deep:#F284AC; --rose-pale:#FFE4EE; --peach:#FCC9A8; --sky-blue:#BFE1F2;
  --lilac-deep:#A784DE; --mint-deep:#7FD3B2; --gold-deep:#EFC24C;
  --cocoa:#6E4A57; --ink:#5E3E4A; --ink-soft:#A98A94;

  --rainbow:linear-gradient(100deg,#A7E8CE 0%,#BFE1F2 22%,#C9AEEF 44%,#FBB6CE 66%,#FCC9A8 84%,#FBD86B 100%);
  --gold:linear-gradient(160deg,#FDECB0 0%,#FBD86B 52%,#EFC24C 100%);
  --petal:linear-gradient(180deg,#FFE4EE 0%,#FBB6CE 100%);
  --sky:radial-gradient(60% 45% at 16% 20%,rgba(191,225,242,.55),transparent 72%),
        radial-gradient(55% 40% at 86% 12%,rgba(255,225,238,.75),transparent 72%),
        radial-gradient(60% 48% at 74% 84%,rgba(201,174,239,.40),transparent 74%),
        linear-gradient(180deg,#FFFBFE 0%,#FCF4FB 55%,#F2F8FC 100%);

  --lift-sm:0 4px 10px rgba(110,74,87,.14);
  --lift-md:0 10px 22px rgba(110,74,87,.16);
  --lift-lg:0 18px 34px rgba(110,74,87,.20);

  /* ---- semantic roles ---- */
  --bg:var(--sky);
  --surface:var(--cloud);
  --surface-alt:#F7EFF3;
  --card-bg:var(--cloud);

  --text:var(--ink);
  --text-soft:var(--ink-soft);
  --heading:var(--cocoa);

  --bw:2.5px;              /* the cartoon outline — the whole look */
  --bw-thin:2px;
  --bc:var(--cocoa);
  --bc-soft:#C6B2BA;

  --r-sm:12px; --r-md:18px; --r-lg:22px; --r-card:28px;
  --r-btn:20px; --r-btn-round:50%; --r-badge:14px; --r-check:8px; --r-pill:999px;

  --shadow:var(--lift-md);
  --shadow-lg:var(--lift-lg);

  --font-display:"Baloo 2","Chalkboard SE","Comic Sans MS",system-ui,sans-serif;
  --font-ui:"Quicksand",Avenir,"Trebuchet MS",system-ui,sans-serif;
  --font-verse:"Quicksand","Optima",Palatino,Georgia,serif;
  --font-hint:"Caveat","Snell Roundhand","Segoe Script",cursive;
  --hint-size:19px; --hint-track:0; --hint-case:none;

  --skew:0deg;             /* princess sits upright; racing leans */
  --ref-case:none;
  --btn-case:none;
  --btn-track:0;
  --ease:cubic-bezier(.34,1.56,.64,1);

  --brand-fill:var(--rainbow);
  --brand-color:transparent;
  --rule:var(--rainbow);
  --track:#F0E7EB;
  --fill:var(--rainbow);

  --accent:var(--butter);
  --accent-ink:var(--cocoa);
  --ring-w:8px;

  --badge-bg:var(--petal);
  --badge-fg:var(--cocoa);
  --chip-bg:var(--rose-pale);
  --chip-fg:var(--cocoa);

  --again-bg:var(--lilac);   --again-fg:var(--cocoa);
  --almost-bg:var(--rose-petal); --almost-fg:var(--cocoa);
  --knew-bg:var(--mint);     --knew-fg:var(--cocoa);
  --knew-glow:0 0 0 3px rgba(167,232,206,.5);

  /* A word that was said out loud and heard. Deeper than the pale mint a
     peek is ruled in, because the two must never be mistaken for each
     other: one is the child's own recall, the other is the app helping. */
  --said-rule:#3FAE85;

  --dot-todo:#F0E7EB;
  --dot-done:var(--mint);
  --dot-miss:var(--rose-petal);
  --dot-now:var(--lilac);
  --dot-glow:0 0 0 4px rgba(201,174,239,.35);

  --who-a-bg:var(--petal);   --who-a-fg:var(--cocoa);
  --who-b-bg:var(--sky-blue); --who-b-fg:var(--cocoa);

  --focus:var(--lilac-deep);

}

/* ---------- atmosphere ---------- */
/* Adelaide's answer to racing's track sweep: soft cloud puffs drifting
   behind the content, using the same near-white the cards are made of. */
.screen::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58px 21px at 12% 20%, rgba(255,255,255,.95), transparent 72%),
    radial-gradient(46px 17px at 88% 33%, rgba(255,255,255,.90), transparent 72%),
    radial-gradient(68px 24px at 76% 73%, rgba(255,255,255,.85), transparent 72%),
    radial-gradient(38px 14px at 20% 84%, rgba(255,255,255,.80), transparent 72%);
}

/* Sparkles popping in the unicorn's wake, in three of the palette's colours. */
.burst .pop{color:var(--lilac);text-shadow:0 0 10px rgba(201,174,239,.9)}
.burst .pop:nth-child(3n){color:var(--rose-deep)}
.burst .pop:nth-child(3n+1){color:var(--gold-deep)}

/* The journey map: a pastel mountain with the route winding up it. */
:root{
  --map-ground:#EAF3F7;
  --map-hill:#DCD3E8;
  --map-peak:#FFFFFF;
  --map-route:var(--rose-deep);
}

/* ============================================================
   STAGE SCENERY — the eight places on the mountain
   The journey already names somewhere to be; this is that somewhere
   actually looking different. `data-stage` on <html> follows the kid's
   journey stage, so the ground under the app changes about six times
   across a term — rarely enough to stay an event.

   Only the ground moves. The card is always white and the ink always
   cocoa, and none of the colours that *mean* something — a word said, a
   word missed, the marker, "I knew it" — are touched here. Scenery may
   change; the vocabulary may not.

   Each keeps the shape of --sky: three blooms over a pale vertical wash.
   They are pitched well past a tint, because the point is being noticed
   by a seven-year-old who last saw the app on Tuesday — but they stay
   light the whole climb, cocoa ink on top of every one. This theme is
   never a dark jewel box, least of all at night on the Cloud Stair.
   ============================================================ */

/* 1 — The Meadow. Morning, warm green, all of it still ahead. */
:root[data-stage="0"]{
  --bg:radial-gradient(62% 46% at 18% 18%,rgba(167,232,206,.85),transparent 70%),
       radial-gradient(56% 42% at 86% 12%,rgba(251,216,107,.50),transparent 72%),
       radial-gradient(64% 50% at 72% 86%,rgba(127,211,178,.45),transparent 74%),
       linear-gradient(180deg,#F6FDF4 0%,#E9F8EA 55%,#DDF2E2 100%);
  --surface-alt:#E4F5E6;
}
/* 2 — Wildflower Path. The petals the blurb promises, at full strength. */
:root[data-stage="1"]{
  --bg:radial-gradient(60% 44% at 20% 16%,rgba(251,182,206,.90),transparent 70%),
       radial-gradient(56% 42% at 84% 14%,rgba(251,216,107,.55),transparent 72%),
       radial-gradient(64% 50% at 70% 88%,rgba(201,174,239,.55),transparent 74%),
       linear-gradient(180deg,#FFF8FC 0%,#FDEAF3 55%,#F8DFEC 100%);
  --surface-alt:#FBE6F0;
}
/* 3 — Whispering Woods. Under the canopy. Cooler and a full shade darker
   than the Meadow, with the cocoa of the outlines pooling at the foot of
   it — this is the one stage that is meant to feel like shadow. */
:root[data-stage="2"]{
  --bg:radial-gradient(66% 48% at 26% 12%,rgba(127,211,178,.85),transparent 70%),
       radial-gradient(52% 40% at 84% 22%,rgba(191,225,242,.55),transparent 72%),
       radial-gradient(80% 58% at 55% 96%,rgba(110,74,87,.32),transparent 76%),
       linear-gradient(180deg,#E8F5EC 0%,#DCEEE2 52%,#CCE2D6 100%);
  --surface-alt:#D9EBE0;
}
/* 4 — The Rope Bridge. Out of the trees into canyon light: apricot, and
   the first warm ground of the climb. */
:root[data-stage="3"]{
  --bg:radial-gradient(60% 44% at 18% 20%,rgba(252,201,168,.92),transparent 70%),
       radial-gradient(58% 42% at 88% 14%,rgba(242,132,172,.48),transparent 72%),
       radial-gradient(66% 52% at 70% 88%,rgba(167,132,222,.42),transparent 74%),
       linear-gradient(180deg,#FFF7F0 0%,#FCE9DA 55%,#F6DCD4 100%);
  --surface-alt:#FAE5D8;
}
/* 5 — Crystal Falls. Halfway, and shining: the coldest, clearest water. */
:root[data-stage="4"]{
  --bg:radial-gradient(62% 46% at 22% 16%,rgba(191,225,242,1),transparent 70%),
       radial-gradient(54% 40% at 84% 26%,rgba(167,232,206,.75),transparent 72%),
       radial-gradient(70% 54% at 62% 92%,rgba(255,255,255,.95),transparent 74%),
       linear-gradient(180deg,#EFFAFF 0%,#DDF1FA 55%,#CFE9F6 100%);
  --surface-alt:#DCF0F9;
}
/* 6 — The Cloud Stair. The one stage lit from straight overhead, because
   the sky is under your feet by now and the light has nowhere else to be. */
:root[data-stage="5"]{
  --bg:radial-gradient(70% 42% at 50% -2%,rgba(255,255,255,1),transparent 66%),
       radial-gradient(58% 44% at 12% 34%,rgba(191,225,242,.80),transparent 72%),
       radial-gradient(62% 48% at 88% 84%,rgba(201,174,239,.62),transparent 74%),
       linear-gradient(180deg,#FBFCFF 0%,#EAF0FD 52%,#DEE4FA 100%);
  --surface-alt:#E7EDFC;
}
/* 7 — The Castle Gates. Stone, and the lilac the mane was always. */
:root[data-stage="6"]{
  --bg:radial-gradient(62% 46% at 20% 16%,rgba(201,174,239,.95),transparent 70%),
       radial-gradient(56% 42% at 84% 22%,rgba(167,132,222,.60),transparent 72%),
       radial-gradient(66% 52% at 70% 88%,rgba(251,182,206,.48),transparent 74%),
       linear-gradient(180deg,#FAF7FE 0%,#EEE6FB 55%,#E1D6F4 100%);
  --surface-alt:#EBE2FA;
}
/* 8 — The Throne Room. The gold that has been rationed all the way up,
   finally spent — the brightest ground of the eight, and the last. */
:root[data-stage="7"]{
  --bg:radial-gradient(66% 48% at 50% 4%,rgba(253,236,176,1),transparent 68%),
       radial-gradient(56% 42% at 14% 28%,rgba(239,194,76,.62),transparent 74%),
       radial-gradient(62% 48% at 86% 86%,rgba(242,132,172,.52),transparent 74%),
       linear-gradient(180deg,#FFFBEC 0%,#FDF0D4 55%,#F9E3DA 100%);
  --surface-alt:#FCEFD2;
}