/* Design token del sito di Lumacheria Italiana.
   Unica fonte dei valori: nessun colore, corpo o spaziatura di sistema va
   scritto altrove. Il test TokenTest lo verifica leggendo gli altri fogli.

   I valori arrivano dalla specifica del 9 settembre 2026, dove sono stati
   scelti confrontando tre direzioni grafiche su fotografie vere. I commenti
   spiegano perche' un valore e' quello che e': un valore senza il suo perche'
   e' il primo a essere cambiato per sbaglio. */

:root {
	/* ── Carta ──────────────────────────────────────────── */
	/* Il fondo di base e' bianco pieno. L'oro chiarissimo e' il secondo tono,
	   riservato alle fasce che devono staccare: le aperture delle pagine
	   interne e le sezioni di respiro. Caldo ma quasi bianco, senza texture.
	   Su carta bianca i packshot del catalogo, scontornati su bianco, non
	   mostrano il rettangolo dell'immagine. */
	--esca-bianco: #FFFFFF;
	--esca-fondo-caldo: #FAF7EF;

	/* ── Inchiostro ─────────────────────────────────────── */
	/* Non nero: un bruno scurissimo. E' il fondo su cui vive l'oro, e un nero
	   neutro glielo raffredda, facendolo leggere come un giallo qualunque
	   invece che come metallo. E' anche il colore giusto per questa azienda:
	   terra, non ardesia. */
	--esca-inchiostro: #1C1712;

	/* ── Testo ──────────────────────────────────────────── */
	/* Della stessa famiglia calda dell'inchiostro: un testo grigio neutro
	   accanto a una tinta calda si legge come stonato.
	   Misura 8,00:1 sul bianco e 7,47:1 sull'oro chiarissimo. */
	--esca-testo: var(--esca-inchiostro);
	--esca-testo-tenue: #57503F;

	/* ── Oro ────────────────────────────────────────────── */
	/* Due ori e non uno, e la ragione e' il contrasto.

	   L'oro decorativo misura 3,27:1 sull'oro chiarissimo. Regge come
	   filetto, dove e' decorazione e non deve essere letto, ma un occhiello in
	   maiuscoletto e' testo piccolo e a quel contrasto non si legge.

	   L'oro da testo misura 5,43:1 sul fondo caldo e 5,81:1 sul bianco: passa il
	   criterio WCAG 1.4.3 su entrambe le carte, ed e' per questo che e' piu'
	   scuro dell'altro.

	   Sul fondo scuro non c'e' il problema: l'oro chiaro ci misura sopra
	   9,65:1.

	   L'oro da tratto sul fondo caldo arriva a 3,27:1, sopra il 3:1 che il
	   criterio WCAG 1.4.11 chiede a cio' che identifica un componente o il
	   suo stato. La regola resta la stessa: i tratti che indicano qualcosa
	   di interattivo, la voce di menu attiva e la sottolineatura di un
	   legame, usano l'oro da testo; l'oro da tratto resta ai filetti, che
	   sono decorazione e non devono essere letti. */
	--esca-oro-tratto: #A8842E;
	--esca-oro-testo: #7E611A;
	--esca-errore: #8C2F17;
	--esca-oro-su-scuro: #D8BC7A;

	/* ── Superfici e tratti ─────────────────────────────── */
	/* Il tratto non e' un colore pieno: e' l'inchiostro a bassa opacita' su
	   carta chiara e la carta a bassa opacita' su fondo scuro. Cosi' lo stesso
	   filetto funziona su bianco e su fondo caldo senza doverne dichiarare due. */
	--esca-filo: rgba(28, 23, 18, 0.14);
	--esca-filo-su-scuro: rgba(244, 241, 233, 0.18);
	/* Il contorno dei campi del modulo: almeno 3:1 sul bianco e sull'oro chiarissimo. */
	--esca-filo-campo: rgba(28, 23, 18, 0.55);
	--esca-anello-focus: 0 0 0 3px rgba(168, 132, 46, 0.35);

	/* Colori di primo piano nei contesti scuri. Il tono tenue misura 7,43:1
	   sull'inchiostro, calcolato sul colore composito. */
	--esca-su-scuro: #F4F1E9;
	--esca-su-scuro-tenue: rgba(244, 241, 233, 0.66);

	/* La velatura della hero. Il testo sta sempre sul lato pieno, la
	   fotografia respira sul lato destro. */
	--esca-velo-hero: linear-gradient(
		90deg,
		rgba(18, 13, 9, 0.95) 0%,
		rgba(18, 13, 9, 0.84) 44%,
		rgba(18, 13, 9, 0.12) 80%
	);

	/* Su schermo stretto il testo occupa tutta la larghezza: la velatura copre
	   tutta la foto e lascia respirare solo la parte alta. */
	--esca-velo-hero-stretto: linear-gradient(
		180deg,
		rgba(18, 13, 9, 0.55) 0%,
		rgba(18, 13, 9, 0.86) 40%,
		rgba(18, 13, 9, 0.9) 100%
	);

	/* Hero con foto verticale: velo in alto per la testata, foto che sfuma nel nero, velo sotto i testi. */
	--esca-velo-hero-mobile:
		linear-gradient(0deg, rgba(18, 13, 9, 0.9) 0, rgba(18, 13, 9, 0.9) 35%, rgba(18, 13, 9, 0) 60%),
		linear-gradient(
			180deg,
			rgba(18, 13, 9, 0.5) 0,
			rgba(18, 13, 9, 0) 20vw,
			rgba(18, 13, 9, 0) 100vw,
			var(--esca-inchiostro) 125vw
		);

	/* La velatura della fascia immersiva. Sale dal fondo invece di coprire
	   tutto: la fotografia si vede per intero e il testo resta leggibile dove
	   sta, che e' in basso a sinistra. */
	--esca-velo-basso: rgba(18, 13, 9, 0.82);

	/* La velatura in alto della hero, sotto la testata trasparente: logo e menu
	   devono leggersi anche dove la fotografia e' chiara. */
	--esca-velo-alto: linear-gradient(
		180deg,
		rgba(18, 13, 9, 0.55) 0%,
		rgba(18, 13, 9, 0) 28%
	);

	/* ── Testata ────────────────────────────────────────── */
	/* Due altezze: piena in cima alla pagina, compatta quando rientra
	   scorrendo. Il logo e' impilato, quindi sotto i 3.25rem la scritta non si
	   legge piu'. */
	--esca-testata-alta: 6rem;
	--esca-testata-bassa: 4.75rem;
	--esca-logo-alto: 4.5rem;
	--esca-logo-basso: 3.25rem;
	--esca-durata: 200ms;

	/* ── Tipografia ─────────────────────────────────────── */
	/* Un Didone da titolo e un bastone da testo. E' l'accoppiata che dice
	   "elegante" piu' in fretta di qualunque altra, e per questo va usata con
	   disciplina: il Didone sta ai titoli e ai richiami in corsivo, mai al
	   testo corrente. */
	--esca-font-titolo: "Playfair Display Variable", Georgia, "Times New Roman", serif;
	--esca-font-testo: "Inter Variable", system-ui, -apple-system, sans-serif;

	/* ── Corpi ──────────────────────────────────────────── */
	/* Inter. Pavimento a 13px per gli occhielli e 14px per i microtesti: portano informazione. */
	--esca-dim-occhiello: 0.8125rem;
	--esca-dim-piccolo: 0.875rem;
	/* Etichette delle schede in catalogo: senza spaziatura larga reggono anche sotto i 14px. */
	--esca-dim-mini: 0.75rem;
	--esca-dim-normale: 1rem;
	--esca-dim-medio: 1.125rem;

	/* Da qui in giu' e' Playfair, e Playfair non scende sotto i 20px: e' un
	   Didone, e a corpo piccolo i tratti sottili si sfilacciano. Il minimo di
	   ogni clamp rispetta questa soglia, e
	   TokenTest la verifica sul sottotitolo, che e' il corpo piu' basso. */
	--esca-dim-sottotitolo: 1.3125rem;
	--esca-dim-titolo: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
	--esca-dim-display: clamp(2.125rem, 1.2rem + 3.4vw, 3.375rem);

	/* ── Interlinee ─────────────────────────────────────── */
	--esca-interlinea-testo: 1.55;
	/* Sopra l'unita', al contrario di quanto si farebbe con un bastone: le
	   grazie e i tratti ascendenti di un Didone si toccherebbero. */
	--esca-interlinea-titolo: 1.14;

	/* ── Spaziatura fra le lettere ──────────────────────── */
	--esca-spaziatura-occhiello: 0.2em;
	/* Per le intestazioni di tabella su schermo stretto. */
	--esca-spaziatura-occhiello-stretta: 0.12em;
	--esca-spaziatura-titolo: 0.005em;

	/* ── Scala di spaziatura ────────────────────────────── */
	/* Otto gradini, base otto pixel. Chi ne aggiunge uno lo aggiunge qui. */
	--esca-spazio-1: 0.5rem;
	--esca-spazio-2: 0.75rem;
	--esca-spazio-3: 1rem;
	--esca-spazio-4: 1.5rem;
	--esca-spazio-5: 2rem;
	--esca-spazio-6: 3rem;
	--esca-spazio-7: 4rem;
	--esca-spazio-8: 6rem;

	/* Il ritmo del catalogo e' piu' fitto di quello editoriale: una tabella di
	   formati non ha bisogno del respiro di una fascia di racconto. */
	--esca-spazio-catalogo: 5rem;
	--esca-spazio-catalogo-mobile: 2.75rem;

	/* ── Larghezze ──────────────────────────────────────── */
	--esca-larghezza-testo: 34rem;
	--esca-larghezza-contenuto: 84rem;
	--esca-margine-laterale: clamp(1.25rem, 4vw, 3.5rem);

	/* ── Movimento ──────────────────────────────────────── */
	/* Una sola curva per tutto: parte svelta e si posa piano. */
	--esca-curva: cubic-bezier(0.22, 1, 0.36, 1);
	--esca-durata-bottone: 220ms;
	--esca-durata-comparsa: 700ms;
	--esca-salita-comparsa: 1rem;
}