/* ============================================================
   CÁPSULAS GAMIFICADAS — CONTRATO DE TOKENS (compartido entre temas)
   ------------------------------------------------------------
   Este archivo define lo que NO cambia entre temas: ritmo de
   espaciado, escala tipográfica, layout, movimiento y capas.
   Un tema (pixel, terralabs, el que siga) nunca toca esto.

   Lo que SÍ varía por tema vive en theme-<id>.css: superficies,
   tinta, "materiales"/acento, biseles, sombras, familias de
   fuente. Cada archivo de tema tiene que definir el CONTRATO
   SEMÁNTICO completo (la lista de nombres más abajo) — un tema
   nuevo no agrega nombres de token, solo les da valores distintos.

   ─── Contrato semántico que cada theme-*.css debe cumplir ───
     Superficies    --bg --bg-2 --panel --panel-2 --panel-3 --overlay
     Texto          --ink --ink-2 --muted --placeholder --ink-inverse
     Bordes/relieve --outline --frame --frame-light --bevel-light
                    --bevel-dark --line
     Materiales     --grass --grass-bright --gold --diamond --redstone
                    --amethyst --copper --iron (+ sus variantes -ink)
     Triplete RGB   --grass-rgb --gold-rgb --diamond-rgb --redstone-rgb
                    --iron-rgb            (para rgba() con alpha local)
     Semántico      --color-success --color-warning --color-info
                    --color-danger --on-danger
     Texto-sobre    --on-grass --on-gold --on-diamond --on-redstone
     Acento activo  --accent --accent-ink --on-accent
     Categorías     --cat-<id> --cat-<id>-ink (+ bloques [data-category])
     Dificultad     --diff-basico --diff-intermedio --diff-avanzado
     Fuentes        --font-display --font-body --font-pixel
     Movimiento*    --text-shadow --text-shadow-sm
     Fondo hero     --hero-bg --hero-landscape (puede ser 'none')
     Grilla         --grid-line --grid-glow
     Huecos         --inset --inset-soft
     Componente     --btn-ink (por variante) --google-btn-bg
                    --google-btn-ink --xp-fill-bg
     Relieves**     --bevel-out --bevel-in --outline-ring --frame-ring
                    --frame-ring-lg --slot-in --drop --drop-lg
                    --chip-ring (borde fino de 2px "a escala de chip":
                    tags, avatares, stat-blocks — más chico que
                    --outline-ring, que está pensado para tarjetas
                    y botones)
     Esquinas***    --radius-sm --radius --radius-lg --radius-pill
     Modal          --modal-bg --modal-bg-2 --modal-ink --modal-ink-2
                    --modal-muted --modal-border (superficie del
                    reproductor de cápsulas — ver nota más abajo)

   *  --text-shadow puede valer 'none': un tema plano no tiene por
      qué simular relieve tipográfico.
   ** Los relieves son shorthands de box-shadow: un tema sin bisel
      simplemente los define con bordes duros o 'none'.
   *** Radio de esquina. Pixel es un tema deliberadamente anguloso
       (su identidad es el bloque recto) y lo deja en 0 en los cuatro
       tamaños; cualquier otro tema define esquinas semi-redondeadas.
       --modal-* es la superficie del reproductor de cápsulas: vive
       aparte de --panel porque el contenido embebido (juegos, quizzes)
       necesita distinguirse del resto de la app siempre, sin depender
       del modo claro/oscuro activo — ver theme-*.css.
   ============================================================ */

:root {
  /* ─── Unidad pixel y escala de espaciado ─────────────────── */
  --px: 4px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --maxw: 1440px;
  --sidebar-w: 248px;
  --topbar-h: 64px;

  /* ─── Escala tipográfica ─────────────────────────────────────
     Tamaño y ritmo son estructurales; la FAMILIA es identidad de
     marca y vive en cada theme-*.css. --fs-pixel/--font-pixel es
     el rol "mono/dato" heredado del nombre original: en pixel es
     VT323, en terralabs es IBM Plex Mono — el nombre quedó pero el
     contrato es "fuente monoespaciada para cifras y metadatos".
     ------------------------------------------------------------ */
  --fs-display-lg: 22px;
  --fs-display: 16px;
  --fs-display-sm: 12px;
  --fs-display-xs: 10px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-pixel: 20px;

  --lh-tight: 1.5;
  --lh-body: 1.65;
  --ls-display: 0.04em;

  /* ─── Movimiento ─────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ─── Capas ──────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}