/* Part of Survival Language — see index.html for load order.
   All colors live in tokens.css; this and the other files below only use
   var(--...) references, never raw hex, so a purchased theme (js/store.js
   applyThemeSkin) or dark mode recolors everything without touching CSS. */

  :root{
    /* ---- Color system v2 (Sofia's design pass, see DEPLOY.md) ----
       Three brand colors with a clear job each instead of six competing ones:
       pink = action/brand (buttons, active states), purple = learning/progression
       (hero gradient, decorative), teal = Georgian/knowledge/secondary accent
       (gradient partner, fact/trainer category accents). Green/red/gold stay purely
       semantic (success, error, reward) — teal no longer doubles as "correct answer"
       so it never competes with the actual success color.
       --gold-text / --hero-b-text are darker, AA-contrast-safe variants of --gold /
       --hero-b for when those colors sit on small body text rather than an icon or a
       large background — the base --gold/--hero-b stay vivid for icons/gradients/
       borders, where WCAG's lower non-text-contrast bar applies instead. */
    --bg:#F6F7F5; --surface:#FFFFFF; --surface-2:#EEEFEA; --border:#DEE1DB;
    --ink:#14262F; --ink-soft:#4F6A73; --ink-faint:#5A757D;
    --accent:#E0005A; --accent-hover:#B8004A; --accent-ink:#FDF3F7; --accent-2:#E8836F;
    --success:#127A46; --success-soft:#E1F5EA; --success-ink:#F4FBF7;
    --gold:#BA8600; --gold-soft:#FBF1D6; --gold-text:#8F6300;
    --error:#C23A3F; --error-soft:#F8E2E0; --error-ink:#FDF3F1;
    --energy:#127A46; --energy-soft:#E1F5EA; --energy-empty:#C23A3F;
    --shadow:rgba(20,38,47,.14); --ring:rgba(224,0,90,.35);
    --hero-a:#5D3FD3; --hero-b:#12C9BE; --hero-b-text:#0A7D74;
    /* --category-a/-b/-b-text: the SAME purple/teal, but a fixed identity for
       Алфавит ("learning" = purple) and Факты/Тренажёры-Числа ("Georgian
       knowledge" = teal) — see every #alpha-entry / #facts-entry / .fact-card
       / .alpha-tile.done / .trainer-tile[data-entry] rule below. Split out
       from --hero-a/-b (Sofia, kid personal-skin round 2) because those two
       started doing double duty: "the gradient on MY card" (Home hero,
       profile hero, streak modal — meant to shift with a kid's personal
       colour) AND "which section this content belongs to" (meant to stay
       fixed no matter whose card it's on, same as --gold never changing for
       rewards). js/store.js applyThemeSkin() sets --category-a/-b/-b-text
       together with --hero-a/-b/-b-text for an actual purchased/equipped
       theme (buying "Ocean" recolors both, same as always) but leaves these
       three untouched for the kid gender-default skin — so Алфавит/Факты
       keep their meaning regardless of a child's personal background. */
    --category-a:#5D3FD3; --category-b:#12C9BE; --category-b-text:#0A7D74;
    /* Two-level tint tokens — a plain flat background tint for each brand color,
       so a "this card belongs to X" surface doesn't need its own color-mix() at
       every call site. -100 = the tint, the brand color itself is the "-500". */
    --pink-100:#FCE1EC; --purple-100:#ECE7FB; --teal-100:#DFF5F3;
    /* Cookie consent bar (login screen) — deliberately "dark chrome" like a
       snackbar, always contrasting against the surrounding surface regardless
       of theme, rather than blending in like an ordinary card would. */
    --cookie-bg:#1E2730; --cookie-border:#3D4A53; --cookie-text:#B0C4C9;
    --cookie-text-strong:#FF5C90; --cookie-ghost-text:#EAF4F5;
    /* ---- Award/achievement tiers (Sofia: badges should read as a "collection",
       not three identical yellow cards) — three fixed tiers cycled by index
       across XP_BADGES (see js/screens.practice.js badgeTilesHtml()): gold,
       blue, purple. Every 3rd badge lands on purple, which doubles as the
       "milestone" tier (500/3500/10000 XP) — a real fill color, not the old
       pale color-mix(gold 14%) wash, with its own dark-enough ink for text
       directly on the fill (not the app's shared --ink). */
    --badge-a-fill:#FFE9A3; --badge-a-ink:#8A5A00; --badge-a-icon:#F2A900;
    --badge-b-fill:#C9EEFF; --badge-b-ink:#0B5C79; --badge-b-icon:#12A8D9;
    --badge-c-fill:#E7DBFF; --badge-c-ink:#4B2E99; --badge-c-icon:#8A5CFF;
    --badge-locked-fill:#EEF2F3; --badge-locked-ink:#7C8A91; --badge-locked-icon:#9AAAB0; --badge-locked-border:#D7DEE1;
    /* ---- Spacing scale ----
       One small set of steps (4/8/12/16/24/32/48), used for every margin/padding/gap
       in the app instead of picking arbitrary pixel values per component. Keeps the
       rhythm between heading→body, card→card and section→section consistent without
       having to eyeball it each time — see DEPLOY.md's design-polish-pass note for
       the full reasoning. Font sizes, icon/avatar dimensions and border widths are
       NOT part of this scale — it's spacing only. */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-6:24px; --space-8:32px; --space-12:48px;
    /* ---- Radius scale ----
       Three steps: small controls/chips/icon-badges (--radius-sm), cards
       (--radius-md), hero/large feature blocks (--radius-lg). Fully-round shapes
       (avatars, pill tabs/buttons) stay 50%/999px — that's a shape, not a point on
       this scale, so it's set directly at each of those call sites instead of here. */
    --radius-sm:8px; --radius-md:16px; --radius-lg:24px;
    /* A soft, borderless way to lift a plain neutral surface off the page background
       — used instead of a hard 1.5px border on components that don't need to signal
       a state (selected/locked/error), so not every container reads as a boxed-in
       card. See the "reduce container weight" note in DEPLOY.md. */
    --shadow-soft:0 1px 2px rgba(20,38,47,.06), 0 1px 1px rgba(20,38,47,.04);
    /* ---- Motion system ----
       A handful of repeatable timings, not a per-component timing each time. Fast
       (button press, option pick) / base (card entrance, stat pop) / slow (feedback
       bar slide) cover every transition/animation in the app — see the keyframes
       themselves (lesson.css: cardIn/pickPop, shell.css: statPop) for where they're
       used. --ease-pop is a slight overshoot, reserved for "something was gained"
       moments (XP pop, correct answer) so those read a little more alive than a
       plain ease-out would. */
    --dur-fast:120ms; --dur-base:200ms; --dur-slow:250ms;
    --ease-standard:cubic-bezier(.4,0,.2,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  }
  /* "Детский профиль" — the "другой вид" from DEPLOY.md's family/child-profile note:
     a body-level flag (js/store.js applyKidMode), not a second theme system. Just
     softening the same three radius steps app-wide reaches every card/button/tile
     at once without touching a single component's CSS. */
  body.kid-mode{
    --radius-sm:11px; --radius-md:20px; --radius-lg:28px;
  }
  .kid-badge{ margin-left:var(--space-1); font-size:14px; line-height:1; }
  /* Dark mode v3 — v2 (see DEPLOY.md) tried a literally near-black base (#0B1014)
     with the accent colors at full saturation ("neon"). That measured fine on paper
     (every text/bg pairing passed WCAG's luminance-based contrast formula) but read
     poorly in practice: full-saturation magenta/purple text on near-black vibrates
     rather than sitting still for the eye — a real, well-documented gap in that
     formula, which only measures luminance and is blind to chroma — and bg/surface
     sat too close together for cards to visibly separate from the page. v3 lifts the
     base off near-black for real card separation and softens the two most-saturated
     accents (pink, purple) a shade so they read as vivid rather than glowing, while
     keeping the "own character, not light-mode-dimmed" goal intact. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12181F; --surface:#1E2730; --surface-2:#28323C; --border:#3D4A53;
      --ink:#EAF4F5; --ink-soft:#B0C4C9; --ink-faint:#93A9AF;
      --accent:#FF5C90; --accent-hover:#FF7CA8; --accent-ink:#2B0716; --accent-2:#F2A18F;
      --success:#3FCB80; --success-soft:#12301F; --success-ink:#082015;
      --gold:#F2C94C; --gold-soft:#332B12; --gold-text:#F2C94C;
      --error:#FF6B75; --error-soft:#3A1418; --error-ink:#240A0C;
      --energy:#3FCB80; --energy-soft:#12301F; --energy-empty:#FF6B75;
      --shadow:rgba(0,0,0,.5); --ring:rgba(255,92,144,.35);
      --hero-a:#8F72FF; --hero-b:#20D4C7; --hero-b-text:#20D4C7;
      --category-a:#8F72FF; --category-b:#20D4C7; --category-b-text:#20D4C7;
      --pink-100:#33172A; --purple-100:#281F47; --teal-100:#163934;
      --shadow-soft:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.26);
      --cookie-bg:#0B1015; --cookie-border:#2A343D; --cookie-text:#B0C4C9;
      --cookie-text-strong:#FF5C90; --cookie-ghost-text:#EAF4F5;
      --badge-a-fill:#4A3B12; --badge-a-ink:#FFD873; --badge-a-icon:#FFD873;
      --badge-b-fill:#123846; --badge-b-ink:#7FE0FF; --badge-b-icon:#7FE0FF;
      --badge-c-fill:#2E2050; --badge-c-ink:#C4AEFF; --badge-c-icon:#C4AEFF;
      --badge-locked-fill:#242E36; --badge-locked-ink:#7E8F97; --badge-locked-icon:#66767D; --badge-locked-border:#374249;
    }
    :root:not([data-theme="light"]) .bd-select{
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393A9AF' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
  }
  :root[data-theme="dark"]{
    --bg:#12181F; --surface:#1E2730; --surface-2:#28323C; --border:#3D4A53;
    --ink:#EAF4F5; --ink-soft:#B0C4C9; --ink-faint:#93A9AF;
    --accent:#FF5C90; --accent-hover:#FF7CA8; --accent-ink:#2B0716; --accent-2:#F2A18F;
    --success:#3FCB80; --success-soft:#12301F; --success-ink:#082015;
    --gold:#F2C94C; --gold-soft:#332B12; --gold-text:#F2C94C;
    --error:#FF6B75; --error-soft:#3A1418; --error-ink:#240A0C;
    --energy:#3FCB80; --energy-soft:#12301F; --energy-empty:#FF6B75;
    --shadow:rgba(0,0,0,.5); --ring:rgba(255,92,144,.35);
    --hero-a:#8F72FF; --hero-b:#20D4C7; --hero-b-text:#20D4C7;
    --pink-100:#33172A; --purple-100:#281F47; --teal-100:#163934;
    --shadow-soft:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.26);
    --cookie-bg:#0B1015; --cookie-border:#2A343D; --cookie-text:#B0C4C9;
    --cookie-text-strong:#FF5C90; --cookie-ghost-text:#EAF4F5;
    --badge-a-fill:#4A3B12; --badge-a-ink:#FFD873; --badge-a-icon:#FFD873;
    --badge-b-fill:#123846; --badge-b-ink:#7FE0FF; --badge-b-icon:#7FE0FF;
    --badge-c-fill:#2E2050; --badge-c-ink:#C4AEFF; --badge-c-icon:#C4AEFF;
    --badge-locked-fill:#242E36; --badge-locked-ink:#7E8F97; --badge-locked-icon:#66767D; --badge-locked-border:#374249;
  }
  :root[data-theme="dark"] .bd-select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393A9AF' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* Applies to every animation/transition added across the app (cardIn, pickPop,
     shake, xpPop, statPop, the .feedback slide, hover/active transitions — all of
     it) in one place, instead of repeating a reduced-motion fallback per rule. */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important;
    }
  }