/* ============================================================================
 * SOMNO · DESIGN TOKENS
 * ----------------------------------------------------------------------------
 * Variables globales de diseno. Para cambiar la paleta del sitio, edita SOLO
 * este archivo. Todos los componentes (header.css, etc.) usan estas variables
 * via var(--somno-...), asi que un cambio aca se propaga a todo.
 *
 * Colores en formato oklch (mismo que uso el diseno de referencia): mas
 * predecibles para generar variantes (lightness croma hue).
 * ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
	/* -- Marca / azules clinicos -- */
	--somno-navy:        oklch(0.28 0.035 258);  /* barra superior oscura */
	--somno-navy-deep:   oklch(0.20 0.02 258);   /* hover/variante mas oscura */
	--somno-primary:     oklch(0.42 0.10 250);   /* azul principal (links, titulos) */
	--somno-primary-600: oklch(0.48 0.10 252);   /* azul medio */
	--somno-primary-700: oklch(0.32 0.03 255);   /* azul oscuro texto nav */

	/* -- Acento (CTA principal: Reserva) -- */
	--somno-accent:      oklch(0.50 0.12 250);   /* azul marca solido */
	--somno-accent-600:  oklch(0.44 0.12 250);   /* hover del acento */

	/* -- Gradiente azul claro (fondo del carrusel/hero) -- */
	--somno-hero-grad-1: oklch(0.96 0.018 250);  /* azul muy claro superior */
	--somno-hero-grad-2: oklch(0.99 0.005 250);  /* casi blanco inferior */

	/* -- WhatsApp -- */
	--somno-whatsapp:     #25D366;
	--somno-whatsapp-600: #1EBE5A;

	/* -- Neutros / fondos -- */
	--somno-bg:          #ffffff;                /* fondo base blanco */
	--somno-surface:     #ffffff;                /* superficies (nav, cards) */
	--somno-surface-alt: oklch(0.985 0.004 250); /* superficie sutil azulada */
	--somno-hover-bg:    oklch(0.95 0.015 250);  /* fondo hover items de menu */

	/* -- Gradientes de pagina (azul MUY claro -> blanco, minimalista) -- */
	--somno-page-grad:   linear-gradient(180deg, oklch(0.975 0.012 250) 0%, #ffffff 55%);
	--somno-band-grad:   linear-gradient(180deg, #ffffff 0%, oklch(0.975 0.012 250) 100%);

	/* -- Texto -- */
	--somno-text:        oklch(0.28 0.03 255);   /* texto principal */
	--somno-text-muted:  oklch(0.55 0.02 255);   /* texto secundario/gris */
	--somno-text-light:  oklch(0.82 0.018 255);  /* texto sobre navy */
	--somno-text-invert: #ffffff;                /* texto sobre color */

	/* -- Bordes / lineas -- */
	--somno-border:      oklch(0.90 0.008 255);
	--somno-border-soft: oklch(0.93 0.006 255);

	/* -- Tipografia -- */
	--somno-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* -- Radios -- */
	--somno-radius-sm: 6px;
	--somno-radius:    10px;
	--somno-radius-lg: 14px;

	/* -- Sombras -- */
	--somno-shadow-sm: 0 1px 3px rgba(20, 30, 50, 0.06);
	--somno-shadow:    0 8px 30px rgba(20, 30, 50, 0.10);

	/* -- Layout -- */
	--somno-header-max: 1200px;
	--somno-nav-h:      72px;   /* alto de la barra de navegacion principal */
	--somno-topbar-h:   40px;   /* alto de la barra superior */
}

/* ============================================================================
 * Fondo global de pagina (gradiente azul-blanco minimalista).
 * Se aplica al body para que se vea en todo el sitio (no solo en previews).
 * ============================================================================ */
body {
	background: var(--somno-page-grad);
	background-attachment: fixed;
	font-family: var(--somno-font);
	/* Red de seguridad anti-scroll-horizontal: recorta cualquier desborde lateral
	   (p.ej. transitorio de los carruseles Swiper al redimensionar). Usamos 'clip'
	   en vez de 'hidden' porque clip NO crea contexto de scroll y por tanto NO
	   rompe el position:sticky del header. */
	overflow-x: clip;
}