/**
 * Tokens semánticos del tema.
 *
 * Color, tipografía y espaciado NO se redefinen acá: son alias de los
 * presets que genera theme.json (--wp--preset--*), que es la única fuente
 * de verdad para esos tres grupos. Acá sólo se nombran con las variables
 * semánticas que usa el resto del CSS, y se agregan los tokens que
 * theme.json no modela (vidrio, movimiento, firma de marca).
 */

/* Orden de cascade layers para todo el tema: se declara una sola vez, acá,
   porque este es el primer stylesheet que carga el sitio. */
@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
	:root {
		color-scheme: light;

		/* Color — alias de la paleta de theme.json */
		--c-accent-900: var(--wp--preset--color--accent-900);
		--c-accent-700: var(--wp--preset--color--accent-700);
		--c-accent-600: var(--wp--preset--color--accent-600);
		--c-accent-400: var(--wp--preset--color--accent-400);
		--c-accent-200: var(--wp--preset--color--accent-200);
		--c-accent-100: var(--wp--preset--color--accent-100);
		--c-accent-050: var(--wp--preset--color--accent-050);

		--c-ink-900: var(--wp--preset--color--ink-900);
		--c-ink-700: var(--wp--preset--color--ink-700);
		--c-ink-500: var(--wp--preset--color--ink-500);
		--c-ink-300: var(--wp--preset--color--ink-300);
		--c-ink-200: var(--wp--preset--color--ink-200);
		--c-ink-100: var(--wp--preset--color--ink-100);
		--c-white:   var(--wp--preset--color--white);

		--c-focus: var(--c-accent-600);

		/* Tipografía — alias de theme.json (fluida vía "fluid" en fontSizes) */
		--font-display: var(--wp--preset--font-family--display);
		--font-body:    var(--wp--preset--font-family--body);

		--text-sm:  var(--wp--preset--font-size--sm);
		--text-base: var(--wp--preset--font-size--base);
		--text-lg:  var(--wp--preset--font-size--lg);
		--text-xl:  var(--wp--preset--font-size--xl);
		--text-2xl: var(--wp--preset--font-size--2-xl);
		--text-3xl: var(--wp--preset--font-size--3-xl);

		--leading-body: 1.65;
		--leading-display: 1.15;
		--measure-max: 68ch;

		--eyebrow-size: 12px;
		--eyebrow-tracking: .12em;

		/* Espaciado — alias de theme.json */
		--space-1: var(--wp--preset--spacing--1);
		--space-2: var(--wp--preset--spacing--2);
		--space-3: var(--wp--preset--spacing--3);
		--space-4: var(--wp--preset--spacing--4);
		--space-5: var(--wp--preset--spacing--5);
		--space-6: var(--wp--preset--spacing--6);
		--space-7: var(--wp--preset--spacing--7);
		--space-8: var(--wp--preset--spacing--8);
		--space-9: var(--wp--preset--spacing--9);
		--space-10: var(--wp--preset--spacing--10);

		/* Contenedor / grilla */
		--container-max: 1200px;
		--gutter: 24px;

		/* Alto del header, que es fixed (fuera del flujo) en todas las
		   páginas: se usa para compensar con padding-top en #contenido, ver
		   layout.css. Padding block del header (16px×2) + logo (36px) + 1px
		   de borde, redondeado. */
		--header-height: 72px;

		/* Vidrio — 3 niveles, ver §3.5 del brief. Nunca valores sueltos en componentes. */
		--glass-1-bg: color-mix(in oklab, var(--c-white) 72%, transparent);
		--glass-1-blur: 16px;
		--glass-1-saturate: 1.4;
		--glass-1-border-top: color-mix(in oklab, var(--c-white) 55%, transparent);
		--glass-1-border-bottom: var(--c-ink-200);

		--glass-2-bg: color-mix(in oklab, var(--c-white) 80%, var(--c-accent-050));
		--glass-2-blur: 10px;
		--glass-2-opacity: .8;

		--glass-3-bg: color-mix(in oklab, var(--c-accent-900) 45%, transparent);
		--glass-3-blur: 20px;
		--glass-3-veil: oklch(0.15 0.01 100 / .55);

		/* Movimiento */
		--ease-out:   linear(0, 0.22 7%, 0.61 17%, 0.86 28%, 0.97 38%, 1);
		--ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
		--dur-1: 140ms;
		--dur-2: 260ms;
		--dur-3: 480ms;
		--dur-4: 720ms;

		/* Firma de marca — línea de margen (ver template-parts/components/firma-margen.php) */
		--firma-width: 1px;
		--firma-color: var(--c-accent-600);
		--firma-offset: var(--space-5);
	}

	@media (prefers-reduced-motion: reduce) {
		:root {
			--dur-1: 1ms;
			--dur-2: 1ms;
			--dur-3: 1ms;
			--dur-4: 1ms;
		}
	}
}