/**
 * Tokens de diseño de GS Premium (sistema "GS Premium MX").
 *
 * Variables CSS a nivel de :root — paleta, tipografía, curvas de animación, radios,
 * sombras y contenedor. Las comparten los 4 widgets de header. Handle 'gs-tokens'.
 * Los controles de color de cada widget ESCRIBEN sobre estas variables vía
 * `selector { --gs-oro: {{VALUE}} }`; no dupliques reglas de color.
 */

:root {
	/* ── Paleta ──────────────────────────────────────────────────────────── */
	--gs-tinta: #0A0A0A;        /* Texto principal, fondos oscuros, botón activo */
	--gs-tinta-hover: #242424;  /* Hover del botón negro */
	--gs-crema: #FAFAF7;        /* Fondo del header y del footer del carrito */
	--gs-hueso: #F5F1E8;        /* Fondo hover de íconos, filas y chips */
	--gs-linea: #E8E2D9;        /* Todos los bordes de 1px */
	--gs-oro: #9C7A34;          /* Acento principal: hover, badge, precios */
	--gs-oro-osc: #8A6528;      /* Texto dorado sobre fondo claro (mejor contraste AA) */
	--gs-oro-clr: #C2A370;      /* Barra de anuncios, íconos decorativos */
	--gs-oro-pale: #FBF6EE;     /* Fondo de pastillas doradas */
	--gs-oro-halo: rgba(156, 122, 52, .2); /* Halo del swatch de color elegido (respaldo sin color-mix) */
	--gs-gris: #6B6B6B;         /* Texto secundario */
	--gs-gris-2: #8A8378;       /* Texto terciario / metadatos */
	--gs-gris-3: #9A9285;       /* Placeholder */
	--gs-verde: #3A7D44;        /* Estado de éxito (envío gratis) */
	--gs-rojo: #B23B32;         /* Eliminar / destructivo */
	--gs-rojo-bg: #FBEFEE;      /* Fondo hover de eliminar */
	--gs-track: #E2D7C2;        /* Riel de la barra de progreso */

	/* ── Paleta de la ficha de producto ──────────────────────────────────────
	   Grises NEUTROS, a diferencia de los cálidos de arriba (--gs-gris*, que tiran a
	   beige porque nacieron para el header sobre fondo crema). La especificación de la
	   ficha pide neutros puros, así que conviven los dos juegos: no se sustituyen.
	   Todo lo demás que la spec pedía ya estaba: #FAFAF7 = --gs-crema, #E8E2D9 = --gs-linea,
	   #0A0A0A = --gs-tinta, #F5F1E8 = --gs-hueso, #9C7A34 = --gs-oro, #C2A370 = --gs-oro-clr,
	   #FBF6EE = --gs-oro-pale, #3A7D44 = --gs-verde. */
	--gs-tinta-precio: #111111; /* Precio grande (un pelo más claro que --gs-tinta) */
	--gs-hueso-2: #EDE8E0;      /* Fondo de la miniatura activa de la galería */
	--gs-hueso-3: #EFEBE2;      /* Fondo de la pastilla de menudeo (escalones de mayoreo) */
	--gs-txt-2: #555555;        /* Etiquetas de atributo, cuerpo de reseña */
	--gs-txt-3: #888888;        /* Metadatos, migas, conteos */
	--gs-txt-4: #9A9A9A;        /* Nota de IVA, opción de pill sin elegir */
	--gs-txt-5: #A8A8A8;        /* Divisa junto al precio */
	--gs-tachado: #C7C7C7;      /* Precio regular tachado de la ficha */
	--gs-sep: #C8C2B8;          /* Separador «›» de las migas de pan */
	--gs-ambar: #D4820A;        /* Stock bajo y bajo pedido */
	--gs-oferta: #E8534A;       /* Badge y precio de oferta */
	--gs-agotado: #B0B0B0;      /* Texto de agotado */
	--gs-agotado-2: #CFCFCF;    /* Opción de atributo no disponible (tachada) */
	--gs-estrella-off: #DDD6C8; /* Estrella sin elegir del formulario de reseña */
	--gs-manija: #E3DCC9;       /* Manija del bottom-sheet */

	/* ── Tipografía ──────────────────────────────────────────────────────── */
	--gs-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
	--gs-font-ui: 'Montserrat', system-ui, -apple-system, sans-serif;
	--gs-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* ── Curvas de animación ─────────────────────────────────────────────── */
	--gs-e-out: cubic-bezier(.22, 1, .36, 1);    /* Entradas de UI, drawers, escalas */
	--gs-e-quint: cubic-bezier(.23, 1, .32, 1);  /* Paneles grandes, altura y blur */
	--gs-e-soft: ease;                            /* Micro-transiciones de color/opacidad */
	/* Paneles que entran desde un borde de la pantalla. Es la curva de iOS/Ionic, y no es
	   intercambiable con las de arriba: `--gs-e-out` y `--gs-e-quint` son casi la misma y las dos
	   arrancan suave. Un panel inferior necesita salir DISPARADO y frenar largo, que es lo que da
	   la sensación de que va agarrado al dedo; con una entrada suave se siente flotante. */
	--gs-e-sheet: cubic-bezier(.32, .72, 0, 1);

	/* ── Radios ──────────────────────────────────────────────────────────── */
	--gs-r-sm: 6px;    /* botones pequeños */
	--gs-r-md: 9px;    /* CTA, ítems de lista */
	--gs-r-lg: 10px;   /* botones de ícono, miniaturas */
	--gs-r-xl: 14px;   /* paneles y dropdowns */
	--gs-r-2xl: 16px;  /* tarjetas grandes */
	--gs-r-pill: 99px; /* badges y chips */

	/* ── Sombras ─────────────────────────────────────────────────────────── */
	--gs-sh-dropdown: 0 20px 46px rgba(0, 0, 0, .16);
	--gs-sh-panel: 0 20px 48px rgba(10, 10, 10, .10);
	--gs-sh-drawer: -12px 0 54px rgba(10, 10, 10, .2);

	/* ── Contenedor ──────────────────────────────────────────────────────── */
	--gs-max: 1280px;
	--gs-pad-x: 32px;

	/* ── Capas (z-index) ─────────────────────────────────────────────────
	   Viven aquí porque forman un contrato ENTRE archivos: el JS del buscador
	   lee --gs-z-encima para sacar elementos del atenuado, y ese valor tiene que
	   quedar estrictamente entre el velo y el panel. Repartidos por los CSS eran
	   números sueltos que nada obligaba a mantener coherentes. */
	--gs-z-panel: 30;      /* desplegables del nav y de cuenta */
	--gs-z-scrim: 40;      /* velo del buscador */
	--gs-z-encima: 44;     /* excluido del velo (entre velo y drop) */
	--gs-z-drop: 45;       /* panel del buscador */
	--gs-z-lightbox: 200;  /* visor de la galería de producto (portaleado a <body>) */
	--gs-z-drawer: 310;    /* cajón del carrito (contexto propio) */
	/* Modal de reseña (portaleado a <body>). Va DEBAJO del toast a propósito: el resultado del
	   envío se anuncia por ahí, y si un error quedara tapado por el modal que lo provocó el
	   cliente no vería por qué no se publicó su reseña. */
	--gs-z-modal: 380;
	--gs-z-modal-caja: 381;
	--gs-z-toast: 400;     /* avisos: por encima de TODO, incluido el cajón */
}