/*
 * tokens.css — Variables estructurales compartidas de games-for-kids
 *
 * Solo estructura: z-indexes, espaciado HUD, border-radius de UI compartida
 * y breakpoints de clamp. Los colores, fuentes y personalidad visual de cada
 * sección (classic, arcade, cohete) permanecen en sus :root locales.
 */
:root {
  /* ── Capas z-index ──────────────────────────────────────────────────── */
  --z-canvas:    10;   /* canvas del juego / área de juego principal    */
  --z-hud:      100;   /* barra HUD (score, vidas, timer)               */
  --z-back-btn: 110;   /* botón flotante back-to-hub                    */
  --z-float:    201;   /* puntos flotantes y feedback efímero           */
  --z-screen:   300;   /* pantallas de inicio, fin, game-over           */

  /* ── Espaciado HUD ──────────────────────────────────────────────────── */
  --hud-padding-block:  0.7rem;
  --hud-padding-inline: 1.2rem;

  /* ── Border-radius de UI compartida ─────────────────────────────────── */
  --radius-screen: 18px;   /* tarjetas de pantalla game-over / start     */
  --radius-pill:   50px;   /* botones pill (OK, Reiniciar, etc.)         */
  --radius-btn:     8px;   /* botones cuadrados con esquinas suaves      */

  /* ── Clamp — rangos de viewport ─────────────────────────────────────── */
  /* Uso: clamp(min, calc(valor-base + (max-val - min-val) * var(--clamp-ratio)), max) */
  /* O directamente con las variables de viewport en clamp():              */
  --vp-min: 320px;
  --vp-max: 768px;

  /* ── Layout desktop ─────────────────────────────────────────────────── */
  --game-max-width: 800px;   /* ancho máximo del juego en pantallas anchas */
}