/* ==========================================================================
   SpanishAura — Design tokens
   Única fuente de verdad de valores. Extraídos de la configuración Tailwind
   inline de _design/SPANISH AURA/spanishaura/index.html, que es el superset
   completo de la paleta (las otras 5 páginas usan subconjuntos con los
   mismos valores).

   Los pares móvil/desktop se resuelven redefiniendo el token dentro del
   media query, no duplicando clases: así .sa-section se adapta sola.
   ========================================================================== */

:root {
	/* --- Color: marca ------------------------------------------------- */
	--sa-primary: #a03b25;
	--sa-primary-container: #c0533a;
	--sa-on-primary: #ffffff;
	--sa-secondary: #785a00;
	--sa-secondary-container: #fed16c;
	--sa-on-secondary-container: #775900;
	--sa-secondary-fixed-dim: #ecc15e;
	--sa-tertiary: #5c5d4a;
	--sa-tertiary-fixed: #e4e4cc;
	--sa-error: #ba1a1a;

	/* --- Color: superficies -------------------------------------------
	   Jerarquía Material 3. La regla estética del sistema es separar las
	   secciones alternando estas superficies, nunca con bordes de 1px. */
	--sa-surface: #fff8f5;
	--sa-surface-container-lowest: #ffffff;
	--sa-surface-container-low: #fbf2ed;
	--sa-surface-container: #f5ece7;
	--sa-surface-container-high: #efe6e2;
	--sa-surface-container-highest: #e9e1dc;

	/* --- Color: texto y trazos ---------------------------------------- */
	--sa-on-surface: #1e1b18;          /* nunca negro puro */
	--sa-on-surface-variant: #57423d;
	--sa-outline: #8a726c;
	--sa-outline-variant: #dec0b9;

	/* --- Tipografía ---------------------------------------------------- */
	--sa-font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
	--sa-font-body: 'Raleway', system-ui, -apple-system, sans-serif;

	/* Escala fluida: evita reproducir las 4 paradas de Tailwind del H1 */
	--sa-fs-h1: clamp(1.875rem, 1.15rem + 3.6vw, 3.75rem);   /* 30 → 60 */
	--sa-fs-h2: clamp(1.5rem, 1.15rem + 1.75vw, 2.25rem);    /* 24 → 36 */
	--sa-fs-h3: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* 16 → 18 */
	--sa-fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--sa-fs-body: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);   /* 14 → 16 */
	--sa-fs-sm: clamp(0.75rem, 0.73rem + 0.13vw, 0.875rem);  /* 12 → 14 */
	--sa-fs-xs: 0.75rem;
	--sa-fs-price: 2.25rem;

	--sa-lh-tight: 1.15;
	--sa-lh-h1: 1.1;
	--sa-lh-body: 1.7;
	--sa-lh-relaxed: 1.625;
	--sa-tracking-eyebrow: 0.2em;
	--sa-tracking-label: 0.15em;

	/* --- Radios --------------------------------------------------------
	   Ojo: en el diseño los radios de Tailwind están REDEFINIDOS.
	   rounded-lg = 2rem y rounded-xl = 3rem, no los valores por defecto. */
	--sa-radius-sm: 0.75rem;    /* inputs y campos de formulario */
	--sa-radius: 1rem;
	--sa-radius-card: 2rem;     /* radio de tarjeta dominante */
	--sa-radius-photo: 3rem;    /* marcos de foto del hero */
	--sa-radius-full: 9999px;

	/* --- Espaciado y layout (valores móviles; ver media query) --------- */
	--sa-gutter: 1.25rem;
	--sa-section-y: 2.5rem;
	--sa-cta-y: 3.5rem;
	--sa-nav-offset: 5rem;
	--sa-nav-height: 3.5rem;

	--sa-w-7xl: 80rem;
	--sa-w-5xl: 64rem;
	--sa-w-4xl: 56rem;
	--sa-w-3xl: 48rem;
	--sa-w-2xl: 42rem;
	--sa-w-xl: 36rem;

	/* --- Gradientes ----------------------------------------------------- */
	--sa-grad-primary: linear-gradient(to right, #a03b25, #c0533a);
	--sa-grad-accent: linear-gradient(to right, #a03b25, #c0533a, #ecc15e);

	/* --- Sombras --------------------------------------------------------
	   Tintadas con el color de texto cálido, nunca negro puro. */
	--sa-shadow-nav: 0 12px 32px rgba(45, 41, 38, 0.06);
	--sa-shadow-sticky: 0 -8px 24px rgba(45, 41, 38, 0.08);
	--sa-shadow-sm: 0 1px 2px rgba(45, 41, 38, 0.05);
	--sa-shadow-md: 0 4px 12px rgba(45, 41, 38, 0.08);
	--sa-shadow-lg: 0 10px 24px rgba(45, 41, 38, 0.10);
	--sa-shadow-xl: 0 20px 40px rgba(45, 41, 38, 0.12);
	--sa-shadow-2xl: 0 28px 56px rgba(45, 41, 38, 0.16);
	--sa-focus-ring: 0 0 0 2px var(--sa-primary);

	/* --- Transiciones ---------------------------------------------------- */
	--sa-transition-fast: 150ms ease;
	--sa-transition: 250ms ease;
	--sa-transition-slow: 350ms ease;
}

@media (min-width: 768px) {
	:root {
		--sa-gutter: 2rem;
		--sa-section-y: 4rem;
		--sa-cta-y: 6rem;
		--sa-nav-offset: 6rem;
		--sa-nav-height: 4.25rem;
	}
}