/* ==========================================================================
   Little Roos — design tokens
   Source of truth for colour, type, spacing and radii across the whole site
   AND every game. Nothing anywhere should carry a hardcoded hex value.

   Palette and type pairing come from the little-roos-brand skill.
   Site-only tokens are added at the bottom.
   ========================================================================== */

:root {
  /* ── Lead trio ──────────────────────────────────────────────────────── */
  --lr-teal:        #55AAA3;
  --lr-mint:        #A1D1C4;
  --lr-coral:       #E18E66;

  /* ── Supporting ─────────────────────────────────────────────────────── */
  --lr-olive:       #98A93A;
  --lr-forest:      #07352E;   /* preferred dark — use ahead of black */
  --lr-deep-teal:   #0F796F;
  --lr-pink:        #DC70A7;
  --lr-white:       #FFFFFF;

  /* ── Tints — the palette at low strength, for page and card backgrounds.
        Not brand colours in their own right; never used for type. ─────── */
  --lr-sand:        #FBF7F2;   /* the page — warm, near-white, not pale teal */
  --lr-mint-soft:   #EAF5F1;   /* mint at a whisper */
  --lr-coral-soft:  #FBE9DF;
  --lr-olive-soft:  #F0F3D9;
  --lr-pink-soft:   #F8DDEB;

  /* ── Semantic aliases ───────────────────────────────────────────────── */
  --lr-bg:                 var(--lr-sand);
  --lr-bg-card:            var(--lr-white);
  --lr-bg-dark:            var(--lr-forest);
  --lr-bg-accent:          var(--lr-mint);

  --lr-text:               var(--lr-forest);
  --lr-text-on-dark:       var(--lr-white);
  --lr-text-muted:         rgba(7, 53, 46, 0.72);   /* 0.64 was 4.3:1 on sand, under WCAG AA; 0.72 is 5.5:1 */
  --lr-text-muted-on-dark: rgba(255, 255, 255, 0.72);

  --lr-cta:                var(--lr-coral);
  --lr-cta-text:           var(--lr-white);
  --lr-cta-hover:          #D57E56;

  --lr-link:               var(--lr-deep-teal);
  --lr-link-hover:         var(--lr-teal);

  --lr-hairline:           rgba(7, 53, 46, 0.08);

  /* ── Typography ─────────────────────────────────────────────────────────
     SC Gum Kids (SickCapital) is the licensed brand display face, self-hosted
     at /fonts/scgumkids.woff2. If the file is absent the stack falls through
     to Montserrat 800, which is the approved brand fallback.
     ------------------------------------------------------------------- */
  --lr-font-display: "SC Gum Kids", "Montserrat", "Helvetica Neue", sans-serif;
  --lr-font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --lr-display-weight: 400;   /* SC Gum Kids is a single weight */

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --lr-radius-sm:   8px;
  --lr-radius-md:  16px;
  --lr-radius-lg:  24px;
  --lr-radius-xl:  32px;
  --lr-radius-pill: 999px;

  /* ── Shadows (sparingly) ────────────────────────────────────────────── */
  --lr-shadow-card: 0 10px 30px rgba(7, 53, 46, 0.10);
  --lr-shadow-pop:  0 16px 36px rgba(7, 53, 46, 0.18);

  /* ── Site-only ──────────────────────────────────────────────────────── */
  --lr-wrap:         1180px;
  --lr-gutter:       clamp(20px, 4vw, 32px);
  --lr-tap-min:      44px;   /* absolute floor, never go under */

  --lr-size-h1:      clamp(2.4rem, 5.2vw, 4.25rem);
  --lr-size-h2:      clamp(1.6rem, 3vw, 2.25rem);
  --lr-size-tile:    clamp(1.4rem, 2.4vw, 2rem);
  --lr-size-body:    1rem;       /* never smaller */
  --lr-size-small:   0.875rem;

  /* ── Talk (/talk only) ──────────────────────────────────────────────────
     The communication board colours words by type, following the Modified
     Fitzgerald Key used across AAC. These are NOT brand colours: they are a
     functional code a child learns, so the hues stay conventional (verbs are
     green on every AAC system the child will ever meet). Shades are tuned to
     sit beside Forest and Teal. `-edge` is the thick cell border, `-band` the
     label band behind the word. Never use them outside /talk.
     ------------------------------------------------------------------- */
  --talk-pronoun-edge:    #E2A91A;   --talk-pronoun-band:    #FCEFC7;
  --talk-verb-edge:       #3F9A55;   --talk-verb-band:       #DCEFDF;
  --talk-describing-edge: #3574C4;   --talk-describing-band: #DCE8F7;
  --talk-noun-edge:       #E07629;   --talk-noun-band:       #FBE2CF;
  --talk-social-edge:     #D0609C;   --talk-social-band:     #F8DDEB;
  --talk-question-edge:   #7E5CC2;   --talk-question-band:   #E9E1F6;
  --talk-negation-edge:   #CC3B3B;   --talk-negation-band:   #F8DADA;
  --talk-little-edge:     #8E9896;   --talk-little-band:     #ECEFEE;
  --talk-phrase-edge:     #0F796F;   --talk-phrase-band:     #EAF5F1;

  --talk-ground:   #F3F1EC;   /* the board — quieter than the site's sand */
  --talk-cell:     #FFFFFF;
  --talk-ink:      #07352E;
  --talk-ink-soft: rgba(7, 53, 46, 0.62);
  --talk-strip:    #FFFFFF;
  --talk-press:    rgba(7, 53, 46, 0.10);
  --talk-speak:    #07352E;       /* the Speak key */
  --talk-plate:    transparent;   /* behind a symbol; light in dark mode so black line art stays visible */
}

/* Talk has a dark board for light-sensitive children. Only --talk-* change;
   the rest of the site has no dark theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --talk-pronoun-band:    #4A3B10;
    --talk-verb-band:       #173A22;
    --talk-describing-band: #16304F;
    --talk-noun-band:       #4A2A12;
    --talk-social-band:     #47203A;
    --talk-question-band:   #2E2350;
    --talk-negation-band:   #4A1B1B;
    --talk-little-band:     #2A3331;
    --talk-phrase-band:     #0E3A35;
    --talk-ground:   #0A1F1B;
    --talk-cell:     #12302B;
    --talk-ink:      #F2F7F5;
    --talk-ink-soft: rgba(242, 247, 245, 0.66);
    --talk-strip:    #12302B;
    --talk-press:    rgba(255, 255, 255, 0.12);
    --talk-plate:    #E9EFEC;
    --talk-speak:    #0F796F;
  }
}
:root[data-theme="dark"] {
  --talk-pronoun-band:    #4A3B10;
  --talk-verb-band:       #173A22;
  --talk-describing-band: #16304F;
  --talk-noun-band:       #4A2A12;
  --talk-social-band:     #47203A;
  --talk-question-band:   #2E2350;
  --talk-negation-band:   #4A1B1B;
  --talk-little-band:     #2A3331;
  --talk-phrase-band:     #0E3A35;
  --talk-ground:   #0A1F1B;
  --talk-cell:     #12302B;
  --talk-ink:      #F2F7F5;
  --talk-ink-soft: rgba(242, 247, 245, 0.66);
  --talk-strip:    #12302B;
  --talk-press:    rgba(255, 255, 255, 0.12);
  --talk-plate:    #E9EFEC;
  --talk-speak:    #0F796F;
}

/* Both faces are self-hosted in /site/fonts/. No Google Fonts request, no
   third-party call of any kind — the CSP in _headers enforces it. */

@font-face {
  font-family: "SC Gum Kids";
  src: url("/fonts/scgumkids.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--lr-font-body);
  font-size: var(--lr-size-body);
  line-height: 1.55;
  color: var(--lr-text);
  background: var(--lr-bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

.lr-display {
  font-family: var(--lr-font-display);
  font-weight: var(--lr-display-weight);
  line-height: 1.05;
}

a { color: var(--lr-link); }
a:hover { color: var(--lr-link-hover); }

:focus-visible {
  outline: 3px solid var(--lr-coral);
  outline-offset: 3px;
}

/* Every interactive thing clears the tap floor. */
button, a.lr-cta {
  min-height: var(--lr-tap-min);
  min-width:  var(--lr-tap-min);
}

.lr-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--lr-font-body);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--lr-cta-text);
  background: var(--lr-cta);
  padding: 0.95rem 1.8rem;
  border: 0;
  border-radius: var(--lr-radius-pill);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.lr-cta:hover {
  color: var(--lr-cta-text);
  background: var(--lr-cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--lr-shadow-pop);
}
.lr-cta--ghost {
  background: transparent; color: var(--lr-forest);
  box-shadow: inset 0 0 0 2px rgba(7, 53, 46, 0.18);
}
.lr-cta--ghost:hover { background: var(--lr-white); color: var(--lr-forest); box-shadow: var(--lr-shadow-card); }
.lr-cta--white { background: var(--lr-white); color: var(--lr-forest); }
.lr-cta--white:hover { background: var(--lr-white); color: var(--lr-forest); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}