/* Hamster Hustle palette + spacing tokens.
 * Extends frontend/styles/tokens.css. Wave 3 scenes consume these instead
 * of hardcoding values. Every selector is scoped under .hh-root so HH
 * tokens never bleed into the legacy IkigaiAI tree (Wave 1 risk #5).
 */

.hh-root {
  /* ── Palette (semantic) ─────────────────────────────────────── */
  --hh-color-acorn: var(--color-pixel-warm);
  --hh-color-ally: var(--color-gold);
  --hh-color-radio: var(--color-electric-purple);
  --hh-color-meadow: var(--color-meadow-green);
  --hh-color-hamspam: var(--color-hamspam-red);
  --hh-color-rust: var(--color-rust);
  --hh-color-cream: var(--color-pixel-cream);
  --hh-color-deep: var(--color-bg-deep);
  --hh-color-terminal: var(--color-terminal-green);

  /* HUD / dialog scrim — translucent layer that grounds white text on
     painted BGs of varying brightness. */
  --hh-color-scrim: rgba(15, 14, 23, 0.72);
  --hh-color-scrim-soft: rgba(15, 14, 23, 0.45);

  /* ── Typography ─────────────────────────────────────────────── */
  --hh-font-display: var(--font-display);
  --hh-font-body: var(--font-body);

  /* ── Spacing (4px pixel grid) ───────────────────────────────── */
  --hh-space-1: 4px;
  --hh-space-2: 8px;
  --hh-space-3: 12px;
  --hh-space-4: 16px;
  --hh-space-6: 24px;
  --hh-space-8: 32px;

  /* ── Stage geometry (Lesson 1 + 12) ─────────────────────────── */
  --hh-logical-w: 800px;
  --hh-logical-h: 450px;
  /* Length / length → unit-less number (CSS Values 4). Dividing 100vw by
   * 800px gives the desktop scale factor; min() picks whichever fits the
   * tighter axis so the 800x450 stage stays fully visible. */
  --hh-stage-scale: min(calc(100vw / 800px), calc(100svh / 450px));

  /* ── Z-index scale (scene < character < HUD < cutscene) ─────── */
  --hh-z-bg: 1;
  --hh-z-decor-back: 5;
  --hh-z-prop: 15;
  --hh-z-character: 20;
  --hh-z-decor-front: 25;
  --hh-z-hud: 100;
  --hh-z-cutscene: 200;
}