/* =============================================================================
   DKT Store — Tokens de ESCALA (Sub-fase 1.0)
   Tipografía · espaciado · motion · radios · sombras · motivo arco.
   (Los tokens de COLOR viven en brand/tokens/dkt-color-tokens.css — DEC-W047-rev.)
   Regla: en el resto del build usar SOLO estos tokens (nada de px/rem sueltos).
   ============================================================================= */
:root {

	/* ---------- Familias (sustitución web deliberada: Century Gothic→Poppins, Aptos→Inter) ---------- */
	--dkt-font-titles: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--dkt-font-body:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* ---------- Escala tipográfica (modular ~1.25, base 16px) ----------
	   Los tamaños display usan clamp() para fluidez sin media queries. */
	--fs-xs:   0.75rem;   /* 12 */
	--fs-sm:   0.875rem;  /* 14 */
	--fs-base: 1rem;      /* 16 */
	--fs-lg:   1.25rem;   /* 20 */
	--fs-xl:   1.5625rem; /* 25 */
	--fs-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 1.953rem);  /* ~28→31 */
	--fs-3xl:  clamp(2rem,   1.5rem + 2.2vw, 2.441rem);   /* ~32→39 */
	--fs-4xl:  clamp(2.4rem, 1.7rem + 3vw,   3.052rem);   /* ~38→49 */

	/* ---------- Line-heights ---------- */
	--lh-tight:   1.15;   /* display / títulos */
	--lh-snug:    1.3;    /* subtítulos */
	--lh-body:    1.6;    /* cuerpo cómodo */

	/* ---------- Tracking ---------- */
	--ls-tight:  -0.01em;
	--ls-wide:    0.08em;
	--ls-caps:    0.14em; /* eyebrows / mayúsculas */

	/* ---------- Espaciado (ritmo 4/8) ---------- */
	--space-1:  0.25rem;  /* 4  */
	--space-2:  0.5rem;   /* 8  */
	--space-3:  0.75rem;  /* 12 */
	--space-4:  1rem;     /* 16 */
	--space-5:  1.5rem;   /* 24 */
	--space-6:  2rem;     /* 32 */
	--space-8:  3rem;     /* 48 */
	--space-10: 4rem;     /* 64 */
	--space-12: 6rem;     /* 96 */

	/* ---------- Radios ---------- */
	--dkt-radius:      6px;
	--dkt-radius-lg:   12px;
	--radius-pill:     999px;

	/* ---------- Sombras (tinte vino) ---------- */
	--dkt-shadow-sm: 0 1px 3px rgba(95, 14, 57, 0.06);
	--dkt-shadow-md: 0 4px 12px rgba(95, 14, 57, 0.08);
	--dkt-shadow-lg: 0 10px 30px rgba(95, 14, 57, 0.12);

	/* ---------- Motion (Emil Kowalski: corto + easing fuerte, transform/opacity) ----------
	   Las microanimaciones ricas son 1.4; estos tokens base se definen ahora. */
	--dur-fast: 180ms;
	--dur:      240ms;
	--ease:      cubic-bezier(0.2, 0.8, 0.2, 1);   /* ease-out fuerte */
	--ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--dkt-transition: all var(--dur) var(--ease);   /* compat con estilos legacy */

	/* ---------- Motivo ARCO (firma estructural) — máscara SVG parametrizable ----------
	   Path de arco LIMPIO (autoría propia) — equivalente escalable a las flechas
	   reales de brand/curvas/ (que se conservan como assets decorativos).
	   El color lo pone background-color (currentColor / var(--accent)) vía mask. */
	--dkt-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 4 C40 13 80 13 117 4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

	/* Textura firma (DEC-W046: SOLO fondo/marca de agua, nunca ícono/favicon).
	   Pendiente técnico: vectorizar a SVG; por ahora PNG transparente. */
	--dkt-firma-texture: url('../brand/firma/firma-rosa-textura-transparente.png');
}

/* Breakpoints canónicos DKT (DEC-W067) — max-width, desktop-first.
   CSS no permite var() en @media → usar estos literales en todo el theme:
     lg: 1024px (desktop → tablet / nav → hamburguesa · grids 4→2)
     md: 768px  (tablet → móvil · grids 2→1 · hero/footer/brands apilan)
     sm: 480px  (ajustes finos · newsletter fila → columna)
   Los @media (prefers-reduced-motion) NO son breakpoints y no se tocan. */

/* Accesibilidad: respetar reduced-motion a nivel global (refuerzo en base.css). */
@media (prefers-reduced-motion: reduce) {
	:root { --dur-fast: 0ms; --dur: 0ms; }
}