/*
 * Tokens de diseño — ÚNICO archivo a tocar para cambiar colores, tipografía, espaciados,
 * radios de borde o sombras en todo el sitio. El resto del CSS solo usa var(--...).
 *
 * IMPORTANTE: --color-acento, los valores de espaciado/radio/sombra y los breakpoints
 * son PLACEHOLDERS a la espera del Design Handoff Spec de Claude Design. En cuanto lo
 * tengas, sustituye los valores aquí — no hace falta tocar ningún otro archivo CSS.
 */

:root {
	/* Color — los dos primeros son fijos (logo), el resto es libre */
	--color-primario: #9ECEE0;   /* azul claro — del logo, no cambiar */
	--color-secundario: #1A4A63; /* azul marino — del logo, no cambiar */
	--color-acento: #F5A623;     /* PLACEHOLDER — color cálido para el CTA, ajustar con el spec */
	--color-texto: #1A2B33;
	--color-texto-claro: #FFFFFF;
	--color-fondo: #FFFFFF;
	--color-fondo-alterno: #F4FAFC;
	--color-borde: #D8E8EF;

	/* Tipografía — Fredoka para titulares (look redondeado "para niños"),
	   Nunito para texto de cuerpo (legible, la tenía ya el sitio actual). Cargadas
	   desde Google Fonts en inc/setup.php (hm_enqueue_assets). */
	--font-titulares: 'Fredoka', 'Nunito', sans-serif;
	--font-base: 'Nunito', sans-serif;
	--font-size-base: 16px;
	--font-size-h1: clamp(1.8rem, 4vw, 2.75rem);
	--font-size-h2: clamp(1.5rem, 3vw, 2.1rem);
	--font-size-h3: 1.25rem;

	/* Espaciado — escala de 4px, PLACEHOLDER hasta tener el spec */
	--espaciado-xs: 4px;
	--espaciado-sm: 8px;
	--espaciado-md: 16px;
	--espaciado-lg: 24px;
	--espaciado-xl: 32px;
	--espaciado-xxl: 48px;
	--espaciado-xxxl: 64px;

	/* Radios de borde — estilo redondeado "para niños" */
	--radio-borde-sm: 8px;
	--radio-borde-md: 16px;
	--radio-borde-lg: 24px;
	--radio-borde-pill: 999px;

	/* Sombras */
	--sombra-suave: 0 4px 12px rgba(26, 74, 99, 0.12);
	--sombra-media: 0 8px 24px rgba(26, 74, 99, 0.16);

	/* Breakpoints (documentales — CSS no puede leer variables dentro de @media,
	   así que estos valores hay que repetirlos literalmente en cada @media;
	   este bloque es solo para que quede documentado en un único sitio) */
	--breakpoint-movil: 600px;
	--breakpoint-tablet: 900px;
	--breakpoint-desktop: 1200px;

	--ancho-contenedor: 1200px;
}