/* ==========================================================================
   TelaStampiamo — Design Tokens
   Unico punto di verità per colori, tipografia, spazio, motion, z-index.
   Mai valori hardcoded altrove: sempre via var(--ts-*).
   ========================================================================== */

:root {
	/* --- Palette brand --- */
	--ts-black: #0d0d0d;     /* sfondo principale, nero quasi-assoluto */
	--ts-red: #c1272d;       /* rosso brand, esatto dal logo (logo bianco.svg) */
	--ts-white: #f5f5f5;     /* bianco caldo, testi su nero */
	--ts-red-dim: #8a1a1f;   /* rosso scuro per depth/ombre */
	--ts-gray: #1a1a1a;      /* superfici secondarie, cards */
	--ts-gray-2: #2a2a2a;    /* bordi, hairline su nero */

	/* Sezione "light" (Stampa Digitale): unico momento chiaro */
	--ts-light-bg: #f5f3ef;
	--ts-light-ink: #141414;

	/* Colori semantici (derivati) */
	--ts-text: var(--ts-white);
	--ts-text-dim: color-mix(in oklab, var(--ts-white) 62%, transparent);
	--ts-surface: var(--ts-black);
	--ts-accent: var(--ts-red);

	/* --- Tipografia --- */
	--ts-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
	--ts-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--ts-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

	/* Scala fluida (clamp: min, preferito, max) */
	--ts-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--ts-text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
	--ts-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--ts-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--ts-text-xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
	--ts-text-2xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
	--ts-text-hero: clamp(3.5rem, 1rem + 11vw, 11rem);
	--ts-text-display: clamp(2.75rem, 1rem + 8vw, 8rem);

	--ts-leading-tight: 0.95;
	--ts-leading-snug: 1.15;
	--ts-leading-body: 1.6;
	--ts-tracking-display: 0.01em;
	--ts-tracking-wide: 0.12em;

	/* --- Spazio --- */
	--ts-space-2xs: 0.5rem;
	--ts-space-xs: 0.75rem;
	--ts-space-sm: 1rem;
	--ts-space-md: 1.5rem;
	--ts-space-lg: 2.5rem;
	--ts-space-xl: 4rem;
	--ts-space-2xl: 6rem;
	--ts-space-section: clamp(4rem, 3rem + 6vw, 11rem);
	--ts-gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);
	--ts-maxw: 78rem;

	/* --- Motion --- */
	--ts-dur-fast: 150ms;
	--ts-dur-normal: 300ms;
	--ts-dur-slow: 600ms;
	--ts-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ts-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ts-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	/* --- Z-index scale --- */
	--ts-z-canvas: 1;
	--ts-z-content: 10;
	--ts-z-nav-overlay: 80;
	--ts-z-header: 100;
	--ts-z-loader: 200;

	/* --- Layout --- */
	--ts-header-h: 4.5rem;
	--ts-radius: 2px;
	--ts-hairline: 1px solid var(--ts-gray-2);
}