/*
 * Tokens del sistema. El porqué de cada valor está en DESIGN.md, en la raíz del repo.
 * Regla dura: ningún color se escribe fuera de este fichero.
 */

:root {
	/* --- Color -------------------------------------------------------- */
	/* El verde sale de la marca que ya existe: logo, franjas de la nave y suelo. */
	--verde: oklch(0.45 0.11 148);
	--verde-hondo: oklch(0.31 0.07 150);
	--verde-claro: oklch(0.88 0.05 145);

	--crema: oklch(0.96 0.018 85);
	--hormigon: oklch(0.90 0.008 120);
	--tinta: oklch(0.24 0.02 150);
	--tinta-suave: oklch(0.44 0.015 150);

	/* Naranja de señalización. SOLO acciones y el precio destacado. */
	--senal: oklch(0.68 0.18 52);
	--senal-hondo: oklch(0.58 0.17 48);
	/* Naranja de los botones sólidos, un punto más hondo que el de señalización.
	   Con texto blanco, el naranja claro se queda en 3.06:1 de contraste (falla
	   AA); este llega a 4.94:1. El claro sigue mandando en precios y acentos. */
	--senal-boton: oklch(0.56 0.18 52);
	--senal-boton-hover: oklch(0.48 0.18 52);
	/* Naranja para texto sobre fondo VERDE. El de señalización sobre verde se
	   queda en 2,3:1 y falla AA; este sube a 4,6:1 manteniendo el mismo tono. */
	--senal-sobre-verde: oklch(0.82 0.15 62);

	/* Roles semánticos: el marcado usa estos, no los de arriba. */
	--fondo: var(--crema);
	--texto: var(--tinta);
	--texto-suave: var(--tinta-suave);
	/* Naranja de acento para TEXTO. Cambia según el bloque: sobre fondo claro
	   hace falta el hondo, sobre verde el claro. Usar --senal a pelo en texto es
	   lo que dejaba el kicker en 2,3:1 de contraste.
	   Más hondo que --senal-boton: el kicker aparece sobre hormigón, donde el de
	   los botones se queda en 3,67:1. Aquí llega a 4,7:1. */
	--acento: oklch(0.50 0.18 52);
	--superficie: oklch(0.99 0.008 85);
	--borde: oklch(0.85 0.012 120);

	/* --- Tipografía --------------------------------------------------- */
	--fuente-titulo: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
	--fuente-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Escala fluida, ratio 1.3. */
	--txt-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
	--txt-s: clamp(0.9rem, 0.87rem + 0.15vw, 0.97rem);
	--txt-m: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
	--txt-l: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
	--txt-xl: clamp(1.8rem, 1.45rem + 1.6vw, 2.7rem);
	--txt-2xl: clamp(2.4rem, 1.7rem + 3.2vw, 4.2rem);
	--txt-3xl: clamp(3rem, 1.8rem + 5.4vw, 6.5rem);

	--peso-normal: 400;
	--peso-medio: 500;
	--peso-fuerte: 700;
	--peso-macizo: 800;

	--alto-titulo: 0.98;
	--alto-texto: 1.6;
	--medida: 68ch;

	/* --- Espacio ------------------------------------------------------ */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 3rem;
	--e-8: 4rem;
	--seccion: clamp(4rem, 10vw, 8rem);
	--margen: clamp(1.25rem, 5vw, 4rem);
	--ancho: 74rem;
	--ancho-estrecho: 44rem;

	/* --- Forma y profundidad ------------------------------------------ */
	/* Radios pequeños: esto es señalética, no una app. */
	--radio: 4px;
	--radio-g: 10px;
	--sombra: 0 1px 2px oklch(0.24 0.02 150 / 0.06), 0 8px 24px oklch(0.24 0.02 150 / 0.07);

	/* --- Motion ------------------------------------------------------- */
	--curva: cubic-bezier(0.16, 1, 0.3, 1);
	--rapido: 180ms;
	--medio: 420ms;
	--lento: 700ms;
}

/*
 * Bloques de color: se aplican a una <section> entera y cambian los roles semánticos.
 * El ritmo de la página lo da alternar estos bloques, no bordes ni sombras.
 */
.bloque--verde {
	--fondo: var(--verde);
	--texto: var(--crema);
	--texto-suave: oklch(0.88 0.03 140);
	--acento: var(--senal-sobre-verde);
	--superficie: oklch(0.40 0.10 148);
	--borde: oklch(0.55 0.10 148);
	background: var(--fondo);
	color: var(--texto);
}

.bloque--hondo {
	--fondo: var(--verde-hondo);
	--texto: var(--crema);
	--texto-suave: oklch(0.84 0.03 140);
	--acento: var(--senal-sobre-verde);
	--superficie: oklch(0.36 0.07 150);
	--borde: oklch(0.42 0.07 150);
	background: var(--fondo);
	color: var(--texto);
}

.bloque--hormigon {
	--fondo: var(--hormigon);
	--superficie: var(--crema);
	background: var(--fondo);
	color: var(--texto);
}