/* ==========================================================================
   Industrial AI Academy — Tokens de marca
   Fuente: Manual de identidad de marketing v1 (16-ago-2026)
   brand/_originales_marketing/2026-08-16_Manual-identidad-Industrial-AI-Academy_v1.pdf
   sha256 c35ac2732d9746ab0357211d78abad93b4a689310dd053a31a2af67ac015e35c

   NO editar valores marcados [MANUAL] sin una versión nueva del manual.
   Los valores [DERIVADO] los hemos calculado nosotros para cubrir casos que
   el manual no resuelve (contraste WCAG sobre fondos oscuros). Documentados
   en brand/BRAND.md.
   ========================================================================== */

:root {
  /* ---- Paleta principal [MANUAL] ------------------------------------- */
  --iaa-blanco:        #F2F2F2;  /* Blanco técnico   — fondo principal, 60 % */
  --iaa-navy:          #192C4A;  /* Navy institucional — autoridad,     20 % */
  --iaa-grafito:       #1E252B;  /* Grafito técnico  — texto largo,     10 % */
  --iaa-teal:          #0A7890;  /* Teal IA aplicada — acento,           7 % */
  --iaa-gris:          #98A0AB;  /* Gris de soporte  — secundario,       3 % */
  --iaa-blanco-puro:   #FFFFFF;

  /* ---- Derivados de accesibilidad [DERIVADO] -------------------------- */
  /* El teal del manual sobre navy da 2.73:1 → NO cumple WCAG AA.
     Estos dos tonos mantienen la tonalidad (H 190.7) y sí cumplen.        */
  --iaa-teal-sobre-oscuro: #0FAFD2;  /* acentos/enlaces sobre navy  5.39:1 AA  */
  --iaa-teal-texto:        #085F72;  /* texto teal sobre claro      7.27:1 AAA */

  /* ---- Roles semánticos ---------------------------------------------- */
  --iaa-fondo:              var(--iaa-blanco);
  --iaa-fondo-alt:          var(--iaa-blanco-puro);
  --iaa-fondo-oscuro:       var(--iaa-navy);
  --iaa-texto:              var(--iaa-grafito);
  --iaa-texto-titular:      var(--iaa-navy);
  --iaa-texto-suave:        #5A6472;             /* [DERIVADO] 6.4:1 sobre blanco  */
  --iaa-texto-sobre-oscuro: var(--iaa-blanco-puro);
  --iaa-texto-suave-oscuro: var(--iaa-gris);     /* 5.30:1 sobre navy — AA         */
  --iaa-acento:             var(--iaa-teal);
  --iaa-borde:              #D8DCE2;             /* [DERIVADO] gris al 35 %        */
  --iaa-borde-oscuro:       #2E4266;             /* [DERIVADO] navy aclarado       */

  /* ---- Tipografía [MANUAL] -------------------------------------------- */
  /* Sora: Thin 100 · Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700
     Helvetica Neue como alternativa de sistema.                            */
  --iaa-font: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --iaa-peso-thin:     100;  /* titulares editoriales de gran formato        */
  --iaa-peso-light:    300;  /* entradillas y mensajes aspiracionales        */
  --iaa-peso-regular:  400;  /* textos de lectura                            */
  --iaa-peso-medium:   500;  /* navegación, etiquetas, datos, UI             */
  --iaa-peso-semibold: 600;  /* subtítulos, botones, CTA                     */
  --iaa-peso-bold:     700;  /* titulares principales y cifras clave         */

  /* ---- Escala tipográfica (fluida, base 16px) ------------------------- */
  --iaa-t-xs:   0.8125rem;                              /* 13px  etiquetas   */
  --iaa-t-sm:   0.9375rem;                              /* 15px  secundario  */
  --iaa-t-base: 1rem;                                   /* 16px  cuerpo      */
  --iaa-t-md:   1.125rem;                               /* 18px  entradilla  */
  --iaa-t-lg:   clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --iaa-t-xl:   clamp(1.75rem, 1.35rem + 2.0vw, 2.5rem);
  --iaa-t-2xl:  clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);
  --iaa-t-3xl:  clamp(2.75rem, 1.7rem + 5.2vw, 4.75rem); /* hero             */

  --iaa-lh-titular: 1.12;
  --iaa-lh-texto:   1.65;
  --iaa-ls-titular: -0.02em;
  --iaa-ls-eyebrow:  0.14em;   /* versalitas tipo "INDUSTRIAL" del logotipo  */

  /* ---- Espaciado, radios y sombras ------------------------------------ */
  --iaa-sp-1: 0.25rem;  --iaa-sp-2: 0.5rem;   --iaa-sp-3: 0.75rem;
  --iaa-sp-4: 1rem;     --iaa-sp-6: 1.5rem;   --iaa-sp-8: 2rem;
  --iaa-sp-12: 3rem;    --iaa-sp-16: 4rem;    --iaa-sp-24: 6rem;

  --iaa-radio-sm: 2px;   /* la identidad es angular: radios mínimos */
  --iaa-radio:    4px;
  --iaa-radio-lg: 8px;

  --iaa-sombra:    0 1px 2px rgba(25, 44, 74, 0.06), 0 4px 12px rgba(25, 44, 74, 0.06);
  --iaa-sombra-lg: 0 2px 4px rgba(25, 44, 74, 0.08), 0 12px 32px rgba(25, 44, 74, 0.10);

  --iaa-ancho-max:  1200px;
  --iaa-ancho-texto: 68ch;
}

/* --------------------------------------------------------------------------
   Bloques sobre fondo oscuro: invierte los roles sin tocar los componentes.
   Uso: <section class="iaa-oscuro"> … </section>
   -------------------------------------------------------------------------- */
.iaa-oscuro {
  --iaa-fondo:         var(--iaa-navy);
  --iaa-fondo-alt:     #16263F;
  --iaa-texto:         var(--iaa-blanco-puro);
  --iaa-texto-titular: var(--iaa-blanco-puro);
  --iaa-texto-suave:   var(--iaa-gris);
  --iaa-acento:        var(--iaa-teal-sobre-oscuro);
  --iaa-borde:         var(--iaa-borde-oscuro);
  background: var(--iaa-fondo);
  color: var(--iaa-texto);
}