/* ==========================================================================
   IQSEC — Design Tokens
   Única fuente de verdad para color, tipografía, espaciado y efectos.
   No declarar valores de marca (hex, px de espaciado, etc.) fuera de este archivo.
   ========================================================================== */

:root {
  /* Color — paleta oficial */
  --color-brand-navy: #2A2559;
  --color-brand-blue: #007BDA;
  --color-brand-orange: #FF6720;
  --color-neutral-gray: #706F6F;
  --color-support-sand: #F0E3B0;
  --color-white: #FFFFFF;

  /* Color — opacidades derivadas (no crear colores nuevos, solo transparencias) */
  --color-navy-80: rgba(42, 37, 89, 0.8);
  --color-navy-50: rgba(42, 37, 89, 0.5);
  --color-navy-20: rgba(42, 37, 89, 0.2);
  --color-blue-80: rgba(0, 123, 218, 0.8);
  --color-blue-50: rgba(0, 123, 218, 0.5);
  --color-blue-20: rgba(0, 123, 218, 0.2);
  --color-orange-80: rgba(255, 103, 32, 0.8);
  --color-orange-50: rgba(255, 103, 32, 0.5);
  --color-orange-20: rgba(255, 103, 32, 0.2);
  --color-orange-12: rgba(255, 103, 32, 0.12);

  /* Variante de naranja SOLO para fondo de botón primario: ~3% más oscura que
     el naranja oficial de marca (#FF6720), para que el texto blanco en negritas
     grande cumpla el umbral de accesibilidad de 3:1 (WCAG "texto grande").
     El naranja de marca oficial (--color-brand-orange) NO se modifica y sigue
     usándose sin cambios en íconos, acentos y bordes. */
  --color-brand-orange-btn: #F7641F;

  /* Variante de azul para TEXTO (enlaces): el azul de marca (#007BDA) da ~4.3:1
     sobre blanco, insuficiente para texto pequeño (WCAG AA exige 4.5:1).
     Este tono se usa solo para texto; iconos/gráficos siguen usando --color-brand-blue,
     que ya cumple el mínimo de 3:1 para elementos gráficos. */
  --color-link-text: #0868B8;

  /* Superficies y texto */
  --surface-page: #FFFFFF;
  --surface-soft: #F6F8FC;
  --surface-dark: #171432;
  --text-primary: #2A2559;
  --text-secondary: #706F6F;
  --text-inverse: #FFFFFF;
  --border-light: rgba(42, 37, 89, 0.14);

  /* Colores funcionales de formulario (no son colores de identidad) */
  --color-success: #1E7B4D;
  --color-warning: #B7791E;
  --color-error: #C53030;

  /* Tipografía */
  --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Espaciado (base 8px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;

  /* Layout */
  --container-max: 1240px;
  --container-max-narrow: 900px;

  /* Sombras (siempre suaves, nunca dramáticas) */
  --shadow-sm: 0 4px 12px rgba(42, 37, 89, 0.08);
  --shadow-md: 0 12px 30px rgba(42, 37, 89, 0.12);
  --shadow-lg: 0 20px 60px rgba(42, 37, 89, 0.16);

  /* Transiciones (movimiento sutil, 150-300ms) */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}