/**
 * Puente entre los Ajustes del sitio de Elementor y el resto del sistema de diseño.
 *
 * Los colores y las tipografías se definen en un único sitio: Elementor → Ajustes del
 * sitio → Colores globales y Tipografía global (kit activo). El kit los publica como
 * --e-global-color-* y --e-global-typography-* en el <body> (.elementor-kit-N).
 *
 * Aquí, en ese mismo <body>, las variables Atomic (--color-*, --fuente-*, --fs-*) y la
 * paleta de Astra (--ast-global-color-*) pasan a leer de esas variables del kit. Así las
 * clases globales, los componentes, la cabecera y el pie, el CSS del tema hijo (Sensei,
 * páginas legales, wp-login) y lo que pinta Astra cambian a la vez desde Ajustes del
 * sitio. Los valores que quedan en las variables Atomic y en el Personalizador de Astra
 * son copias: no se cambian ahí (docs/design-system.md).
 *
 * Se encola antes que el resto del CSS del tema hijo, en la web y en wp-login.php.
 */

body[class*="elementor-kit-"] {
	/* Colores globales */
	--color-negro: var(--e-global-color-negro);
	--color-carbon: var(--e-global-color-carbon);
	--color-blanco: var(--e-global-color-blanco);
	--color-hueso: var(--e-global-color-hueso);
	--color-dorado: var(--e-global-color-dorado);
	--color-dorado-claro: var(--e-global-color-dorado-claro);
	--color-texto: var(--e-global-color-texto);
	--color-texto-secundario: var(--e-global-color-texto-secundario);
	--color-borde: var(--e-global-color-borde);

	/* Velo de la primera pantalla: el negro al 62 %. */
	--color-velo: color-mix(in srgb, var(--e-global-color-negro) 62%, transparent);

	/* Paleta global de Astra (Personalizar → Global → Colores), mismo orden. */
	--ast-global-color-0: var(--e-global-color-dorado);
	--ast-global-color-1: var(--e-global-color-dorado-claro);
	--ast-global-color-2: var(--e-global-color-negro);
	--ast-global-color-3: var(--e-global-color-texto);
	--ast-global-color-4: var(--e-global-color-blanco);
	--ast-global-color-5: var(--e-global-color-hueso);
	--ast-global-color-6: var(--e-global-color-carbon);
	--ast-global-color-7: var(--e-global-color-borde);
	--ast-global-color-8: var(--e-global-color-texto-secundario);

	/* Familias: «Títulos» y «Texto» de la Tipografía global. */
	--fuente-titulos: var(--e-global-typography-titulos-font-family);
	--fuente-texto: var(--e-global-typography-texto-font-family);
}

/*
 * Tamaños. Cada variable Atomic de tamaño (fs-…-escritorio, -tableta, -movil) lee del
 * estilo de la Tipografía global sólo en su propio tramo de pantalla, que es donde la
 * usan las clases. Fuera de él conserva su valor: así los pocos sitios que usan a
 * propósito el tamaño de otro dispositivo (la clase «campo» y login.css, con el cuerpo
 * de móvil en todas las pantallas) se quedan como están.
 */
@media (min-width: 1025px) {
	body[class*="elementor-kit-"] {
		--fs-h1-escritorio: var(--e-global-typography-h1-font-size);
		--fs-h2-escritorio: var(--e-global-typography-h2-font-size);
		--fs-h3-escritorio: var(--e-global-typography-h3-font-size);
		--fs-cifra-escritorio: var(--e-global-typography-cifra-font-size);
		--fs-entradilla-escritorio: var(--e-global-typography-entradilla-font-size);
		--fs-cuerpo-escritorio: var(--e-global-typography-cuerpo-font-size);
		--fs-antetitulo-escritorio: var(--e-global-typography-antetitulo-font-size);
		--fs-pequeno-escritorio: var(--e-global-typography-pequeno-font-size);
		--fs-boton: var(--e-global-typography-boton-font-size);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body[class*="elementor-kit-"] {
		--fs-h1-tableta: var(--e-global-typography-h1-font-size);
		--fs-h2-tableta: var(--e-global-typography-h2-font-size);
		--fs-h3-tableta: var(--e-global-typography-h3-font-size);
		--fs-cifra-tableta: var(--e-global-typography-cifra-font-size);
		--fs-entradilla-tableta: var(--e-global-typography-entradilla-font-size);
		--fs-cuerpo-tableta: var(--e-global-typography-cuerpo-font-size);
		--fs-antetitulo-tableta: var(--e-global-typography-antetitulo-font-size);
		--fs-pequeno-tableta: var(--e-global-typography-pequeno-font-size);
		--fs-boton: var(--e-global-typography-boton-font-size);
	}
}

@media (max-width: 767px) {
	body[class*="elementor-kit-"] {
		--fs-h1-movil: var(--e-global-typography-h1-font-size);
		--fs-h2-movil: var(--e-global-typography-h2-font-size);
		--fs-h3-movil: var(--e-global-typography-h3-font-size);
		--fs-cifra-movil: var(--e-global-typography-cifra-font-size);
		--fs-entradilla-movil: var(--e-global-typography-entradilla-font-size);
		--fs-cuerpo-movil: var(--e-global-typography-cuerpo-font-size);
		--fs-antetitulo-movil: var(--e-global-typography-antetitulo-font-size);
		--fs-pequeno-movil: var(--e-global-typography-pequeno-font-size);
		--fs-boton: var(--e-global-typography-boton-font-size);
	}
}