/* * design-tokens.css — variabili condivise del sito esterno. * * Architettura a tre livelli (07-piano-di-sviluppo.md § A1): * * primitivi -> valori grezzi, senza significato d'uso (--ld-grigio-500) * semantici -> ruolo nell'interfaccia (--ld-testo-muted) * per-tenant -> ridefiniti in temi/tema-.css (--ld-primario) * * REGOLA: i componenti leggono SOLO i token semantici. Se un componente usa * un primitivo direttamente, il tema di tenant non riesce piu' a governarlo. * * Il ponte con Bootstrap non sovrascrive il suo CSS: ne alimenta le custom * property (--bs-*). Vedi la coda di questo file e i file di tema. * * DECISIONE C1 CHIUSA (2026-08-03): direzione visiva "Ibrido D3 · Presente", * scelta dal cliente sul prototipo pubblicato come artifact. I valori sotto * (neutri caldi, raggi, ombre, coppia tipografica serif/sans) traducono * quel prototipo in questa architettura a token: stessi nomi di sempre, * valori aggiornati. I punti d'uso nei file a valle non cambiano. */ :root { /* ================================================================== 1. PRIMITIVI ================================================================== */ /* --- Neutri: condivisi da tutti i tenant, non si ridefiniscono ----- Fondo appena caldo, inchiostro caldo: la firma della direzione "Ibrido D3" rispetto al bianco/nero neutro del prototipo precedente ("sobria"). */ --ld-bianco: #FFFFFF; --ld-avorio: #FAFAF8; /* fondo di pagina, mai delle card */ --ld-grigio-50: #F4F4F1; /* pannelli tenui, righe hover, skeleton */ --ld-grigio-100: #EFEEEA; --ld-grigio-200: #E7E5E0; /* divisori decorativi */ --ld-grigio-400: #949087; /* contorno di cio' che si tocca, 3:1 (WCAG 1.4.11) */ --ld-grigio-600: #6E6A62; --ld-grigio-900: #1F1D1A; /* --- Accento caldo: condiviso, e' il complementare di ogni primario. Dista 120-171 gradi di tinta da tutti e quattro i primari di marca (06-palette-e-asset-tenant.md). */ --ld-arancio-500: #ED6C0A; /* solo con testo scuro: 3.11:1 col bianco */ --ld-arancio-700: #A84C07; /* versione che regge il testo bianco 5.42:1 */ --ld-arancio-100: #FDECD9; /* sfondi tenui (hover delle azioni) */ /* --- Scala di spaziatura, base 4 ---------------------------------- */ --ld-space-1: 4px; --ld-space-2: 8px; --ld-space-3: 12px; --ld-space-4: 16px; --ld-space-5: 20px; --ld-space-6: 24px; --ld-space-8: 48px; --ld-space-10: 64px; --ld-space-12: 80px; /* --- Famiglie tipografiche ----------------------------------------- Coppia editoriale della direzione D3: serif nei titoli e nelle cifre, sans nell'interfaccia. Entrambe self-hosted, nessuna chiamata a Google Fonts (legodigit/fonts/sito.css). */ --ld-font-ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ld-font-display: 'Source Serif 4', ui-serif, Georgia, serif; --ld-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* ================================================================== 2. SEMANTICI ================================================================== */ /* --- Superfici e testo -------------------------------------------- --ld-superficie e' la superficie "sollevata" (card, navbar, footer): bianco pieno, cosi' si stacca dal fondo avorio della pagina. --ld-sfondo-pagina e' il fondo, sotto tutto il resto. */ --ld-sfondo-pagina: var(--ld-avorio); --ld-superficie: var(--ld-bianco); --ld-superficie-2: var(--ld-grigio-50); /* righe alternate, card tenui */ --ld-superficie-3: var(--ld-grigio-100); /* intestazioni di tabella */ --ld-testo: var(--ld-grigio-900); --ld-testo-soft: #46433D; /* corpo del testo lungo (prosa), meno duro del testo dei titoli */ --ld-testo-muted: var(--ld-grigio-600); --ld-testo-disabilitato: #A39E93; --ld-bordo-neutro: var(--ld-grigio-200); /* divisori, decorativo */ /* --- Velo dei modali ------------------------------------------------ Lo scrim che oscura la pagina sotto una finestra di dialogo. Inchiostro caldo, non il nero neutro: coerente col fondo avorio e con le ombre calde piu' sotto. Semantico e non primitivo perche' e' un ruolo d'interfaccia riusabile (modale destinazioni, e in futuro i modali Bootstrap). */ --ld-velo: color-mix(in srgb, var(--ld-grigio-900) 45%, transparent); /* --- Accento ------------------------------------------------------- */ --ld-accento: var(--ld-arancio-500); --ld-accento-scuro: var(--ld-arancio-700); --ld-accento-chiaro: var(--ld-arancio-100); --ld-su-accento: var(--ld-grigio-900); /* l'arancio vuole testo scuro */ /* --- Primario: valori di ripiego (LegoDigit). Ogni tema di tenant li ridefinisce; qui servono solo perche' il sito renda comunque qualcosa se il tema non venisse caricato. */ --ld-primario: #184999; --ld-primario-scuro: #123671; --ld-primario-testo: #1C54B0; --ld-primario-chiaro: #E9F0FC; --ld-su-primario: var(--ld-bianco); /* --- Stati semantici ------------------------------------------------- Successo, errore, avviso: neutri CONDIVISI, non per-tenant. Un messaggio d'errore deve avere lo stesso aspetto su tutti e sei i siti, altrimenti l'utente impara sei linguaggi invece di uno (06-palette-e-asset-tenant.md). Tre valori per stato, sempre gli stessi tre ruoli: --ld- filetto e icona; regge anche il testo --ld--tenue fondo del blocco --ld--bordo contorno, un gradino sopra il fondo Le tinte sono calde (tirate verso l'avorio della pagina), non le tinte fredde di serie di Bootstrap. Contrasto del colore forte sulla propria tinta, verificato: verde 5.72:1, rosso 5.65:1, ocra 5.28:1 — tutti oltre il 4.5:1 di WCAG 1.4.3 per il testo. L'ocra dell'avviso NON e' l'arancio d'accento, ed e' scelto scuro e desaturato apposta per non somigliargli: l'accento significa "azione", non "attenzione" (09-piano § A6). */ --ld-successo: #1A6B45; --ld-successo-tenue: #E9F3ED; --ld-successo-bordo: #C3DFCF; --ld-errore: #B3261E; --ld-errore-tenue: #FBEBE9; --ld-errore-bordo: #F0C8C4; --ld-avviso: #8A5A0B; --ld-avviso-tenue: #FBF1DF; --ld-avviso-bordo: #EAD5AC; /* L'informativo e' il solo stato che segue il tenant: "per tua informazione" e' un messaggio di marca, non un allarme. Legge i --ld-primario-* qui sopra, quindi il tema li ridefinisce una volta sola e questi tre lo seguono. */ --ld-info: var(--ld-primario-testo); --ld-info-tenue: var(--ld-primario-chiaro); --ld-info-bordo: color-mix(in srgb, var(--ld-primario) 22%, var(--ld-bianco)); /* --- Contorno interattivo: NON e' piu' per-tenant (era cosi' nel prototipo "sobria"). E' un neutro condiviso, piu' marcato dei divisori decorativi perche' identifica cio' che si tocca (campi, bottoni outline): WCAG 1.4.11 chiede 3:1, i divisori no. Il colore di marca resta comunque il segnale primario, tramite il testo e lo stato attivo/focus qui sotto. */ --ld-bordo: var(--ld-grigio-400); /* --- Ruoli dipendenti dal tenant, condivisi da tutte le pagine ----- Corrispondono al blocco "DOSE" del prototipo: leggono sempre --ld-primario-*, mai un colore fisso, cosi' seguono il tema caricato per ultimo senza bisogno di ridichiararli per tenant. */ --ld-focus: var(--ld-primario-scuro); --ld-focus-anello: color-mix(in srgb, var(--ld-primario) 25%, transparent); --ld-riga-hover: var(--ld-primario-chiaro); --ld-filo-footer: var(--ld-accento); /* --- Tipografia: scala a base 16px, rapporto ~1.2 ------------------ */ --ld-dim-display: 2.5rem; /* 40px */ --ld-dim-h1: clamp(1.75rem, 3.4vw, 2.375rem); /* 28px -> 38px */ --ld-dim-h2: 1.375rem; /* 22px */ --ld-dim-h3: 1.125rem; /* 18px */ --ld-dim-corpo: 1rem; /* 16px */ --ld-dim-piccolo: 0.875rem; /* 14px */ --ld-dim-caption: 0.75rem; /* 12px */ --ld-interlinea-display: 1.12; --ld-interlinea-titolo: 1.2; --ld-interlinea-corpo: 1.55; --ld-peso-normale: 400; --ld-peso-medio: 500; --ld-peso-semi: 600; --ld-peso-forte: 700; /* Traccio piu' stretto dei titoli in serif: dettaglio editoriale del prototipo scelto, si nota solo dai 20px in su. */ --ld-tracciato-titolo: -0.015em; /* Lunghezza di riga leggibile: ~65-75 caratteri. Si applica ai blocchi di testo lungo (privacy, chi siamo), non ai contenitori di layout. */ --ld-misura-testo: 68ch; /* --- Raggi ---------------------------------------------------------- Editoriale, il registro piu' arrotondato dei tre esplorati: 10px sui controlli, 8px sugli elementi piccoli, pillola sui filtri e i tag. */ --ld-radius-sm: 8px; --ld-radius-md: 10px; --ld-radius-lg: 14px; --ld-radius-pill: 999px; /* --- Ombre ------------------------------------------------------------ Morbide e calde (base rgba 40,35,25, non il grigio neutro 26,26,26): coerenti con il fondo avorio, mai il grigio-blu di un'ombra fredda. */ --ld-ombra-1: 0 1px 2px rgba(40, 35, 25, .05); --ld-ombra-2: 0 1px 3px rgba(40, 35, 25, .06), 0 10px 30px rgba(40, 35, 25, .07); --ld-ombra-3: 0 -2px 10px rgba(40, 35, 25, .05), 0 20px 50px rgba(40, 35, 25, .12); /* --- Densita' ------------------------------------------------------- Altezza delle righe di tabella e padding dei controlli: ariosa, coerente col registro editoriale (non compatta come la "sobria"). */ --ld-densita-riga: var(--ld-space-3); --ld-densita-controllo: var(--ld-space-3) 14px; /* --- Altre costanti di layout ------------------------------------- */ --ld-larghezza-contenuto: 1200px; --ld-altezza-navbar: 64px; --ld-logo-altezza: 44px; /* i tenant lo ridefiniscono se serve */ /* Spessore e stile del focus: unico in tutto il sito, requisito WCAG 2.1 AA (2.4.7 Focus Visible). Il colore segue il tenant tramite --ld-focus, non e' piu' un valore fisso. */ --ld-focus-spessore: 3px; --ld-focus-colore: var(--ld-focus); } /* ==================================================================== 3. PONTE CON BOOTSTRAP ==================================================================== Alimenta le custom property globali di Bootstrap 5.3 con i nostri token. Cio' che dipende dal tenant (primario, link, bottoni) NON sta qui ma nei file di tema, altrimenti non sarebbe sovrascrivibile. ==================================================================== */ :root { --bs-body-font-family: var(--ld-font-ui); --bs-body-font-size: var(--ld-dim-corpo); --bs-body-line-height: var(--ld-interlinea-corpo); --bs-body-color: var(--ld-testo); --bs-body-bg: var(--ld-sfondo-pagina); --bs-secondary-color: var(--ld-testo-muted); --bs-border-color: var(--ld-bordo-neutro); --bs-border-radius: var(--ld-radius-md); --bs-border-radius-sm: var(--ld-radius-sm); --bs-border-radius-lg: var(--ld-radius-lg); --bs-box-shadow-sm: var(--ld-ombra-1); --bs-box-shadow: var(--ld-ombra-2); --bs-box-shadow-lg: var(--ld-ombra-3); }