/*
  Design tokens de DuaL Digital Branding.
  Fuente: variables "DuaL Tokens" del archivo de Figma (paleta Light Tech, 5 colores)
  y Manual de Identidad Visual. base.css solo usa estas variables, nunca colores fijos.
*/
:root {
  /* Color — 60 % Dominante */
  --color-hielo: #e5ebf2;        /* Gris Hielo: fondo principal */
  --color-blanco-tech: #fafcff;  /* Blanco Tech: tarjetas, header, footer */
  /* Color — 30 % Estructura */
  --color-carbon: #313440;       /* Gris Carbón: logos, títulos y todo el texto */
  --color-pizarra: #94a3b8;      /* Gris Pizarra: bordes, líneas y separadores (no para texto) */
  /* Color — 10 % Acento */
  --color-marca: #dfff00;        /* Amarillo Limón: bloques sólidos con texto oscuro, subrayados y detalles */

  /* Degradados (estilos "Degradado/…" de Figma) */
  --degradado-hero: linear-gradient(180deg, var(--color-blanco-tech), var(--color-hielo));
  --degradado-enfasis: linear-gradient(90deg, var(--color-marca) 0%, var(--color-marca) 60%, rgb(223 255 0 / 0) 100%);
  --degradado-manifiesto: linear-gradient(160deg, var(--color-marca) 0%, var(--color-marca) 45%, var(--color-blanco-tech) 100%);

  /* Tipografía (máximo de marca: Syne, Plus Jakarta Sans, Inter) */
  --fuente-titulos: "Syne", "Syne Respaldo", system-ui, sans-serif;
  --fuente-ui: "Plus Jakarta Sans", "Jakarta Respaldo", system-ui, sans-serif;
  --fuente-texto: "Inter", "Inter Respaldo", system-ui, sans-serif;

  /* Escala tipográfica: móvil → desktop (Móvil/* y Desktop/* en Figma) */
  --texto-h1: clamp(2.5rem, 1rem + 3.9vw, 4.25rem);          /* 40 → 68 (68 desde ~1400 px) */
  --interlineado-h1: 1.06;                                      /* 44/40 · 72/68 */
  --texto-h2: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);       /* 30 → 44 */
  --texto-cita: clamp(1.625rem, 1.3rem + 1.35vw, 2.25rem);     /* 26 → 36 */
  --texto-dato: 2.5rem;                                         /* Display/Dato 40 */
  --texto-h3: 1.3125rem;                                        /* UI/H3 21 */
  --texto-h4: 1.0625rem;                                        /* UI/H4 17 */
  --texto-etiqueta: 0.8125rem;                                  /* UI/Etiqueta 13 */
  --texto-boton: 1rem;                                          /* UI/Botón 16 */
  --texto-menu: 0.9375rem;                                      /* UI/Menú 15 */
  --texto-grande: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* Texto/Grande 18 (16 en móvil) */
  --texto-base: 1rem;                                           /* Texto/Base 16 */
  --texto-pequeno: 0.875rem;                                    /* Texto/Pequeño 14 */

  /* Espaciado (espacio/* en Figma) */
  --espacio-4: 0.25rem;
  --espacio-8: 0.5rem;
  --espacio-12: 0.75rem;
  --espacio-16: 1rem;
  --espacio-24: 1.5rem;
  --espacio-32: 2rem;
  --espacio-48: 3rem;
  --espacio-64: 4rem;
  --espacio-96: 6rem;
  --espacio-128: 8rem;
  --seccion-y: clamp(var(--espacio-64), 3rem + 3vw, var(--espacio-96));
  --margen-lateral: clamp(var(--espacio-24), 6vw, var(--espacio-128));
  --ancho-contenido: 74rem; /* 1184 px = 1440 − 2 × 128 */
  --ancho-lectura: 47.5rem; /* 760 px, ~70 caracteres por línea */

  /* Radios (radio/* en Figma) */
  --radio-sm: 8px;
  --radio-md: 12px;

  /* Movimiento (Estándar §11: 150–400 ms) */
  --duracion-rapida: 180ms;
  --duracion-media: 320ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}