/*
 * Cleya Boutique — Design tokens.
 * Fuente: "Media KIT CLEYA" (paleta y tipografías oficiales de la marca).
 *
 * Distribución recomendada por el kit:
 *   60% CREAM        fondos y espacios amplios
 *   30% LIGHT BROWN  títulos, detalles, botones, llamadas a la acción, iconos
 *   10% BROWN / WHITE / GREEN  contrastes, superficies alternas y acentos
 */
:root {
	/* ---------- Paleta de marca ---------- */
	--cream: #ebe5dd;
	--light-brown: #937d71;
	--brown: #89725b;
	--white: #f7f7f3;
	--green: #8e8d72;

	/* Superficies: el crema manda, el blanco roto separa bloques */
	--surface: #ebe5dd;
	--surface-dim: #d9d1c6;
	--surface-bright: #f2ede7;
	--surface-container-lowest: #f7f7f3;
	--surface-container-low: #f0ebe4;
	--surface-container: #e5ded4;
	--surface-container-high: #ded6cb;
	--surface-container-highest: #d7cec2;
	--surface-variant: #ded6cb;
	--background: #ebe5dd;

	/*
	 * Tinta. El kit escribe también el cuerpo en marrón, pero sobre crema
	 * ese tono da 3,6:1 y la lectura en pantalla exige 4,5:1. Se usa el
	 * mismo marrón profundizado: misma familia, texto legible.
	 */
	--on-surface: #5f4f40;
	--on-surface-variant: #6f5c4b;
	--on-background: #5f4f40;
	--heading: #89725b;
	--inverse-surface: #3b3128;
	--inverse-on-surface: #f7f7f3;
	--outline: #937d71;
	--outline-variant: #cfc4b6;

	/* Marca */
	--primary: #89725b;
	--on-primary: #f7f7f3;
	--primary-container: #ded6cb;
	--on-primary-container: #5f4f40;
	--inverse-primary: #cfc4b6;
	--secondary: #937d71;
	--on-secondary: #f7f7f3;
	--secondary-container: #e5ded4;
	--on-secondary-container: #5f4f40;
	--tertiary: #8e8d72;
	--on-tertiary: #f7f7f3;
	--tertiary-container: #e2e1d3;
	--on-tertiary-container: #4f4e3c;

	/*
	 * Acento de acción. El kit reserva el marrón para botones y CTA; aquí
	 * va un punto más profundo para alcanzar 4,9:1 con el blanco del kit.
	 * Cambiar estos cuatro valores repinta todos los CTA del sitio.
	 */
	--accent: #937d71;
	--accent-strong: #7d674f;
	--accent-hover: #6b573f;
	--on-accent: #f7f7f3;

	/* Estados */
	--error: #a33a2c;
	--on-error: #f7f7f3;
	--error-container: #f2ded9;
	--on-error-container: #6d2419;

	/* ---------- Tipografía ----------
	 * Times New Roman MT para títulos (Tinos comparte sus métricas y se
	 * sirve como fuente web, así rinde igual en cualquier equipo),
	 * Poppins para el cuerpo y una script para los acentos decorativos.
	 */
	--font-display: "Tinos", "Times New Roman", Times, serif;
	--font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--font-script: "Pinyon Script", "Sloop Script Pro", cursive;

	--text-headline-xl: 64px;
	--text-headline-xl-mobile: 42px;
	--text-headline-lg: 50px;
	--text-headline-md: 34px;
	--text-body-lg: 18px;
	--text-body-md: 16px;
	--text-label-sm: 12px;

	/* Alturas del encabezado: en reposo y compactado al hacer scroll. */
	--header-h: 118px;
	--header-h-min: 64px;

	/* Espaciado */
	--unit: 8px;
	--container-max: 1440px;
	--gutter: 24px;
	--margin-desktop: 80px;
	--margin-mobile: 20px;
	--section-gap: 120px;
	--section-gap-mobile: 72px;

	/* Movimiento */
	--duration-fast: 300ms;
	--duration-slow: 700ms;
	--duration-zoom: 1000ms;
	--ease-out-expo: cubic-bezier(0.2, 1, 0.3, 1);
}