/* ==========================================================================
   TOKEN — la sezione di personalizzazione dello stile
   ==========================================================================

   QUESTO E' L'UNICO FILE CON COLORI LETTERALI IN TUTTO IL SITO.
   main.css e motion.css non contengono un solo #hex: leggono da qui.
   Cambiare una riga qui cambia il sito ovunque, in modo coerente.
   `python3 tools/verifica.py` fallisce se un colore letterale compare altrove.

   MODALITA' UNICA, CHIARA. Non esiste una variante scura e non va reintrodotta
   senza che Pietro lo chieda: e' una sua decisione esplicita del 2026-08-21.
   I blocchi scuri e grigi di questa pagina NON sono una modalita': sono
   sezioni che si alternano a quelle bianche dentro un sito chiaro (in fondo
   al file, "Il blocco scuro" e "Il blocco grigio").

   --------------------------------------------------------------------------
   LA PALETTE — bianco, nero e grigi, scelta da Pietro il 2026-10-12
   --------------------------------------------------------------------------
   Sostituisce la rampa verde-acqua dello stesso giorno, che a sua volta
   sostituiva la rampa fredda cyan → nero del 2026-08-25 (entrambe in git).

   I blocchi si alternano in TRE TONI dal 2026-10-14: bianco, nero, grigio,
   bianco, nero, grigio... (Pietro: "un minimo di sfumature").

                            bianco     nero      grigio
       la pagina, fra i blocchi  #ebebeb
       il fondo del blocco   #ffffff   #111111   #d4d4d4
       card, campi, superfici #f2f2f2  #1c1c1c   #e6e6e6
       filetti decorativi    #d4d4d4   #333333   #b8b8b8
       bordi dei controlli   #767676   #8a8a8a   #6b6b6b
       testo secondario      #555555   #a6a6a6   #444444
       pressione dell'azione #444444   #d4d4d4   #444444
       testo e azione        #111111   #f2f2f2   #111111

   UN SOLO COLORE, dal 2026-10-14: il rosso #ff1f1f, nella linea guida, nelle
   sue tappe e nelle ruote accese del logo. Mai sul testo, mai dentro un
   blocco. Tutto il resto e' bianco, nero e grigi, anche gli stati: garanzie,
   crocette ed errore del modulo sono del colore del testo. Lo stato lo dicono
   le parole.

   COME SI SEGNALA CHE QUALCOSA RISPONDE. L'azione e' il MASSIMO CONTRASTO
   CONTRO IL FONDO DEL SUO BLOCCO: sul chiaro un bottone nero con etichetta
   bianca (18.88:1), sullo scuro un bottone quasi bianco con etichetta nera
   (16.87:1). Non serve un sesto colore.

   I LIMITI DELLA RAMPA, misurati e da rispettare:
   - i filetti sono decorativi: 1.48:1 sul bianco, 1.49:1 sul nero, 1.34 sul
     grigio. Mai per del testo. I livelli leggibili sono due per blocco, testo
     e secondario: la terza gerarchia si fa con la dimensione.
   - i bordi dei controlli vogliono 3:1 (WCAG 1.4.11): 4.54 sul bianco e 4.06
     sulle superfici chiare; 5.47 sul nero e 4.94 sulle superfici scure; 3.60
     sul grigio e 4.27 sulle sue superfici.
   - il secondario: 7.46 sul bianco, 6.66 sulle superfici chiare; 7.76 sul
     nero, 7.00 sulle superfici scure; 6.57 sul grigio, 7.80 sulle sue
     superfici. Il testo sul grigio fa 12.74.

   --------------------------------------------------------------------------
   LE QUATTRO REGOLE DI COERENZA — vanno rispettate, non sono suggerimenti
   --------------------------------------------------------------------------
   1. SOLO I VALORI DELLA RAMPA: bianco, nero e grigi.
   2. UNA SOLA SCALA DI RAGGI: --radius-pill per tutto cio' che si preme,
      --radius per i pannelli, --radius-blocco per le dodici sezioni,
      --radius-full per gli indicatori tondi. Niente altro.
   3. Ogni colore ha il gemello --*-rgb, per comporre le trasparenze:
      rgba(var(--accent-rgb), 0.12) invece di un secondo token semi-opaco.
   4. I blocchi scuri si fanno RIBALTANDO I TOKEN IN LOCALE, non scrivendo
      selettori nuovi. Vedi il blocco in fondo.
   ========================================================================== */

:root {

	/* color-scheme: light NON e' un dettaglio: senza, un visitatore con il
	   sistema in modalita' scura otterrebbe la pagina chiara ma i controlli
	   nativi scuri — la tendina <select> del form, le barre di scorrimento,
	   il riempimento automatico dei campi. */
	color-scheme: light;

	/* --- Colore · la pagina ------------------------------------------------
	   Il grigio che si vede FRA i blocchi. Non porta testo: ci stanno solo le
	   ombre dei blocchi e la linea guida che li collega. */

	--pagina:        #ebebeb;

	/* --- Colore · superfici ------------------------------------------------ */

	--bg:            #ffffff;   /* il fondo del blocco chiaro                 */
	--surface:       #f2f2f2;   /* card e pannelli                            */
	--surface-sunk:  #f2f2f2;   /* campi form                                 */

	--bg-rgb:        255, 255, 255;

	/* --- Colore · testo ----------------------------------------------------
	   DUE SOLI LIVELLI LEGGIBILI. --text-faint vale come --text-muted: un
	   terzo grigio piu' chiaro scenderebbe sotto 4.5:1. */

	--text:          #111111;   /* 18.88:1 sul bianco                         */
	--text-muted:    #555555;   /*  7.46:1 — passa AAA                        */
	--text-faint:    #555555;   /*  come sopra, per scelta obbligata          */

	--text-rgb:        17,  17,  17;

	/* --- Colore · linee ----------------------------------------------------
	   Due pesi, e la differenza NON e' estetica: --line e' decorativo
	   (divisori, filetti); --line-strong delimita controlli — i bordi dei
	   campi del form — e deve stare sopra 3:1. */

	--line:          #d4d4d4;   /* 1.48:1 — solo decorativo                   */
	--line-strong:   #767676;   /* 4.54:1 — bordi dei controlli               */

	/* --- Colore · azione --------------------------------------------------- */

	--accent:        #111111;
	--accent-strong: #444444;   /* pressione e hover, 9.74:1 con l'etichetta  */
	--on-accent:     #ffffff;   /* l'etichetta sopra l'azione                 */

	--accent-rgb:     17,  17,  17;

	/* --- Colore · stati ----------------------------------------------------
	   Dal 2026-10-12 NON sono colori: garanzie delle card, crocette delle
	   esclusioni ed errore del modulo hanno il colore del testo. Restano due
	   token distinti perche' il ruolo e' diverso: se un giorno torna il
	   colore, si cambia qui. Erano #1F6F43 e #A32C22. */

	--positive:      #111111;
	--negative:      #111111;

	/* --- Colore · ombre ----------------------------------------------------
	   Sempre scure, anche dentro un blocco scuro: per questo hanno un loro
	   gemello e non usano --text-rgb, che li' diventa chiaro. */

	--ombra-rgb:       0,   0,   0;

	/* --- Colore · la linea guida -------------------------------------------
	   La linea che lega le dodici sezioni (motion.css § 4b), come in auxia.io:
	   una traccia chiara sempre visibile e, sopra, il tratto percorso, che si
	   allunga mentre si scorre. Corre soprattutto sul grigio della pagina, e i
	   suoi colori si misurano su #ebebeb; quando passa sopra un blocco
	   (data-guida="sopra") la traccia e il bordo della tappa prendono
	   --guida-sul-blocco, un grigio per ogni tono (in fondo al file):
	     traccia            1.28:1 — appena accennata, come nel riferimento
	     percorso           3.22:1 — il rosso, l'unico colore del sito
	     ingranaggio fermo  2.07:1 — decorativo
	   IL ROSSO #ff1f1f (Pietro, 2026-10-14: "rosso acceso"; prima, nello
	   stesso giorno, il verde petrolio #376e74, il giallo #ffca3a, il verde
	   #b5e48c e il blu #0b4fff di auxia.io). NIENTE NERO SOTTO, per
	   scelta di Pietro: la tappa raggiunta resta chiara come le altre e cambia
	   solo colore. E' decorativo: la linea non porta informazioni che il testo
	   non dica. */

	--guida-traccia:     #d4d4d4;
	--guida-percorso:    #ff1f1f;
	--guida-ferma:       #a6a6a6;
	--guida-sul-blocco:  #d4d4d4;   /* sul bianco: come sulla pagina          */

	/* --- Tipografia · famiglie ---------------------------------------------
	   Tre caratteri, tre mestieri distinti:

	     display   quello che si VEDE     — titoli, navigazione, etichette
	     sans      quello che si LEGGE    — corpo del testo
	     mono      quello che si MISURA   — ogni cifra della pagina

	   Piu' Inter Tight, solo per il titolo dell'hero. */

	--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

	/* Il titolo dell'hero, dal 2026-10-10: il sosia libero di Neue Montreal,
	   il carattere di karolinahess.com. Vedi fonts.css. */
	--font-titolo:  'Inter Tight', 'Geist', ui-sans-serif, system-ui, sans-serif;
	--font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* --- Tipografia · scala fluida -----------------------------------------
	   clamp(minimo, preferito, massimo): niente breakpoint per il testo,
	   la dimensione segue la finestra con continuita'. */

	--fs-h2:      clamp(1.75rem, 1.30rem + 1.90vw, 2.625rem);/* 28 → 42px    */
	--fs-h3:      clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);
	--fs-lead:    clamp(1.125rem, 1.02rem + 0.45vw, 1.25rem);/* occhielli    */
	--fs-body:    1.0625rem;   /* 17px: la direzione aziendale legge da
	                              desktop e ha spesso oltre cinquant'anni     */
	--fs-small:   0.9375rem;
	--fs-micro:   0.8125rem;   /* etichette mono, metadati                    */

	/* Le righe dell'hero. Due vincoli, e vince il piu' stretto:

	   LARGHEZZA. La frase piu' lunga, "serve un advisor, che ne analizzi i
	   processi", e' larga 16.25 volte il corpo. Dal 2026-10-13 l'hero e' un
	   blocco staccato dai bordi, quindi ai 150px di margine si sommano i due
	   margini del blocco:

	       corpo <= (finestra - 150 - 2 x margine del blocco) / 16.5

	   ALTEZZA. Tutto l'hero — occhiello, titolo, sottotitolo, bottoni — deve
	   stare nella prima schermata fino a una finestra alta 700. Ogni pixel di
	   corpo aggiunge 4.9px di contenuto (cinque righe a interlinea 0.98); la
	   testata e il margine del blocco ne tolgono altri 13 rispetto a prima, e
	   la testata piu' alta del 2026-10-14 altri 12 (2.4px di corpo):

	       corpo <= 20.4svh - 103px

	   Il tetto e' 72px, il minimo 36px. */
	--fs-righe:   clamp(2.25rem, min((100vw - 150px - 2 * var(--blocco-margine)) / 16.5, 20.4svh - 103px), 4.5rem);

	/* I contatori. Due misure, perche' due sono le disposizioni (main.css § 7).

	   Su due colonne la colonna e' larga e le cifre possono essere grandi:
	   48 → 76px. In riga, da 1200px, la colonna utile e' di circa 217px nel
	   caso piu' stretto e il valore piu' lungo, "30 anni" in mono, e' largo
	   3.92 volte il corpo: 52px (204px) e' il massimo che non va a capo. */
	--fs-num:      clamp(3rem, 1.70rem + 4.90vw, 4.75rem);   /* 48 → 76px    */
	--fs-num-riga: 3.25rem;                                    /* 52px         */
	--fs-num-stretta: 2.125rem;  /* 34px: due colonne su un telefono da 375 */

	/* --- Tipografia · misura ----------------------------------------------- */

	--lh-heading: 1.33;
	--lh-body:    1.60;

	--track-heading: -0.018em;
	--track-num:     -0.040em;  /* i numeri grandi ancora di piu'              */
	--track-body:     0;
	--track-label:    0.13em;   /* le etichette mono vogliono l'opposto        */

	--measure: 68ch;            /* larghezza massima di un paragrafo           */

	/* --- Spaziatura --------------------------------------------------------
	   Scala su base 4px. Non inventare valori fuori scala: se serve qualcosa
	   in mezzo, e' quasi sempre il segno che il layout va ripensato. */

	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  2.5rem;
	--space-8:  3rem;
	--space-9:  4rem;

	/* Respiro verticale DENTRO un blocco. Meno di quando le sezioni erano
	   fasce a tutta pagina (144px in cima alla scala): adesso a separare due
	   capitoli ci pensano lo stacco e l'ombra, e il padding deve solo far
	   respirare il testo dentro il riquadro. */
	--section-y: clamp(4rem, 2.5rem + 5.5vw, 7.5rem);

	/* Il respiro dell'hero, sopra e sotto. E' l'unica spaziatura del sito
	   legata all'ALTEZZA della finestra invece che alla larghezza: occhiello,
	   titolo, sottotitolo e bottoni devono stare in una schermata. */
	--hero-y-inizio: clamp(2rem, 6vh, 4rem);
	--hero-y-fine:   clamp(2.5rem, 8vh, 5rem);

	/* L'ALTEZZA DELLA TESTATA: la barra flottante (88px: il logo da 68 piu'
	   10 sopra e sotto) piu' il margine che la stacca dal bordo alto. Serve
	   all'hero, alto una schermata MENO la testata, che e' `sticky` e occupa il
	   proprio spazio nel flusso. Era 76px con il logo da 56: Pietro l'ha
	   voluta piu' alta il 2026-10-14, perche' il cervello si veda meglio. */
	--testata-barra: 5.5rem;

	/* Il logo: tutta l'altezza utile della barra. Sul telefono la barra e' piu'
	   bassa e il logo con lei. */
	--logo-alto:         68px;
	--logo-alto-stretto: 52px;
	--header-h: calc(var(--testata-barra) + var(--blocco-margine));

	--container:  72rem;        /* 1152px */
	--gutter:     clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

	/* --- I blocchi -----------------------------------------------------------
	   Dal 2026-10-13 le sezioni dopo l'hero sono blocchi staccati: angoli tondi,
	   un'ombra larga e morbida, un margine dai bordi della finestra e uno
	   stacco fra l'uno e l'altro. Riferimenti: antoniobatticciotto.com e
	   auxia.io.

	   LA CORSIA, dal 2026-10-14: ogni blocco che la linea passa a lato e' piu'
	   stretto della pagina della corsia, e la lascia libera una volta a
	   sinistra e una a destra; quelli che passa sopra o sotto, dal 2026-10-17,
	   sono larghi quanto la cornice (main.css § 3). Nella
	   corsia scende la linea guida; nello STACCO la linea attraversa la pagina
	   da una corsia all'altra, con due curve. Pietro: i blocchi non devono
	   perdere piu' del 10-15% della larghezza. 12% della pagina, fra 44px (il
	   minimo perche' ci stia una tappa) e 160px: a 1440px il blocco e' l'88%.

	   Lo stacco e' piu' alto di prima (era 48 → 80px) perche' adesso ci passa
	   una linea orizzontale con due curve da 24px, e deve respirare. */
	--blocco-margine: clamp(0.75rem, 0.2rem + 1.8vw, 2rem);
	--blocco-stacco:  clamp(5rem, 2rem + 5vw, 8rem);
	--blocco-max:     92rem;    /* 1472px: oltre, la pagina fa da passe-partout */
	--corsia:         clamp(2.75rem, 12%, 10rem);

	/* La linea guida: il raggio delle curve e' quello di auxia.io, letto dal
	   loro SVG (24px). Lo spessore era il loro, 2px; Pietro l'ha voluto piu'
	   marcato il 2026-10-14, prima 3px e poi 5px. Il bordo delle tappe e' piu'
	   sottile della linea, o la pillola peserebbe piu' di lei.

	   LA TAPPA, dal 2026-10-17, e' il doppio di prima (Pietro: "ingrandisci del
	   doppio"): 96px dove c'e' posto, cioe' da 1040px circa in su. Segue la
	   corsia (il 12% della pagina) meno un respiro, perche' ci stia dentro: 92px
	   a 1000, 68px a 800, e sul telefono 36px, come prima, nella corsia di 44. */
	--guida-tratto:      5px;
	--guida-bordo-tappa: clamp(3px, 0.15vw + 2px, 4px);
	--tappa-larga:       clamp(2.25rem, 12vw - 1.75rem, 6rem);

	/* Tre ombre sovrapposte: una stretta che stacca il bordo, una media che
	   lo appoggia, una larga e bassa che solleva il blocco. Accentuate il
	   2026-10-14 (erano due, a 0.05 e 0.28): con il blocco grigio, quasi del
	   tono della pagina, e' l'ombra a dire dove finisce. Tinte del nero, mai
	   nero pieno. */
	--ombra-blocco:
		0 1px 3px rgba(var(--ombra-rgb), 0.08),
		0 8px 20px -8px rgba(var(--ombra-rgb), 0.14),
		0 34px 70px -26px rgba(var(--ombra-rgb), 0.42);

	/* --- Forma -------------------------------------------------------------
	   REGOLA DEI RAGGI: --radius-pill per tutto cio' che si preme (bottoni,
	   pillole, indicatori), --radius per i pannelli e le card,
	   --radius-blocco per le dodici sezioni e la testata. */

	--radius:        10px;        /* pannelli, card, campi                    */
	--radius-pill:   1.625rem;    /* bottoni e pillole — 26px                 */
	--radius-blocco: clamp(1.125rem, 0.8rem + 1.2vw, 1.75rem);   /* 18 → 28px */
	--radius-full:   50%;         /* pallini e nodi                           */

	--hairline: 1px;

	/* Ombre tinte, mai nero puro: il nero su chiaro sporca. */
	--shadow-sm: 0 1px 2px rgba(var(--ombra-rgb), 0.05);
	--shadow-md: 0 4px 16px -4px rgba(var(--ombra-rgb), 0.12);

	/* --- Movimento · curve -------------------------------------------------
	   Valori esatti dal playbook (AUDIT.md). Non approssimarli: una
	   cubic-bezier "che sembra giusta" e' il modo piu' rapido per far sentire
	   il sito scadente senza capire perche'. */

	--ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* entrate e uscite    */

	/* LA MASCHERA DEL TITOLO, letta da karolinahess.com il 2026-10-10: ogni
	   riga sale da sotto un bordo invisibile in 0.8s, con questa curva, e
	   0.2s fra una riga e la successiva. */
	--ease-maschera:  cubic-bezier(0.53, 0, 0.44, 1);
	--dur-maschera:   800ms;
	--passo-maschera: 200ms;

	/* Le stesse maschere, dal 2026-10-14, su tutto il testo del sito
	   (motion.css § 3a): i titoli con il passo dell'hero, il testo corrente con
	   questo, o l'ultima riga di un paragrafo lungo arriverebbe dopo due
	   secondi. */
	--passo-righe:    80ms;
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* pannelli, accordion */
	--ease-hover:  ease;                                /* solo colore         */

	/* Per i movimenti che devono sembrare MECCANICI invece che elastici: un
	   tracciato che si disegna, una barra che avanza. */
	--ease-scan:   cubic-bezier(0.7, 0, 0.2, 1);

	/* --- Movimento · durate ------------------------------------------------
	   Le prime tre sotto i 300ms, come impone il playbook. Le altre sono
	   rivelazioni: materiale esplicativo, non interfaccia. */

	--dur-press:   140ms;  /* pressione di un bottone                         */
	--dur-ui:      200ms;  /* hover, focus, cambi di stato                    */
	--dur-panel:   280ms;  /* apertura di un pannello, messaggi del form      */
	--dur-reveal:  900ms;  /* ingresso a scorrimento                          */
	--dur-sigla:   560ms;  /* il nome della testata che si chiude in sigla    */
	--dur-blocco:  800ms;  /* un blocco che entra o sbiadisce                 */
	--dur-tappa:  5000ms;  /* un giro dell'ingranaggio di una tappa           */
	--dur-disegno: 2200ms; /* il diagramma del metodo che si disegna          */

	/* --- Movimento · parametri ---------------------------------------------
	   Un elemento entra salendo e schiarendosi. Fino al 2026-10-13 entrava
	   anche fuori fuoco: la sfocatura e' tolta perche' obbliga il browser a
	   ridisegnare l'elemento a ogni fotogramma, e sui computer meno potenti
	   era uno dei pesi dello scorrimento. Opacita' e transform si compongono
	   sulla scheda grafica. */

	--reveal-lift:  24px;  /* di quanto sale un elemento entrando             */
	--reveal-seed:  0.01;  /* opacita' di partenza: non 0, cosi' il browser
	                          non scarta l'elemento dalla composizione        */

	/* Nell'hero il gesto e' piu' ampio: e' la prima cosa che si vede. */
	--reveal-lift-hero: 36px;

	/* Il blocco che entra sale di poco e cresce appena; quello che esce in
	   alto sbiadisce fino a questo velo. */
	--blocco-lift:   40px;
	--blocco-scala:  0.985;
	--blocco-uscito: 0.35;

	/* LE FAQ. Aprendo una domanda le altre sfocano e sbiadiscono, per
	   lasciare sola quella aperta. Tre pixel: la domanda chiusa resta
	   RICONOSCIBILE e smette di essere LEGGIBILE. */

	--faq-sfocatura: 3px;
	--faq-velo:      0.55;

	/* IL CERVELLO DEL LOGO. I tratti sono in unita' del disegno (128 x 100),
	   che il CSS mostra alto 68px: 2.6 unita' fanno quasi un pixel e mezzo. Il
	   contorno e' piu' marcato delle ruote, perche' a quella misura e' lui
	   che dice "cervello". */
	--logo-tratto-bordo: 2.6;
	--logo-tratto-ruote: 1.3;

	/* IL CERVELLO SENZA NERO (Pietro, 2026-10-14). Le dodici ruote partono
	   grigio chiaro, come le tappe ferme, e si accendono una per
	   sezione, insieme alle tappe della linea guida (guida.js), dello stesso
	   rosso della linea. Il contorno del
	   cervello e i tratti delle ruote sono grigi: il contorno piu' scuro
	   (3.45:1 sul bianco della testata), perche' a 56px e' lui che dice
	   "cervello"; i tratti delle ruote come l'ingranaggio di una tappa ferma. */
	--logo-bordo:        #8a8a8a;
	--logo-tratto:       #a6a6a6;
	--logo-ruota-spenta: #e6e6e6;
	--logo-ruota-accesa: #ff1f1f;

	--press-scale:  0.97;  /* quanto affonda un bottone premuto               */
	--stagger:      65ms;  /* ritardo tra elementi di un gruppo               */
}

/* ==========================================================================
   IL BLOCCO SCURO
   ==========================================================================

   Un blocco su tre dalla fascia dei numeri in giu' (problema, metodo,
   ingaggio, contatti). L'hero non e' un blocco: sta sul grigio della pagina,
   senza riquadro (Pietro, 2026-10-13). Si fanno RIBALTANDO I TOKEN dentro il
   blocco: main.css non sa niente del colore del fondo, legge --bg, --text,
   --line come ovunque, e dentro questo blocco gli stessi nomi valgono il
   contrario.

   color-scheme: dark SOLO QUI DENTRO. Il sito resta a modalita' unica
   chiara; ma il modulo contatti sta in un blocco nero, e con i controlli
   nativi chiari la tendina del fatturato si aprirebbe bianca su testo
   chiaro.

   Contrasti misurati sul nero #111111 e sulle superfici #1c1c1c:
     testo        16.87 · 15.22
     secondario    7.76 ·  7.00
     bordi         5.47 ·  4.94   (controlli, sopra 3:1)
     azione       12.74 alla pressione, etichetta nera

   Chi aggiunge un blocco scuro aggiunge solo la classe, nel markup. */

.blocco--scuro {
	color-scheme: dark;

	--bg:            #111111;
	--surface:       #1c1c1c;
	--surface-sunk:  #1c1c1c;
	--bg-rgb:         17,  17,  17;

	--text:          #f2f2f2;
	--text-muted:    #a6a6a6;
	--text-faint:    #a6a6a6;
	--text-rgb:      242, 242, 242;

	--line:          #333333;
	--line-strong:   #8a8a8a;

	/* La linea guida sul nero: un grigio, non un nero, 3.54:1 sul fondo. Con
	   i filetti (#333) sembrava nera, e poi diventava rossa (Pietro,
	   2026-10-17). */
	--guida-sul-blocco: #6b6b6b;

	--accent:        #f2f2f2;
	--accent-strong: #d4d4d4;
	--on-accent:     #111111;
	--accent-rgb:    242, 242, 242;

	--positive:      #f2f2f2;
	--negative:      #f2f2f2;
}

/* ==========================================================================
   IL BLOCCO GRIGIO
   ==========================================================================

   Il terzo tono, dal 2026-10-14: un blocco su tre (per chi no, casi,
   verifica) e il piede. Grigio chiaro, quasi del tono della pagina: lo stacca
   l'ombra. Stesso meccanismo del blocco scuro, ma senza ribaltare: il testo
   resta nero, il secondario si scurisce e le superfici si schiariscono.

   Contrasti misurati sul grigio #d4d4d4 e sulle superfici #e6e6e6:
     testo        12.74 · 15.13
     secondario    6.57 ·  7.80
     bordi         3.60 ·  4.27   (controlli, sopra 3:1)
     azione       nero con etichetta bianca, 9.74 alla pressione */

.blocco--grigio {
	--bg:            #d4d4d4;
	--surface:       #e6e6e6;
	--surface-sunk:  #e6e6e6;
	--bg-rgb:        212, 212, 212;

	--text-muted:    #444444;
	--text-faint:    #444444;

	--line:          #b8b8b8;
	--line-strong:   #6b6b6b;

	/* La traccia della pagina sul grigio non si vedrebbe: un passo piu' scura. */
	--guida-sul-blocco: #b8b8b8;
}