/* ==========================================================================
   SEEBEK · tokens.css
   --------------------------------------------------------------------------
   FUENTE DE VERDAD del color y la tipografía de la marca.

   REGLA IMPORTANTE: ningún otro archivo debe escribir un color a mano.
   Siempre se usa var(--nombre-del-token). Si hay que cambiar un color de
   toda la web, se cambia acá y se actualiza en todas las páginas.

   Proporción visual de la marca: 70% neutro · 25% negro/grafito · 5% rojo.
   El rojo NUNCA es fondo de una superficie grande. Es señal: botón de acción,
   filete, cifra clave, isotipo.
   ========================================================================== */

:root {

  /* --- Anclas ------------------------------------------------------------ */
  --rojo:            #C8102E; /* primario: CTA, filetes, cifra clave, isotipo. Máx 5% */
  --rojo-profundo:   #8E0B20; /* hover/pressed del CTA, error */
  --negro:           #0E0F11; /* fondos institucionales, header, footer, cierres */

  /* --- Escala neutra ----------------------------------------------------- */
  --grafito:         #23272D; /* texto de cuerpo sobre claro */
  --gris-acero:      #5B646E; /* texto secundario, epígrafes (nunca < 14px) */
  --gris-niebla:     #A9B0B8; /* texto sobre negro, metadatos */
  --gris-linea:      #DDE1E5; /* reglas, bordes, tablas */
  --blanco-tecnico:  #F6F7F5; /* fondo de página */
  --blanco-puro:     #FFFFFF; /* fichas, tarjetas, tablas de datos */

  /* --- Acentos SOLO para datos (nunca decorativos) ----------------------- */
  --azul-instrumento:#17506B; /* gráficos, ROI, ejes, enlaces en documento */
  --ambar-senal:     #B87A0C; /* advertencia / riesgo operativo */

  /* --- Estados ----------------------------------------------------------- */
  --estado-critico:      #8E0B20;
  --estado-advertencia:  #B87A0C;
  --estado-ok:           #1E6B4F;
  --estado-info:         #17506B;

  /* --- Tipografía -------------------------------------------------------- */
  --font-titulo: 'Source Serif 4', Georgia, serif;
  --font-texto:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, monospace;

  /* --- Radios y geometría (sistema recto) -------------------------------- */
  --radio-boton: 2px;   /* única concesión a la curva; todo lo demás a 0px */
  --radio-caja:  0px;

  /* --- Espaciado base ---------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 72px);
  --max-ancho: 1120px;


  /* ========================================================================
     DERIVADOS
     ------------------------------------------------------------------------
     Estos tokens NO son colores nuevos: son medidas y transparencias que se
     calculan a partir de lo de arriba. Sirven para que las hojas base.css y
     components.css no tengan números sueltos repartidos por todos lados.
     ======================================================================== */

  /* Escala de espaciado vertical (múltiplos de 4px) */
  --esp-xs:  4px;
  --esp-sm:  8px;
  --esp-md:  16px;
  --esp-lg:  24px;
  --esp-xl:  40px;
  --esp-2xl: 64px;

  /* Aire vertical de una sección completa. Crece con la pantalla. */
  --esp-seccion: clamp(56px, 8vw, 104px);

  /* Medida de lectura cómoda: 60–70 caracteres, como pide el sistema. */
  --medida-texto: 66ch;

  /* Líneas y separadores sobre fondo negro (el --gris-linea es muy claro
     para el fondo oscuro, así que se usa el blanco con poca opacidad). */
  --linea-sobre-negro: rgba(255, 255, 255, 0.14);

  /* Fondo tenue para el estado "mouse encima" sobre superficies negras. */
  --hover-sobre-negro: rgba(255, 255, 255, 0.05);

  /* Anillo de foco visible para navegación por teclado (accesibilidad AA). */
  --foco: 2px solid var(--rojo);
  --foco-separacion: 3px;

  /* Transición estándar. Corta y sobria, sin rebotes ni efectos. */
  --transicion: 150ms ease;
}


/* --------------------------------------------------------------------------
   Respeto por quien pidió menos movimiento en su sistema operativo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
}