/* Design system di Prompt Queue — un posto solo per la lingua visiva.
 *
 * Ricavato dal Figma «Amora» (2026-08-21). ⚠️ Quel file **non ha variabili**:
 * i token non si esportano, si ricavano dal disegno guardandolo. Qui c'è il
 * risultato di quella lettura, più le cose che un'app di incontri non ha
 * bisogno di dire e questa sì.
 *
 * Due regole, e sono il motivo per cui questo file esiste:
 *
 *   1. Un token dice il RUOLO, mai il valore. `--accento`, non `--lime-500`.
 *      È ciò che rende possibile l'altro tema senza toccare una regola: se una
 *      sola regola dell'interfaccia deve sapere che tema è, il token è
 *      nominato male.
 *   2. Nessuna regola dell'interfaccia sta qui dentro. Questo file dichiara
 *      valori; `stile.css` li usa.
 *
 * Nessun preprocessore, nessun build step, nessuna dipendenza: è un vincolo
 * del progetto, non una preferenza.
 */

/* ── il carattere, servito da qui ─────────────────────────────────────────
   Plus Jakarta Sans, **variabile 400–800**: un file solo copre tutti i pesi
   dell'interfaccia, quindi `font-weight: 400 800` è un intervallo e non un
   errore di battitura. I due sottoinsiemi sono quelli veri di Google Fonts —
   `latin` e `latin-ext` — e gli `unicode-range` sono copiati verbatim da lì:
   scriverli a mano vuol dire scaricare 22 KB di troppo su ogni pagina in
   italiano, o peggio non scaricarli quando servono.
   Gli altri due sottoinsiemi che Google serve — `cyrillic-ext` e `vietnamese`
   — non sono qui: nessuna schermata di quest'app li usa.

   ⚠️ Da `pubblico/font/`, non da un CDN. La CSP dell'app è `default-src 'self'`
   senza `unsafe-inline`: un `@import` verso fonts.googleapis.com verrebbe
   **bloccato dal browser**, non solo disapprovato.
   ⚠️ `OFL.txt` sta accanto ai due file e ci deve restare: la SIL OFL 1.1
   pretende che la licenza viaggi col carattere. È un obbligo, non una cortesia.

   `font-display: swap` perché la coda si legge subito: meglio una riga nel
   carattere di sistema per un istante che una riga invisibile. */

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(font/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(font/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── fondali e superfici ───────────────────────────────────────────────
     Il nero non è puro: ha una punta di oliva. Un grigio neutro accanto a un
     accento giallo-verde lo fa sembrare sporco, uno spostato verso l'accento
     sembra scelto. */
  --fondo:            #0a0a08;
  --fondo-alto:       #101010;   /* barre e strisce, sopra il fondo */
  --superficie:       #161614;   /* righe a fuoco, campi, pillole spente */
  --superficie-alta:  #1f1f1c;   /* schede, dialoghi, pannelli sollevati */
  --bordo:            #2a2a26;
  --bordo-tenue:      #1d1d1a;   /* separatori che non devono dividere */

  /* ── inchiostri ────────────────────────────────────────────────────────── */
  --inchiostro:        #f2f2ee;
  --inchiostro-tenue:  #9e9e96;  /* testo secondario, righe non a fuoco */
  /* ⚠️ Non più scuro di così. A `#6b6b63` — il valore che veniva naturale —
     su `--superficie-alta` faceva **3,08:1**, sotto il 4,5:1 che il testo
     piccolo pretende: ed è proprio lì che vive, nelle etichette maiuscole e
     nei numeri di posizione. Misurato il 2026-08-21, non stimato.
     Adesso, gradino per gradino: **5,68:1** su `--fondo`, 5,46 su
     `--fondo-alto`, 5,20 su `--superficie`, **4,74** su `--superficie-alta`.
     Il numero che conta è l'ultimo: è il più basso, ed è quello del pannello
     sollevato — non «della superficie», che è un gradino più sotto e sta
     comodo. Un token che vive su quattro fondi ha quattro numeri, e quello da
     scrivere è il peggiore. */
  --inchiostro-fioco:  #8a8a7f;

  /* ── l'accento, e ce n'è uno solo ───────────────────────────────────────
     Il lime del Figma, verbatim. Funziona come CAMPITURA con inchiostro scuro
     sopra; come testo su fondo chiaro non regge (vedi il tema chiaro). */
  --accento:        #cdff49;
  /* Tre gradini, e sono tre perché uno solo non basta a dire cosa sta
     succedendo: fermo, sotto il dito che passa, sotto il dito che preme.
     ⚠️ La direzione è una scelta di tema, non un errore di copiatura: sullo
     scuro il sorvolo va verso la **luce** e il premuto verso il **buio**; sul
     chiaro vanno **tutti e due verso il buio**, perché lì sopra l'accento si
     scrive bianco e schiarire l'accento spegnerebbe la parola. Ciò che non
     cambia è che il premuto sta sempre un gradino oltre il sorvolo, nella
     stessa direzione: premere deve sembrare di più che passare.
     Prima di questo token l'hover cablato di `stile.css` era più chiaro
     dell'accento mentre `--accento-caldo` — documentato «premuto» — è più
     scuro: con un token solo, sorvolato e premuto sarebbero finiti sullo
     stesso valore, e i due gesti si sarebbero confusi. */
  --accento-sorvolo: #dbff7a;    /* lo stesso, sorvolato */
  --accento-caldo:  #b8e83a;     /* lo stesso, premuto */
  --accento-velo:   #cdff4919;   /* fondo appena acceso, per i marchietti */
  --su-accento:     #0a0a08;     /* ciò che si scrive SOPRA l'accento */
  /* Il lime pieno come **orlo di un campo a fuoco** urla: è la stessa voce
     della campitura, ma tirata in un filo di un pixel intorno a un rettangolo
     grande. Serve un verde smorzato che si veda e non gridi — misurato
     **5,72:1** su `--superficie`, 5,22 su `--superficie-alta`, cioè bene sopra
     il 3:1 che WCAG 1.4.11 chiede a un contorno di controllo. */
  --accento-orlo:   #7a9c33;

  /* ── veli ───────────────────────────────────────────────────────────────
     Due semitrasparenti che non sono colori di niente: sono **strati** posati
     su ciò che c'è sotto. Vivono qui e non fra i colori perché il loro valore
     non si guarda da solo — si guarda composto.

     ⚠️ `--velo-passaggio` è il motivo per cui questo gruppo esiste. Prima era
     `rgba(255, 255, 255, 0.06)` cablato nell'hover di **ogni** bottone: sul
     tema chiaro sarebbe stato bianco su bianco, stacco **1,00**, cioè un hover
     che non esiste. Qui è bianco sullo scuro e inchiostro sul chiaro, e in
     entrambi si sente: sullo scuro stacca **1,12 · 1,15 · 1,17 · 1,19** sui
     quattro fondali, sul chiaro **1,13** su tutti e quattro. La pagina dei
     token li rimisura a ogni cambio di tema e li stampa: non fidarti di questa
     riga, guarda lì.
     `--velo-fondale` è il velo che rende inerte il resto quando si apre un
     dialogo: era `rgba(10, 14, 19, 0.62)`, cioè il vecchio fondo scuro cablato
     dentro una regola, e su un tema chiaro avrebbe continuato a incupire con
     il blu di un tema che non c'era più. */
  --velo-passaggio: #ffffff0f;   /* il riflesso di ciò che si sorvola */
  --velo-fondale:   #0a0a089e;   /* il ::backdrop del dialogo */

  /* ── colori di stato ────────────────────────────────────────────────────
     ⚠️ Nel Figma non esistono: un'app di incontri non deve dire «questo è
     andato storto», questa sì. Scelti per convivere col lime senza litigarci:
     nessuno dei tre cade nel suo settore di tinta. */
  --buono:      #7bd88f;
  --attenzione: #f0b354;
  --pericolo:   #ff6b5a;
  --pericolo-velo: #ff6b5a1f;

  /* ── tipografia ─────────────────────────────────────────────────────────
     Plus Jakarta Sans è il carattere del Figma, licenza SIL OFL, servito da
     `pubblico/font/`. ⚠️ Non da un CDN: la CSP dell'app è `default-src 'self'`
     senza `unsafe-inline`, quindi un `@import` esterno verrebbe **bloccato dal
     browser**, non solo disapprovato. Il self-host non è una preferenza.
     Il monospazio resta di sistema — nessun file da servire, e per cifre,
     conteggi e orari serve solo che si incolonnino. */
  --f-interfaccia: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --f-macchina: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Il carattere è variabile 400–800: i pesi sono token come tutto il resto,
     o due fogli finiscono con due idee diverse di «grassetto». */
  --p-normale:  400;
  --p-medio:    500;
  --p-forte:    600;
  --p-saldo:    700;
  --p-massimo:  800;

  --t-micro:   0.6875rem;   /* etichette maiuscole, marchietti */
  --t-minuto:  0.8125rem;   /* bottoni, righe di elenco */
  --t-corpo:   0.9375rem;
  --t-scheda:  1.125rem;    /* il prompt in cima: è ciò che si legge davvero */
  --t-titolo:  1.375rem;

  /* ⚠️ **Sedici pixel, e non è una scelta tipografica: è la soglia oltre la
     quale Safari su iOS smette di zoomare.** Quando il fuoco entra in un campo
     di testo più piccolo di 16 px, iOS ingrandisce la pagina per renderlo
     leggibile — e non torna indietro da solo: resta zoomata e scorrevole di
     lato. La schermata d'accesso mette il fuoco sul nome all'avvio, quindi il
     sito **si apriva già zoomato** su ogni telefono.
     Trovato usandolo, il 2026-08-23, e non da nessuna riga verde: il banco gira
     in Chrome headless, dove questa regola non esiste. Vale solo sotto
     `pointer: coarse`, così la tipografia da tastiera resta quella disegnata. */
  --t-campo-tattile: 1rem;

  /* ── tracciatura ────────────────────────────────────────────────────────
     Il corpo dice quanto è grande, la tracciatura dice se si legge. Sono due
     cose diverse e vanno tenute separate: `--t-micro` è documentato «etichette
     maiuscole», ma un maiuscoletto a 11 px senza spaziatura è un blocco, non
     una parola — e la spaziatura non è dentro il corpo.
     ⚠️ Misurato traducendo `stile.css` riga per riga: **sedici** dichiarazioni
     `letter-spacing`, **otto** valori distinti, **zero** token, su **nove**
     elementi `uppercase`. Era il valore cablato più frequente del foglio.
     Otto valori, sei ruoli: 0,04 · 0,05 · 0,06 erano lo stesso ruolo scritto
     tre volte, e 0,18 · 0,22 lo stesso due volte. Un ruolo che non si sa
     nominare è un ruolo che non c'era. */
  --tr-titolo:     -0.02em;  /* corpo grande: stringere, o il titolo si sfilaccia */
  --tr-normale:     0;       /* il testo che si legge: il carattere ha già il suo passo */
  --tr-etichetta:   0.06em;  /* maiuscole piccole: senza aria diventano un blocco */
  --tr-marchietto:  0.08em;  /* le parole di stato, che sono corte e vanno lette d'un colpo */
  --tr-comando:     0.12em;  /* il bottone che grida: «COPIA» */
  --tr-insegna:     0.18em;  /* l'insegna della barra, dove la spaziatura è il disegno */

  /* ── interlinea ─────────────────────────────────────────────────────────
     Stessa storia: otto dichiarazioni `line-height` in `stile.css`, quattro
     valori, zero token. E `--t-scheda` — il prompt in cima, cioè l'unico testo
     che qualcuno legge davvero fino in fondo — non aveva un'interlinea sua.
     `--i-unica` non è «uno spazio piccolo»: è la riga che **non deve avere**
     spazio sotto, perché dentro ci sta un'icona o una cifra e non una frase. */
  --i-unica:    1;      /* bottoni-icona, marchietti: dentro c'è un glifo, non un testo */
  --i-stretta:  1.5;    /* elenchi fitti */
  --i-lettura:  1.55;   /* il prompt, il corpo, tutto ciò che si legge per intero */
  --i-ampia:    1.6;    /* i blocchi lunghi dello storico */

  /* ── spaziatura ───────────────────────────────────────────────────────── */
  --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem;
  --s4: 1rem;     --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;

  /* ── forme ──────────────────────────────────────────────────────────────
     Il Figma è molto arrotondato: pillole a raggio pieno, schede sui 20-24 px. */
  /* Due spessori, e il secondo non è «il filo, ma di più»: è un'altra cosa.
     `--filo` separa, `--filo-marcato` **indica** — è il marcatore d'accento
     che dice dove cadrà la riga trascinata e quale blocco è quello a fuoco.
     Nel vecchio foglio ricorreva quattro volte, sempre a 3 px, sempre a mano. */
  --filo: 1px;
  --filo-marcato: 3px;

  --r-tenue:   6px;    /* bottoni in linea e campi bassi: appena smussati */
  --r-minuto:  9px;
  --r-riga:    12px;
  --r-campo:   14px;
  --r-scheda:  20px;
  --r-pillola: 999px;

  /* ── l'anello di fuoco ──────────────────────────────────────────────────
     Non aveva **nessun** token: né colore, né spessore, né scostamento, né
     raggio — quattro numeri cablati in una regola globale e sensibile al tema.
     È l'unica cosa che dice a chi naviga da tastiera dove si trova, quindi è
     esattamente ciò che non può stare scritto a mano in un punto solo.
     Il colore segue l'accento **apposta**: l'anello e l'azione parlano con la
     stessa voce, e il giorno che debbano divergere si cambia questa riga sola.
     Misurato: 16,98:1 sul fondo scuro e 14,16 sul pannello sollevato; sul tema
     chiaro 4,98 e 5,59 — sopra il 3:1 di WCAG 1.4.11 su tutti e quattro i
     fondali di entrambi i temi. */
  --fuoco:             var(--accento);
  --fuoco-spessore:    2px;
  --fuoco-scostamento: 2px;
  --fuoco-raggio:      4px;

  /* ── elevazione ─────────────────────────────────────────────────────────
     Una scala, non un'ombra sola: senza tre livelli il compositore che
     galleggia e la scheda che sta ferma sembrano alla stessa altezza. */
  --e1: 0 1px 2px #00000059;
  --e2: 0 4px 16px #00000066, 0 1px 3px #0000004d;
  --e3: 0 16px 48px #00000080, 0 2px 8px #00000059;

  /* ── movimento ──────────────────────────────────────────────────────────
     ⚠️ Questi due numeri NON si scelgono qui: vengono dall'ADR
     `2026-08-19-il-movimento-che-si-e-tenuto.md`, che li ha già decisi con le
     sue ragioni e ha scartato due movimenti con altrettante. Qui si portano
     nei token perché smettano di stare cablati in `app.js`; il giorno che il
     ritmo dell'app debba cambiare, cambia qui.
     ⚠️ E `prefers-reduced-motion` va comunque chiesto in JavaScript: il
     `!important` del foglio non tocca `Element.animate()`. Vedi
     `fermoImmagine()` in `pubblico/app.js`. */
  /* ⚠️ **`color-scheme` non è un token, è la parola che l'app dice al browser.**
     I token vestono ciò che disegniamo noi; restano fuori le cose che disegna
     lui e che nessun colore nostro raggiunge — barre di scorrimento, il cursore
     di testo, `::selection`, il riempimento automatico dei campi. Senza questa
     riga quelle seguono lo **schema di sistema**, quindi chi sceglie il chiaro
     su un Mac in scuro si ritrova barre nere in una pagina bianca, e il tema
     resta finito a metà.
     Va **dentro il blocco del tema** e non su `<html>` nel markup: è un valore
     che cambia col tema come tutti gli altri, ed è la prova che la regola
     numero 1 regge anche qui. Trovato da una revisione avversariale: era assente
     in tutt'e due i temi. */
  color-scheme: dark;

  --durata: 200ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ⚠️ E questi due **non vengono dall'ADR**: vengono da `stile.css`, dove
     l'hover di bottoni e marchietti transisce colore, sfondo e bordo a
     `120ms ease` — misurato, non ricordato. Sono un token a parte per una
     ragione sola: con `--durata` da solo, il riflesso di un hover sarebbe
     rallentato del 67% e gli sarebbe stata messa addosso una curva scelta per
     il **movimento di una riga**, che è un'altra cosa. Un oggetto che si
     sposta va accompagnato; un colore che si accende deve solo essere già lì.
     Il moto resta quello dell'ADR, il riflesso è suo. */
  --durata-riflesso: 120ms;
  --curva-riflesso: ease;

  /* ⚠️ **La conferma della copia non è un terzo ritmo: è tre volte il
     movimento**, e si scrive come tale. Il battito dell'anello attorno alla
     scheda era `620ms ease-in-out` **cablato nel foglio**, cioè il gemello
     esatto del `200` che stava cablato in `app.js` — e lo stesso criterio li
     condanna tutti e due. Il `calc()` tiene il legame: cambiare `--durata`
     cambia il ritmo dell'app **tutto insieme**, che è la cosa che i token
     esistono per permettere. Si perdono 20 ms sul valore di ieri, e a occhio
     non li misura nessuno.

     La curva invece è sua e non deriva da niente: un battito **torna dov'era**,
     e una curva che parte decisa e si posa — `--curva` — su un'andata e ritorno
     racconta un movimento che non c'è. `ease-in-out` è simmetrica come il
     gesto.

     ⚠️ Letto da JavaScript, `--durata-battito` restituisce la stringa
     `calc(…)` e non un numero: le custom properties si risolvono **alla
     sostituzione**, non alla lettura. Serve al foglio, e al foglio basta. */
  --durata-battito: calc(var(--durata) * 3);
  --curva-battito: ease-in-out;

  /* ── il budget del movimento, dichiarato ─────────────────────────────────
     Deciso in `[it.31]`, perché un livello di movimento senza un tetto cresce
     di un'animazione per volta e nessuno vede il momento in cui l'app ha
     smesso di sembrare veloce.

     · **riflesso** (un colore che si accende): `--durata-riflesso`, 120 ms.
     · **movimento** (qualcosa che si sposta, entra o esce): `--durata`, 200 ms.
     · **conferma** (il battito): `--durata-battito`, 600 ms — e sta fuori dal
       cammino di ogni gesto, cioè nessuno la aspetta.

     **Il tetto è `--durata-battito`**, e vale come regola: niente in questa app
     dura più di tre volte il movimento, e niente **trattiene** un gesto. La
     regola zero dell'ADR del movimento viene prima di tutte e tre — se
     un'animazione rallenta l'uso, non si implementa. */

  /* Due opacità, non una. Coprivano due cose diverse con lo stesso numero:
     il **comando spento**, che sul tema chiaro a 0,3 sparisce — e un comando
     che non si vede non esiste — e il **fantasma del trascinamento**, che a
     0,35 deve restare fioco anche sul chiaro, perché il suo mestiere è dire
     «sei tu che stai viaggiando» senza rubare l'occhio a dove si sta mirando.
     Alzare il fantasma insieme allo spento era il difetto di un token solo. */
  --sordina: 0.3;             /* il bottone spento */
  --sordina-fantasma: 0.35;   /* la riga in volo sotto il cursore */

  /* ── misure ─────────────────────────────────────────────────────────────── */
  --colonna: 62rem;

  /* ── marchietti ─────────────────────────────────────────────────────────
     Tre valori per ciascuno: inchiostro, bordo, campitura.
     ⚠️ Non sono decorazione e non si traducono a occhio dai vecchi. Il
     commento che li governava diceva che il blu di «ricevuto» sta lontano
     dall'ambra della cima e dal verde della consegna **apposta**: dice una
     provenienza, non uno stato della coda. Cambiando l'accento da ambra a
     lime quell'aritmetica va rifatta, non ricopiata —
       · «consegnato» era verde, e il verde adesso è il vicino di casa
         dell'accento: si sposta verso il ciano;
       · «condiviso» era oro, che del lime è quasi la stessa tinta: si sposta
         nel violetto, che è l'unico settore che questa palette non usa.
     Il cestino resta grigio spento e non rosso: chi ci arriva ha già deciso,
     e la vista serve a ripensarci, non a spaventare. */
  --m-consegnato:      #5fd3b8;
  --m-consegnato-orlo: #1f5a4c;
  --m-consegnato-velo: #10231f;

  --m-scartato:        #e08d6a;
  --m-scartato-orlo:   #6b3d29;
  --m-scartato-velo:   #2a1a12;

  --m-cestinato:       #9a9a90;
  --m-cestinato-orlo:  #46463f;
  --m-cestinato-velo:  #1c1c19;

  --m-ricevuto:        #7fb0e8;
  --m-ricevuto-orlo:   #2c4a70;
  --m-ricevuto-velo:   #131c28;

  --m-condiviso:       #c49af0;
  --m-condiviso-orlo:  #4a3566;
  --m-condiviso-velo:  #1e1729;

  /* Il sesto, che c'era nell'interfaccia e non qui: «non più condiviso».
     Prende il grigio del cestino, e non per risparmiare tre valori — è il
     colore delle cose che sono state e non sono più, che è esattamente cosa
     dice questa parola. Scritto come alias e non ricopiato: così se il grigio
     cambia idea, cambiano insieme, che è l'unico modo in cui questa decisione
     resta vera. */
  --m-staccato:      var(--m-cestinato);
  --m-staccato-orlo: var(--m-cestinato-orlo);
  --m-staccato-velo: var(--m-cestinato-velo);
}

/* ── il tema chiaro ───────────────────────────────────────────────────────
   Ricopiato dal prototipo di `[it.25]`, dove è già stato guardato e
   fotografato: qui non si ridisegna niente, si porta soltanto dove
   l'interfaccia potrà pescarlo.

   Si commuta con un **attributo su `<html>`** — `data-tema="chiaro"` — e mai
   con uno `style` scritto a mano: la CSP dell'app è `default-src 'self'` senza
   `unsafe-inline`, quindi uno `style="…"` non verrebbe applicato affatto.

   Nessun nome di token cambia qui dentro, e non è un dettaglio: è la prova che
   la regola numero 1 in cima al file regge. Cambiano solo i valori, quindi
   `stile.css` non deve sapere che tema è.

   ⚠️ Il lime NON regge come testo sul bianco (≈1,4:1). Sul chiaro `--accento`
   diventa un verde profondo, e il lime resta solo come **campitura** con
   inchiostro scuro sopra — è per questo che `--accento-velo` qui è ancora lime,
   mentre `--accento` no. */
:root[data-tema="chiaro"] {
  color-scheme: light;

  /* ⚠️ BLOCCANTE risolto il 2026-08-21, ed è l'unica cosa che si è dovuta
     **ridisegnare** rispetto al prototipo di `[it.25]`.
     Lì `--fondo-alto`, `--superficie` e `--superficie-alta` erano tutti e tre
     `#ffffff`: stacchi 1,07 · **1,00** · **1,00** contro 1,04 · 1,05 · 1,10
     dello scuro. Cioè ogni regola che dice «questo sta più in alto» col solo
     fondo si appiattiva, e `--e1` sul chiaro — nero al 6% di alfa — non la
     recuperava. Un tema in cui tre gradini su quattro coincidono non è un tema
     più chiaro: è una gerarchia che non c'è.
     Sul chiaro il bianco è un **soffitto**: sopra `#ffffff` non si sale. Per
     fare posto alla scala il fondale ha dovuto scendere di un gradino, e il
     `#f7f7f2` fotografato nel prototipo non è sparito — è salito a
     `--fondo-alto`, che è il suo mestiere naturale (barre e strisce).
     Misurato adesso: **1,05 · 1,04 · 1,04**, cioè la stessa taglia di gradino
     dello scuro. I due token che ne pagavano il prezzo — l'inchiostro più
     debole e l'accento come testo — sono stati riportati sopra soglia qui
     sotto, e ognuno dice il suo numero. */
  --fondo:            #f2f2ec;
  --fondo-alto:       #f7f7f2;   /* il fondale del prototipo, salito di un gradino */
  --superficie:       #fbfbf7;
  --superficie-alta:  #ffffff;
  --bordo:            #dedad0;
  --bordo-tenue:      #ebe8e0;

  --inchiostro:        #16160f;
  --inchiostro-tenue:  #5c5c52;
  /* ⚠️ Come il gemello scuro, misurato e non stimato. `#8a8a7e` — che veniva
     dalla prima proposta del tema chiaro — faceva 3,25:1 sul fondo e 3,49:1
     sulle superfici: sotto soglia esattamente dove vive, cioè nelle etichette
     e nei numeri. Il `#6f6f62` che era qui prima passava per un soffio, e col
     fondale sceso di un gradino sarebbe caduto a **4,53** — cioè quattro
     centesimi sopra la soglia, che non è un margine, è una coincidenza.
     Sceso a `#6c6c5f`, misurato adesso: **4,73** su `--fondo`, 4,95 su
     `--fondo-alto`, 5,13 su `--superficie`, 5,32 su `--superficie-alta`. */
  --inchiostro-fioco:  #6c6c5f;

  /* ⚠️ Anche l'accento ha pagato la scala: `#4f7a06` come **testo** sul nuovo
     fondale faceva 4,54, e sul velo lime posato lì sopra **4,42**, cioè sotto
     soglia. Sceso a `#4b7305`: **4,98** come testo sul fondo, 5,59 col bianco
     sopra, **4,85** sul velo. I tre gradini vanno tutti verso il buio — vedi il
     commento accanto a `--accento-sorvolo` in cima al file — e sono spaziati
     abbastanza da leggersi: bianco sopra 5,59 · 7,09 · 9,19. */
  --accento:          #4b7305;
  --accento-sorvolo:  #3f6205;
  --accento-caldo:    #325004;
  --accento-velo:     #cdff4966;
  --su-accento:       #ffffff;
  /* Sul chiaro l'orlo del campo a fuoco è un'oliva più chiara dell'accento:
     si vede senza diventare un secondo accento. Misurato **3,20:1** sul fondo,
     3,35 su `--fondo-alto`, 3,47 su `--superficie`, 3,60 su `--superficie-alta`
     — sopra il 3:1 di WCAG 1.4.11 su tutti e quattro. */
  --accento-orlo:     #749132;

  /* Sul chiaro il riflesso dell'hover non può essere bianco — sarebbe bianco su
     bianco. È l'inchiostro alla stessa alfa, e stacca **1,13** su tutti e
     quattro i fondali. Il velo del dialogo scende al 45%: sulla carta bastano
     meno per rendere inerte il resto, e il 62% dello scuro qui farebbe notte. */
  --velo-passaggio:   #16160f0f;
  --velo-fondale:     #16160f73;

  --buono:      #1f7a3d;
  --attenzione: #8a5a08;
  --pericolo:   #b3301f;
  --pericolo-velo: #b3301f14;

  /* Sul chiaro 0.3 è invisibile, e un comando che non si vede non esiste.
     ⚠️ Sale **solo** lo spento. `--sordina-fantasma` non compare qui apposta:
     la riga in volo deve restare fioca anche sul chiaro, e alzarla insieme allo
     spento — che è ciò che faceva il token unico — le faceva rubare l'occhio
     proprio mentre si sta mirando dove lasciarla cadere. */
  --sordina: 0.5;

  /* Le stesse tre altezze, ma l'ombra su fondo chiaro va tenuta bassissima:
     col nero del tema scuro qui si otterrebbe una macchia, non un rilievo. */
  --e1: 0 1px 2px #16160f0f;
  --e2: 0 4px 16px #16160f14, 0 1px 3px #16160f0f;
  --e3: 0 16px 48px #16160f1f, 0 2px 8px #16160f14;

  /* I quindici valori dei marchietti, riscelti per il chiaro e **misurati**:
     l'inchiostro va scuro, il velo diventa una tinta tenue e l'orlo si alza a
     un mezzo tono. Rapporti inchiostro-su-velo: consegnato 5,73:1 · scartato
     6,52:1 · cestinato 5,91:1 · ricevuto 7,52:1 · condiviso 7,47:1.
     Non bastava tenere quelli scuri: il loro contrasto passava anche qui — e
     `token.html` lo confermava — ma un velo quasi nero su una pagina bianca
     non vela, fa una macchia. È il caso in cui il numero dice sì e l'occhio
     dice no, e comanda l'occhio.
     Le distanze di tinta restano quelle decise sullo scuro: «consegnato» sta
     nel ciano perché il verde è il vicino dell'accento, «condiviso» nel
     violetto perché l'oro del vecchio tema era quasi la stessa tinta del lime. */
  --m-consegnato:      #0f6b57;
  --m-consegnato-orlo: #a8d8cb;
  --m-consegnato-velo: #e6f5f0;

  --m-scartato:        #8a4020;
  --m-scartato-orlo:   #e0bda8;
  --m-scartato-velo:   #fbeee7;

  --m-cestinato:       #5c5c52;
  --m-cestinato-orlo:  #cfcfc6;
  --m-cestinato-velo:  #f0f0eb;

  --m-ricevuto:        #1f4d80;
  --m-ricevuto-orlo:   #b3ccea;
  --m-ricevuto-velo:   #e8f0fa;

  --m-condiviso:       #5b3a86;
  --m-condiviso-orlo:  #cdb8e6;
  --m-condiviso-velo:  #f1eafa;
}