/*
 * TOKENS — el vocabulario visual del tema.
 *
 * Valores trasladados literalmente del prototipo aprobado
 * (prototype/home/src/styles.css). Si algo no coincide, manda el prototipo.
 *
 * Los colores van en oklch igual que en el prototipo: es lo que produce esos grises
 * cálidos exactos. Soportado en Chrome 111+, Safari 15.4+ y Firefox 113+.
 *
 * Ningún valor de color, espacio, tipografía, radio o sombra debe escribirse fuera de
 * aquí. Si un número aparece dos veces en el CSS, le falta un token.
 */

:root {
	/* ---------- Color ---------- */
	--paper: oklch(0.977 0.0035 60); /* #F9F7F6 — fondo de página */
	--paper-pure: oklch(1 0 0); /* #FFFFFF — superficies */
	--ink: oklch(0.203 0.0125 45); /* #181310 — texto y secciones oscuras */
	--primary: oklch(0.601 0.2077 33.5); /* #ED421F — acento de marca */
	--primary-foreground: oklch(0.99 0.002 60);

	--background: var(--paper);
	--foreground: var(--ink);
	--muted-foreground: oklch(0.5 0.008 50); /* #68635F — texto secundario */
	/* Secundario con contraste real (7.4:1 sobre --paper). Para textos que se leen de
	   verdad, no para etiquetas: --muted-foreground se queda para lo accesorio. */
	--muted-strong: oklch(0.38 0.011 48);
	--border: oklch(0.905 0.005 55);
	--hairline: oklch(0.87 0.006 55);

	/* ---------- Tipografía ---------- */
	--font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: Caveat;
	/* Solo la firma del pie. Una manuscrita más no entra sin pasar por decisiones.md. */
	--font-script: "Caveat", ui-rounded, "Segoe Script", cursive;

	/* ---------- Tamaños de texto ----------
	 * Los 46 tamaños que el CSS ya usaba, extraídos tal cual el 2026-09-06: 163 de las 164
	 * declaraciones de `font-size` que estaban a pelo. La que falta es la única en `em`, que
	 * es relativa a su padre y convertirla en token mentiría.
	 *
	 * Mismo criterio que la escala de espaciado: esto no es todavía una escala diseñada, es
	 * la lista de lo que hay. Reducir 46 tamaños a nueve cambia el diseño y es una decisión.
	 *
	 * El nombre ES el valor (`--text-1-05` son 1.05rem). Nombrarlos por píxeles habría hecho
	 * chocar 0.98rem y 1rem en el mismo nombre.
	 */
	--text-0-6875: 0.6875rem;
	--text-0-8: 0.8rem;
	--text-0-82: 0.82rem;
	--text-0-85: 0.85rem;
	--text-0-875: 0.875rem;
	--text-0-9: 0.9rem;
	--text-0-92: 0.92rem;
	--text-0-95: 0.95rem;
	--text-0-98: 0.98rem;
	--text-1: 1rem;
	--text-1-05: 1.05rem;
	--text-1-08: 1.08rem;
	--text-1-1: 1.1rem;
	--text-1-125: 1.125rem;
	--text-1-15: 1.15rem;
	--text-1-2: 1.2rem;
	--text-1-25: 1.25rem;
	--text-1-3: 1.3rem;
	--text-1-35: 1.35rem;
	--text-1-4: 1.4rem;
	--text-1-45: 1.45rem;
	--text-1-5: 1.5rem;
	--text-1-55: 1.55rem;
	--text-1-6: 1.6rem;
	--text-1-7: 1.7rem;
	--text-1-8: 1.8rem;
	--text-1-9: 1.9rem;
	--text-2: 2rem;
	--text-2-1: 2.1rem;
	--text-2-2: 2.2rem;
	--text-2-4: 2.4rem;
	--text-2-5: 2.5rem;
	--text-2-6: 2.6rem;
	--text-2-7: 2.7rem;
	--text-2-9: 2.9rem;
	--text-3: 3rem;
	--text-3-1: 3.1rem;
	--text-3-2: 3.2rem;
	--text-3-4: 3.4rem;
	--text-3-6: 3.6rem;
	--text-4: 4rem;
	--text-4-2: 4.2rem;
	--text-4-5: 4.5rem;
	--text-5: 5rem;
	--text-6-2: 6.2rem;
	--text-7-4: 7.4rem;

	/* ---------- Pesos ----------
	 * Los cuatro pesos que el CSS ya usaba. Cambiar uno cambia todo lo que pesaba eso, que es
	 * justo lo que se le pide a un sistema: no existe "el peso del número de Identificación",
	 * existe un peso que ese número comparte con lo demás. Para separarlo de lo demás está el
	 * ajuste por zona, no un token nuevo.
	 */
	--weight-400: 400;
	--weight-500: 500;
	--weight-600: 600;
	--weight-700: 700;

	/* ---------- Composición ----------
	 * --frame: separación entre el borde del viewport y la superficie de una sección
	 *   enmarcada. El Hero y las secciones narrativas a sangre NO lo usan.
	 *   Resuelve a ~16px en móvil, ~25px en tablet, ~40px en portátil, ~50px en desktop.
	 * --shell-pad: el aire lateral del TEXTO, independiente del marco.
	 * --shell-pad-hero: los 24/40px originales del Hero, que no se mueven nunca.
	 * --nav-max: anchura de la píldora de la navbar. Un solo número que tocar.
	 */
	--frame: clamp(1rem, 0.5rem + 2.2vw, 4rem);
	--shell: 1600px;
	--shell-pad: clamp(1.5rem, -0.5rem + 5.2vw, 6rem);
	--shell-pad-hero: 1.5rem;
	--nav-max: 1020px;

	/* Radio de las superficies grandes. Muy sutil a propósito. */
	--radius: 0.125rem;
	--radius-surface: 1rem;
	--radius-card: 0.75rem;
	--radius-pill: 999px;

	/* Ritmo vertical. Tres pulsos, no uno: impacto, normal y calma. */
	--beat: 7rem;
	--beat-lg: 8rem;
	--beat-sm: 6rem;

	/* ---------- Espaciado ----------
	 * Los diecinueve valores de margin, padding y gap que el CSS ya usaba, extraidos tal cual
	 * el 2026-09-05: 367 de los 383 literales del tema. El numero del nombre son los pixeles
	 * que valia el hueco al crearse; el valor manda, no el nombre.
	 *
	 * No es todavia una escala: es la lista de lo que hay. Reducir diecinueve pasos a ocho
	 * cambia el diseno y es una decision, no una limpieza.
	 */
	--space-6: 0.375rem;
	--space-8: 0.5rem;
	--space-10: 0.625rem;
	--space-12: 0.75rem;
	--space-14: 0.875rem;
	--space-16: 1rem;
	--space-20: 1.25rem;
	--space-24: 1.5rem;
	--space-28: 1.75rem;
	--space-32: 2rem;
	--space-36: 2.25rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-56: 3.5rem;
	--space-64: 4rem;
	--space-80: 5rem;
	--space-96: 6rem;
	--space-144: 9rem;
	--space-176: 11rem;

	/* ---------- Movimiento ---------- */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--transicion-rapida: 300ms var(--ease-out-expo);
	--transicion-media: 500ms var(--ease-out-expo);
	--transicion-lenta: 900ms var(--ease-out-expo);

	/* ---------- Capas ---------- */
	--z-sticky: 40;
	--z-navbar: 50;
}

@media (width >= 48rem) {
	:root {
		--beat: 5.25rem;
		--beat-lg: 4.25rem;
		--beat-sm: 6.25rem;
		--shell-pad-hero: 2.5rem; /* los 40px exactos del Hero original */
	}
}