/* ============================================================
   MONCHIS · tokens.css
   Variables de diseño. TODO el branding pasa por --acento.
   Cambiar el color de marca = cambiar UNA linea.
   ============================================================ */

:root {
  /* --- Superficies (modo oscuro alto contraste) --- */
  --bg:        #0e1117;   /* fondo app */
  --surface:   #171c27;   /* tarjetas, barras */
  --surface-2: #212838;   /* elementos elevados */
  --borde:     #2c3346;

  /* --- Texto --- */
  --texto:     #e8ecf4;   /* principal */
  --texto-mut: #9aa3b8;   /* secundario */

  /* --- Acento (SWAPPABLE: cambia esto y listo) --- */
  --acento:    #ff4d8d;   /* magenta arcade */
  --acento-2:  #00e0c2;   /* secundario: exito/turno */

  /* --- Semaforo --- */
  --peligro:   #ff5a5a;
  --ok:        #3ddc97;
  --aviso:     #ffd166;

  /* --- Derivados del acento (transparencias) --- */
  --acento-tenue: color-mix(in srgb, var(--acento) 18%, transparent);
  --acento-borde: color-mix(in srgb, var(--acento) 45%, transparent);

  /* --- Geometria --- */
  --radio:     14px;
  --radio-sm:  10px;
  --radio-lg:  20px;
  --gap:       12px;
  --gap-lg:    20px;
  --tap-min:   48px;      /* objetivo tactil minimo */

  /* --- Tipografia --- */
  --fuente:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulo: var(--fuente);

  --fs-xs:  0.78rem;
  --fs-sm:  0.88rem;
  --fs-md:  1rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.6rem;
  --fs-xxl: 2.2rem;

  /* --- Sombras --- */
  --sombra:    0 6px 20px rgba(0,0,0,.35);
  --sombra-sm: 0 2px 8px rgba(0,0,0,.3);

  /* --- Transiciones --- */
  --t-rapida: 120ms ease;
  --t-media:  220ms ease;
}