/*
 * Sumbahills — design tokens extraídos del Figma SUMBA_HILLS_WEB_01 (frame 1920px).
 * Solo custom properties; ningún selector de componente aquí.
 */

:root {
	/* Color ------------------------------------------------ */
	--color-cream: #F6F5F0;      /* fondo general y textos sobre oscuro */
	--color-green: #104A3E;      /* verde corporativo (contacto, botones) */
	--color-brown: #652A0E;      /* marrón (títulos, sección Sumba) */
	--color-beige: #EBE1DD;      /* beige claro (texto CTA, bordes form) */
	--color-navy: #0E2331;       /* azul noche (texto círculos, mapa) */
	--color-terracotta: #B87C59; /* pill garantía */

	--color-text: var(--color-brown);
	--color-bg: var(--color-cream);

	/* Tipografía ------------------------------------------- */
	--font-display: 'Ophelia', 'Cormorant Garamond', Georgia, serif; /* títulos */
	--font-body: 'Montserrat', system-ui, sans-serif;
	--font-garamond: 'Cormorant Garamond', Georgia, serif;           /* pill garantía */

	/* Escala tipográfica (desktop 1920 → fluida) */
	--text-hero: clamp(3rem, 5.2vw, 6.25rem);      /* 100px títulos hero/planos */
	--text-h2: clamp(2.5rem, 4.2vw, 5rem);         /* 80px títulos sección */
	--text-h3: clamp(2rem, 3.1vw, 3.75rem);        /* 60px "Elige tu sueño" */
	--text-price: clamp(1.75rem, 2.6vw, 3.125rem); /* 50px precios */
	--text-h4: clamp(1.375rem, 1.6vw, 1.875rem);   /* 30px subtítulos/desde */
	--text-lg: clamp(1.125rem, 1.3vw, 1.5625rem);  /* 25px círculos datos */
	--text-md: 1.25rem;                            /* 20px cuerpo grande/form */
	--text-base: 1.0625rem;                        /* 17px descripciones villas */
	--text-sm: 0.9375rem;                          /* 15px nav header */
	--text-xs: 0.875rem;                           /* 14px footer links */
	--text-2xs: 0.75rem;                           /* 12px copyright */

	--leading-tight: 1;
	--leading-snug: 1.1;
	--leading-normal: 1.45;

	/* Espaciado -------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--section-pad: clamp(3rem, 6vw, 7rem);

	/* Layout ----------------------------------------------- */
	--container-max: 1770px;   /* ancho útil del diseño (1920 - 2×75) */
	--container-pad: clamp(1.25rem, 4vw, 4.6875rem);

	/* Misc ------------------------------------------------- */
	--radius-sm: 8px;
	--radius-md: 20px;
	--radius-lg: 40px;         /* esquinas inferiores de secciones a sangre */
	--radius-pill: 100px;
	--transition: 0.25s ease;
}