/**
 * Sistema di design — DAU 2026.
 *
 * Direzione svizzera: bianco, nero, griglia rigida. Il colore lo mettono le
 * fotografie dei progetti, non la pagina. È il registro dei cataloghi di
 * arredo che DAU già rivende — Kartell, Pedrali, Herman Miller stanno tutti
 * lì — e invecchia lentamente, che per un sito rifatto dopo dodici anni
 * conta più di sembrare dell'annata giusta.
 *
 * Qui dentro ci sono solo variabili. Nessuna regola che disegni qualcosa:
 * se un colore o una misura serve due volte, va definito qui e usato di là.
 */

:root {
	/* --- Colori ---------------------------------------------------------
	   Contrasti misurati sul bianco, formula WCAG 2.1:

	     --inchiostro     #111111   18,88:1   AAA
	     --inchiostro-t   #6b6b6b    5,33:1   AA
	     --segnale        #d92b1c    4,87:1   AA, ma vedi sotto

	   Cambiando un colore va rifatto il conto: il testo normale ha bisogno
	   di 4,5:1, i titoli sopra i 24px di 3:1. */
	--carta:        #ffffff;
	--carta-alta:   #ffffff;
	--carta-scura:  #f4f4f4;   /* fasce alternate */
	--inchiostro:   #111111;
	--inchiostro-t: #6b6b6b;
	--linea:        #e2e2e2;   /* filetti */
	--linea-forte:  #111111;   /* bordi che devono vedersi */

	/* Il rosso del marchio DAU.
	   NON si usa per il testo: è un segno grafico e basta - il trattino
	   davanti alle etichette di sezione. Passerebbe il contrasto minimo,
	   ma un testo rosso su bianco affatica e in una pagina che per il resto
	   è in bianco e nero sembra un errore. I link sono neri sottolineati. */
	--segnale: #d92b1c;

	/* --- Tipografia -----------------------------------------------------
	   Inter, servito dal nostro server: vedi fonts.css. Un grotesque neutro,
	   disegnato per lo schermo. Non ha personalità propria e va bene così:
	   qui la personalità sta nella griglia. */
	--sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	         "Helvetica Neue", Arial, sans-serif;
	--serif: var(--sans);

	/* Scala fluida, con salti marcati fra i livelli: il titolo deve staccare,
	   non scalare dolcemente. Il minimo vale a 360px, il massimo a 1400px. */
	--t-xs:   0.6875rem;
	--t-sm:   0.875rem;
	--t-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--t-md:   clamp(1.125rem, 1.05rem + 0.33vw, 1.375rem);
	--t-lg:   clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
	--t-xl:   clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
	--t-xxl:  clamp(3rem, 1.6rem + 6vw, 6.5rem);

	--riga-stretta: 0.98;
	--riga-media:   1.4;
	--riga-larga:   1.65;

	/* --- Spaziature -----------------------------------------------------
	   Scala su base 4px: ogni margine del sito è uno di questi valori. */
	--s1:  0.25rem;
	--s2:  0.5rem;
	--s3:  0.75rem;
	--s4:  1rem;
	--s6:  1.5rem;
	--s8:  2rem;
	--s12: 3rem;
	--s16: 4rem;
	--s24: 6rem;
	--s32: 8rem;

	--sezione: clamp(3.5rem, 2rem + 5.5vw, 8rem);

	/* --- Misure ---------------------------------------------------------- */
	--largh-max:   1320px;
	--largh-testo: 68ch;
	--gutter:      clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

	/* --- Dettagli --------------------------------------------------------
	   Angoli vivi e niente ombre: la profondità la danno i filetti e lo
	   spazio, non le sfumature. */
	--raggio:   0;
	--ombra:    none;
	--ombra-su: none;
	--transizione: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Chi ha chiesto meno animazioni non le riceve: non è una preferenza
   estetica, per alcune persone il movimento provoca nausea. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transizione: 1ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}