/**
 * MERO FEST — variables de diseño del frontend.
 *
 * Todo se declara dentro de `.mf-app`: el plugin no debe alterar el aspecto
 * del resto del sitio. Los eventos pueden sobreescribir --mf-primary y
 * --mf-accent con sus propios colores desde el atributo style del contenedor.
 */

.mf-app {
	/* Marca */
	--mf-red: #d70006;
	--mf-yellow: #ffc928;
	--mf-black: #090909;
	--mf-white: #ffffff;

	/* Colores efectivos (sobreescribibles por evento) */
	--mf-primary: var(--mf-red);
	--mf-accent: var(--mf-yellow);
	--mf-dark: var(--mf-black);

	/* Neutros */
	--mf-gray-50: #f7f7f8;
	--mf-gray-100: #efeff1;
	--mf-gray-200: #dfdfe3;
	--mf-gray-300: #c9c9d0;
	--mf-gray-400: #9a9aa2;
	--mf-gray-600: #55555c;
	--mf-gray-800: #24242a;

	/* Texto sobre superficies oscuras */
	--mf-on-dark: #ffffff;
	--mf-on-dark-muted: rgba(255, 255, 255, 0.76);

	/* Radios */
	--mf-radius-sm: 8px;
	--mf-radius: 14px;
	--mf-radius-lg: 22px;
	--mf-radius-pill: 999px;

	/* Sombras */
	--mf-shadow-sm: 0 1px 2px rgba(9, 9, 9, 0.06);
	--mf-shadow: 0 6px 20px rgba(9, 9, 9, 0.08);
	--mf-shadow-lg: 0 18px 48px rgba(9, 9, 9, 0.16);

	/* Espaciado */
	--mf-space-1: 4px;
	--mf-space-2: 8px;
	--mf-space-3: 12px;
	--mf-space-4: 16px;
	--mf-space-5: 24px;
	--mf-space-6: 32px;
	--mf-space-7: 48px;
	--mf-space-8: 64px;

	/* Tipografía */
	--mf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mf-font-display: "Archivo", "Anton", Impact, var(--mf-font-sans);
	--mf-text-xs: 12px;
	--mf-text-sm: 14px;
	--mf-text-base: 16px;
	--mf-text-lg: 18px;
	--mf-text-xl: 24px;
	--mf-text-2xl: 32px;
	--mf-text-3xl: 44px;
	--mf-text-4xl: 60px;

	/* Layout */
	--mf-container: 1180px;
	--mf-container-narrow: 720px;

	/* Movimiento */
	--mf-transition: 160ms ease;
	--mf-transition-slow: 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.mf-app {
		--mf-transition: 0ms;
		--mf-transition-slow: 0ms;
	}
}