/**
 * SISTEMA DE DISEÑO ZIHOUSE
 *
 * Principio rector (propio, inspirado en el sistema proporcional estudiado en las
 * referencias): NO hay tamaños fijos. Existe una unidad fluida `--zihouse-u` que se
 * recalcula por dispositivo respecto a un "ancho ideal" distinto en escritorio,
 * tablet y móvil. Tipografía y espaciado derivan de ella, así cada breakpoint queda
 * proporcionado por sí mismo en vez de ser un escritorio encogido.
 *
 * Paleta: neutros prácticamente acromáticos (croma <= 0.005). Los tonos cálidos
 * anteriores (croma hasta 0.012 hacia naranja) daban una sensación pesada, de
 * tierra. Aquí el color no construye nada: la belleza tiene que venir de la
 * composición, las proporciones, la fotografía y la tipografía.
 *
 * REGLA DEL MORADO: es acento, nunca superficie. Solo puede aparecer en el CTA
 * principal, el foco de teclado, estados activos y hover. Ningún bloque, banda ni
 * sección puede tener fondo morado. Si una sección necesita un fondo de color para
 * funcionar, la composición está mal resuelta: hay que rediseñarla, no pintarla.
 */

:root {
	/* --- Unidad fluida ---------------------------------------------------
	   Escritorio: ideal 1920px. 1rem a 1920 → escala suave entre 14px y 19px. */
	--zihouse-ideal: 1920;
	--zihouse-u: clamp(0.875rem, calc(100vw / (var(--zihouse-ideal) / 16)), 1.1875rem);

	/* --- Color: neutros limpios ------------------------------------------
	   Equivalencias exactas de la paleta aprobada, en OKLCH:
	   #FAFAF8 · #F5F5F2 · #FFFFFF · #ECECE8 · #1F1F1F · #666666
	   Los nombres ivory/sand/stone se conservan para no romper referencias, pero
	   ya no describen tonos cálidos: son escalones de un neutro casi puro. */
	--zihouse-ivory: oklch(98.5% 0.003 106);        /* #FAFAF8 */
	--zihouse-sand: oklch(96.9% 0.004 106);         /* #F5F5F2 */
	--zihouse-stone: oklch(94.2% 0.005 107);        /* #ECECE8 */
	--zihouse-card: oklch(100% 0 0);                /* #FFFFFF */
	--zihouse-warm-grey: oklch(51% 0 0);            /* #666666 */
	--zihouse-charcoal: oklch(35% 0 0);
	--zihouse-near-black: oklch(23.9% 0 0);         /* #1F1F1F */

	/* ── Lienzo crema de marca (prototipo aprobado) ──────────────────────────────
	   El crema es el fondo GENERAL del sitio; tarjetas/paneles van en blanco cálido
	   para destacar sobre él. Variables base globales + roles mapeados (cascada). */
	--zihouse-bg: #fff9f1;         /* crema cálido y luminoso: lienzo general del sitio */
	--zihouse-surface: #fffdf9;    /* blanco cálido: tarjetas y paneles */
	--zihouse-white: #ffffff;      /* blanco puro donde haga falta */
	--zihouse-ink: #29241f;        /* tinta cálida */
	--zihouse-muted: #756d66;      /* texto atenuado cálido */
	--zihouse-line: rgba(41, 36, 31, 0.11);

	/* Roles (mapeados a la base crema → cascada a todo el sitio) */
	--zihouse-color-bg: var(--zihouse-bg);
	--zihouse-color-surface: var(--zihouse-surface);
	--zihouse-color-surface-strong: #efe7db;   /* crema un punto más marcado */
	--zihouse-color-border: var(--zihouse-line);
	--zihouse-color-ink: var(--zihouse-ink);
	--zihouse-color-ink-muted: var(--zihouse-muted);

	/* Identidad ZIHOUSE. Único color con croma de todo el sistema.
	   Superficie permitida: SOLO el fondo del CTA principal. Nada más. */
	--zihouse-color-accent: #99539c;          /* morado del logo ZIHOUSE (más sutil/mauve) */
	--zihouse-color-accent-hover: #7e4181;    /* mismo morado, más oscuro para hover */
	--zihouse-color-on-accent: #ffffff;

	--zihouse-color-success: oklch(48% 0.09 150);
	--zihouse-color-warning: oklch(58% 0.12 70);
	--zihouse-color-danger: oklch(50% 0.15 25);
	--zihouse-color-overlay: oklch(23.9% 0 0 / 0.55);

	/* --- Tipografía: dos familias, ni una más --------------------------- */
	--zihouse-font-display: "Fraunces Variable", "Iowan Old Style", Georgia, serif;
	--zihouse-font-body: "Public Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Escala derivada de la unidad fluida */
	--zihouse-text-xs: calc(var(--zihouse-u) * 0.75);
	--zihouse-text-sm: calc(var(--zihouse-u) * 0.875);
	--zihouse-text-base: var(--zihouse-u);
	--zihouse-text-lg: calc(var(--zihouse-u) * 1.25);
	--zihouse-text-xl: calc(var(--zihouse-u) * 1.6);
	--zihouse-text-2xl: calc(var(--zihouse-u) * 2.2);
	--zihouse-text-3xl: calc(var(--zihouse-u) * 3.2);
	--zihouse-text-display: calc(var(--zihouse-u) * 4.6);
	--zihouse-text-hero: clamp(2.75rem, calc(var(--zihouse-u) * 5.2), 5.5rem);

	--zihouse-leading-tight: 1.04;
	--zihouse-leading-snug: 1.28;
	--zihouse-leading-normal: 1.6;

	--zihouse-tracking-tight: -0.028em;
	--zihouse-tracking-wide: 0.08em;

	/* --- Espaciado: mismo origen fluido --------------------------------- */
	--zihouse-space-3xs: calc(var(--zihouse-u) * 0.25);
	--zihouse-space-2xs: calc(var(--zihouse-u) * 0.5);
	--zihouse-space-xs: calc(var(--zihouse-u) * 0.75);
	--zihouse-space-sm: var(--zihouse-u);
	--zihouse-space-md: calc(var(--zihouse-u) * 1.5);
	--zihouse-space-lg: calc(var(--zihouse-u) * 2.5);
	--zihouse-space-xl: calc(var(--zihouse-u) * 4);
	--zihouse-space-2xl: calc(var(--zihouse-u) * 6.5);
	--zihouse-space-3xl: calc(var(--zihouse-u) * 10);

	/* --- Forma: mínima. Editorial, no "tarjetas" ------------------------ */
	--zihouse-radius-sm: 2px;
	--zihouse-radius-md: 3px;
	--zihouse-radius-lg: 4px;
	--zihouse-radius-pill: 999px;

	--zihouse-shadow-sm: 0 1px 2px oklch(17% 0.006 60 / 0.05);
	--zihouse-shadow-md: 0 10px 30px oklch(17% 0.006 60 / 0.07);
	--zihouse-shadow-lg: 0 24px 60px oklch(17% 0.006 60 / 0.12);

	/* --- Estructura ------------------------------------------------------ */
	--zihouse-container-max: 1600px;
	--zihouse-container-pad: clamp(1.25rem, 4.5vw, 5rem);
	--zihouse-header-height: calc(var(--zihouse-u) * 5);
	--zihouse-banner-height: 0px;

	/* --- Motion ---------------------------------------------------------- */
	--zihouse-ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
	--zihouse-ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);
	--zihouse-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--zihouse-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--zihouse-duration-fast: 200ms;
	--zihouse-duration-base: 320ms;
	--zihouse-duration-slow: 620ms;
	--zihouse-duration-reveal: 1100ms;

	/* --- z-index semántico ---------------------------------------------- */
	--zihouse-z-dropdown: 20;
	--zihouse-z-sticky: 30;
	--zihouse-z-modal-backdrop: 40;
	--zihouse-z-modal: 50;
	--zihouse-z-toast: 60;
	--zihouse-z-tooltip: 70;

	/* --- Ecommerce (sistema visual de tienda) ---------------------------
	   Extienden el sistema, no lo cambian. Ver informes/sistema-visual-ecommerce.md */
	--zihouse-color-instock: var(--zihouse-color-success);   /* punto + "En stock" */
	--zihouse-color-lowstock: var(--zihouse-color-warning);  /* "Últimas unidades" */
	--zihouse-color-outstock: var(--zihouse-color-ink-muted);/* "Agotado" en gris, no rojo */
	--zihouse-color-sale: var(--zihouse-color-danger);       /* precio rebajado, muy puntual */

	/* Lienzo de producto: marfil CÁLIDO (no blanco), afín al crema del sitio, con
	   borde tenue y radio máximo 6px. Las fotos «sobre blanco» funden su fondo con
	   este marfil (mix-blend-multiply) → el producto ya no flota en un rectángulo
	   blanco stark; se posa sobre un tono continuo con el fondo de la página. */
	--zihouse-shop-media-bg: #faf6ee;
	--zihouse-shop-media-border: #e5ded4;
	--zihouse-shop-sidebar-w: clamp(15rem, 20vw, 19rem);     /* filtros sticky */
	--zihouse-grid-gap: var(--zihouse-space-lg);
	--zihouse-card-media-ratio: 3 / 4;
	--zihouse-control-h: calc(var(--zihouse-u) * 3);         /* inputs / selects / steppers */
	--zihouse-swatch: calc(var(--zihouse-u) * 2.2);          /* muestra de tejido / color */
}

/* Tablet: ancho ideal propio → proporciones rediseñadas, no encogidas. */
@media (max-width: 64rem) {
	:root {
		--zihouse-ideal: 900;
		--zihouse-u: clamp(0.9375rem, calc(100vw / (var(--zihouse-ideal) / 16)), 1.125rem);
		--zihouse-header-height: calc(var(--zihouse-u) * 4.2);
	}
}

/* Móvil: ancho ideal propio. */
@media (max-width: 40rem) {
	:root {
		--zihouse-ideal: 600;
		--zihouse-u: clamp(0.9375rem, calc(100vw / (var(--zihouse-ideal) / 16)), 1.0625rem);
		--zihouse-space-2xl: calc(var(--zihouse-u) * 4.5);
		--zihouse-space-3xl: calc(var(--zihouse-u) * 6);
		--zihouse-header-height: calc(var(--zihouse-u) * 3.8);
	}
}