/* =========================================================
   Tokens: paleta, tipografías, medidas y curvas
   Recreativa de los 90. Cambia aquí colores y fuentes de toda la web.
   ========================================================= */

:root {
  /* Paleta de recreativa */
  --ink: #07050f;
  --night: #0d0a1f;
  --navy: #0f1a6e;
  --blue: #2b3fd6;
  --gold: #ffd23f;
  --gold-deep: #c77d00;
  --orange: #ff7a1a;
  --red: #d01f25;        /* fondos con texto crema (≥ 4.5:1) */
  --red-bright: #ff5a5f; /* texto rojo sobre fondo oscuro */
  --magenta: #ff4f93;
  --cyan: #3fd8e6;
  --lime: #9be15d;
  --cream: #fff6e0;

  --text: #f6f2ff;
  --text-muted: #c9c3e6;
  --text-dim: #9a93bf;

  --f-pixel: "Silkscreen", ui-monospace, monospace;
  --f-display: "Bungee", "Arial Black", system-ui, sans-serif;
  --f-body: "Chakra Petch", "Segoe UI", system-ui, sans-serif;

  /* Silkscreen: pixel de 8 bits con acentos en mayúsculas (Á É Í Ó Ú Ñ).
     Es baja de ojo: nunca por debajo de 14 px */
  --px-2xs: .875rem;  /* 14 px: etiquetas, HUD, pies */
  --px-xs: .9375rem;  /* 15 px: botones, menús */

  --hud-h: 64px;
  --controls-h: 64px;
  --gutter: clamp(16px, 4vw, 48px);

  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 120ms;
  --dur-hover: 160ms;

  color-scheme: dark;
}