/**
 * Ensaya Carabanchel — Design tokens (punto 25 del prompt maestro).
 *
 * theme.json genera automáticamente variables con el prefijo
 * --wp--preset--... para alimentar la UI del editor (paleta de
 * color, tamaños de fuente, spacing). Este archivo expone además
 * los MISMOS valores con los nombres literales que pide el punto 25
 * (--color-background, --space-1, etc.), para usarlos libremente en
 * CSS escrito a mano dentro de patterns y assets/css/*.css sin tener
 * que repetir la sintaxis larga de WordPress.
 *
 * REGLA: si se cambia un valor aquí, se cambia también en
 * theme.json (y viceversa). Son la misma escala expresada dos veces
 * por razones técnicas distintas, nunca dos escalas diferentes.
 *
 * NOTA WCAG (punto 30): el verde vivo de marca (#3D823F) da un
 * contraste de ~4.33:1 sobre --color-background e insuficiente
 * contraste (~3.97:1) como fondo de texto pequeño, sea cual sea
 * el color del texto encima. Por eso existen tres acentos:
 * --color-accent (oscurecido, 5.35:1, para texto/enlaces y como
 * fondo de botón con texto claro encima), --color-accent-bright
 * (el vivo, solo para superficies grandes, cifras display o
 * fondos — nunca como color de texto) y --color-accent-light
 * (más claro, 6.87:1 sobre fondo oscuro, para texto/iconos sobre
 * fondo oscuro donde --color-accent no tendría suficiente brillo).
 */

:root {
	/* Color */
	--color-background: #F5F1E8;
	--color-foreground: #14120F;
	--color-accent: #357238;         /* verde para texto/enlaces/botones sobre fondo CLARO: 5.35:1 */
	--color-accent-bright: #3D823F;  /* verde vivo, solo decorativo (fondos grandes, cifras) — nunca como texto */
	--color-accent-light: #5FAE62;   /* verde claro, para texto/iconos sobre fondo OSCURO: 6.87:1 */
	--color-muted: #6E6656;           /* oscurecido en FASE 8: el original (#8B8577) daba 3.26:1 sobre --color-background, insuficiente para texto normal AA (4.5:1). Este pasa 4.6:1. */
	--color-border: #C7BCA3;          /* oscurecido en FASE 8 para que el hairline sea perceptible (decorativo, no sujeto al mínimo de texto AA) */
	--color-inverted-background: #14120F;
	--color-inverted-foreground: #F5F1E8;

	/* Spacing (escala 1–8, coherente con theme.json settings.spacing.spacingSizes) */
	--space-1: 0.25rem;   /* 4px  */
	--space-2: 0.5rem;    /* 8px  */
	--space-3: 1rem;      /* 16px */
	--space-4: 1.5rem;    /* 24px */
	--space-5: 2.5rem;    /* 40px */
	--space-6: 4rem;      /* 64px */
	--space-7: 6rem;      /* 96px */
	--space-8: 9rem;      /* 144px */

	/* Layout */
	--content-width: 46rem;   /* 736px, columna de lectura */
	--wide-width: min(94vw, 100rem);  /* casi a sangre en pantallas normales, con tope de 1600px en monitores muy grandes */
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--grid-gap: clamp(1rem, 2vw, 2rem);

	/* Tipografía (misma escala que theme.json settings.typography.fontSizes) */
	--font-display: clamp(3rem, 1.2rem + 8vw, 8rem);
	--font-h1: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
	--font-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
	--font-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
	--font-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--font-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--font-caption: 0.8125rem;
	--font-meta: 0.75rem;

	--font-family-grotesk: "Ensaya Grotesk", "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
	--font-family-sans: "Ensaya Sans", "Inter", -apple-system, "Segoe UI", sans-serif;

	/* Movimiento */
	--ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 180ms;
	--duration-base: 320ms;
}