/* ========================================================================== Plicum — Design tokens (fondazione del design system) Smart Business Solution S.R.L. COS'È CAMBIATO (redesign 1.24 — 13/08/2026) La tinta del prodotto è ora il BLU DEL MARCHIO (#14375C, scala `ink`), non più un teal. Fino alla 1.23 l'azione primaria era `--cyan-11` (#0a6f8f): il rebranding a Plicum aveva cambiato logo, icone e immagini social, ma nessuno aveva guardato la palette dell'interfaccia — che continuava a parlare il linguaggio di una utility consumer, cioè il registro che l'analisi di mercato del marchio aveva esplicitamente escluso. Il cyan resta come ACCENTO (è la riga di sottoscrizione del logo), e le scale `purple` e `pink` del marchio precedente sono state rimosse: 42 token dichiarati, tre riferimenti in tutta l'app. COS'ERA CAMBIATO PRIMA (restyling 1.5) Il sistema nasceva "dark-first" con accento cyan fluo: leggibile, ma con l'aria di una utility per sviluppatori. Le suite documentali di riferimento sono invece TUTTE a tema chiaro, con superficie bianca su fondo neutro e colore saturo confinato a due sole zone (icona di categoria + un unico pulsante d'azione). Quella convenzione — che è convenzione d'uso, non trade dress — resta la base di questo file. REGOLE DI QUESTO FILE 1. Qui stanno SOLO i valori. I componenti (app.css) non devono mai contenere colori letterali né stare dentro una media query di tema: cambiando i token cambia tutta l'app, in entrambi i temi. 2. I nomi dei token NON si rimuovono mai: i moduli JS (auth.js, progetti.js, ai-config.js, core.js) iniettano stili che li usano — compresi gli alias storici (--text-dim, --gold, --bg3, …). 3. Le scale restano a 12 gradini con la stessa semantica in entrambi i temi (1 = superficie più lontana dal testo … 12 = testo di massimo contrasto). Così una regola come `background: var(--gray-4)` scritta in un modulo JS continua a significare "sfondo di elemento in hover" sia al chiaro sia allo scuro, senza toccare il JS. TEMA - Predefinito: CHIARO. - Se il sistema operativo chiede lo scuro, si applica il tema scuro (@media prefers-color-scheme), a meno che la pagina non forzi il chiaro con :root[data-theme="light"]. - :root[data-theme="dark"] / ["light"] restano come agganci per un eventuale selettore di tema, e vincono sempre sulla preferenza di sistema. I due blocchi scuri sono GEMELLI: se modifichi un valore in uno, modificalo anche nell'altro (marcati "BLOCCO SCURO 1/2" e "2/2"). AGGIUNTE 1.5.2 (presenti in TUTTI E TRE i blocchi di tema) - --shadow-up ombra rivolta verso l'alto: serve alla barra d'azione appoggiata al bordo inferiore della finestra, dove un'ombra verso il basso non si vedrebbe. - --skeleton-base fondo e riflesso dei blocchi in caricamento. Al buio il --skeleton-sheen riflesso non può essere bianco pieno. Corretta anche una svista della scala neutra chiara: --gray-6 ("bordo tenue") era più CHIARO di --gray-5 ("elemento premuto"), quindi il filo delle card era quasi invisibile sul bianco. La scala è di nuovo monotòna. Licenze: shadcn/ui e Radix Colors MIT; Inter e Noto Sans Arabic OFL 1.1; Lucide ISC — testi integrali in /licenses. Il glifo usato come maschera negli stati vuoti (app.css) è il tracciato Lucide "folder-open", lo stesso dello sprite: nessuna risorsa esterna, nessuna licenza aggiuntiva. ========================================================================== */ /* ------------------------------- Font ------------------------------------ */ /* Self-hosted: la CSP (font-src 'self') vieta i font da CDN. Lotto 2-bis: Inter sottoinsiemato (latin precaricato ~44 KB; latin-ext e cirillico vincolati a unicode-range). font-display:swap su tutte le famiglie. Il ripiego Arial è metricamente allineato a Inter (size-adjust / ascent / descent misurati sul file variabile) così lo scambio non sposta il testo. Il file pieno InterVariable.woff2 resta per le immagini social, non è referenziato da qui. */ @font-face { font-family: "InterFallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 107.01%; ascent-override: 90.53%; descent-override: 22.54%; line-gap-override: 0%; } @font-face { font-family: "InterVariable"; src: url("../assets/fonts/InterVariable-latin.woff2?v=1.64.2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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; } @font-face { font-family: "InterVariable"; src: url("../assets/fonts/InterVariable-latin-ext.woff2?v=1.64.2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "InterVariable"; src: url("../assets/fonts/InterVariable-cyrillic.woff2?v=1.64.2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Noto Sans Arabic"; src: url("../assets/fonts/NotoSansArabic-Variable.woff2?v=1.64.2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; /* MISURATO: senza questa riga il file veniva scaricato SEMPRE — 162 KB su ogni visita, anche in italiano, per glifi che quella pagina non contiene. `unicode-range` dice al browser quali caratteri copre questo font: lo scarica solo se nella pagina ce n'è almeno uno. In arabo si comporta esattamente come prima; nelle altre otto lingue quei 162 KB non partono. I quattro intervalli sono i blocchi Unicode dell'arabo: base, supplemento, forme estese A e forme di presentazione. */ unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ========================================================================== 1) PRIMITIVE NON CROMATICHE — identiche nei due temi ========================================================================== */ :root { /* ------------------------------ Tipografia ------------------------------ Scala esplicita a rapporto ~1.15 sui testi di lavoro e salti più larghi sui titoli: le interfacce documentali hanno molte etichette ravvicinate, una scala troppo "musicale" le renderebbe tutte simili. Il corpo passa da 14 a 15 px: è la misura minima con cui un elenco di nomi di file resta comodo da leggere a lungo. */ --font-sans: "InterVariable", "InterFallback", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; --text-xs: 0.75rem; /* 12px — badge, note, intestazioni di tabella */ --text-sm: 0.8125rem; /* 13px — metadati, descrizioni brevi */ --text-base: 0.9375rem; /* 15px — CORPO */ --text-md: 1rem; /* 16px — testo enfatizzato, prosa delle modali */ --text-lg: 1.125rem; /* 18px — titoli di riquadro */ --text-xl: 1.375rem; /* 22px — titolo dello strumento */ --text-2xl: 1.75rem; /* 28px — titoli di sezione */ --text-3xl: 2.125rem; /* 34px — H1 della home */ /* Pesi: Inter Variable permette valori intermedi; 620 dà titoli più densi del 600 senza la pesantezza del 700 su schermi ad alta densità. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-strong: 620; --weight-bold: 700; --leading-tight: 1.2; /* titoli */ --leading-snug: 1.4; /* testi di card, etichette su due righe */ --leading-normal: 1.6; /* corpo */ --leading-relaxed: 1.7; /* prosa lunga (modale privacy) */ /* Il tracking negativo serve SOLO ai corpi grandi: sotto i 18px stringere le lettere peggiora la leggibilità, specie in cirillico e in arabo. */ --tracking-tight: -0.02em; --tracking-tighter: -0.028em; --tracking-caps: 0.08em; /* etichette maiuscole */ /* Lunghezza di riga della prosa: ~65 caratteri, la misura in cui l'occhio ritrova la riga successiva senza fatica. */ --measure: 65ch; /* -------------------------- Spaziatura (NUOVO) -------------------------- Il sistema non aveva alcuna scala: ogni padding era un valore inventato (1.15rem, .55rem, 0.85rem…). Passo di 4px, che è il modulo su cui sono costruite le icone Lucide e le altezze dei controlli. */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ---------------------------- Forma ------------------------------------ Raggi contenuti: un documento è rettangolare, angoli molto tondi lo fanno sembrare un giocattolo. Un solo valore "grande" per i contenitori. */ --radius-xs: 5px; --radius-sm: 7px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 999px; /* ---------------------------- Misure di layout -------------------------- */ --topbar-h: 60px; /* invariata: l'HTML non è modificabile */ --content-max: 1240px; --content-pad: clamp(1rem, 3vw, 1.75rem); --field-h: 44px; /* altezza minima dei controlli = bersaglio 44 */ --control-h: 44px; /* IL BERSAGLIO DEL TOCCO — 44 px, che è la regola di questo progetto. Valeva 36, e da lì discendeva tutto il resto: i pulsanti nascevano a 40, quelli piccoli a 32, i comandi della barra a 32. Il foglio applicava ovunque una soglia diversa da quella dichiarata, e nessuno se ne accorgeva perché il token si chiamava già «minimo del tocco». I due valori restano separati e nominati, perché sono due cose diverse: 44 è la regola di casa (Apple HIG e Material dicono 44 e 48; il dito non legge le linee guida), 24 è il pavimento legale di WCAG 2.2 AA (criterio 2.5.8). Dove si applica il pavimento invece della regola, ora si vede. */ --tap-min: 44px; --tap-min-aa: 24px; /* ------------------------------ Motion --------------------------------- Curva quasi lineare in uscita: le micro-interazioni devono "assestarsi", non rimbalzare. Durate brevi: l'app è uno strumento, non una vetrina. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms; --transition: 180ms cubic-bezier(0.22, 1, 0.36, 1); /* alias storico */ /* ------------------------------ Livelli --------------------------------- */ --z-topbar: 100; --z-modal: 500; --z-toast: 900; /* ---------------------------- Soglie di schermo ------------------------- Le media query CSS non leggono le variabili: questi token NON si usano dentro `@media`. Servono a due cose concrete — dichiarare quali sono le soglie ufficiali (chi scrive una regola nuova le trova qui invece di inventarne una) e permettere ai moduli JS di leggerle con getComputedStyle invece di scriversi i numeri in casa. Prima del 13/08/2026 il CSS cambiava comportamento a 430, 640, 700, 860 e 1120 px: cinque soglie nate una alla volta, ciascuna per un componente, nessuna condivisa. Tre bastano, e sono quelle sotto. */ --bp-mobile: 640px; /* sotto: una colonna, azioni in fondo */ --bp-tablet: 1024px; /* sotto: griglia a 2 colonne, pannelli a scomparsa */ --bp-wide: 1440px; /* sopra: la pagina smette di allargarsi */ /* --------------------------- Ruoli tipografici -------------------------- La scala qui sopra dà le MISURE; questi danno i RUOLI, così un'etichetta è la stessa etichetta in tutta l'app senza che ogni modulo se la ricomponga con tre dichiarazioni. */ --label-size: var(--text-sm); --label-weight: 550; --caption-size: 0.78125rem; /* 12,5px — didascalie */ --meta-size: var(--text-xs); /* 12px — metadati, intestazioni di tabella */ --meta-weight: var(--weight-medium); /* Cifre a larghezza fissa: saldi, dimensioni dei file, numeri di pagina e colonne di tabella devono incolonnarsi. Senza questa, "1.111" e "8.888" hanno larghezze diverse e la colonna balla a ogni aggiornamento. */ --numeric: tabular-nums; } /* ========================================================================== 2) TEMA CHIARO (predefinito) ========================================================================== */ :root { color-scheme: light; /* ---------------------- Scala neutra (fredda) --------------------------- Non sono grigi puri: hanno una deriva verso il blu del marchio (~218°). Su un fondo di documento la differenza si legge come "scelto", mentre il grigio neutro sembra ereditato dal browser. La deriva è tenuta bassa (croma ~4%) perché su superfici ampie un azzurrino evidente stanca. */ --gray-1: #ffffff; /* superficie più pura: card, campi, modali */ --gray-2: #f5f7fb; /* sfondo dell'app */ --gray-3: #eef1f7; /* sfondo di elemento ui */ --gray-4: #e5eaf3; /* elemento ui in hover (usato dai moduli JS) */ --gray-5: #dce2ee; /* elemento ui attivo/premuto */ /* La scala deve restare MONOTÒNA: il gradino 6 era più chiaro del 5, quindi "bordo tenue" risultava più pallido di "elemento premuto" — una svista che sul bianco rendeva il filo delle card quasi invisibile (1.14:1). Portato a un valore appena più profondo del 5: le card ora hanno un contorno che si vede, senza che il reticolo diventi pesante. */ --gray-6: #d6dded; /* bordo tenue */ --gray-7: #c9d2e2; /* bordo ui */ --gray-8: #8593b0; /* bordo forte / contorno dei campi (3.1:1 su bianco) */ --gray-9: #6f7c96; /* icone e segni non testuali (4.2:1) */ --gray-10: #61708c; /* idem, in hover */ --gray-11: #4e586e; /* TESTO secondario (7.1:1 su bianco, 6.7:1 sul fondo) */ --gray-12: #171c2b; /* TESTO primario (15.8:1) */ /* ---------------------- Scala INCHIOSTRO (marchio) ----------------------- LA TINTA DEL PRODOTTO. Deriva dal blu del marchio Plicum (#14375C, tinta 210,8°) e il gradino 9 È quel valore, esatto: l'interfaccia e il logo devono essere lo stesso colore, non due blu che si somigliano. Perché esiste (13/08/2026): fino alla 1.23.0 l'azione primaria era `--cyan-11` (#0a6f8f), un teal da utility consumer — cioè il registro che l'analisi di mercato del marchio (docs/brand/README.md) aveva ESCLUSO. Il rebranding aveva toccato logo, icone e immagini social; la palette dell'interfaccia non era in elenco e nessuno l'ha guardata. Contrasti misurati su bianco (tools/prove-contrasti.py li ricalcola a ogni release): 9 → 12,13:1 col bianco sopra, quindi AAA sia come fondo di pulsante sia come testo. Il gradino 7 è il primo che raggiunge i 3:1 richiesti da WCAG 1.4.11 per un bordo che PORTA informazione; sotto il 7 si usa solo per decorazione. */ --ink-1: #F6FAFE; /* fondo tenue */ --ink-2: #EDF4FB; /* superficie tinta, pastiglia di selezione */ --ink-3: #DEE9F5; /* riga selezionata */ --ink-4: #C8DAEC; /* bordo tenue */ --ink-5: #ABC4DE; /* bordo */ --ink-6: #8BAACC; /* bordo decorativo (2,41:1 — NON porta informazione) */ --ink-7: #648AB2; /* bordo che informa, icona disattiva (3,61:1) */ --ink-8: #3C648F; /* stato intermedio (6,16:1) */ --ink-9: #14375C; /* PRIMARIO — il blu del marchio (12,13:1) */ --ink-10: #0F2C4A; /* hover: al chiaro si scurisce (14,19:1) */ --ink-11: #0B2139; /* pressione (16,27:1) */ --ink-12: #081726; /* testo su tinta (18,09:1) */ /* -------------------------- Scala cyan (accento) ------------------------ Il cyan è l'ACCENTO del marchio (la riga di sottoscrizione del logo, #0AA5CC): un segno, non una superficie. Misurato: su bianco dà 2,89:1 — non porta testo bianco e non può fare da fondo di pulsante. Regge invece il testo inchiostro (5,58:1). Per link e bordi visibili si usa l'11. */ --cyan-3: #e6f6fd; --cyan-4: #d5f0fb; --cyan-5: #bde7f7; --cyan-6: #9dd9ef; --cyan-7: #6ac3e2; --cyan-8: #23a3c9; --cyan-9: #0aa5cc; /* solido di marchio (fondi decorativi, non testo) */ --cyan-10: #0a89ae; --cyan-11: #0a6f8f; /* AZIONE e link — 5.7:1 su bianco */ --cyan-12: #073c50; /* Le scale PURPLE e PINK sono state RIMOSSE il 13/08/2026. Erano l'eredità del marchio precedente (gradiente cyan→viola): 42 token dichiarati e tre riferimenti in tutto il CSS dell'app. Ciò che le usava — i due distintivi «server» e «IA» — ora prende i colori dai token semantici qui sotto. */ /* ----------------------------- Superfici -------------------------------- */ --background: var(--gray-2); /* fondo neutro: fa "galleggiare" le card */ --foreground: var(--gray-12); --surface: var(--gray-1); /* pannelli */ --card: var(--gray-1); /* card: BIANCHE, come nelle suite di settore*/ --card-foreground: var(--gray-12); --popover: var(--gray-1); --popover-foreground: var(--gray-12); --overlay: rgba(19, 26, 45, 0.45); /* velo delle modali */ --muted: var(--gray-3); --muted-foreground: var(--gray-11); /* ------------------------------- Azione --------------------------------- Il pieno è il blu del marchio: un pulsante primario e il logo hanno lo stesso colore, ed è così che un prodotto sembra progettato invece che assemblato. */ --primary: var(--ink-9); --primary-hover: var(--ink-10); /* al chiaro l'hover SCURISCE */ --primary-active: var(--ink-11); --primary-foreground: #ffffff; /* 12,13:1 sul pieno */ --primary-subtle: var(--ink-2); /* pastiglia/selezione tenue */ --primary-border: var(--ink-5); --secondary: var(--gray-3); --secondary-foreground: var(--gray-12); /* L'accento è il cyan della riga del logo. Serve a SEGNALARE (bordo attivo, bersaglio di rilascio, stato in corso), mai a reggere testo bianco: qui vale l'11 (5,7:1), perché questi bordi portano informazione e devono superare i 3:1 di WCAG 1.4.11. Il 9 resta per i segni decorativi. */ --accent: var(--cyan-11); --accent-solid: var(--cyan-9); --accent-foreground: #ffffff; --accent-subtle: var(--cyan-3); /* ------------------------------- Stati ---------------------------------- Distinti dall'accento e sempre in versione "testo": nei moduli JS gli stessi token servono sia da colore di scritta sia da riempimento di barra (auth-meter), quindi devono essere leggibili su fondo chiaro. */ --destructive: #c62828; --destructive-subtle: rgba(198, 40, 40, 0.07); --destructive-border: rgba(198, 40, 40, 0.3); --success: #0f7350; --success-subtle: rgba(15, 115, 80, 0.09); --success-border: rgba(15, 115, 80, 0.28); --warning: #8a5a05; --warning-subtle: rgba(212, 150, 20, 0.13); --warning-border: rgba(212, 150, 20, 0.4); --info: var(--cyan-11); --info-subtle: var(--cyan-3); --info-border: var(--cyan-6); /* ---------------------------- Bordi e campi ------------------------------ */ --border: var(--gray-6); --border-strong: var(--gray-8); /* 3:1 minimo: dove il bordo E' l'informazione (contorno di un contenitore, area di rilascio, intestazione di tabella) deve superare il criterio WCAG 1.4.11 come lo supera gia' il contorno dei campi. Era gray-7: 1,52:1, invisibile a chi ha poco contrasto. Lo ha trovato tools/prove-contrasti.py. */ --input: var(--gray-1); --input-border: var(--gray-8); /* 3.1:1: il bordo È il campo */ --ring: var(--primary); --ring-shadow: 0 0 0 3px rgba(20, 55, 92, 0.20); /* alone del fuoco: #14375C */ /* --------------------- Colori per CATEGORIA di strumento ----------------- È la convenzione che rende scansionabile una griglia di 35 voci: l'occhio impara la tinta prima del nome. Tinta = icona su pastiglia tenue; il riempimento resta pallido, così la griglia non diventa un arcobaleno. Anche "organize" ha finalmente la sua tinta (prima ricadeva sul cyan). */ --cat-organize: #a34a18; --cat-organize-bg: rgba(224, 112, 58, 0.12); --cat-optimize: #0f7350; --cat-optimize-bg: rgba(15, 115, 80, 0.1); --cat-convert: #2b5fb8; --cat-convert-bg: rgba(43, 95, 184, 0.1); --cat-edit: #8a5a05; --cat-edit-bg: rgba(212, 150, 20, 0.14); --cat-security: #1f6f8f; --cat-security-bg: rgba(31, 111, 143, 0.1); --cat-ai: #b41865; --cat-ai-bg: rgba(214, 51, 126, 0.1); --cat-automation: #5a3fc0; --cat-automation-bg: rgba(123, 47, 255, 0.1); --cat-default: var(--cyan-11); --cat-default-bg: var(--cyan-3); /* ------------------------------- Ombre ----------------------------------- Tenui, corte e con una punta di blu (mai nero puro): su fondo chiaro il nero puro sporca. Servono a staccare la card dal fondo, non a farla levitare — nelle suite di riferimento l'hover muove il BORDO. */ --shadow-xs: 0 1px 1px rgba(19, 26, 45, 0.04); --shadow-sm: 0 1px 2px rgba(19, 26, 45, 0.06), 0 1px 3px rgba(19, 26, 45, 0.05); --shadow-md: 0 2px 4px rgba(19, 26, 45, 0.05), 0 6px 16px rgba(19, 26, 45, 0.07); --shadow-lg: 0 12px 32px rgba(19, 26, 45, 0.14), 0 2px 6px rgba(19, 26, 45, 0.06); --shadow-glow: 0 0 0 1px var(--cyan-7), 0 4px 14px rgba(10, 111, 143, 0.16); /* Ombra RIVOLTA IN ALTO: serve alla barra d'azione ancorata in fondo allo schermo. Un'ombra verso il basso, sotto una barra appoggiata al bordo inferiore, non si vede: il contenuto che le scorre sotto resterebbe senza stacco. È l'unica ombra "invertita" del sistema. */ --shadow-up: 0 -1px 2px rgba(19, 26, 45, 0.05), 0 -8px 20px rgba(19, 26, 45, 0.07); /* --------------------------- Attesa (scheletri) -------------------------- Un blocco in caricamento è un rettangolo neutro percorso da un riflesso. Base e riflesso sono token perché al buio il riflesso non può essere bianco pieno: accecherebbe. */ --skeleton-base: var(--gray-3); --skeleton-sheen: rgba(255, 255, 255, 0.72); /* ---------------------------- Gradiente brand ---------------------------- Usato SOLO su "Acquista crediti", sull'etichetta del pacchetto migliore e sulla barra di avanzamento. Al chiaro parte da un cyan profondo perché il testo sopra è bianco e deve restare AA su TUTTA la sfumatura. */ --on-brand: #ffffff; --brand-gradient: linear-gradient(135deg, var(--ink-9), var(--accent-solid)); /* Trama del canvas PDF: il foglio è sempre bianco, anche al buio. */ --paper: #ffffff; --paper-border: var(--gray-7); --redact-fill: #000000; } /* ========================================================================== 3) TEMA SCURO — BLOCCO SCURO 1/2 (preferenza di sistema) Si applica solo se la pagina non ha forzato il chiaro. ========================================================================== */ /* Il tema CHIARO resta predefinito SEMPRE, come nelle suite documentali di riferimento: nessuna di esse diventa scura solo perche' il sistema lo e'. Lo scuro si ottiene scegliendolo (data-theme="dark") oppure impostando data-theme="auto", che qui sotto segue la preferenza di sistema. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; /* Neutri con deriva blu-navy: allineati al theme-color del manifest (#0a0f22), così la cornice della PWA non stacca dalla pagina. */ --gray-1: #0a0e1a; --gray-2: #0f1422; --gray-3: #141a2b; --gray-4: #1a2135; --gray-5: #202840; --gray-6: #28314c; --gray-7: #3a476b; --gray-8: #556797; --gray-9: #7383a8; --gray-10: #8b9bbe; --gray-11: #a8b3cc; --gray-12: #eef1f8; --cyan-3: #062431; --cyan-4: #08303f; --cyan-5: #0a3d52; --cyan-6: #0d4e68; --cyan-7: #106181; --cyan-8: #1479a2; --cyan-9: #00d4ff; --cyan-10: #4be0ff; --cyan-11: #7ce0ff; --cyan-12: #c6f0ff; /* Scala inchiostro INVERTITA: al buio il blu del marchio non può fare da pieno (sul fondo scuro sparisce), quindi la tinta resta la stessa — 210,8° — ma la chiarezza sale. Un gradino di slittamento rispetto al chiaro: qui il bordo che porta informazione è l'8 (3,03:1 sulla card), non il 7. */ --ink-1: #0D151D; --ink-2: #111B26; --ink-3: #162432; --ink-4: #1C2D3E; --ink-5: #24394F; --ink-6: #2D4763; --ink-7: #36577A; --ink-8: #3F6A96; /* bordo che informa (3,03:1 sulla card) */ --ink-9: #4E8BCC; /* PRIMARIO (5,4:1 sul fondo, testo scuro 5,2:1) */ --ink-10: #639DDB; --ink-11: #82B4E8; --ink-12: #B0D2F5; --background: var(--gray-1); --foreground: var(--gray-12); --surface: var(--gray-2); --card: var(--gray-3); --card-foreground: var(--gray-12); --popover: #131a2c; --popover-foreground: var(--gray-12); --overlay: rgba(3, 6, 14, 0.72); --muted: var(--gray-3); --muted-foreground: var(--gray-11); /* Stessa tinta del chiaro, portata alla chiarezza che il fondo scuro richiede: chi passa da un tema all'altro deve riconoscere lo stesso prodotto, non trovarne due. */ --primary: var(--ink-9); --primary-hover: var(--ink-10); --primary-active: var(--ink-11); --primary-foreground: #061424; /* testo scuro sul pieno: 5,2:1 */ --primary-subtle: var(--ink-3); --primary-border: var(--ink-7); --secondary: var(--gray-4); --secondary-foreground: var(--gray-12); --accent: var(--cyan-11); --accent-solid: var(--cyan-9); --accent-foreground: #04202b; --accent-subtle: var(--cyan-4); --destructive: #ff6b6b; --destructive-subtle: rgba(255, 107, 107, 0.1); --destructive-border: rgba(255, 107, 107, 0.34); --success: #35d996; --success-subtle: rgba(53, 217, 150, 0.1); --success-border: rgba(53, 217, 150, 0.3); --warning: #f2c14e; --warning-subtle: rgba(242, 193, 78, 0.1); --warning-border: rgba(242, 193, 78, 0.3); --info: var(--cyan-11); --info-subtle: var(--cyan-4); --info-border: var(--cyan-7); --border: var(--gray-6); --border-strong: var(--gray-8); /* 3:1 minimo: dove il bordo E' l'informazione (contorno di un contenitore, area di rilascio, intestazione di tabella) deve superare il criterio WCAG 1.4.11 come lo supera gia' il contorno dei campi. Era gray-7: 1,52:1, invisibile a chi ha poco contrasto. Lo ha trovato tools/prove-contrasti.py. */ --input: #101728; --input-border: var(--gray-8); --ring: var(--primary); --ring-shadow: 0 0 0 3px rgba(0, 212, 255, 0.22); --cat-organize: #ff9f6e; --cat-organize-bg: rgba(255, 159, 110, 0.16); --cat-optimize: #35d996; --cat-optimize-bg: rgba(53, 217, 150, 0.16); --cat-convert: #7ab0ff; --cat-convert-bg: rgba(122, 176, 255, 0.16); --cat-edit: #f2c14e; --cat-edit-bg: rgba(242, 193, 78, 0.16); --cat-security: #5fd3c8; --cat-security-bg: rgba(95, 211, 200, 0.16); --cat-ai: #ff8fc0; --cat-ai-bg: rgba(255, 143, 192, 0.16); --cat-automation: #b696ff; --cat-automation-bg: rgba(182, 150, 255, 0.16); --cat-default: var(--cyan-11); --cat-default-bg: rgba(0, 212, 255, 0.12); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.62); --shadow-glow: 0 0 0 1px rgba(0, 212, 255, 0.3), 0 6px 22px rgba(0, 212, 255, 0.14); --shadow-up: 0 -1px 2px rgba(0, 0, 0, 0.5), 0 -10px 26px rgba(0, 0, 0, 0.52); --skeleton-base: var(--gray-4); --skeleton-sheen: rgba(255, 255, 255, 0.06); /* Il testo sopra questo gradiente e' bianco: si parte da cyan-8 perche' cyan-9 darebbe 1.77:1, sotto la soglia di leggibilita'. */ --on-brand: #ffffff; --brand-gradient: linear-gradient(135deg, var(--ink-9), var(--accent-solid)); --paper: #ffffff; --paper-border: var(--gray-7); --redact-fill: #000000; } } /* ========================================================================== 3-bis) TEMA SCURO — BLOCCO SCURO 2/2 (forzato dalla pagina) Identico al precedente. Vale anche quando il sistema è in chiaro. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --gray-1: #0a0e1a; --gray-2: #0f1422; --gray-3: #141a2b; --gray-4: #1a2135; --gray-5: #202840; --gray-6: #28314c; --gray-7: #3a476b; --gray-8: #556797; --gray-9: #7383a8; --gray-10: #8b9bbe; --gray-11: #a8b3cc; --gray-12: #eef1f8; --cyan-3: #062431; --cyan-4: #08303f; --cyan-5: #0a3d52; --cyan-6: #0d4e68; --cyan-7: #106181; --cyan-8: #1479a2; --cyan-9: #00d4ff; --cyan-10: #4be0ff; --cyan-11: #7ce0ff; --cyan-12: #c6f0ff; /* Scala inchiostro invertita — gemella del blocco @media qui sopra. */ --ink-1: #0D151D; --ink-2: #111B26; --ink-3: #162432; --ink-4: #1C2D3E; --ink-5: #24394F; --ink-6: #2D4763; --ink-7: #36577A; --ink-8: #3F6A96; --ink-9: #4E8BCC; --ink-10: #639DDB; --ink-11: #82B4E8; --ink-12: #B0D2F5; --background: var(--gray-1); --foreground: var(--gray-12); --surface: var(--gray-2); --card: var(--gray-3); --card-foreground: var(--gray-12); --popover: #131a2c; --popover-foreground: var(--gray-12); --overlay: rgba(3, 6, 14, 0.72); --muted: var(--gray-3); --muted-foreground: var(--gray-11); --primary: var(--ink-9); --primary-hover: var(--ink-10); --primary-active: var(--ink-11); --primary-foreground: #061424; --primary-subtle: var(--ink-3); --primary-border: var(--ink-7); --secondary: var(--gray-4); --secondary-foreground: var(--gray-12); --accent: var(--cyan-11); --accent-solid: var(--cyan-9); --accent-foreground: #04202b; --accent-subtle: var(--cyan-4); --destructive: #ff6b6b; --destructive-subtle: rgba(255, 107, 107, 0.1); --destructive-border: rgba(255, 107, 107, 0.34); --success: #35d996; --success-subtle: rgba(53, 217, 150, 0.1); --success-border: rgba(53, 217, 150, 0.3); --warning: #f2c14e; --warning-subtle: rgba(242, 193, 78, 0.1); --warning-border: rgba(242, 193, 78, 0.3); --info: var(--cyan-11); --info-subtle: var(--cyan-4); --info-border: var(--cyan-7); --border: var(--gray-6); --border-strong: var(--gray-8); /* 3:1 minimo: dove il bordo E' l'informazione (contorno di un contenitore, area di rilascio, intestazione di tabella) deve superare il criterio WCAG 1.4.11 come lo supera gia' il contorno dei campi. Era gray-7: 1,52:1, invisibile a chi ha poco contrasto. Lo ha trovato tools/prove-contrasti.py. */ --input: #101728; --input-border: var(--gray-8); --ring: var(--primary); --ring-shadow: 0 0 0 3px rgba(0, 212, 255, 0.22); --cat-organize: #ff9f6e; --cat-organize-bg: rgba(255, 159, 110, 0.16); --cat-optimize: #35d996; --cat-optimize-bg: rgba(53, 217, 150, 0.16); --cat-convert: #7ab0ff; --cat-convert-bg: rgba(122, 176, 255, 0.16); --cat-edit: #f2c14e; --cat-edit-bg: rgba(242, 193, 78, 0.16); --cat-security: #5fd3c8; --cat-security-bg: rgba(95, 211, 200, 0.16); --cat-ai: #ff8fc0; --cat-ai-bg: rgba(255, 143, 192, 0.16); --cat-automation: #b696ff; --cat-automation-bg: rgba(182, 150, 255, 0.16); --cat-default: var(--cyan-11); --cat-default-bg: rgba(0, 212, 255, 0.12); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.62); --shadow-glow: 0 0 0 1px rgba(0, 212, 255, 0.3), 0 6px 22px rgba(0, 212, 255, 0.14); --shadow-up: 0 -1px 2px rgba(0, 0, 0, 0.5), 0 -10px 26px rgba(0, 0, 0, 0.52); --skeleton-base: var(--gray-4); --skeleton-sheen: rgba(255, 255, 255, 0.06); /* Il testo sopra questo gradiente e' bianco: si parte da cyan-8 perche' cyan-9 darebbe 1.77:1, sotto la soglia di leggibilita'. */ --on-brand: #ffffff; --brand-gradient: linear-gradient(135deg, var(--ink-9), var(--accent-solid)); --paper: #ffffff; --paper-border: var(--gray-7); --redact-fill: #000000; } /* Tema chiaro forzato dalla pagina: i valori sono già quelli di :root, serve solo dichiarare lo schema per i controlli nativi. */ :root[data-theme="light"] { color-scheme: light; } /* ========================================================================== 4) ALIAS STORICI — NON RIMUOVERE Usati dagli stili inline di index.html (righe 111, 128, 157) e dai moduli JS (core.js: var(--gold); progetti.js: var(--text-dim), …). Restano derivati, quindi seguono automaticamente il tema attivo. ========================================================================== */ :root { --bg: var(--background); --bg2: var(--surface); --bg3: var(--gray-4); --cyan: var(--cyan-11); /* --purple e --pink RIMOSSI il 13/08/2026 con le loro scale: verificato con grep su app/ che nessun modulo, nessuno stile inline e nessuna estensione li usasse più. La landing ha una propria replica dei token e non dipende da questi alias. */ --gold: var(--warning); --green: var(--success); --red: var(--destructive); --text: var(--gray-12); --text-bright: var(--foreground); --text-dim: var(--muted-foreground); } /* ========================================================================== 5) SCRITTURE NON LATINE ========================================================================== */ /* L'arabo ha ascendenti/discendenti più lunghi: interlinea maggiore e nessun tracking negativo, che ne spezzerebbe le legature. */ :lang(ar) { font-family: "Noto Sans Arabic", "InterVariable", system-ui, sans-serif; line-height: 1.75; letter-spacing: 0; } :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { letter-spacing: 0; } /* Cinese e cirillico: niente tracking negativo sui titoli. */ :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4, :lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) h4 { letter-spacing: 0; } /* ========================================================================== 6) ICONE (Lucide, sprite locale assets/icons.svg) ========================================================================== */ .icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -0.18em; } .icon-lg { width: 1.6em; height: 1.6em; } /* Icone direzionali (frecce "indietro") specchiate in RTL. */ :dir(rtl) .icon-flip, [dir="rtl"] .icon-flip { transform: scaleX(-1); }