/**
 * Banana Pop — Tokens.
 *
 * FUENTE ÚNICA de colores, tipografía, anchos y tiempos.
 *
 * Regla del proyecto: ningún valor de marca se escribe literal fuera de este
 * archivo. Ni en blocks.css, ni en footer.css, ni en paginas.css, ni en el
 * contenido de una página. Si hace falta un color nuevo, se agrega aquí
 * primero y recién después se usa con var().
 *
 * Todas las demás hojas del plugin lo declaran como dependencia
 * (`wp_register_style( ..., array( 'bananapop-tokens' ) )`), así que WordPress
 * garantiza que este archivo se imprima antes.
 *
 * Los tokens de un solo componente NO van aquí: viven junto a su componente
 * (--bp-slider-* en .bp-slider, --bp-cat-* en .bp-categories), porque son
 * perillas que cada instancia sobrescribe desde el editor.
 */

:root {

	/* ================================================================ *
	 * Tipografía
	 * ================================================================ */

	--bp-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* ================================================================ *
	 * Color
	 *
	 * OJO — hoy conviven tres paletas heredadas y este archivo las
	 * registra tal cual están en producción, sin cambiar nada:
	 *
	 *   - Elementor  → heading #585858, texto #7a7a7a, enlace #6ec1e4
	 *   - Woostify   → heading #2b2b2b, texto #8f8f8f, primario #1346af
	 *   - Footer     → azul de marca #213574
	 *
	 * Unificarlas es una decisión de diseño, no de refactor: cambiar
	 * cualquiera de estos valores mueve el aspecto del sitio. Ver
	 * «Paleta pendiente» en CLAUDE.md.
	 * ================================================================ */

	--bp-color-brand: #213574;        /* Azul del footer. El más "de marca". */
	--bp-color-primary: #1346af;      /* Primario de Woostify. */
	--bp-color-heading: #585858;
	--bp-color-text: #7a7a7a;
	--bp-color-link: #6ec1e4;
	--bp-color-link-hover: #4aa8d4;
	--bp-color-gray-bg: #ededed;
	--bp-color-count: #42d56d;        /* Contador de productos por categoría. */
	--bp-color-ink: #111;             /* Texto sobre fondo claro (botón en hover). */
	--bp-color-white: #fff;
	--bp-color-black: #000;

	/* ================================================================ *
	 * Layout
	 *
	 * Woostify no trae theme.json, así que WordPress no genera el ancho
	 * de contenido de los bloques. Lo aporta blocks.css, limitado a la
	 * clase de body .bp-gutenberg-layout.
	 * ================================================================ */

	--bp-content-width: 1140px;
	--bp-wide-width: 1400px;

	/* Inset horizontal heredado del padding de .elementor-widget-wrap. */
	--bp-gutter: 10px;

	/* ================================================================ *
	 * Movimiento
	 *
	 * Los valores medidos sobre los widgets de Elementor, para que el
	 * sitio no cambie de ritmo al salir de él.
	 * ================================================================ */

	--bp-anim-duration: 1250ms;       /* Entrada del texto de las slides. */
	--bp-transition: 240ms;           /* Abrir/cerrar, desplegar. */
	--bp-transition-fast: 180ms;      /* Color al pasar el mouse. */
	--bp-easing: ease;

	/* ================================================================ *
	 * Footer
	 *
	 * Nombres propios porque son contrato con footer.css, pero los
	 * valores salen de los tokens de arriba.
	 * ================================================================ */

	--bp-footer-bg: var( --bp-color-brand );
	--bp-footer-fg: var( --bp-color-white );
	--bp-footer-muted: rgba( 255, 255, 255, 0.85 );
	--bp-footer-rule: rgba( 255, 255, 255, 0.19 );
	--bp-footer-max: var( --bp-content-width );
	--bp-footer-inset: var( --bp-gutter );
	--bp-footer-brand-gap: 80px;
	--bp-footer-font: var( --bp-font );
}