/* ================================================================
   WokWord — Design Token System
   Single source of truth for fonts, colors, and key UI sizes.

   FONT RULES:
   - --font-game  (Luckiest Guy)  : all UI text at 12px and above
   - --font-label (IBM Plex Mono) : all UI text under 12px (micro-labels only)
   - --font-tile  (Montserrat)    : grid tile letters, tile point labels, word preview word

   ADDING TOKENS: add here first, then reference via var(--token) in CSS.
   Never hardcode font families, palette colors, or key sizes directly in rules.
   ================================================================ */

:root {
  /* ── Font Families ─────────────────────────────────────────────── */
  --font-game:  'Luckiest Guy', cursive;
  --font-label: 'IBM Plex Mono', ui-monospace, monospace;
  --font-tile:  'Montserrat', sans-serif;

  /* ── Font Sizes — Grid ─────────────────────────────────────────── */
  --size-tile-letter: 28px;   /* main letter rendered in each grid cell */
  --size-tile-pts:    12px;   /* point value badge in cell top-right corner */

  /* ── Font Sizes — HUD Top Bar ──────────────────────────────────── */
  --size-hud-level:       20px;  /* "Level X" in progression mode */
  --size-hud-round-name:  13px;  /* stage name: Buying / Washing / Prepping / Cooking */
  --size-hud-round-num:   22px;  /* round number inside the round pill */
  --size-hud-round-label:  8px;  /* "ROUND" and "/4" micro-labels in round pill */
  --size-hud-back:        14px;  /* Back button label */
  --size-hud-subtitle:    11px;  /* non-progression mode center subtitle */

  /* ── Font Sizes — Words Left Chip ──────────────────────────────── */
  --size-turns-num:   32px;   /* the big count number or ∞ */
  --size-turns-label:  9px;   /* "WORDS" and "LEFT" stacked micro-labels */

  /* ── Font Sizes — Score Row ────────────────────────────────────── */
  --size-score-big:    48px;  /* current score (dominant number) */
  --size-score-target: 11px;  /* "/ 1500" goal label */
  --size-score-togo:   11px;  /* "(x to go)" inline hint */

  /* ── Font Sizes — Word Preview Bar ─────────────────────────────── */
  --size-preview-word: 28px;  /* traced word rendered in Montserrat */
  --size-preview-pts:  30px;  /* word score in Luckiest Guy — fills the 44px box */

  /* ── Font Sizes — Play Info Bar (below grid) ────────────────────── */
  --size-info-label:   10px;  /* "Last word" label — sub-12px, uses --font-label */
  --size-info-word:    14px;  /* last word value */
  --size-skills-btn:   13px;  /* "✦ Skills (N)" button label */

  /* ── Play-Phase Colors ──────────────────────────────────────────── */
  /* These are the fixed cosmic palette values. Dynamic per-chapter colors
     (--ch-color, --ch-dark, --ch-light) are injected by JS at runtime. */
  --play-bg-deep:    #0d041f;
  --play-bg-mid:     #1a0840;
  --play-bg-surface: #2a1052;
  --play-border:     #5a2d8a;
  --play-text:       #c9a8ff;  /* default cosmic purple text */
  --play-gold:       #f5c842;  /* level highlights, active elements */
  --play-white:      #ffffff;  /* score number */

  /* Boss */
  --boss-color:      #ff8a65;
  --boss-deep:       #5a0a08;

  /* Status */
  --color-valid:     #4caf50;
  --color-invalid:   #e53935;
}