/* * 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 */ /* --- 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); /* --- 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); }