/* ============================================================= variables.css — i token del sito Starter siti · 00_Sistema/02_Template/sito/starter/ ------------------------------------------------------------- REGOLA CHE TIENE IN PIEDI TUTTO IL RESTO: in questo starter NON esiste un solo colore, una sola misura e una sola distanza scritta a mano fuori da questo file. Se cambi il colore del cliente qui, cambia in tutto il sito. Se lo scrivi dentro components.css, hai appena creato un debito. Ogni token ha un commento che dice COSA FA, non come si chiama. I valori colore sono in doppia riga: prima l'HEX (ripiego per browser vecchi), poi l'OKLCH (letto dai browser moderni). La cascata fa il resto: chi non capisce oklch() ignora la seconda riga. Le due righe sono LO STESSO COLORE, convertito, non due colori simili: se ne cambi una cambia anche l'altra. Contrasti misurati il 2026-08-22 con lo script di conversione (sRGB → luminanza relativa → rapporto WCAG). Nessun arrotondamento: 2.999:1 NON passa la soglia 3:1 (testo esplicito di SC 1.4.11). ============================================================= */ :root { /* =========================================================== 1 · COLORE — token semantici, mai token "nome del colore" ----------------------------------------------------------- Si dichiara il RUOLO (--testo, --bordo, --accento), non la tinta (--blu-700). Così la variante scura, o il cliente che cambia idea sul colore, sono quindici righe e non tre giorni. ⚠️ I valori qui sotto sono un SEGNAPOSTO NEUTRO, non una palette scelta. Vanno sostituiti col brand-kit del cliente (F7) e RIMISURATI: cambiare l'accento cambia sei coppie. ----------------------------------------------------------- OGNI TOKEN ESCE CLASSIFICATO: MISURATO o DERIVATO. ① MISURATO — hex + oklch fisso, perché ci poggia una soglia WCAG: testo, bordo informativo, accento, fuoco, stati, e ogni FONDO. ② DERIVATO — color-mix() da currentColor, ammesso SOLO sui filetti decorativi (SC 1.4.11 esenta esplicitamente il decorativo). NON sui veli: sopra un velo ci va del testo, quindi una soglia c'è (vedi --velo-foto, §1-bis). Il confine: un token è derivabile solo se, sbagliandolo, non si rompe nessun rapporto misurato — né suo, né di ciò che ci sta sopra. ⚠️ Un FONDO non si deriva MAI: non ha una soglia sua, ma ne regge quattro appoggiate sopra. Prova su --sfondo-tenue #f4f5f7: testo 16,1370:1 · testo-tenue 5,8609:1 · accento 6,1434:1 · bordo-forte 3,7129:1. ⚠️ L'ancora è currentColor, MAI var(--testo): --testo al 12% su fondo --testo misura 1,0000:1 — stessa classe del bug del 2026-08-22 in layout.css §banda. =========================================================== */ /* Fondo della pagina. È il bianco su cui poggia tutto. */ --sfondo: #ffffff; --sfondo: oklch(1.0000 0 89.9); /* Fondo delle sezioni alternate: dà ritmo senza aggiungere colore. Serve a separare due blocchi, non a decorare. */ --sfondo-tenue: #f4f5f7; --sfondo-tenue: oklch(0.9700 0.0029 264.5); /* Fondo delle card. Su sfondo chiaro coincide col fondo pagina: la card si stacca col bordo, non con un grigio. (Nella variante scura è QUESTO token che si alza di luminosità: al buio la gerarchia si fa con la luce delle superfici, non con le ombre — sul nero le ombre non si vedono.) */ --sfondo-elevato: #ffffff; --sfondo-elevato: oklch(1.0000 0 89.9); /* Testo principale. 17.60:1 sul fondo pagina, 16.14:1 sul tenue. */ --testo: #16191f; --testo: oklch(0.2130 0.0127 264.3); /* Testo secondario: didascalie, note, meta. 6.39:1 sul fondo pagina, 5.86:1 sul tenue — passa AA da solo. ⚠️ È il token dove si sbaglia sempre: il grigio "elegante" scelto a occhio fallisce 4.5:1 e nessuno se ne accorge. */ --testo-tenue: #55606e; --testo-tenue: oklch(0.4848 0.0264 254.5); /* Bordo DECORATIVO: separatori, righe fra le voci di un elenco. Non porta informazione, e SC 1.4.11 esenta esplicitamente il decorativo. Non usarlo per un input: quello è --bordo-forte. ⚠️ QUESTO È IL RIPIEGO, non il valore finale. Il valore vero è DERIVATO da currentColor nel blocco @supports in fondo al file: così il filetto pesa in proporzione al testo della superficie su cui finisce, invece di essere un grigio fisso che su un fondo colorato diventa un tratto forte. Il fisso #e2e5ea dentro .banda--accento (#22201e) misura 5,3069:1: «discreto» solo sul bianco. Derivato: 1,2789:1 sul chiaro, 1,3731:1 sullo scuro. ⚠️ Perché @supports e non la doppia riga qui dentro. Le custom property accettano qualsiasi sequenza di token: un browser senza color-mix() MEMORIZZA la seconda riga, e all'uso `border: 1px solid var(--bordo)` diventa invalid-at-computed- value-time → la shorthand va a unset → border-color torna al suo iniziale, che è currentColor A PIENA FORZA: filetto quasi nero. Solo @supports fa un ripiego vero. */ --bordo: #e2e5ea; /* Bordo che PORTA INFORMAZIONE: input, select, card cliccabile, bottone ghost. Deve stare ≥3:1 sul fondo (SC 1.4.11 AA). 4.05:1 sul fondo pagina, 3.71:1 sul tenue. */ --bordo-forte: #767f8c; --bordo-forte: oklch(0.5934 0.0226 257.5); /* Accento: il colore del brand. Una tinta sola. Due accenti sono un lusso che si giustifica, non un default. 6.70:1 sul bianco → regge sia come testo del link sia come fondo del bottone primario col testo bianco sopra. */ --accento: #22201e; --accento: oklch(0.2450 0.0048 67.6); /* Accento premuto/hover: più scuro, non più saturo. 8.82:1 col bianco. */ --accento-scuro: #0a0a0a; --accento-scuro: oklch(0.1448 0 0); /* Testo che sta SOPRA l'accento. ⚠️ Bianco, sempre. Testo scuro sull'accento dà 2.63:1: non passa. */ --accento-testo: #ffffff; --accento-testo: oklch(1.0000 0 89.9); /* Stato di conferma (form inviato). 5.02:1 sul bianco. */ --ok: #15803d; --ok: oklch(0.5273 0.1371 150.1); /* Stato di errore (campo non valido). 6.47:1 sul bianco. ⚠️ Se l'accento del brand è rosso, questo token diventa un problema strutturale: si decide in F7, non in build. */ --errore: #b91c1c; --errore: oklch(0.5054 0.1905 27.5); /* =========================================================== 1-bis · VELO — l'unica alpha sotto una soglia di testo ----------------------------------------------------------- Sta fuori dal §1 apposta: il §1 è «token semantici» con la convenzione hex+oklch, e un gradiente non ha un oklch. Capo debole misurato col bianco sopra: 4,7588:1 (era 2,4415:1). Capo forte: 10,4088:1. Sopra un velo ci va del testo, quindi una soglia c'è: questo NON è un token derivabile. =========================================================== */ --velo-foto: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.55)); --testo-su-velo: #ffffff; /* =========================================================== 2 · FUOCO — i token dello stato di focus ----------------------------------------------------------- Il fuoco non è un dettaglio di CSS: è un colore della palette, perché deve avere ≥3:1 su OGNI fondo su cui può comparire — compreso il fondo colorato della sezione CTA. Standard applicato: anello di 3 px + stacco di 2 px. Copre con margine il "perimetro spesso 2 CSS px" (area 4h+4w). ⚠️ Provenienza onesta dei numeri: perimetro ≥2 px e 3:1 fra stato con e senza fuoco vengono da SC 2.4.13, che è **AAA**. La norma applicabile oggi (EN 301 549 v3.2.1 → WCAG **2.1 AA**) chiede SC 1.4.11 (contrasto non testuale ≥3:1) e SC 2.4.7 (fuoco visibile), senza soglia dimensionale. Quindi: questo è uno STANDARD DI CASA, più severo della legge. Nei documenti cliente si scrive "WCAG 2.1 AA", non "2.4.13". =========================================================== */ /* Anello di fuoco sui fondi chiari. 17.60:1 sul fondo pagina. */ --fuoco: #16191f; --fuoco: oklch(0.2130 0.0127 264.3); /* Anello di fuoco sui fondi scuri o colorati. 6.70:1 sull'accento. Si applica ridefinendo --fuoco dentro la banda scura (vedi layout.css → .banda--accento), non aggiungendo una classe al bottone: il bottone non deve sapere dove sta. */ --fuoco-inverso: #ffffff; --fuoco-inverso: oklch(1.0000 0 89.9); --fuoco-spessore: 3px; /* spessore dell'anello */ --fuoco-stacco: 2px; /* outline-offset: stacca l'anello dal bordo */ /* =========================================================== 3 · TIPOGRAFIA — famiglie ----------------------------------------------------------- ⚠️ ZERO DOMINI TERZI. Nessun a fonts.googleapis.com, nessun @import da CDN. Landgericht München I, 20/01/2022, causa 3 O 17493/20: il font dal CDN di Google trasmette l'IP dell'utente negli USA senza base giuridica — 100 € di danno riconosciuto e penale fino a 250.000 €. Il ragionamento del tribunale è che manca il legittimo interesse **proprio perché i font si possono ospitare in locale**. Vale identico per uno script da unpkg o jsdelivr. Di default questo starter NON carica nessun font: usa lo stack di sistema, che pesa 0 KB e non fa nessuna richiesta. Quando il progetto ha i suoi caratteri: li si mette in fonts/, si scommenta il blocco @font-face in fonts.css e si cambiano queste due righe. Le regole di licenza: fonts/LEGGIMI-FONT.md. =========================================================== */ /* Massimo 2 famiglie. La seconda deve avere un ruolo dichiarato ("i titoli", "i numeri"), altrimenti è rumore. */ --font-titoli: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-testo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* =========================================================== 4 · TIPOGRAFIA — scala fluida a 7 gradini ----------------------------------------------------------- Generata con la formula Utopia fra viewport 320 px e 1440 px: pendenza = (dimMax − dimMin) / (largMax − largMin) intercetta = dimMin − pendenza × largMin clamp( dimMin[rem] , intercetta[rem] + pendenza×100 [vw] , dimMax[rem] ) Rapporto ~1.2 in basso (320 px) e ~1.25 in alto (1440 px): la scala "si apre" quando c'è spazio. ⚠️ PAVIMENTO 14 px. Il gradino più piccolo parte da 14 px e non scende: nessun testo del sito può finire sotto quella soglia. Non è pignoleria — su un sito reale il testo che portava la prova era finito a 8,4 px, e un audit da 1.506 contrasti non l'aveva visto. Il pavimento è la difesa che il contrasto non dà. ⚠️ Minimi in rem, MAI in px, e mai vw puro: con px o vw puro il testo non risponde allo zoom del testo del browser. =========================================================== */ --testo--1: clamp(0.875rem, 0.8571rem + 0.0893vw, 0.9375rem); /* 14 → 15 px · didascalie, note legali, meta. IL PAVIMENTO. */ --testo-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem); /* 16 → 18 px · corpo del testo. Il gradino su cui si legge. */ --testo-1: clamp(1.1875rem, 1.1339rem + 0.2679vw, 1.375rem); /* 19 → 22 px · sottotitolo, occhiello, lead della hero. */ --testo-2: clamp(1.4375rem, 1.3482rem + 0.4464vw, 1.75rem); /* 23 → 28 px · h3, titolo di card. */ --testo-3: clamp(1.75rem, 1.625rem + 0.625vw, 2.1875rem); /* 28 → 35 px · h2, titolo di sezione. */ --testo-4: clamp(2.0625rem, 1.8661rem + 0.9821vw, 2.75rem); /* 33 → 44 px · h1 delle pagine interne. */ --testo-5: clamp(2.5rem, 2.2321rem + 1.3393vw, 3.4375rem); /* 40 → 55 px · display: SOLO l'h1 dell'apertura. */ /* Crenatura (letter-spacing) — un valore per ogni gradino. Non è decorazione: è la correzione ottica che un compositore fa a mano. Più il corpo cresce, più lo spazio fra le lettere SEMBRA largo, e va stretto. Sotto i ~18 px non si tocca: lì lo spazio serve a distinguere le lettere, non a legarle. La scala è MONOTONA. Se ne cambi uno, cambiali tutti nello stesso verso: un h2 più stretto di un h1 si vede e non si sa perché. ⚠️ I primi due valgono ZERO apposta: stanno qui per rendere leggibile la curva, non perché qualcuno debba usarli. LA MANOPOLA — si gira una volta, in F7, e non si riapre. 0.6 = stack di sistema (Segoe UI Variable e SF hanno già un asse di dimensione ottica e stringono da soli; Roboto su Android no, ed è il compromesso che accettiamo) · 1 = il progetto carica i suoi woff2 · 0.8 = il ripiego atteso è Roboto/Arial. Una riga, non sette. A 0.6 i valori effettivi sono −0.006 / −0.009 / −0.012 / −0.015 / −0.018em. */ --crenatura-fattore: 0.6; --crenatura--1: 0em; /* 14→15 px · si lascia stare */ --crenatura-0: 0em; /* 16→18 px · il corpo non si tocca MAI */ --crenatura-1: calc(-0.010em * var(--crenatura-fattore)); /* 19→22 px */ --crenatura-2: calc(-0.015em * var(--crenatura-fattore)); /* 23→28 px */ --crenatura-3: calc(-0.020em * var(--crenatura-fattore)); /* 28→35 px */ --crenatura-4: calc(-0.025em * var(--crenatura-fattore)); /* 33→44 px */ --crenatura-5: calc(-0.030em * var(--crenatura-fattore)); /* 40→55 px */ /* Micro-testo MAIUSCOLO: qui la crenatura va in POSITIVO. È l'unico punto del sito dove la scala si inverte. Le maiuscole sono tutte alte uguali e senza il ritmo delle ascendenti: incollate diventano un blocco grigio. Vale SOLO per il testo trasformato in maiuscolo (.etichetta), mai per una frase. ⚠️ Il maiuscolo si legge più lentamente: max 3-4 parole. */ --crenatura-maiuscolo: 0.08em; /* Peso dei titoli. Uno solo, e il motivo è tecnico: sullo stack di sistema gli unici due pesi che esistono su Windows, Apple e Android insieme sono 400 e 700. Un 600 rende tre cose diverse sui tre sistemi. La scala di pesi si accende solo con un font variabile caricato — che è già la regola «≥3 pesi». */ --peso-titoli: 700; /* Interlinea. Non esiste una soglia WCAG sull'interlinea in sé; esiste SC 1.4.12, che chiede che il layout non si rompa se l'utente forza line-height 1.5. Partendo da 1.6 nativo, è soddisfatto per costruzione. */ --interlinea-testo: 1.6; /* corpo · intervallo sano 1.5–1.65 */ --interlinea-titoli: 1.45; /* ripiego per h5/h6 e per ciò che non sta sulla scala. Era 1.12: tarato su titoli grandi che ora hanno il loro gradino. h5/h6 sono poco più che corpo, e a 1.12 la curva si invertiva in fondo. */ /* La riga sopra diceva «l'interlinea si stringe quando il corpo cresce», ma con UN valore solo non si stringe niente: 1.12 copriva sia un h3 da 23 px sia un display da 55 px. Due corpi e mezzo di differenza, la stessa interlinea. Qui diventa eseguibile. ⚠️ Il pavimento è 1.05, non 0.85: sotto, le discendenti (g, p, q) toccano la riga dopo — e con text-wrap: balance i titoli vanno su due righe più spesso di quanto si creda. */ --interlinea-5: 1.05; /* 40→55 px · display */ --interlinea-4: 1.10; /* 33→44 px · h1 */ --interlinea-3: 1.15; /* 28→35 px · h2 */ --interlinea-2: 1.20; /* 23→28 px · h3, titolo di card */ --interlinea-1: 1.45; /* 19→22 px · sottotitolo, lead: è ancora testo che si LEGGE, quindi sta nella coda bassa della banda del corpo, non fra i titoli */ /* Misura di riga. Il numero che nessuno controlla. 55–70 caratteri, mai oltre 75: righe troppo lunghe (e troppo corte) rompono i movimenti saccadici e rallentano la lettura. ⚠️ ch dipende dal carattere: con un font stretto 65ch può dare 75+ caratteri veri. Si CONTA, non ci si fida. */ --misura-riga: 65ch; /* =========================================================== 5 · SPAZIATURA — una scala sola, multipli di 4 e 8 ----------------------------------------------------------- La griglia a 8 gestisce layout e componenti, quella a 4 il ritmo del testo. Il punto non è l'estetica: è togliere le decisioni che non serve prendere. Se un valore non è in questa scala, quel valore è sbagliato. =========================================================== */ --sp-1: 0.25rem; /* 4 px · stacco fra icona e testo */ --sp-2: 0.5rem; /* 8 px · padding interno stretto */ --sp-3: 0.75rem; /* 12 px */ --sp-4: 1rem; /* 16 px · unità di riferimento */ --sp-5: 1.5rem; /* 24 px · padding di card, gutter del contenitore */ --sp-6: 2rem; /* 32 px */ --sp-7: 3rem; /* 48 px */ --sp-8: 4rem; /* 64 px */ --sp-9: 6rem; /* 96 px */ --sp-10: 8rem; /* 128 px */ /* Distanza fra sezioni: TRE valori, non dieci. Il resto è rumore. Anche queste fluide, così il ritmo verticale segue lo schermo. */ --sez-s: clamp(2rem, 1.7143rem + 1.4286vw, 3rem); /* 32 → 48 px */ --sez-m: clamp(3rem, 2.4286rem + 2.8571vw, 5rem); /* 48 → 80 px */ --sez-l: clamp(4rem, 2.8571rem + 5.7143vw, 8rem); /* 64 → 128 px */ /* Lo stacco che una àncora lascia sopra di sé. 12 px servono a non incollare il bordo, non a fare aria: l'aria la fa già --sez-l (~119 px a 1280). Prima erano 48+119 = 167 px sopra il titolo; adesso ~130. Non sparisce il doppio pagamento — si riduce. ⚠️ Con una testa fissa il conto cambia e questo numero va rifatto: si decide in F4, misurando l'altezza vera della testa. */ --stacco-ancora: var(--sp-3); /* 12 px */ /* ⚠️ La regola che vale più di tutta la teoria della spaziatura: lo spazio SOPRA un titolo deve essere maggiore dello spazio SOTTO. È ciò che lega il titolo al suo paragrafo invece che a quello precedente. È l'errore di gerarchia più comune. */ /* =========================================================== 6 · LARGHEZZE =========================================================== */ --largh-contenitore: 75rem; /* 1200 px · il contenitore generale */ --largh-stretto: 45rem; /* 720 px · colonna di testo lungo */ --gutter: var(--sp-5); /* margine laterale su mobile */ /* =========================================================== 7 · RAGGI — quattro, e si scelgono per FAMIGLIA ----------------------------------------------------------- Non si sceglie un raggio per elemento: si sceglie a quale famiglia appartiene l'elemento, e la famiglia porta il raggio. Un raggio nuovo è una famiglia nuova, e va giustificata. ⚠️ --raggio-tondo NON è un raggio: è una FORMA. 999px non produce «un angolo più morbido», produce una pillola o un cerchio. Non sta sulla scala e non si interpola con gli altri. =========================================================== */ --raggio-s: 4px; /* campi e anello di fuoco: input, select, textarea, tag, :focus-visible (reset.css) */ --raggio-m: 8px; /* comandi e contenitori: bottoni, card */ --raggio-l: 16px; /* riquadri grandi, immagini */ --raggio-tondo: 999px; /* FORMA: pillole, pallini, avatar */ /* =========================================================== 8 · RILIEVO — si fa con una linea, non con un'ombra ----------------------------------------------------------- ① Il rilievo a riposo è un BORDO. Sullo starter: 21 dichiarazioni che disegnano una linea contro 1 ombra. Si riproduce con grep -nE '^\s*(border|outline)[a-z-]*\s*:' css/*.css | grep -v border-radius meno le 4 righe non-disegnanti (border-collapse, border: 0, border-width, outline-offset). ② L'ombra vive SOLO su uno stato transitorio (:hover, :active, trascinamento) e mai come unico segnale. ③ Un token solo. --ombra-s e --ombra-l erano dichiarati e mai usati. ⚠️ Su fondo scuro le ombre non si vedono: la gerarchia lì si fa con la luminosità delle superfici (--sfondo-elevato). Coerente col Brand Kit ATLAS §6: «niente ombre morbide/gradients corporate». =========================================================== */ --ombra-sollevata: 0 2px 8px rgb(0 0 0 / 0.08); /* stesso valore del vecchio --ombra-m */ /* =========================================================== 9 · BERSAGLI TATTILI ----------------------------------------------------------- ⚠️ Provenienza onesta: 24×24 px viene da SC 2.5.8 Target Size (Minimum), che è **WCAG 2.2 AA**. La norma applicabile oggi (EN 301 549 v3.2.1 → WCAG **2.1 AA**) NON la contiene. Quindi 24×24 è uno **standard di casa, più severo della norma**, non un obbligo di legge: un rapporto che scrive "non conforme 2.5.8 AA" su un sito venduto come "2.1 AA" è contestabile da due lati opposti. E 24 px è un PAVIMENTO, non un obiettivo: sul bottone del telefono e su quello di WhatsApp si va a 48 px senza discutere, perché è l'unico punto in cui il sito produce soldi e sul pollice si manca. =========================================================== */ --tocco-min: 24px; /* pavimento su ogni elemento cliccabile */ --tocco-comodo: 44px; /* Apple HIG · WCAG 2.2 AAA (SC 2.5.5) */ --tocco-telefono: 48px; /* Material · telefono e WhatsApp, obbligatorio */ /* =========================================================== 10 · MOVIMENTO ----------------------------------------------------------- Durate corte e una curva sola. Il blocco che disattiva tutto quando l'utente chiede meno movimento sta in reset.css: è una riga di CSS e non è opzionale. =========================================================== */ --durata-veloce: 120ms; --durata-media: 220ms; --curva: cubic-bezier(0.2, 0, 0, 1); } /* ============================================================= IL FILETTO DECORATIVO, DERIVATO ------------------------------------------------------------- Vedi il §1: questo è l'unico token DERIVATO dello starter. Deve stare qui fuori e dentro @supports — non come seconda riga dentro :root — perché solo @supports produce un ripiego vero. Il perché per esteso sta sul token --bordo, e non si rispiega. ⚠️ Non è uniforme, ed è voluto: .pie dichiara anche color: var(--testo-tenue), quindi lì il derivato è il 12% di #55606e = 1,1775:1 contro ~1,2789:1 altrove. Resta decorativo, resta legittimo, SEGUE IL TESTO. Va scritto, non scoperto. ============================================================= */ @supports (color: color-mix(in oklab, currentColor 12%, transparent)) { :root { --bordo: color-mix(in oklab, currentColor 12%, transparent); } } /* ============================================================= COMMUTATORE · SPIGOLO VIVO ------------------------------------------------------------- Si accende dal brand kit del cliente mettendo la classe sull' , NON cambiando i token: . NON è il default, ed è una scelta: lo starter serve vetrine di PMI locali, dove l'angolo morbido è il registro giusto. Offrirlo come interruttore invece che come default è l'opposto della copia. Quando accenderlo: se hai deciso un filetto da 1 px, l'angolo vivo è la CONSEGUENZA — un hairline su angolo curvo mostra l'aliasing. Da noi lo spigolo vivo è di casa dal 2026-06-28 (Brand-Kit-ATLAS §6: «angoli netti o appena arrotondati»). ⚠️ --raggio-tondo NON si azzera: è una forma, non un raggio. Azzerarlo trasformerebbe pillole e avatar in quadrati. ============================================================= */ .spigolo-vivo { --raggio-s: 0; --raggio-m: 0; --raggio-l: 0; } /* ============================================================= VARIANTE SCURA — deliberatamente NON attiva ------------------------------------------------------------- Su una vetrina di PMI locale la variante scura raddoppia le coppie di contrasto da verificare e nessun cliente la chiede. Si accende per software, dashboard e portfolio, o su richiesta esplicita scritta nel progetto (F4) — mai scoperta in build. ⚠️ Se la accendi: NON basta togliere i commenti. Vanno rimisurate TUTTE le coppie della matrice, perché sono valori non verificati. E mai #000000 come fondo: nero puro + testo bianco fa vibrare i bordi. Il riferimento è ~#121212. @media (prefers-color-scheme: dark) { :root { --sfondo: #14161a; --sfondo-tenue: #1a1d22; --sfondo-elevato: #21252b; --testo: #eef0f3; --testo-tenue: #b4bcc7; --bordo: #2b3037; --bordo-forte: #79828f; --accento: #93b4ff; --accento-scuro: #b6cbff; --accento-testo: #14161a; --fuoco: #ffffff; --fuoco-inverso: #14161a; } } ------------------------------------------------------------- RISULTATO NEGATIVO, misurato il 2026-08-25 — si scrive perché fra sei mesi qualcuno rifarebbe il conto da capo. Ipotesi: «i grigi per alpha rendono quasi gratuita la variante scura». FALSA. Dei 12 token che il blocco qui sopra riscrive ne sparisce UNO — --bordo, che ora si deriva da solo. Restano 11 righe su 12 e l'INTERA matrice di contrasto da rimisurare. L'8% delle righe, zero misure risparmiate. L'economia di chi lavora così non viene dall'alpha: viene dall'avere UN TEMA SOLO. Noi ne abbiamo due e cinque fondi. (Il filetto derivato: 1,2789:1 sul chiaro, 1,3731:1 sullo scuro — non identico, ma filetto in entrambi i casi, senza riscrivere.) ============================================================= */