/* Atlántico Innovación — variables del sistema de diseño.
 *
 * ESTE ES EL ÚNICO SITIO DONDE SE ESCRIBE UN COLOR. El resto de hojas y todos
 * los bloques usan estas variables. Cambiar un azul tiene que ser cambiar una
 * línea aquí, no repasar seis páginas a mano.
 *
 * Valores y ratios de contraste: ai_docs/imagen-corporativa/01-identidad-visual.md
 * §3 y §4. Están CALCULADOS (web/server/contraste_wcag.py), no estimados.
 * Desde que existe este fichero, él es el dueño de los tokens: el documento
 * 01 §8 solo apunta aquí.
 */

:root {
  /* --- Familia marino: la base --- */
  --ai-marino-950: #061A33;   /* pie, cabecera sólida, fondo profundo del hero */
  --ai-marino-900: #0A2342;   /* PRIMARIO DE MARCA: titulares, franja, hover del secundario */
  --ai-marino-800: #0F3260;   /* final del degradado del hero, tarjetas sobre marino */
  --ai-marino-700: #164480;   /* hover del botón principal sobre claro */
  --ai-marino-600: #1D5AA8;   /* enlaces y botón principal sobre claro (6,82:1 — AA) */

  /* --- Familia atlántico: el acento. atlantico-500 NUNCA lleva texto --- */
  --ai-atlantico-500: #2B7BD6;  /* líneas del horizonte, filete de tarjeta, la línea de «cómo trabajamos» */
  --ai-atlantico-400: #5B9DE6;  /* enlaces y acentos de texto SOBRE marino (5,56:1 — AA) */
  --ai-atlantico-300: #8FBDEE;  /* antetítulos sobre marino */
  --ai-cielo-200:     #BBD6F2;  /* texto secundario sobre marino (10,52:1 — AAA) */
  --ai-cielo-100:     #E3EEF9;  /* fondo de la sección «tono» (quiénes somos) */

  /* --- Neutros fríos --- */
  --ai-tinta:    #111A26;   /* TEXTO PRINCIPAL sobre claro (17,51:1) */
  --ai-gris-700: #465563;   /* texto secundario sobre claro (7,66:1 — AAA) */
  --ai-gris-500: #7D8B9A;   /* solo >= 18 px (3,48:1) */
  --ai-gris-300: #C3CDD8;   /* bordes y divisores */
  --ai-gris-100: #E8EDF3;   /* fondos de campo, filas alternas */
  --ai-gris-50:  #F5F7FA;   /* fondo de sección clara */
  --ai-blanco:   #FFFFFF;

  /* --- Semánticos: solo estados de formulario --- */
  --ai-exito: #15803D;
  --ai-aviso: #B45309;
  --ai-error: #DC2626;

  /* --- Tipografía --- */
  --ai-fuente: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ai-txt-sm: .8rem;  --ai-txt-base: 1rem;  --ai-txt-md: 1.25rem;
  --ai-txt-lg: 1.5625rem;  --ai-txt-xl: 1.9375rem;  --ai-txt-2xl: 2.4375rem;
  --ai-hero: clamp(2.5rem, 6vw, 4.25rem);

  /* --- Espaciado (múltiplos de 8) y formas --- */
  --ai-esp-1: 8px;  --ai-esp-2: 16px;  --ai-esp-3: 24px;  --ai-esp-4: 32px;
  --ai-esp-6: 48px; --ai-esp-8: 64px;  --ai-esp-12: 96px; --ai-esp-16: 128px;
  --ai-radio: 8px;  --ai-radio-sm: 4px;
  --ai-ancho: 1200px;  --ai-lectura: 68ch;
  --ai-borde: 1px solid var(--ai-gris-300);
  --ai-sombra: 0 1px 2px rgba(6, 26, 51, .06), 0 8px 24px rgba(6, 26, 51, .08);
  --ai-cabecera-alto: 76px;

  /* --- Movimiento (05 §5): entra rápido, frena suave --- */
  --ai-mov-rapido: 160ms;  --ai-mov-base: 320ms;  --ai-mov-lento: 640ms;
  --ai-curva: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 899px) {
  :root { --ai-cabecera-alto: 64px; }
}

/* PAREJAS PROHIBIDAS (medidas, no opinables — 01 §4):
 *
 *   texto BLANCO sobre atlantico-500  ->  4,28:1  FALLA para texto normal. Nunca.
 *   atlantico-500 sobre blanco        ->  4,28:1  FALLA. El azul vivo se mira, no se lee.
 *   gris-500 sobre blanco             ->  3,48:1  solo >= 18 px.
 *   texto BLANCO sobre marino-600     ->  6,82:1  AA. Es el botón principal sobre claro.
 *   atlantico-400 sobre marino-900    ->  5,56:1  AA. Es el enlace sobre marino.
 *
 * Por eso el botón principal es marino-600 y no el azul vivo, aunque el vivo
 * «llame más»: una parte de la gente no podría leerlo.
 */