/**
 * Grandes Genios — Design tokens.
 *
 * Todo el tema consume estas variables; nunca valores sueltos.
 * Para cambiar la marca (colores/tipografía), este es el único archivo
 * que hace falta tocar en la mayoría de los casos (ver README.md).
 *
 * Breakpoints del tema (no son variables CSS, no se puede usar var() en
 * media queries — se documentan aquí y se repiten como literales en
 * 02-layout.css / 03-components.css / 04-woocommerce.css):
 *   sm: 640px  ·  lg: 1024px  ·  xl: 1280px
 */

:root {
	/* ---- Marca (dadas por el brief, no modificar sin aprobación) ---- */
	--gg-blue:       #013186; /* azul principal: header, footer, botones */
	--gg-blue-dark:  #00215C; /* hover, textos destacados, contornos */
	--gg-blue-light: #2A5BC4; /* degradados, links, detalles */
	--gg-green:      #29FE4D; /* acentos: badges, contador carrito, CTA secundario */
	--gg-white:      #FFFFFF; /* fondo general */
	--gg-gray-50:    #F5F7FB; /* fondos de tarjetas y secciones suaves */
	--gg-gray-500:   #6B7280; /* textos secundarios */
	--gg-text:       #111827; /* texto principal */

	/* ---- Derivadas de estado (no son marca, son utilidad de UI) ----
	 * Generadas con color-mix() a partir de los tokens de marca, para no
	 * introducir hex "sueltos". Fallback automático del navegador si
	 * color-mix() no está soportado: cae al color base (sigue siendo
	 * accesible, solo pierde el matiz de la mezcla). */
	--gg-blue-50:        color-mix(in srgb, var(--gg-blue) 6%, var(--gg-white));
	--gg-blue-100:       color-mix(in srgb, var(--gg-blue) 12%, var(--gg-white));
	--gg-overlay:        color-mix(in srgb, var(--gg-blue-dark) 55%, transparent);
	--gg-border:         color-mix(in srgb, var(--gg-text) 12%, var(--gg-white));
	--gg-border-strong:  color-mix(in srgb, var(--gg-text) 24%, var(--gg-white));
	--gg-green-muted:    color-mix(in srgb, var(--gg-green) 18%, var(--gg-white));
	--gg-disabled-bg:    color-mix(in srgb, var(--gg-gray-500) 12%, var(--gg-white));
	--gg-disabled-text:  color-mix(in srgb, var(--gg-gray-500) 60%, var(--gg-white));
	--gg-focus-ring:     var(--gg-blue-light);

	/* Semántico mínimo (fuera de la paleta de marca, uso puntual: stock,
	 * errores de formulario de checkout). Deliberadamente discreto. */
	--gg-success: #1F9254;
	--gg-error:   #D92D20;

	/* ---- Tipografía ----
	 * Títulos: Baloo 2 (redondeada, amigable). Cuerpo: Inter (muy legible). */
	--gg-font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
	--gg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Escala tipográfica fluida (clamp: mínimo mobile → máximo desktop).
	 * Piso duro en 14px (0.875rem): en ningún lugar del sitio el texto
	 * debe leerse más chico que eso, ni siquiera en badges o notas. */
	--gg-text-xs:   clamp(0.875rem, 0.86rem + 0.1vw, 0.9rem);
	--gg-text-sm:   clamp(0.9rem, 0.88rem + 0.2vw, 0.95rem);
	--gg-text-base: clamp(1rem, 0.97rem + 0.2vw, 1.05rem);
	--gg-text-md:   clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
	--gg-text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	--gg-text-xl:   clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem);
	--gg-text-2xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
	--gg-text-3xl:  clamp(2rem, 1.6rem + 2vw, 2.75rem);
	--gg-text-4xl:  clamp(2.4rem, 1.8rem + 3vw, 3.5rem);

	/* ---- Espaciado (escala 4px) ---- */
	--gg-space-1: 0.25rem;  /* 4  */
	--gg-space-2: 0.5rem;   /* 8  */
	--gg-space-3: 0.75rem;  /* 12 */
	--gg-space-4: 1rem;     /* 16 */
	--gg-space-5: 1.5rem;   /* 24 */
	--gg-space-6: 2rem;     /* 32 */
	--gg-space-7: 3rem;     /* 48 */
	--gg-space-8: 4rem;     /* 64 */
	--gg-space-9: 6rem;     /* 96 */

	/* ---- Radios (marca amigable, sin recargar) ---- */
	--gg-radius-sm:   10px;
	--gg-radius-md:   14px;
	--gg-radius-lg:   18px;
	--gg-radius-xl:   22px;
	--gg-radius-full: 999px;

	/* ---- Sombras (muy sutiles, el diseño respira en el espacio blanco) ---- */
	--gg-shadow-sm: 0 1px 2px rgb(17 24 39 / 6%);
	--gg-shadow-md: 0 8px 20px rgb(17 24 39 / 8%);
	--gg-shadow-lg: 0 20px 40px rgb(17 24 39 / 12%);

	/* ---- Layout ---- */
	--gg-container-max: 1280px;
	--gg-container-pad: 1rem;
	--gg-header-h: 68px;
	--gg-announcement-h: 36px;

	/* ---- Transiciones (siempre explícitas, nunca "transition: all") ---- */
	--gg-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--gg-duration-fast: 150ms;
	--gg-duration-base: 220ms;
	--gg-duration-slow: 320ms;
}

@media (min-width: 1024px) {
	:root {
		--gg-container-pad: 2rem;
		--gg-header-h: 80px;
	}
}