/* ==========================================================================
   TOKENS — única fuente de valores del tema.
   Tres capas:
     1. Primitivos  → valores crudos (no se usan en plantillas).
     2. Semánticos  → lo que usan base, layout, componentes y plantillas.
     3. Componente  → se definen dentro de cada componente si hacen falta.
   ========================================================================== */

:root {
  /* ---------- 1. Primitivos ---------- */
  --navy-600: #2a3076;
  /* corporativo (Pantone 2756 C) */
  --navy-700: #242a65;
  --navy-800: #1c204d;
  --navy-900: #071243;
  --cyan-400: #41bfef;
  --mist-50: #f3f6fc;
  --white: #fff;
  /* Slate: mismo tono que el navy con la saturación a ~20 %.
     Para cuerpo de texto y secundarios; el navy queda para titulares y pesos. */
  --slate-700: #40455f;
  /* 9,4:1 sobre blanco · 8,7:1 sobre --mist-50 */
  --slate-500: #5b6078;
  /* 6,2:1 sobre blanco · 5,7:1 sobre --mist-50 */

  /* Áreas: el color base es para rellenos, isotipos y chips.
     Para TEXTO se usa siempre la variante -ink (≥ 5:1 sobre blanco y sobre --mist-50). */
  --area-asistencia: #8ba5d6;
  --area-asistencia-ink: #3f5f9e;
  --area-docencia: #2fc96b;
  --area-docencia-ink: #127a3e;
  --area-investigacion: #ffb800;
  --area-investigacion-ink: #8a5f00;
  --area-desarrollo: #f0555a;
  --area-desarrollo-ink: #c2262c;

  /* ---------- 2. Semánticos ---------- */
  --c-bg: var(--white);
  --c-bg-soft: var(--mist-50);
  --c-bg-dark: var(--navy-800);
  --c-bg-deep: var(--navy-900);
  --c-text: var(--navy-700);
  /* titulares y énfasis (pasa a blanco en contenedores oscuros, ver base.css) */
  --c-ink: var(--navy-700);
  /* navy FIJO en cualquier contexto: rellenos de botón, chips, focos */
  --c-body: var(--slate-700);
  /* párrafos, listas, cuerpo de texto */
  --c-text-muted: var(--slate-500);
  /* eyebrows, metadatos, captions (opaco: mismo resultado en cualquier fondo) */
  --c-text-inv: var(--white);
  --c-line: rgb(64 69 95 / .15);
  /* El cian NO sirve para texto sobre claro (2,1:1). CTA = texto navy sobre cian (6,2:1). */
  --c-accent: var(--cyan-400);
  --c-on-accent: var(--navy-700);
  --c-focus: var(--cyan-400);

  /* Tipografía — Inter variable.
     Escala fluida entre 360 px (mín) y 1440 px (máx), sin JS.
     Fórmula: clamp(mín, valor-a-360 + pendiente·vw, máx). */
  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: clamp(.75rem, .729rem + .093vw, .8125rem);
  /* 12 → 13 */
  --fs-sm: clamp(.875rem, .854rem + .093vw, .9375rem);
  /* 14 → 15 */
  --fs-md: clamp(.9375rem, .906rem + .139vw, 1.03125rem);
  /* 15 → 16,5 (intermedio entre sm y el antiguo 16→18) */
  --fs-menu: clamp(1.125rem, 1.042rem + .37vw, 1.375rem);
  /* 18 → 22 px · enlaces del megamenú */
  --fs-lead: clamp(1rem, .958rem + .185vw, 1.125rem);
  /* 16 → 18: entradillas y textos destacados */
  --fs-lg: clamp(1.25rem, 1.125rem + .556vw, 1.625rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);
  /* 28 → 40 px */
  --fs-xl2: clamp(2rem, 1.667rem + 1.481vw, 3rem);
  /* 32 → 48 px */
  --fs-2xl: clamp(2.25rem, 1.833rem + 1.852vw, 3.5rem);
  /* 36 → 56 px */
  --fs-3xl: clamp(2.75rem, 2.167rem + 2.593vw, 4.5rem);
  /* 44 → 72 */
  --fs-display: clamp(3.5rem, 2.667rem + 3.704vw, 6rem);
  /* 56 → 96 */

  /* Roles: las plantillas usan estos, no la escala directa */
  --fs-h1: var(--fs-2xl);
  --fs-h2: var(--fs-xl);
  --fs-h3: var(--fs-lg);
  --fs-h4: var(--fs-md);
  --fs-body: var(--fs-md);
  --fs-caption: var(--fs-xs);
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  /* Tracking por tamaño: negativo en titulares (Inter se abre a tamaños grandes), 0 en cuerpo, positivo en mayúsculas */
  --ls-display: -.035em;
  /* --fs-display, --fs-3xl */
  --ls-h1: -.03em;
  /* --fs-2xl */
  --ls-h2: -.02em;
  /* --fs-xl */
  --ls-h3: -.01em;
  /* --fs-lg */
  --ls-body: 0;
  /* h4, párrafos, botones */
  --ls-caption: .02em;
  /* pies y etiquetas en caja alta pequeña (los eyebrows llevan .08–.16em) */
  --ls-tight: var(--ls-h2);
  /* alias antiguo, no usar en código nuevo */

  /* Espacio y layout */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --sp-7: clamp(5rem, 4rem + 5vw, 9rem);
  --container: 82rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --grid-cols: 12;
  /* rejilla de referencia (la pinta .debug-grid con la tecla G) */
  --grid-gap: var(--sp-4);
  --radius-sm: .5rem;
  --radius-md: 1rem;
  --radius-pill: 999px;
  --topmenu-h: 5rem;

  /* Movimiento — main.js lee estos mismos valores para GSAP */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* Arranca rápido y frena muy despacio: paneles, cortinas y reveals grandes (el megamenú la usa) */
  --ease-glide: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .25s;
  --dur-base: .6s;
  --dur-slow: 1.1s;

  /* Isotipo como máscara: la clase .iso-mask (components/iso.css). No va aquí como url() porque
     una url() dentro de una variable se resuelve desde la hoja que la usa, no desde tokens.css. */

  /* ---------- Compatibilidad con plugins propios ---------- */
  /* pts-eventos lee estas dos (antes las ponía styleguide.css de «pts») */
  --color-primary: var(--c-text);
  --container-padding: var(--gutter);
}