/* ============================================================
   tokens.css — Variables de diseño (paleta + lenguaje visual)
   Fuente: CLAUDE.md › UX y diseño
   ============================================================ */
:root {
  /* Color */
  --bg:      #080810; /* negro azulado profundo */
  --surface: #0f0f1a; /* tarjetas, paneles */
  --cyan:    #00e5ff; /* acento primario */
  --violet:  #bf5af2; /* acento secundario */
  --green:   #39ff14; /* éxito */
  --red:     #ff2d55; /* fallo */
  --crimson: #e8677a; /* acento Velka — rojo pastel */
  --text:    #e8e8f0; /* texto principal */
  --muted:   #4a4a6a; /* texto secundario */
  --border:  #1a1a2e; /* borde sutil */
  --gold:    #ffcf4a; /* botín / tesoro (panel de loot de boss) */
  --steel:   #b4bacb; /* gris acerado — acento del boss El Péndulo (fondo grisáceo) */

  /* Forma — corte diagonal anime/mecha */
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));

  /* Layout */
  --wrap: min(1120px, 92vw);

  /* Tipografía */
  --font-display: "Orbitron", sans-serif;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-dseg: "DSEG7 Classic", "Orbitron", monospace; /* display 7 segmentos (reloj) */
}