/* ==========================================================
   tokens.css — Design system de la Portada La Vanguardia
   Fuente única de verdad: color, tipografía (escala en REM), layout, forma.
   Valores extraídos 1:1 de portada.jsx / portada-mobile.jsx (prototipo).

   Sistema de unidades (regla del proyecto):
     · font-size       → rem  (respeta el tamaño de letra del usuario → a11y)
     · letter-spacing  → em   (escala con el texto)
     · padding de chips/botones → em (escala con su propio texto)
     · gaps / márgenes de layout / paddings de contenedor → px (estructura fija)
     · bordes / filetes / sombras → px (no deben escalar)
   1rem = 16px (html { font-size: 100% }).
   ========================================================== */

/* — Tiempos (fuentes de marca, incluidas en assets/fonts) — */
@font-face {
	font-family: "Tiempos Headline";
	src: url("../assets/fonts/TiemposHeadline-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Tiempos Headline";
	src: url("../assets/fonts/TiemposHeadline-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Tiempos Headline";
	src: url("../assets/fonts/TiemposHeadline-Medium.woff2") format("woff2");
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}
/* Tiempos Text (fuente de marca del cuerpo): Regular (400–500) + Semibold para el
   bold REAL (600–700, incl. <strong>). El itálico (columnistas de Opinión) se
   sintetiza. */
@font-face {
	font-family: "Tiempos Text";
	src: url("../assets/fonts/TiemposText-Regular.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Tiempos Text";
	src: url("../assets/fonts/TiemposText-Semibold.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}
/* Source Serif 4 (SIL OFL, self-host): FALLBACK funcional del cuerpo. Dos ficheros
   variables (pesos 200–900, subset latino): redonda + cursiva. Solo se descargan si
   Tiempos Text no carga. */
@font-face {
	font-family: "Source Serif 4";
	src: url("../assets/fonts/SourceSerif4.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../assets/fonts/SourceSerif4-Italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}
/* Libre Franklin (SIL OFL, self-host): fuente sans del sitio (kickers, byline,
   metadatos, UI). Fichero variable (pesos 100–900 en un solo woff2, subset latino)
   ⇒ regular y bold reales. */
@font-face {
	font-family: "Libre Franklin";
	src: url("../assets/fonts/LibreFranklin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--margin-block: 0.8lh; /* margen vertical base, igual a la altura de línea del texto (line-height) */
	/* — Marca — */
	--lv-blue: #001c4c; /* navy oficial: kickers, filetes, enlaces de marca */
	--lv-blue-deep: #001334; /* navy profundo: texto sobre CTA amarillo */
	--lv-yellow: #ffd200; /* CTA suscripción */
	--lv-yellow-deep: #e6bd00;
	--live: #c8252c; /* "En directo" */
	--letter-spacing-kicker: 0.04em; /* tracking de los kickers */

	/* — Papel / tinta (paleta "cool-white" del diseño aprobado) — */
	--paper: #ffffff;
	--paper-2: #f2f4f8;
	--ink: #0a0d12; /* textInk aprobado (override sobre #0E1116) */
	--ink-soft: #2a2d33;
	--meta: #6b6960;
	--meta-soft: #8f8c82;
	--related-link: #555555; /* color de fuente de los enlaces relacionados */
	--deck: #555555; /* color de la entradilla/descripción (.deck) */
	--hair: #d8dce3; /* filete / borde */
	--hair-soft: #e8e5dc; /* filete suave (separadores internos) */
	--brand-bg: #e9efe0; /* fondo contenido branded */
	--econ-bg: #fff1e0; /* fondo módulo Economía */
	--comprador-accent: #6f7d5a;
	--accent-ai: oklch(58% 0.12 60); /* sienna ochre — "Premium"/progreso */

	/* — Tipografía (familias) — */
	--f-headline: "Tiempos Headline", Georgia, "Times New Roman", serif;
	--f-text: "Tiempos Text", "Source Serif 4", Georgia, serif;
	/* Sans del sitio: Libre Franklin (self-host, grotesca de prensa), con fallback
     de sistema. --f-mono se mantiene como equivalente de la sans (no monoespaciada). */
	--f-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--f-mono: var(--f-sans);

	/* — Escala tipográfica (REM, 1rem = 16px) — */
	--fs-11: 0.6875rem; /* 11   */
	--fs-11_5: 0.71875rem; /* 11.5 */
	--fs-12: 0.75rem; /* 12   */
	--fs-12_5: 0.78125rem; /* 12.5 */
	--fs-13: 0.8125rem; /* 13   */
	--fs-13_5: 0.84375rem; /* 13.5 */
	--fs-14: 0.875rem; /* 14   */
	--fs-14_5: 0.90625rem; /* 14.5 */
	--fs-15: 0.9375rem; /* 15   */
	--fs-16: 1rem; /* 16   */
	--fs-16_5: 1.03125rem; /* 16.5 */
	--fs-17: 1.0625rem; /* 17   */
	--fs-18: 1.125rem; /* 18   */
	--fs-18_5: 1.15625rem; /* 18.5 */
	--fs-19: 1.1875rem; /* 19   */
	--fs-20: 1.25rem; /* 20   */
	--fs-21: 1.3125rem; /* 21   */
	--fs-22: 1.375rem; /* 22   */
	--fs-23: 1.4375rem; /* 23   */
	--fs-24: 1.5rem; /* 24   */
	--fs-25: 1.5625rem; /* 25   */
	--fs-26: 1.625rem; /* 26   */
	--fs-27: 1.6875rem; /* 27   */
	--fs-28: 1.75rem; /* 28   */
	--fs-30: 1.875rem; /* 30   */
	--fs-31: 1.9375rem; /* 31   */
	--fs-32: 2rem; /* 32   */
	--fs-34: 2.125rem; /* 34   */
	--fs-38: 2.375rem; /* 38   */
	--fs-46: 2.875rem; /* 46   */
	--fs-50: 3.025rem; /* 54   */
	--fs-52: 3.125rem; /* 54   */
	--fs-54: 3.375rem; /* 54   */
	--fs-56: 3.5rem; /* 56   */

	/* — Layout (px: estructura fija) — */
	--content-max: 1200px; /* ancho de contenido escritorio */
	--content-pad: 24px; /* padding lateral del contenedor */
	--gap: 32px; /* gap único de rejillas/columnas (desktop) */
	--gap-m: 16px; /* gap base móvil */
	--section-gap: 48px; /* separación entre módulos (desktop) */
	--section-gap-m: 30px; /* separación entre módulos (móvil) */
	--ad-w: 300px; /* raíl de anuncios */
	--ad-h: 600px;

	/* — Forma — */
	--r-chip: 3px; /* etiquetas pequeñas */
	--r-pill: 999px; /* pills / círculos */
	--shadow-lg: 0 18px 50px rgba(8, 10, 14, 0.18);
	/* superficies rectangulares SIN radio */
}

/* — Modo oscuro (opcional; el diseño aprobado es claro) — */
[data-theme="dark"] {
	--paper: #14161a;
	--paper-2: #1c1f23;
	--ink: #e8e5dc;
	--ink-soft: #c7c3b8;
	--meta: #8e8b82;
	--meta-soft: #6f6c64;
	--hair: #2a2d33;
	--hair-soft: #20232a;
	--brand-bg: #2b3a22;
	--econ-bg: #2a2017;
	--lv-blue: #5b92d4;
}