/**
 * Tokens semánticos EL EJE (capa CSS Custom Properties).
 *
 * Complementa theme.json: casos no cubiertos por settings nativos
 * (modo oscuro, escala tipográfica editorial, layout de lectura).
 * Todos los valores referencian los presets de WordPress/theme.json
 * con fallback al hex extraído del logo oficial.
 */

:root {
	/* --- Color: capa semántica --- */
	--ee-color-brand-primary: var(--wp--preset--color--brand-primary, #DD080B);
	--ee-color-brand-primary-dark: var(--wp--preset--color--brand-primary-dark, #B30507);
	--ee-color-link: var(--wp--preset--color--link, #C0090B);
	--ee-color-link-rest: var(--wp--preset--color--text, #0A0A0A);
	--ee-color-link-dark: #F2564A;
	--ee-color-category-label: var(--ee-color-link);
	--ee-color-status-video: var(--ee-color-link);
	--ee-color-brand-secondary: var(--wp--preset--color--brand-secondary, #0A0A0A);
	--ee-color-brand-secondary-dark: var(--wp--preset--color--brand-secondary-dark, #1A1A1A);
	--ee-color-background: var(--wp--preset--color--background, /*#FAF7F2 */ #f7f7f7);
	--ee-color-surface: var(--wp--preset--color--surface, #FFFFFF);
	--ee-color-text: var(--wp--preset--color--text, #0A0A0A);
	--ee-color-text-muted: var(--wp--preset--color--text-muted, #595959);
	--ee-color-border: var(--wp--preset--color--border, #DFDFDF);
	--ee-color-red-light: #F04438;

	/* --- Tipografía: escala editorial --- */
	--ee-font-display: var(--wp--preset--font-size--ee-display, clamp(2.5rem, 5vw, 4rem));
	--ee-font-headline: var(--wp--preset--font-size--ee-headline, clamp(2rem, 4vw, 3rem));
	--ee-font-h1: var(--wp--preset--font-size--ee-h1, 2.25rem);
	--ee-font-h2: var(--wp--preset--font-size--ee-h2, 1.5rem);
	--ee-font-h3: var(--wp--preset--font-size--ee-h3, 1.25rem);
	--ee-font-lead: var(--wp--preset--font-size--ee-lead, 1.125rem);
	--ee-font-body: var(--wp--preset--font-size--ee-body, 1rem);
	--ee-font-metadata: var(--wp--preset--font-size--ee-metadata, 0.875rem);
	--ee-font-label: var(--wp--preset--font-size--ee-label, 0.8125rem);
	--ee-font-caption: var(--wp--preset--font-size--ee-caption, 0.75rem);

	--ee-line-height-display: 1.05;
	--ee-line-height-headline: 1.1;
	--ee-line-height-h1: 1.15;
	--ee-line-height-h2: 1.25;
	--ee-line-height-h3: 1.35;
	--ee-line-height-lead: 1.6;
	--ee-line-height-body: 1.7;
	--ee-line-height-metadata: 1.4;
	--ee-line-height-label: 1.3;
	--ee-line-height-caption: 1.4;

	--ee-font-weight-display: 900;
	--ee-font-weight-headline: 800;
	--ee-font-weight-h1: 800;
	--ee-font-weight-h2: 700;
	--ee-font-weight-h3: 700;

	--ee-font-heading: var(--wp--preset--font-family--inter, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	--ee-font-sans: var(--wp--preset--font-family--inter, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);

	/* --- Spacing (espejo de settings.spacing.spacingSizes) --- */
	--ee-space-1: var(--wp--preset--spacing--ee-1, 0.25rem);
	--ee-space-2: var(--wp--preset--spacing--ee-2, 0.5rem);
	--ee-space-3: var(--wp--preset--spacing--ee-3, 0.75rem);
	--ee-space-4: var(--wp--preset--spacing--ee-4, 1rem);
	--ee-space-5: var(--wp--preset--spacing--ee-5, 1.5rem);
	--ee-space-6: var(--wp--preset--spacing--ee-6, 2rem);
	--ee-space-7: var(--wp--preset--spacing--ee-7, 3rem);
	--ee-space-8: var(--wp--preset--spacing--ee-8, 4rem);
	--ee-space-9: var(--wp--preset--spacing--ee-9, 6rem);

	/* --- Layout: contenedores --- */
	--ee-layout-content: 1320px;
	--ee-layout-wide: 1440px;
	--ee-layout-single: 620px;
	--ee-content-width: 720px;
	--ee-card-padding: 1.5em;

	/* Altura del masthead (barra 4.5rem + navrow ~2.5rem): offset de la
	 * sidebar sticky en nota individual (B15.5). */
	--ee-header-height: 7rem;

	/* Radius (V.7.2): escala dedicada — theme.json no tiene presets de radius
	 * y reusar --ee-space-* confunde semántica (espaciado ≠ radio). Pill único
	 * 999px reutilizado vía token cumple tokens-only sin hardcode suelto. */
	--ee-radius-pill: 999px;
	--ee-radius-full: 50%;
	--ee-radius-sm: 0.375rem; /* 6px — badge superpuesto pequeño */
}

/* --- Color-scheme hint para el UA (scrollbar, form controls) --- */
html {
	color-scheme: light dark;
}

html.theme-light,
:root.theme-light {
	color-scheme: light;
}

html.theme-dark,
:root.theme-dark {
	color-scheme: dark;
}

/* --- Modo forzado por clase en <html> y <body> (Fase V14.b) ---
 * V14 usaba solo .theme-* sobre <body>, pero :root es <html> → el guard
 * :root:not(.theme-*) nunca veía la clase en <body> y el dark de
 * prefers-color-scheme ganaba siempre con OS dark. Ahora se define sobre
 * :root/html/body con 0,2,0 para ganar a :root 0,1,0 y al guard 0,3,0.
 * Reutiliza EXACTAMENTE los mismos valores del @media auto, sin paleta paralela.
 */
:root.theme-light,
html.theme-light,
body.theme-light,
.theme-light {
	--ee-color-background: var(--wp--preset--color--background, /*#FAF7F2 */ #f7f7f7);
	--ee-color-surface: var(--wp--preset--color--surface, #FFFFFF);
	--ee-color-text: var(--wp--preset--color--text, #0A0A0A);
	--ee-color-text-muted: var(--wp--preset--color--text-muted, #595959);
	--ee-color-border: var(--wp--preset--color--border, #DFDFDF);
	--ee-color-brand-primary: var(--wp--preset--color--brand-primary, #DD080B);
	--ee-color-link: var(--wp--preset--color--link, #C0090B);
	--ee-color-link-rest: var(--wp--preset--color--text, #0A0A0A);
	--ee-color-category-label: var(--ee-color-link);
	--ee-color-status-video: var(--ee-color-link);
}

:root.theme-dark,
html.theme-dark,
body.theme-dark,
.theme-dark {
	--ee-color-background: var(--wp--preset--color--brand-secondary, #0A0A0A);
	--ee-color-surface: var(--wp--preset--color--brand-secondary-dark, #1A1A1A);
	--ee-color-text: var(--wp--preset--color--background, /*#FAF7F2 */ #f7f7f7);
	--ee-color-text-muted: #B0ABA3;
	--ee-color-border: #2E2A26;
	--ee-color-brand-primary: var(--ee-color-red-light);
	--ee-color-link: var(--ee-color-link-dark);
	--ee-color-link-rest: var(--ee-color-text);
	--ee-color-category-label: var(--ee-color-link);
	--ee-color-status-video: var(--ee-color-link);
}

/* Links de contenido en modo oscuro forzado: cubre :root/html/body */
:root.theme-dark .entry-content a:not(.wp-element-button),
html.theme-dark .entry-content a:not(.wp-element-button),
body.theme-dark .entry-content a:not(.wp-element-button),
.theme-dark .entry-content a:not(.wp-element-button),
:root.theme-dark .wp-block-post a:not(.wp-element-button),
html.theme-dark .wp-block-post a:not(.wp-element-button),
body.theme-dark .wp-block-post a:not(.wp-element-button),
.theme-dark .wp-block-post a:not(.wp-element-button),
:root.theme-dark .ee-card a:not(.wp-element-button),
html.theme-dark .ee-card a:not(.wp-element-button),
body.theme-dark .ee-card a:not(.wp-element-button),
.theme-dark .ee-card a:not(.wp-element-button),
:root.theme-dark .ee-breaking a:not(.wp-element-button),
html.theme-dark .ee-breaking a:not(.wp-element-button),
body.theme-dark .ee-breaking a:not(.wp-element-button),
.theme-dark .ee-breaking a:not(.wp-element-button) {
	color: var(--ee-color-link-rest);
}

@media (prefers-color-scheme: dark) {
	/* Automático: solo aplica si NO hay override explícito en <html> ni <body> */
	:root:not(.theme-light):not(.theme-dark),
	html:not(.theme-light):not(.theme-dark) {
		--ee-color-background: var(--wp--preset--color--brand-secondary, #0A0A0A);
		--ee-color-surface: var(--wp--preset--color--brand-secondary-dark, #1A1A1A);
		--ee-color-text: var(--wp--preset--color--background, /*#FAF7F2 */ #f7f7f7);
		--ee-color-text-muted: #B0ABA3;
		--ee-color-border: #2E2A26;
		--ee-color-brand-primary: var(--ee-color-red-light);
		--ee-color-link: var(--ee-color-link-dark);
		--ee-color-link-rest: var(--ee-color-text);
		--ee-color-category-label: var(--ee-color-link);
		--ee-color-status-video: var(--ee-color-link);
	}

	/* Links auto oscuro solo sin clase explícita en html */
	:root:not(.theme-light):not(.theme-dark) .entry-content a:not(.wp-element-button),
	html:not(.theme-light):not(.theme-dark) .entry-content a:not(.wp-element-button),
	:root:not(.theme-light):not(.theme-dark) .wp-block-post a:not(.wp-element-button),
	html:not(.theme-light):not(.theme-dark) .wp-block-post a:not(.wp-element-button),
	:root:not(.theme-light):not(.theme-dark) .ee-card a:not(.wp-element-button),
	html:not(.theme-light):not(.theme-dark) .ee-card a:not(.wp-element-button),
	:root:not(.theme-light):not(.theme-dark) .ee-breaking a:not(.wp-element-button),
	html:not(.theme-light):not(.theme-dark) .ee-breaking a:not(.wp-element-button) {
		color: var(--ee-color-link-rest);
	}
}