/* tokens.css — fuente única de valores visuales (extraídos de Figma, nodo 33156:3563) */
:root {
	/* color */
	--ink: #0a0908;
	--surface: #ebebeb;
	--red: #f30004;
	--inverse: #fdfdfc;

	/* espaciado — sistema 8/16/24/32 */
	--space-s: 8px;
	--space-m: 16px;
	--space-l: 24px;
	--space-xl: 32px;

	/* marco exterior */
	--frame: 24px;

	/* tipografía — Chivo Mono única familia */
	--font-mono: "Chivo Mono", ui-monospace, "Cascadia Mono", monospace;
	--fs-display: 64px;
	--fs-heading: 22px;
	--fs-menu: 12px;
	--fs-body: 12px;
	--ls-menu: 0.08em;     /* UI/Menu: letterSpacing 8% */
	--ls-heading: -0.01em; /* Heading/S: -1% */
	--ls-body: -0.01em;    /* Body/XS: -1% */
	--lh-heading: 1.25;
	--lh-body: 1.4;

	/* líneas finas con conciencia de densidad de píxel */
	--hairline: 1px;

	/* carrusel */
	--card-w: min(540px, 36vw); /* 540/1512 de Figma, relativo al viewport */
	--card-gap: var(--space-l);
}

@media (min-resolution: 2dppx) {
	:root { --hairline: 0.5px; }
}

/* rango intermedio (tablet / desktop estrecho): card proporcionada,
   36vw aquí daría cards esqueléticas frente a la franja alta */
@media (max-width: 1100px) {
	:root {
		--card-w: min(440px, 52vw);
	}
}

/* móvil: la card protagonista deja asomar un dedo de las vecinas a cada
   lado (~15-24px según ancho) — y sitio para el efecto-firma de Fase 2 */
@media (max-width: 720px) {
	:root {
		--frame: 8px;
		--card-w: 72vw;
		--card-gap: 12px;
	}
}