/* Design token — carta, bruno e oro.
   Unica fonte dei valori: nessun colore va scritto altrove.

   Questi valori arrivano da prototipo2, la home approvata, e sono stati
   messi a punto li'. I commenti che seguono citano ogni tanto "la prima
   direzione": era l'impostazione su verde scuro e crema della spec di
   luglio, che si vede ancora in prototipo/ e nella storia del repository.
   Le citazioni restano perche' spiegano perche' un valore e' quello che e',
   e un valore senza il suo perche' e' il primo a essere cambiato per sbaglio.

   Il verde e' uscito dalla palette. Restano tre voci e basta: la carta
   (bianco e avorio), l'inchiostro (un bruno scurissimo) e l'oro, che e'
   l'unico accento e
   proprio per questo non va sprecato — righelli sottili, occhielli, cifre,
   la fascia della CTA. Dove prima c'era il verde a fare da colore neutro,
   adesso c'e' il nulla: e' lo spazio bianco a separare le sezioni. */

:root {
	/* ── Carta ──────────────────────────────────────────── */
	/* Il fondo della pagina e' bianco pieno, non crema: l'avorio e' un
	   secondo tono, e un secondo tono che coincide con il fondo non
	   scandisce piu' niente. */
	--elic-bianco: #FFFFFF;
	--elic-avorio: #F5F3EE;

	/* ── Inchiostro ─────────────────────────────────────── */
	/* Non nero: un bruno scurissimo. A occhio distratto e' nero lo stesso, ma
	   e' il fondo su cui vive l'oro, e un nero neutro glielo raffredda —
	   l'oro ci scivola sopra come un giallo qualunque invece di leggersi come
	   metallo. Con dieci punti di rosso e sette di verde in piu' del blu, il
	   fondo tira nella stessa direzione dell'accento e i due si tengono.
	   E' anche il colore giusto per questa azienda: terra, non ardesia.

	   Il tono e' quello di un cacao scuro, non di un nero appena sporcato: il
	   primo giro stava a #17110A e a quella profondita' il bruno non si
	   vedeva piu' — restava la temperatura, ma il colore era nero a tutti gli
	   effetti. Alzandolo, il bruno si legge per quello che e'.

	   Alzato una seconda volta l'8 settembre 2026, da #2E2218: anche li' il
	   bruno leggeva ancora nero. I due toni salgono insieme, perche' il
	   secondo e' il rilievo del primo — le superfici dentro una sezione scura,
	   pannelli e riquadri, dove un bordo non basta — e da fermi a 1,21:1 di
	   distanza avvicinarli li farebbe combaciare.

	   Il tetto lo detta l'oro, non il gusto. L'oro della palette ci misura
	   sopra 5,55:1, sceso da 6,39: sopra il minimo di 4,5:1 che il criterio
	   WCAG 1.4.3 chiede a occhielli e intestazioni del piede, che sono testo
	   piccolo, ma con meno margine di prima — un altro gradino di questo passo
	   e l'oro cede. Il testo chiaro e' ancora a 12,4:1. */
	--elic-bruno: #3B2C1D;
	--elic-bruno-2: #4A3826;

	/* ── Oro ────────────────────────────────────────────── */
	--elic-oro: #C9A227;
	--elic-oro-chiaro: #E0C57C;
	--elic-oro-tenue: #EBD9A6;

	/* Oro leggibile come testo su fondo chiaro. L'oro della palette misura
	   2,28:1 sul bianco, sotto il minimo di 4,5:1 del criterio WCAG 1.4.3.
	   Questo tono misura 5,81:1 sul bianco e 5,24:1 sull'avorio: regge su
	   entrambe le carte, ed e' per questo che e' piu' scuro di quello della
	   prima direzione, che di carte ne aveva una sola. */
	--elic-oro-scuro: #7E611A;

	/* ── Testo ──────────────────────────────────────────── */
	/* Della stessa famiglia calda del fondo scuro e della carta avorio: un
	   grigio neutro in mezzo a due tinte calde si legge come stonato, e si
	   nota proprio perche' non si capisce da dove venga.
	   18,3:1 sul bianco e 5,09:1 il tono tenue sull'avorio, che e' la carta
	   piu' scura delle due e quindi quella che detta il minimo. */
	--elic-testo: #191410;
	--elic-testo-tenue: #6E665C;

	/* ── Superfici e tratti ─────────────────────────────── */
	--elic-superficie: #FFFFFF;
	--elic-bordo-chiaro: #E4E1D9;
	/* Il tratto sui fondi neri non e' un colore: e' bianco a bassissima
	   opacita', cosi' resta lo stesso righello sia sul bruno pieno sia sul
	   bruno secondario, senza doverne dichiarare due. */
	--elic-bordo-scuro: rgba(255, 255, 255, 0.14);

	/* Il tratto sul fondo d'oro. Stesso principio ma al contrario: e'
	   l'inchiostro a bassa opacita', perche' su una superficie chiara e
	   satura un filo bianco sparisce. Serve solo alla barra CTA, che e'
	   l'unica fascia d'oro della pagina. */
	--elic-filo-su-oro: rgba(46, 34, 24, 0.22);

	/* Colori di primo piano per i contesti scuri ("su scuro") */
	--elic-su-scuro: #F7F6F3;
	--elic-su-scuro-tenue: rgba(247, 246, 243, 0.66);

	/* ── Tipografia ─────────────────────────────────────── */
	/* Un solo carattere, un bastone, per tutta la pagina. La prima direzione
	   e il primo giro di questa accoppiavano un serif da titolo (Fraunces) a
	   un bastone da testo: e' l'accoppiata che dice "elegante" piu' in fretta
	   di qualunque altra, e proprio per questo la dicono tutti. Qui
	   l'eleganza deve venire da altro — dallo spazio bianco, dai fili d'oro,
	   dal salto fra un titolo di 56px in nero pieno e un testo di 17 — e la
	   forza dal peso.

	   I due nomi restano due anche se il valore e' lo stesso. Non e' una
	   dimenticanza: segnano l'intenzione, cosi' chi legge una regola sa se
	   sta guardando un titolo o del testo, e il giorno in cui si volesse
	   introdurre un secondo bastone da display si cambia una riga sola.

	   Fraunces non e' piu' usato da nessuna regola. Il suo @font-face resta
	   dichiarato in fonts.css — che e' del tema e non si tocca — ma un
	   @font-face che nessuno usa non viene scaricato. Quello che andava tolto
	   e' il preload nell'HTML, che invece lo scaricava comunque: 67 kB di
	   font per zero caratteri. */
	--elic-font-display: "Inter Variable", system-ui, -apple-system, sans-serif;
	--elic-font-testo: "Inter Variable", system-ui, -apple-system, sans-serif;

	--elic-dim-occhiello: 0.6875rem;
	--elic-dim-piccolo: 0.9375rem;
	/* Il corpo del testo sale da 16 a 17px. Un bastone a 16px accanto a
	   titoli in 800 si legge sottile: non e' questione di leggibilita' ma di
	   equilibrio, e il punto in piu' rimette il testo alla pari. */
	--elic-dim-normale: 1.0625rem;
	--elic-dim-medio: 1.1875rem;
	--elic-dim-grande: 1.375rem;
	/* Corpi un gradino sopra la prima direzione, non due. Il primo giro era
	   tarato per far leggere la pagina come editoriale — display a 88px,
	   titoli a 56 — ma a quelle misure il titolo smette di essere un titolo e
	   diventa un manifesto: su una pagina che ne ha uno per sezione,
	   scorrendo, sono nove manifesti di fila.
	   Con una palette di due soli valori la gerarchia non puo' appoggiarsi al
	   colore e la deve fare la scala: il salto fra 56 (display) e 16 (testo)
	   basta e avanza a dirlo, e lascia respirare il bianco intorno, che e' il
	   vero materiale di questa variante. */
	--elic-dim-titolo: clamp(1.625rem, 1.15rem + 1.9vw, 2.375rem);
	--elic-dim-display: clamp(2.25rem, 1rem + 4.2vw, 3.5rem);

	--elic-interlinea-testo: 1.62;
	/* Interlinea sotto l'unita': con un bastone in 800 le righe di un titolo
	   devono formare un blocco compatto, ed e' li' che sta la differenza fra
	   "grande" e "forte". Con un serif non si potrebbe, perche' le grazie e i
	   tratti ascendenti si toccherebbero; un bastone ha piu' aria dentro la
	   lettera e la regge. */
	--elic-interlinea-titolo: 0.98;
	--elic-spaziatura-occhiello: 0.2em;

	/* I pesi, nominati. Cosi' una regola dice "peso da titolo" invece di
	   "800", e cambiare il tono di tutta la pagina resta una modifica in un
	   punto solo. */
	--elic-peso-display: 800;
	--elic-peso-titolo: 700;
	--elic-peso-etichetta: 700;
	--elic-peso-testo: 400;
	--elic-peso-rilievo: 700;

	/* ── Spaziature — scala a passo 8 ───────────────────── */
	--elic-sp-1: 0.5rem;
	--elic-sp-2: 1rem;
	--elic-sp-3: 1.5rem;
	--elic-sp-4: 2.5rem;
	--elic-sp-5: 4.5rem;
	--elic-sp-6: 7.5rem;

	/* ── Layout ─────────────────────────────────────────── */
	--elic-larghezza-testo: 720px;
	--elic-larghezza-max: 1360px;
	--elic-larghezza-larga: 1536px;
	/* Piu' larga della misura del testo corrente perche' e' la colonna intera
	   della pagina e non una delle due di una griglia: 800px reggono una riga
	   di ottanta caratteri senza che il titolo di sezione resti sospeso in
	   mezzo al bianco. Serve alle pagine legali. */
	--elic-larghezza-lettura: 800px;
	--elic-margine-laterale: clamp(1.25rem, 5vw, 4rem);

	/* ── Altro ──────────────────────────────────────────── */
	/* Spigolo vivo. Il raggio da 3px della prima direzione era un
	   ammorbidimento a meta': o si arrotonda per davvero, e allora e' un
	   altro linguaggio, o si taglia netto. Qui si taglia netto — ed e'
	   quello che, insieme ai righelli da un pixel, porta il "moderno". */
	--elic-raggio: 0;
	--elic-transizione: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Contorno del focus. Sul chiaro l'oro non e' utilizzabile: misura
	   2,28:1 contro il minimo di 3:1 del criterio WCAG 1.4.11. Sul chiaro
	   e' quindi il bruno scuro (15,5:1), sullo scuro oro (9,2:1). */
	--elic-contorno-focus: 2px solid var(--elic-bruno);
	--elic-contorno-focus-su-scuro: 2px solid var(--elic-oro-chiaro);
}