/*
 * Mitilli Hermanos design tokens.
 * Final client palette and the licensed-safe Phase 7B typography stack.
 */

:root {
	--mitilli-color-action: #163b41;
	--mitilli-color-action-hover: #0f2b2f;
	--mitilli-color-accent: #ead7d0;
	--mitilli-color-surface: #fdf6e9;
	--mitilli-color-surface-alt: #fffaf1;
	--mitilli-color-text: #163b41;
	--mitilli-color-text-muted: #506467;
	--mitilli-color-border: rgb(22 59 65 / 13%);
	--mitilli-color-border-subtle: rgb(22 59 65 / 9%);
	--mitilli-color-border-strong: rgb(22 59 65 / 26%);
	--mitilli-color-border-on-action: rgb(234 215 208 / 30%);
	--mitilli-color-white: #ffffff;
	--mitilli-color-on-action: #fdf6e9;
	--mitilli-color-on-action-muted: rgb(253 246 233 / 72%);
	--mitilli-color-brand-mark-green: #02382b;
	--mitilli-color-brand-mark-beige: #ead7d0;
	--mitilli-color-success: #247044;
	--mitilli-color-info: #245f8f;
	--mitilli-color-warning: #8a5a10;
	--mitilli-color-error: #9f2f2f;
	--mitilli-color-whatsapp: #25d366;
	--mitilli-color-whatsapp-hover: #20bd5a;
	--mitilli-color-on-whatsapp: #163b41;
	--mitilli-color-overlay: rgb(15 43 47 / 64%);

	/* Montserrat: alternativa libre a Gotham Narrow; Kalam: a Segoe Print (D-048). */
	--mitilli-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mitilli-font-accent: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
	--mitilli-font-display: "Storica", Georgia, serif;
	--mitilli-font-heading: var(--mitilli-font-display);
	--mitilli-font-size-xs: 0.75rem;
	--mitilli-font-size-sm: 0.875rem;
	--mitilli-font-size-base: 1rem;
	--mitilli-font-size-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
	--mitilli-font-size-xl: clamp(1.35rem, 1.18rem + 0.72vw, 1.7rem);
	--mitilli-font-size-2xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
	--mitilli-font-size-3xl: clamp(2.25rem, 1.65rem + 2.4vw, 3.6rem);
	--mitilli-font-size-hero: clamp(2.65rem, 1.75rem + 3.7vw, 5rem);
	--mitilli-font-weight-normal: 400;
	--mitilli-font-weight-medium: 600;
	--mitilli-font-weight-bold: 700;
	--mitilli-line-height-tight: 1.08;
	--mitilli-line-height-heading: 1.2;
	--mitilli-line-height-body: 1.55;
	--mitilli-letter-spacing-heading: -0.025em;
	--mitilli-letter-spacing-display: 0;
	--mitilli-letter-spacing-label: 0.055em;

	--mitilli-space-1: 0.25rem;
	--mitilli-space-2: 0.5rem;
	--mitilli-space-3: 0.75rem;
	--mitilli-space-4: 1rem;
	--mitilli-space-5: 1.25rem;
	--mitilli-space-6: 1.5rem;
	--mitilli-space-8: 2rem;
	--mitilli-space-10: 2.5rem;
	--mitilli-space-12: 3rem;
	--mitilli-space-16: 4rem;
	--mitilli-space-20: 5rem;
	--mitilli-section-space: clamp(2.5rem, 1.8rem + 3vw, 5rem);

	--mitilli-radius-sm: 0.25rem;
	--mitilli-radius-md: 0.625rem;
	--mitilli-radius-lg: 1rem;
	--mitilli-radius-pill: 999px;
	--mitilli-shadow-sm: 0 1px 2px rgb(15 43 47 / 6%);
	--mitilli-shadow-md: 0 8px 24px rgb(15 43 47 / 12%);
	--mitilli-shadow-lg: 0 24px 64px rgb(15 43 47 / 20%);
	--mitilli-transition-fast: 140ms ease;
	--mitilli-transition: 220ms ease;

	--mitilli-container: 80rem;
	--mitilli-reading-width: 68ch;
	--mitilli-header-height: 5rem;
	--mitilli-control-height: 2.875rem;
	--mitilli-tap-target: 2.75rem;

	/* Legacy aliases kept while older plugin markup is migrated. */
	--mity-marca: var(--mitilli-color-action);
	--mity-marca-hover: var(--mitilli-color-action-hover);
	--mity-rojo-vivo: var(--mitilli-color-accent);
	--mity-texto-fuerte: var(--mitilli-color-text);
	--mity-texto: var(--mitilli-color-text);
	--mity-texto-suave: var(--mitilli-color-text-muted);
	--mity-texto-invertido: var(--mitilli-color-white);
	--mity-fondo: var(--mitilli-color-surface);
	--mity-fondo-sutil: var(--mitilli-color-surface-alt);
	--mity-fondo-claro: var(--mitilli-color-surface);
	--mity-fondo-oscuro: var(--mitilli-color-action-hover);
	--mity-borde: var(--mitilli-color-border);
	--mity-borde-fuerte: var(--mitilli-color-text-muted);
	--mity-exito: var(--mitilli-color-success);
	--mity-info: var(--mitilli-color-info);
	--mity-error: var(--mitilli-color-error);
	--mity-aviso: var(--mitilli-color-warning);
	--mity-whatsapp: var(--mitilli-color-whatsapp);
	--mity-whatsapp-hover: var(--mitilli-color-whatsapp-hover);
	--mity-precio: var(--mitilli-color-text);
	--mity-precio-oferta: var(--mitilli-color-accent);
	--mity-fuente-base: var(--mitilli-font-body);
	--mity-fuente-titulo: var(--mitilli-font-display);
	--mity-texto-xs: var(--mitilli-font-size-xs);
	--mity-texto-sm: var(--mitilli-font-size-sm);
	--mity-texto-base: var(--mitilli-font-size-base);
	--mity-texto-lg: var(--mitilli-font-size-lg);
	--mity-texto-xl: var(--mitilli-font-size-xl);
	--mity-texto-2xl: var(--mitilli-font-size-2xl);
	--mity-texto-3xl: var(--mitilli-font-size-3xl);
	--mity-texto-4xl: var(--mitilli-font-size-hero);
	--mity-peso-normal: var(--mitilli-font-weight-normal);
	--mity-peso-medio: var(--mitilli-font-weight-medium);
	--mity-peso-fuerte: var(--mitilli-font-weight-bold);
	--mity-interlineado-ajustado: var(--mitilli-line-height-tight);
	--mity-interlineado-titulo: var(--mitilli-line-height-heading);
	--mity-interlineado-normal: var(--mitilli-line-height-body);
	--mity-tracking-titulo: var(--mitilli-letter-spacing-heading);
	--mity-tracking-mayusculas: var(--mitilli-letter-spacing-label);
	--mity-esp-1: var(--mitilli-space-1);
	--mity-esp-2: var(--mitilli-space-2);
	--mity-esp-3: var(--mitilli-space-3);
	--mity-esp-4: var(--mitilli-space-4);
	--mity-esp-5: var(--mitilli-space-5);
	--mity-esp-6: var(--mitilli-space-6);
	--mity-esp-8: var(--mitilli-space-8);
	--mity-esp-10: var(--mitilli-space-10);
	--mity-esp-12: var(--mitilli-space-12);
	--mity-esp-16: var(--mitilli-space-16);
	--mity-esp-20: var(--mitilli-space-20);
	--mity-seccion-y: var(--mitilli-section-space);
	--mity-radio-sm: var(--mitilli-radius-sm);
	--mity-radio-md: var(--mitilli-radius-md);
	--mity-radio-lg: var(--mitilli-radius-lg);
	--mity-radio-completo: var(--mitilli-radius-pill);
	--mity-sombra-sm: var(--mitilli-shadow-sm);
	--mity-sombra-md: var(--mitilli-shadow-md);
	--mity-sombra-lg: var(--mitilli-shadow-lg);
	--mity-transicion: var(--mitilli-transition-fast);
	--mity-transicion-lenta: var(--mitilli-transition);
	--mity-ancho-contenido: var(--mitilli-container);
	--mity-ancho-texto: var(--mitilli-reading-width);
}

/*
 * Paleta global de Kadence en la paleta de marca. Kadence la guarda en la base
 * (Personalizar › Colores) y, si falta, cae en su azul por defecto: pasó al
 * reconstruir el sitio en 2026-09-23 y el botón «Agregar al pedido» salió azul.
 * Fijarla acá la hace independiente de la base. `:root:root` le gana al
 * `:root` que Kadence imprime inline.
 */
:root:root {
	--global-palette1: var(--mitilli-color-action);
	--global-palette2: var(--mitilli-color-action-hover);
	--global-palette3: var(--mitilli-color-text);
	--global-palette4: var(--mitilli-color-text);
	--global-palette5: var(--mitilli-color-text-muted);
	--global-palette6: var(--mitilli-color-text-muted);
	--global-palette7: var(--mitilli-color-accent);
	--global-palette8: var(--mitilli-color-surface);
	--global-palette9: var(--mitilli-color-white);
	--global-palette-highlight: var(--mitilli-color-action);
	--global-palette-highlight-alt: var(--mitilli-color-action-hover);
	--global-palette-highlight-alt2: var(--mitilli-color-on-action);
	--global-palette-btn-bg: var(--mitilli-color-action);
	--global-palette-btn-bg-hover: var(--mitilli-color-action-hover);
	--global-palette-btn: var(--mitilli-color-on-action);
	--global-palette-btn-hover: var(--mitilli-color-on-action);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--mitilli-transition-fast: 0ms;
		--mitilli-transition: 0ms;
		--mity-transicion: 0ms;
		--mity-transicion-lenta: 0ms;
	}
}