/* ============================================================================
   tokens.css — Sistema de design tokens · Global Safety Solutions
   Fuente: Brief Sección 4 (Identidad visual aplicada).

   Regla de oro: UN solo acento protagonista por sección (normalmente el rojo).
   El verde se subordina. Cargar SIEMPRE antes que styles.css / components.css.
   ============================================================================ */

:root {
  /* --------------------------------------------------------------------------
     PALETA DE MARCA
     -------------------------------------------------------------------------- */
  --azul: #1C3984;          /* Base institucional. Estructura, bloques de marca. */
  --rojo: #F42946;          /* Acento PROTAGONISTA. CTA, titular clave, dato crítico. */
  --verde: #187E0E;         /* Acento de apoyo. Confirmaciones. Nunca compite con rojo. */
  --blanco: #FFFFFF;        /* Texto y aire. */

  /* Neutro oscuro derivado del azul — lienzo industrial del hero (Sección 4). */
  --azul-900: #0E1A38;
  --azul-800: #142552;
  --azul-700: #1C3984;      /* = base, para escala coherente */

  /* Variantes de interacción (derivadas, no nuevos acentos) */
  --rojo-700: #C81E37;      /* hover/active del rojo */
  --verde-700: #0F5C08;

  /* Grises fríos para texto secundario y bordes (derivados del azul) */
  --gris-900: #0E1A38;
  --gris-700: #2C3A57;
  --gris-500: #5B6883;
  --gris-300: #B8C0D2;
  --gris-100: #EDEFF5;
  --gris-50:  #F6F7FB;

  /* --------------------------------------------------------------------------
     COLOR SEMÁNTICO (usar estos en componentes, no los hex directos)
     -------------------------------------------------------------------------- */
  --color-bg:            var(--blanco);
  --color-bg-alt:        var(--gris-50);
  --color-bg-invertido:  var(--azul-900);   /* fondos industriales oscuros */
  --color-superficie:    var(--blanco);

  --color-texto:         var(--gris-900);
  --color-texto-suave:   var(--gris-500);
  --color-texto-inv:     var(--blanco);
  --color-texto-inv-suave: var(--gris-300);

  --color-marca:         var(--azul);
  --color-acento:        var(--rojo);       /* el protagonista */
  --color-acento-hover:  var(--rojo-700);
  --color-apoyo:         var(--verde);      /* subordinado */

  --color-borde:         var(--gris-300);
  --color-borde-suave:   var(--gris-100);

  /* Overlay azul del hero sobre foto/video de campo (Sección 7.1) */
  --overlay-hero: linear-gradient(180deg,
                    rgba(14, 26, 56, 0.72) 0%,
                    rgba(14, 26, 56, 0.55) 45%,
                    rgba(14, 26, 56, 0.85) 100%);

  /* --------------------------------------------------------------------------
     TIPOGRAFÍA (Sección 4)
     Display/Titulares: Plus Jakarta Sans 700/500 · Cuerpo: Inter 400
     Self-hosted en /assets/fonts (ver fonts.css y README).
     -------------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-cuerpo:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --peso-display: 700;
  --peso-medio:   500;
  --peso-cuerpo:  400;

  /* Escala fluida (clamp) — display grande en hero (Sección 4 y 10) */
  --fs-hero:   clamp(2.6rem, 1.6rem + 4.4vw, 3.5rem);   /* ~42–56px */
  --fs-h1:     clamp(2.25rem, 1.6rem + 2.6vw, 3rem);    /* ~36–48px */
  --fs-h2:     clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);  /* ~28–40px */
  --fs-h3:     clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);  /* ~22–28px */
  --fs-subtitulo: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20–24px */
  --fs-cuerpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);  /* 16–18px */
  --fs-caption: 0.875rem;                                /* 14px */
  --fs-eyebrow: 0.8125rem;                               /* 13px etiqueta sección */

  --lh-apretado: 1.08;
  --lh-titulo:   1.18;
  --lh-cuerpo:   1.6;

  --tracking-eyebrow: 0.18em;   /* etiqueta de sección espaciada (estilo doc técnico) */
  --tracking-titulo: -0.01em;

  /* --------------------------------------------------------------------------
     ESPACIADO (aire generoso entre secciones — Sección 10)
     Escala base 8px.
     -------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Padding vertical estándar de sección (aire generoso) */
  --seccion-py: clamp(4rem, 2rem + 8vw, 8rem);

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --ancho-contenido: 1200px;
  --ancho-texto: 68ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-h: 76px;
  --header-h-compacto: 60px;   /* nav que se compacta al hacer scroll (Sección 10) */

  /* --------------------------------------------------------------------------
     RADIOS, SOMBRAS, BORDES
     -------------------------------------------------------------------------- */
  --radio-sm: 4px;
  --radio: 8px;
  --radio-lg: 14px;
  --radio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(14, 26, 56, 0.06), 0 1px 3px rgba(14, 26, 56, 0.08);
  --sombra:    0 4px 12px rgba(14, 26, 56, 0.08), 0 2px 4px rgba(14, 26, 56, 0.06);
  --sombra-md: 0 10px 24px rgba(14, 26, 56, 0.12), 0 4px 8px rgba(14, 26, 56, 0.08);
  --sombra-lg: 0 20px 48px rgba(14, 26, 56, 0.18);
  --grosor-acento: 4px;        /* bloque/barra de acento rojo (firma de marca) */

  /* --------------------------------------------------------------------------
     MOVIMIENTO (Sección 10–11) — transiciones suaves, nunca bruscas
     -------------------------------------------------------------------------- */
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-rapida: 160ms;
  --dur: 280ms;
  --dur-lenta: 520ms;

  --z-header: 1000;
  --z-cta-movil: 1100;
  --z-menu: 1200;
  --z-overlay: 1300;
}

/* Respetar prefers-reduced-motion a nivel de tokens (Sección 11–12) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur: 0ms;
    --dur-lenta: 0ms;
  }
}