/*!
 * FG Commerce — tokens de diseño V4 (fuente canónica en runtime).
 *
 * Los valores de color se replican en theme.json para el editor y se
 * verifican en tests/unit/CommerceThemeTest.php.
 */

:root {
	/* Tipografía */
	--fg-font-sans: "Asap", "Segoe UI", system-ui, sans-serif;
	--fg-font-size-small: 0.875rem;
	--fg-font-size-body: 1rem;
	--fg-font-size-card-title: 1.125rem;
	--fg-font-size-group-title: 1.25rem;
	--fg-font-size-lead: 1.125rem;
	--fg-font-size-price: 1.375rem;
	--fg-font-size-price-detail: 1.75rem;
	--fg-font-size-section-title: 1.625rem;
	--fg-font-size-page-title: 2rem;
	--fg-font-size-hero: 2.25rem;
	--fg-font-weight-regular: 400;
	--fg-font-weight-control: 600;
	--fg-font-weight-strong: 700;
	--fg-line-height-small: 1.43;
	--fg-line-height-body: 1.5;
	--fg-line-height-card: 1.33;
	--fg-line-height-heading: 1.2;
	--fg-line-height-hero: 1.05;
	--fg-line-height-price: 1.25;

	/* Color */
	--fg-color-ink: #14170f;
	--fg-color-muted: #596157;
	--fg-color-action: #176b32;
	--fg-color-action-pressed: #125428;
	--fg-color-accent: #2fb024;
	--fg-color-surface: #fff;
	--fg-color-paper: #f5f4ef;
	--fg-color-line: #d5d8cf;
	--fg-color-control: #7b8477;
	--fg-color-error: #b42318;
	--fg-color-warning: #8a4b00;
	--fg-color-warning-surface: #fff4da;
	--fg-color-focus: #175cd3;

	/*
	 * Verde de marca de WhatsApp, solo para su acceso flotante. No es un color
	 * de la paleta del editor: el glifo va en tinta, porque en blanco sobre este
	 * verde no llega a 3:1 (tinta: 9,6:1; tinta sobre el tono pulsado: 5,8:1).
	 */
	--fg-color-whatsapp: #25d366;
	--fg-color-whatsapp-pressed: #1da851;

	/* Espaciado V4 */
	--fg-space-4: 4px;
	--fg-space-8: 8px;
	--fg-space-12: 12px;
	--fg-space-16: 16px;
	--fg-space-20: 20px;
	--fg-space-24: 24px;
	--fg-space-32: 32px;
	--fg-space-40: 40px;
	--fg-space-48: 48px;
	--fg-space-56: 56px;
	--fg-space-64: 64px;
	--fg-space-72: 72px;
	--fg-space-80: 80px;

	/* Layout */
	--fg-container-max: 1440px;
	--fg-container-padding: 16px;
	--fg-reading-width: 65ch;
	--fg-touch-target: 44px;
	--fg-control-height: 48px;
	--fg-cta-height: 52px;
	--fg-float-size: 60px;

	/* Bordes, radios y foco */
	--fg-border-width: 1px;
	--fg-border-width-strong: 2px;
	--fg-radius-control: 4px;
	--fg-radius-panel: 8px;
	--fg-focus-ring-width: 3px;
	--fg-focus-ring-offset: 3px;

	/* Motion y elevación */
	--fg-transition-fast: 140ms;
	--fg-shadow-overlay: 0 4px 16px rgb(0 0 0 / 12%);
}

@media (width >= 640px) {
	:root {
		--fg-container-padding: 24px;
		--fg-font-size-hero: 2.5rem;
		--fg-font-size-section-title: 1.75rem;
		--fg-font-size-page-title: 2.5rem;
	}
}

@media (width >= 768px) {
	:root {
		--fg-font-size-hero: 2.875rem;
		--fg-font-size-section-title: 2rem;
		--fg-font-size-lead: 1.25rem;
		--fg-font-size-price-detail: 2rem;
	}
}

@media (width >= 1024px) {
	:root {
		--fg-container-padding: 32px;
		--fg-font-size-hero: 3.25rem;
		--fg-font-size-section-title: 2.25rem;
		--fg-font-size-page-title: 2.75rem;
	}
}

@media (width >= 1200px) {
	:root {
		--fg-font-size-hero: 3.75rem;
	}
}

/*
 * Último escalón del contenedor (V4.1 §2, DESV-01): caja 1440 y padding 40
 * dejan 1360 px útiles, el ancho que mantiene coherente la rejilla de cuatro
 * columnas sin tocar ninguna decisión estructural.
 */
@media (width >= 1440px) {
	:root {
		--fg-container-padding: 40px;
	}
}