/* ==========================================================================
   Vectra IA Lab — Design Tokens
   Derivados del Manual de Identidad Visual (v1.1)
   ========================================================================== */

:root {
  /* ---- Colores institucionales ---- */
  --color-azul: #1E97CE;          /* Azul principal: nodos, cursor, acentos */
  --color-azul-oscuro: #022A55;   /* Azul oscuro: títulos, texto, botones */
  --color-gris-claro: #EBEBEB;    /* Gris claro: superficies suaves, relleno marca */

  /* ---- Colores de apoyo (uso funcional, moderado) ---- */
  --color-blanco: #FFFFFF;
  --color-texto: #46515D;         /* Gris de texto para cuerpo */
  --color-borde: #D5DDE4;         /* Bordes y divisores discretos */
  --color-azul-palido: #EAF6FC;   /* Fondos de tarjetas / avisos suaves */

  /* Derivados para hover / estados (dentro de la familia azul) */
  --color-azul-hover: #187aa8;
  --color-azul-oscuro-hover: #033a72;

  /* Estados de validación (solo en formularios/interfaces) */
  --color-exito: #1b8a5a;
  --color-advertencia: #b4690e;
  --color-error: #c0392b;

  /* ---- Tipografía ---- */
  --font-titulo: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-cuerpo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica fluida (móvil -> escritorio) */
  --fs-h1: clamp(1.875rem, 1.2rem + 3.2vw, 3rem);     /* 30 -> 48 */
  --fs-h2: clamp(1.5rem, 1.15rem + 1.7vw, 2.125rem);  /* 24 -> 34 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem); /* 20 -> 26 */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); /* 16 -> 18 */
  --fs-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /* 14 -> 15 */
  --fs-btn: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);   /* 15 -> 16 */

  --lh-titulo: 1.2;
  --lh-cuerpo: 1.6;

  /* ---- Espaciado base-8 ---- */
  --sp-1: 0.5rem;   /* 8 */
  --sp-2: 1rem;     /* 16 */
  --sp-3: 1.5rem;   /* 24 */
  --sp-4: 2rem;     /* 32 */
  --sp-6: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-10: 5rem;    /* 80 */

  /* ---- Layout ---- */
  --contenedor-max: 1200px;
  --contenedor-texto: 720px;  /* ancho de lectura cómodo */
  --radio: 8px;
  --radio-sm: 6px;

  /* ---- Sombra sutil (plana, sin densidad) ---- */
  --sombra-sutil: 0 1px 2px rgba(2, 42, 85, 0.06), 0 2px 8px rgba(2, 42, 85, 0.05);
  --sombra-hover: 0 4px 16px rgba(2, 42, 85, 0.1);

  /* ---- Transiciones suaves ---- */
  --t-rapida: 160ms ease;
  --t-media: 260ms ease;

  /* Altura aproximada del header fijo (para offsets) */
  --header-h: 76px;
}