/**
 * Tokens de marca PROECO.
 * Fuente: docs/HTML-AUDIT.md §5 + docs/fuentes/manual-de-marca.md.
 * Decisión de cliente (2026-08-09): verde principal = #8EBA01, verde acento = #B6E000.
 * No hardcodear estos valores en otros archivos CSS — usar siempre las variables.
 */

:root {
	/* Color — marca */
	--color-primary: #8EBA01;       /* franja superior, botones (texto blanco encima) */
	--color-primary-hover: #7FA100; /* :hover de enlaces y detalles sobre fondo claro */
	--color-accent: #B6E000;        /* acentos, badges "Nuevo", botón "Ver producto" en shop */
	--color-success: #3C8F49;       /* disponibilidad, ícono WhatsApp */
	--color-sale: #E4574F;          /* badge "Oferta" */
	--color-footer-bg: #EEF4E1;     /* pie de página — verde salvia muy claro, más presencia de marca que gris neutro — rediseño (pedido del cliente 2026-08-09) */

	/* Color — texto */
	--color-text: #6B6B6B;
	--color-heading: #6B6B6B;
	--color-text-muted: #555555;
	--color-text-faint: #9D9D9D;
	--color-on-primary: #F5F5F5;

	/* Color — superficies */
	--color-bg: #F5F5F5;
	--color-surface: #FFFFFF;
	--color-border: #EDEDED;
	--color-border-strong: #E3E3E3;

	/* Tipografía */
	--font-body: 'Poppins', sans-serif;
	--font-display: 'Poppins', sans-serif;
	--font-accent: 'Playfair Display', serif; /* tagline / tratamientos editoriales, ver manual-de-marca.md */

	/* Layout */
	--container-max: 1400px;

	/* Radios y sombras (observados en el prototipo aprobado) */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-pill: 999px;
	--shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 8px 18px rgba(0, 0, 0, 0.12);
	--shadow-container: 0 0 40px rgba(0, 0, 0, 0.06);

	/* Movimiento — auditoría P1-1: microinteracciones cortas y consistentes */
	--transition-fast: 160ms ease;
	--transition-base: 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms;
		--transition-base: 0ms;
	}
}