/**
 * Tokens de diseño — Madre en Oración
 * Fuente de la verdad de color: también reflejada en /theme.json (paleta del editor).
 * Si cambias un valor aquí, cámbialo también allá.
 */

:root {
	/* Color — base */
	--color-cream: #FFF8EF;
	--color-ivory: #FDF4E8;

	/* Color — dorados y cálidos */
	--color-gold-soft: #D4A94D;
	--color-gold: #E6B85C;
	--color-orange: #D98952;
	--color-terracotta: #C97852;

	/* Color — profundidad */
	--color-wine: #7A3E45;
	--color-brown: #6E5243;

	/* Color — apoyo */
	--color-sage: #8C9A74;

	/* Color — texto */
	--color-ink: #2F2926;
	--color-ink-soft: #5C5049;
	--color-white: #FFFFFF;

	/* Alias semánticos (úsalos en components.css en vez de los colores crudos) */
	--color-bg: var(--color-cream);
	--color-bg-alt: var(--color-ivory);
	--color-text: var(--color-ink);
	--color-text-muted: var(--color-ink-soft);
	--color-accent: var(--color-gold-soft);
	--color-accent-strong: var(--color-terracotta);
	--color-cta: var(--color-wine);
	--color-cta-hover: var(--color-terracotta);
	--color-border: rgba(122, 62, 69, 0.15);
	--color-focus: var(--color-wine);

	/* Gradientes de "luz cálida" — usados en hero y secciones destacadas */
	--gradient-amanecer: linear-gradient(135deg, #FDF4E8 0%, #F3D9AE 45%, #E6B85C 100%);
	--gradient-calidez: linear-gradient(160deg, #FFF8EF 0%, #FBE8D3 60%, #EFC79A 100%);
	--gradient-profundidad: linear-gradient(135deg, #C97852 0%, #7A3E45 100%);
	--glow-dorado: radial-gradient(60% 60% at 50% 30%, rgba(230, 184, 92, 0.45) 0%, rgba(230, 184, 92, 0) 70%);

	/* Tipografía */
	--font-heading: "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, sans-serif;

	--text-xs: 0.875rem;
	--text-sm: 0.9375rem;
	--text-base: 1.125rem;
	--text-lg: 1.375rem;
	--text-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	--text-2xl: clamp(2.1rem, 1.6rem + 2.2vw, 3rem);
	--text-3xl: clamp(2.5rem, 2rem + 2.2vw, 3.25rem);

	--leading-tight: 1.25;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

	/* Espaciado (misma escala que theme.json spacingSizes) */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* Layout */
	--content-width: 740px;
	--wide-width: 1200px;
	--container-padding: 1.25rem;

	/* Forma y profundidad */
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-pill: 999px;
	--shadow-soft: 0 12px 32px -16px rgba(122, 62, 69, 0.25);
	--shadow-card: 0 8px 24px -12px rgba(47, 41, 38, 0.18);

	/* Movimiento — sutil, sin excesos (ver briefing: sin animaciones exageradas) */
	--transition-fast: 150ms ease;
	--transition-base: 220ms ease;
}

/* Breakpoints de referencia (documentales — usar min-width literal en cada archivo,
   CSS no permite variables dentro de @media):
   --bp-sm: 480px
   --bp-md: 768px
   --bp-lg: 1024px
   --bp-xl: 1280px
*/