/* Track Tagz — tokens de diseño.
   Fuente de verdad: paleta documentada en wordpress/CLAUDE.md,
   extraída del tema shrinepro de Shopify. */

:root {
	/* Color */
	--tt-negro: #121212;
	--tt-negro-profundo: #0b0b0c; /* fondo de las secciones oscuras v6 */
	--tt-crema: #fdfbf7;
	--tt-crema-claro: #f6f4ee;    /* fondo de secciones claras v6 */
	--tt-texto: #444444;
	--tt-texto-invertido: #f6f4ee;
	--tt-ambar: #ffbd59;          /* acento de marca */
	--tt-amarillo: #ffd21a;       /* acento usado en las secciones v6; a unificar */
	--tt-rojo: #dd1d1d;           /* solo botones de compra */
	--tt-blanco: #ffffff;

	/* Semánticos */
	--tt-fondo: var(--tt-crema);
	--tt-superficie: var(--tt-blanco);
	--tt-acento: var(--tt-ambar);
	--tt-compra: var(--tt-rojo);
	--tt-borde: rgba(18, 18, 18, 0.12);

	/* Tipografía */
	--tt-fuente: "Mulish", -apple-system, "Segoe UI", Roboto, sans-serif;
	--tt-texto-base: 1rem;        /* 16px */
	--tt-interlineado: 1.5;

	/* Escala tipográfica fluida */
	--tt-h1: clamp(2rem, 5vw, 3.25rem);
	--tt-h2: clamp(1.5rem, 3.5vw, 2.25rem);
	--tt-h3: clamp(1.2rem, 2.5vw, 1.5rem);

	/* Espaciado */
	--tt-esp-1: 0.5rem;
	--tt-esp-2: 1rem;
	--tt-esp-3: 1.5rem;
	--tt-esp-4: 2.5rem;
	--tt-esp-5: 4rem;
	--tt-seccion: clamp(3rem, 8vw, 5rem); /* padding vertical de secciones */

	/* Layout */
	--tt-ancho: 72rem;
	--tt-radio: 12px;
	--tt-radio-chico: 8px;

	/* Transiciones. Easing "rápido al principio, aterrizaje suave",
	   tomado del análisis de referencias (retrovizion/aura). */
	--tt-suave: cubic-bezier(0.19, 1, 0.22, 1);
	--tt-transicion: 250ms var(--tt-suave);
	--tt-transicion-lenta: 700ms var(--tt-suave);

	/* Alturas fijas para evitar saltos de layout */
	--tt-header-alto: 64px;
	--tt-announcement-alto: 36px;
}