/* ==========================================================
   tokens.css — ÚNICA fuente de la identidad visual SSC.
   Paleta muestreada del logo: rojo #FF0707, negro, blanco.
   Cambiar un valor aquí cambia toda la app.
   ========================================================== */
:root {
  /* Marca */
  --ssc-rojo: #FF0707;
  --ssc-rojo-oscuro: #9F0404;      /* hover / presionado */
  --ssc-rojo-suave: #FFE9E9;       /* fondos de aviso */
  --ssc-negro: #000000;
  --ssc-carbon: #14161A;           /* superficies oscuras secundarias */
  --ssc-gris-700: #3A3F47;
  --ssc-gris-500: #6B7280;
  --ssc-gris-200: #E3E5E9;
  --ssc-gris-100: #F3F4F6;
  --ssc-blanco: #FFFFFF;

  /* Estados (siempre con texto/icono, nunca solo color) */
  --ok: #0B7A3B;
  --aviso: #B45309;
  --error: #B00020;

  /* Superficies */
  --fondo-app: var(--ssc-gris-100);
  --fondo-formulario: var(--ssc-blanco);   /* formularios SIEMPRE blancos */
  --texto: #111318;
  --texto-suave: var(--ssc-gris-700);
  --borde: var(--ssc-gris-200);
  --foco: 0 0 0 3px rgba(255, 7, 7, .45);

  /* Tipografía: pila del sistema (sin descargas). Si se agrega Inter.woff2
     en /assets/fonts, declarar @font-face en base.css y anteponerla aquí. */
  --fuente: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.75rem;

  /* Forma */
  --radio: 12px;
  --radio-sm: 8px;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.08);
  --campo-alto: 48px;              /* campos grandes para captura rápida */
  --espacio: 16px;
  --anim: 160ms;
}

@media (prefers-reduced-motion: reduce) { :root { --anim: 0ms; } }