/**
 * Tokens base de Maison Akari.
 * Paleta tomada directamente del brief (sección 5): marfil, crema,
 * blanco cálido, burdeos profundo, plata. Estos valores son el punto
 * de partida técnico; se afinan (si hace falta) al diseñar Inicio en
 * Fase 2, pero el sistema de variables ya queda armado desde ahora.
 */

:root {
	/* Color */
	--mka-color-marfil: #FAF8F5;
	--mka-color-crema: #EFE6D8;
	--mka-color-blanco-calido: #FFFDF9;
	--mka-color-burdeos: #5E1B26;
	--mka-color-plata: #C7C9CC;
	--mka-color-texto: #2B2420;
	--mka-color-texto-suave: #6B6055;

	/* Espaciado (escala editorial, mucho aire) */
	--mka-espaciado-xs: 0.5rem;
	--mka-espaciado-sm: 1rem;
	--mka-espaciado-md: 2rem;
	--mka-espaciado-lg: 4rem;
	--mka-espaciado-xl: 8rem;

	/* Tipografía — placeholder técnico, se define la fuente final en Fase 2 */
	--mka-font-display: Georgia, 'Times New Roman', serif;
	--mka-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Proporciones de imagen (sección 12 — estrategia de placeholders).
	   El hero no usa proporción fija: 100svh + object-fit: cover. */
	--mka-ratio-producto-grid: 4 / 5;
	--mka-ratio-producto-zoom: 1 / 1;
	--mka-ratio-instagram: 1 / 1;

	/* Header */
	--mka-header-height: 6.5rem;
}

/* Reset mínimo — no interfiere con Astra, solo neutraliza defaults ruidosos */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/**
 * !important justificado aquí: Astra aplica su propia clase de
 * contenedor (`.ast-plain-container`, especificidad de clase) sobre
 * el elemento `body`, que vence a un selector de tipo simple. Es una
 * anulación deliberada y puntual del fondo por defecto del padre
 * (sección 10: "si Astra se ve a WordPress, se sobrescribe").
 */
body {
	background-color: var(--mka-color-marfil) !important;
	color: var(--mka-color-texto);
	font-family: var(--mka-font-body);
}