/* ==========================================================================
   Zarevo v2 — tokens.css  ·  EL CONTRATO DE TOKENS (capa design/)
   Dirección "Vidriera cálida" — portada de Zarevo v1: Bricolage Grotesque +
   base carbón/piedra cálida + rojo #9c2a20 quirúrgico. Light-only.
   Ver docs/direccion-de-diseño.md. core/*.css consume SOLO los semánticos.
   ========================================================================== */

/* ---------------- Fuentes self-hosted (regla dura del motor) --------------
   Variables (eje wght 400..800). Bajadas de Fontsource. Sin Google Fonts. */
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../../fonts/bricolage-grotesque-latin-wght.woff2') format('woff2-variations');
	font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../../fonts/inter-latin-wght.woff2') format('woff2-variations');
	font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
	/* ================= 1. TOKENS DE MARCA (rampas crudas, libres) ========= */
	/* Carbón cálido — titulares, acción secundaria, stage. Sin azul/slate. */
	--zv-carbon-900: #1a1714;   /* titulares / stage / ink fuerte            */
	--zv-carbon-700: #2c2722;   /* hover secundario                          */
	--zv-carbon-600: #38322b;   /* botón secundario (texto blanco, 12.7:1)   */
	--zv-carbon-500: #565049;   /* ink-2                                     */
	--zv-carbon-400: #6b6459;   /* muted — 5.55:1 s/paper, 5.2:1 s/stone     */
	--zv-carbon-100: #e7e3dc;   /* brand-soft / selección                    */

	/* Piedra cálida — fondos */
	--zv-stone-0: #ffffff;      /* raised (tarjetas/modales/panel hero)      */
	--zv-paper:   #faf9f6;      /* surface base                              */
	--zv-stone-1: #f2f0eb;      /* surface-2 (bandas alternas)               */
	--zv-line:    #e5e1d9;      /* hairline cálida                           */

	/* Rojo quirúrgico — ÚNICO acento cromático del sistema */
	--zv-red:        #9c2a20;   /* precio / oferta / acción / focus          */
	--zv-red-600:    #842018;   /* hover CTA (texto blanco, 9.5:1)           */
	--zv-red-700:    #6e1b14;   /* texto-acento sobre claro (10.9:1)         */
	--zv-red-soft:   #f2e4e0;   /* tint de badges/chips                      */
	--zv-red-bright: #c0493b;   /* brick claro para sobre stage oscuro       */

	/* Sombras cálidas bespoke + easing de orquestación (los usa la capa design) */
	--sh-soft:  0 1px 0 rgba(255,255,255,.5) inset, 0 0 0 1px rgba(26,23,20,.06), 0 24px 50px -30px rgba(26,23,20,.45);
	--sh-float: 0 2px 6px rgba(26,23,20,.05), 0 18px 45px -22px rgba(26,23,20,.4);
	--ease-out-quint: cubic-bezier(.22, 1, .36, 1);

	/* ================= 2. TOKENS SEMÁNTICOS (contrato FIJO) =============== */
	/* Superficies y tinta */
	--surface: var(--zv-paper);
	--surface-2: var(--zv-stone-1);
	--surface-raised: var(--zv-stone-0);
	--surface-inverse: var(--zv-carbon-900);
	--ink: #33302b;                 /* cuerpo — 12.5:1 s/#faf9f6              */
	--ink-2: var(--zv-carbon-500);  /* secundario                            */
	--ink-3: var(--zv-carbon-400);  /* muted — AA ≥4.5 s/surface y surface-2  */
	--line: var(--zv-line);

	/* Marca y acción */
	--brand: var(--zv-carbon-600);
	--brand-strong: var(--zv-carbon-900);
	--brand-soft: var(--zv-carbon-100);
	--accent: var(--zv-red);
	--accent-strong: var(--zv-red-700);
	--accent-soft: var(--zv-red-soft);
	--cta-bg: var(--zv-red);          /* la conversión es roja (checkout hereda) */
	--cta-ink: #ffffff;               /* 7.6:1 sobre --cta-bg                  */
	--cta-bg-hover: var(--zv-red-600);/* 9.5:1                                 */

	/* Estados (--error separado del rojo de marca para no confundir) */
	--ok: #3f7a4e;    --ok-soft: #e6efe7;
	--info: #356e84;  --info-soft: #e4edf0;
	--warn: #b5781f;  --warn-soft: #f6ecd8;
	--error: #a3271c; --error-soft: #f4e4e0;

	/* Tipografía (escala/lh = métrica probada v1, heredada) */
	--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fs-display: clamp(2.7rem, 1.5rem + 4vw, 5rem); /* hero confiado (RESERVADO)*/
	--fs-h1: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
	--fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	--fs-body: 1rem;
	--fs-sm: 0.875rem;
	--fs-xs: 0.75rem;
	--lh-tight: 1.06;   /* titulares display; el hero baja a ~0.95 en su piel */
	--lh-snug: 1.3;
	--lh-body: 1.65;

	/* Forma y profundidad (radios DIFERENCIADOS, sombras cálidas) */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-card: 16px;
	--radius-pill: 999px;
	--border-w: 1px;
	--shadow-1: 0 1px 2px rgba(26,23,20,.06);
	--shadow-2: 0 6px 20px rgba(26,23,20,.08);
	--shadow-3: 0 18px 50px rgba(26,23,20,.12);

	/* Ritmo y layout (métrica v1) */
	--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
	--sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
	--container: 1240px;
	--container-narrow: 880px;
	--gutter: clamp(1rem, 3vw, 2rem);
	--header-h: 76px;

	/* Movimiento (DURACIÓN y EASING separados — contrato v2) */
	--tr: 200ms;
	--tr-slow: 420ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

	/* z-index semántico */
	--z-nav: 50; --z-overlay: 90; --z-modal: 100; --z-toast: 110;

	/* Foco: rojo 7.2:1 s/surface. Sobre --surface-inverse la piel lo sube a claro. */
	--focus-ring: var(--zv-red);
}