/* ============================================================
   kids-kit · tokens.css · v1.4.0
   The single token source for the kids games suite.
   Every app vendors a pinned copy of this file. Worlds change
   accent tokens only — state colors, type scale, spacing and
   measurements are shared and non-negotiable.
   Source of values: Kids Games Style Guide (D4 palette, §3
   component measurements, §4 type scale).
   ============================================================ */

/* ---- Font faces (self-hosted pool — no fifth family) ---- */
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/JosefinSans-Variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/Marcellus-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none; /* Marcellus ships one drawn weight — never fake-bold it */
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/Spectral-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/Spectral-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Theme lock: the suite renders light, always ---- */
  color-scheme: light only;

  /* ---- Font roles ----
     --font-header : the serif, used SPARINGLY — headers and identity
                     moments only: world and app headers, screen and
                     section headings, celebration and modal titles,
                     and world names on world tiles. It is never
                     stamped across a catalog of cards.
                     Marcellus — the D2 pick, settled; Spectral stays
                     self-hosted in the pool as the approved alternate
                     (--font-header-alt).
     --font-label  : Josefin Sans — chips, buttons/CTAs, pills, path
                     labels, short flavor lines. NEVER headers.
     --font-text   : Quicksand — body copy, UI labels, progress meta,
                     character/speaker names (sentence case), and
                     CARD TITLES in lists and grids. */
  --font-header: "Marcellus", "Spectral", Georgia, serif;
  --font-header-alt: "Spectral", Georgia, serif;
  --font-label: "Josefin Sans", "Quicksand", sans-serif;
  --font-text: "Quicksand", -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale (fixed — §4) ---- */
  --type-display-size: 28px;
  --type-display-weight: 400;      /* Marcellus drawn weight; Spectral uses 600 */
  --type-title-size: 20px;
  --type-title-weight: 700;        /* sans · 600 in the header serif */
  --type-body-size: 15px;
  --type-body-large-size: 16px;
  --type-small-size: 13px;         /* the floor — nothing renders smaller */
  --type-button-size: 16px;
  --type-button-weight: 700;
  --type-chip-size: 14px;
  --type-chip-weight: 700;
  --leading-body: 1.5;
  --leading-tight: 1.25;

  /* ---- Ink & surfaces ---- */
  --color-ink: #222222;
  --color-ink-secondary: #717171;
  --color-hairline: #E7E4DF;
  --color-bg: #FFFFFF;             /* game mode + cards */
  --color-bg-warm: #FAF9F7;        /* list screens: suite, world, list */
  --color-disabled-bg: #F1EFEA;
  --color-disabled-text: #9B968E;

  /* ---- State palette (shared, non-negotiable — D4) ---- */
  --color-success: #2F9E5F;
  --color-success-tint: #EAF6EF;
  --color-try-again: #C4453C;
  --color-try-again-tint: #FAECEA;
  --color-hint: #D98E2B;
  --color-hint-tint: #FBF3E4;
  --color-progress: #0E7C7B;       /* progress + interactive accent teal */
  --color-progress-tint: #EAF4F4;
  --color-star: #C9A227;           /* gold — stars only, nothing else */
  --color-selected-bg: #EAF4F4;    /* = progress tint */
  --color-selected-border: #0E7C7B;

  /* ---- World accents: accent / deep / tint (+ world gold where set) ----
     A world skin sets --world-accent, --world-deep, --world-tint
     from its row below. Accents theme chrome and art tiles only —
     never the state palette. */
  --world-root-detectives: #1E6B4F;        --world-root-detectives-deep: #14402F;        --world-root-detectives-tint: #EAF1ED;        --world-root-detectives-gold: #C9A227;
  --world-language-explorers: #8A5A33;     --world-language-explorers-deep: #5F3E22;     --world-language-explorers-tint: #F5EDE4;     --world-language-explorers-teal: #0E7C7B;
  --world-mahjong: #1F7A5C;                --world-mahjong-deep: #14523E;                --world-mahjong-tint: #EAF3EF;
  --world-logic-decoders: #0E7C7B;         --world-logic-decoders-deep: #0A5A59;         --world-logic-decoders-tint: #EAF4F4;
  --world-memory-trainers: #B4622A;        --world-memory-trainers-deep: #7E4218;        --world-memory-trainers-tint: #F8EEE3;
  --world-question-solvers: #2E6FA7;       --world-question-solvers-deep: #1F4E77;       --world-question-solvers-tint: #E9F1F8;
  --world-hub: #3A3F4A;                    --world-hub-deep: #23262D;                    --world-hub-tint: #F1EFEA;

  /* Active world — defaults to the hub neutral; a skin class or the
     host app overrides these three tokens and nothing else. */
  --world-accent: var(--world-hub);
  --world-deep: var(--world-hub-deep);
  --world-tint: var(--world-hub-tint);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- Radius scale ---- */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-world-card: 18px;
  --radius-tile: 16px;             /* tile radius — the style guide's settled GameCard tile spec (84 × 84, radius 16) */
  --radius-bubble: 18px;
  --radius-chip: 999px;

  /* ---- Component measurements (§3) ---- */
  --target-min: 48px;              /* touch-target floor */
  --btn-height: 52px;              /* primary & quiet buttons — a MINIMUM since v1.4.0: a wrapped CTA label grows the button */
  --btn-icon-size: 48px;           /* icon buttons: 48 × 48 */
  --chip-height: 36px;
  --chip-answer-height: 52px;      /* a chip used as an answer option */
  --app-header-height: 56px;
  --profile-chip-size: 40px;
  --card-tile-size: 84px;          /* GameCard art tile — 84 × 84 per the style guide (v1.2.0; the kit's v1.1.0 build landed at 88px). Carries the world's featured character, game symbol as a corner badge */
  --dot-size: 8px;
  --dot-gap: 6px;
  --progress-bar-height: 6px;
  --head-hint-size: 56px;          /* CharacterHead · hint variant */
  --head-dialogue-size: 64px;      /* CharacterHead · dialogue variant */
  --feedback-height: 28px;         /* fixed-height feedback line */
  --feedback-gap: 12px;            /* v1.1.0: guaranteed clear space between the feedback line and the pinned bottom bar, in every state */
  --wc-title-height: 50px;         /* WorldCard title slot — always reserves two lines, so the progress row never moves */
  --wc-desc-height: 39px;          /* WorldCard descriptor slot — two wrapped lines (13px × 1.5 × 2), always reserved; text wraps, ellipsis only after line two, so the progress row never moves */
  --gc-desc-height: 41px;          /* GameCard descriptor slot — two wrapped lines (13.5px × 1.5 × 2), always reserved; text wraps, ellipsis only after line two, so star rows align across cards */
  --celebration-asset-height: 120px; /* Celebration asset slot — fixed height above the stars, for the world's celebration character art */
  --shell-topbar-height: 52px;     /* a MINIMUM since v1.4.0: the bar grows when a long shell title wraps to two lines */

  /* ---- Motion ---- */
  --shake-distance: 7px;
  --transition-fast: 160ms ease;
}

/* World skins — apply one class (or set the three tokens) and every
   component re-skins. Layout never changes. */
.world-root-detectives    { --world-accent: var(--world-root-detectives);    --world-deep: var(--world-root-detectives-deep);    --world-tint: var(--world-root-detectives-tint); }
.world-language-explorers { --world-accent: var(--world-language-explorers); --world-deep: var(--world-language-explorers-deep); --world-tint: var(--world-language-explorers-tint); }
.world-mahjong            { --world-accent: var(--world-mahjong);            --world-deep: var(--world-mahjong-deep);            --world-tint: var(--world-mahjong-tint); }
.world-logic-decoders     { --world-accent: var(--world-logic-decoders);     --world-deep: var(--world-logic-decoders-deep);     --world-tint: var(--world-logic-decoders-tint); }
.world-memory-trainers    { --world-accent: var(--world-memory-trainers);    --world-deep: var(--world-memory-trainers-deep);    --world-tint: var(--world-memory-trainers-tint); }
.world-question-solvers   { --world-accent: var(--world-question-solvers);   --world-deep: var(--world-question-solvers-deep);   --world-tint: var(--world-question-solvers-tint); }
.world-hub                { --world-accent: var(--world-hub);                --world-deep: var(--world-hub-deep);                --world-tint: var(--world-hub-tint); }