/* Sincronizzato da PTSmart frontend/src/ui/tokens.css. Fonte di verità delle convenzioni: docs/10-design-system.md nel repo PTSmart. Se cambiano i token del prodotto, ri-copiare questo file. ECCEZIONE VOLUTA — --c-ambra-600 (tema chiaro) NON va risincronizzato: il valore del prodotto (#bf7433) dà contrasto AA insufficiente su questo sito (.hero-eyebrow su --sfondo: 3.32:1; il testo di .finestra-gg su --accento-tenue: 3.19:1 — soglia richiesta 4.5:1), che è una pagina pubblica soggetta a Lighthouse accessibilità = 100, requisito che il prodotto (dietro autenticazione) non ha. Qui il primitivo è fissato a #975c28 (contrasto 4.94:1 e 4.74:1 — v. dettaglio sopra la dichiarazione). Un futuro ri-sync deve preservare questa riga, non sovrascriverla. */ /* * Design tokens PTSmart — sistema fondante della UI. * Riferimento canonico e razionale: docs/10-design-system.md. * * Due livelli: PRIMITIVI (--c-*, materie prime) e SEMANTICI (i ruoli). I componenti * usano solo i semantici. Gli ALIAS LEGACY (--blu, --grigio-*, …) mappano i * vecchi nomi sui nuovi ruoli, così styles.css continua a rendere durante la * migrazione incrementale (doc §12). Da rimuovere quando nessun selettore li usa più. * * Temi: il sito non ha un toggle utente (a differenza del prodotto, che usa * [data-theme] sull'). Qui il tema scuro segue SOLO la preferenza di * sistema, via @media (prefers-color-scheme: dark). */ :root { /* Allinea scrollbar/autofill nativi al tema chiaro. */ color-scheme: light; /* ---- Primitivi (light) ---- */ --c-carta: #f7f4ef; --c-superficie: #fffdfb; --c-inchiostro: #26374a; --c-inchiostro-60: #67717d; --c-inchiostro-40: #9aa2ab; --c-bordo: #ebe3d8; --c-bordo-forte: #ddd2c2; --c-teal-600: #0d7a70; --c-teal-700: #0a5f57; --c-teal-100: #e4f1ef; --c-ambra-500: #d98a4e; /* Divergente dal prodotto (era #bf7433): darkening per AA, v. commento di sincronizzazione in testa al file. Contrasto vs --sfondo (#f7f4ef) = 4.94:1, vs --accento-tenue (#fbeedd) = 4.74:1 — entrambi > 4.5:1. */ --c-ambra-600: #975c28; --c-ambra-100: #fbeedd; --c-verde-600: #2f8f5b; --c-verde-100: #e6f2ea; --c-giallo-600: #b0741f; --c-giallo-100: #f8eed8; --c-rosso-600: #c24a38; --c-rosso-100: #f8e6e1; /* ---- Semantici (ruoli — usare questi) ---- */ --sfondo: var(--c-carta); --superficie: var(--c-superficie); --superficie-2: #faf8f4; --testo: var(--c-inchiostro); --testo-soft: var(--c-inchiostro-60); --testo-tenue: var(--c-inchiostro-40); --bordo: var(--c-bordo); --bordo-forte: var(--c-bordo-forte); --azione: var(--c-teal-600); --azione-scuro: var(--c-teal-700); --azione-tenue: var(--c-teal-100); --accento: var(--c-ambra-500); --accento-scuro: var(--c-ambra-600); --accento-tenue: var(--c-ambra-100); --stato-attivo: var(--c-verde-600); --stato-attivo-bg: var(--c-verde-100); --stato-finestra: var(--c-giallo-600); --stato-finestra-bg: var(--c-giallo-100); --stato-scaduto: var(--c-rosso-600); --stato-scaduto-bg: var(--c-rosso-100); --successo: var(--stato-attivo); --avviso: var(--stato-finestra); --errore: var(--stato-scaduto); /* Testo/icona su fondi pieni (si invertono nel tema scuro) */ --su-azione: #ffffff; --su-semaforo: #ffffff; /* ---- Alias legacy (transitori — doc §12) ---- */ --blu: var(--azione); --blu-scuro: var(--azione-scuro); --blu-chiaro: var(--azione-tenue); --grigio-bg: var(--sfondo); --grigio-bordo: var(--bordo); --grigio-testo: var(--testo-soft); --verde: var(--stato-attivo); --verde-bg: var(--stato-attivo-bg); --giallo: var(--stato-finestra); --giallo-bg: var(--stato-finestra-bg); --rosso: var(--stato-scaduto); --rosso-bg: var(--stato-scaduto-bg); /* Viola: nessun ruolo semantico (solo BadgeTipoPiano nel prodotto) — resta primitivo legacy. */ --viola: #6b4fbb; --viola-bg: #efeafb; /* ---- Tipografia (token pronti; applicazione nel lotto 2) ---- */ --font-display: ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', 'Segoe UI', system-ui, sans-serif; --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ---- Spaziatura / forma ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 26px; --radius: 14px; --radius-sm: 9px; /* ---- Elevazione (ombre calde) ---- */ --ombra: 0 1px 2px rgba(45, 35, 20, 0.05), 0 4px 16px rgba(45, 35, 20, 0.06); --ombra-lift: 0 6px 24px rgba(45, 35, 20, 0.12); --ombra-media: var(--ombra-lift); /* alias legacy */ --overlay: rgba(15, 30, 40, 0.4); /* Focus ring accessibile (usato dalle primitive) */ --focus-ring: 0 0 0 3px var(--azione-tenue); } /* ---- Tema scuro: segue SOLO la preferenza di sistema (nessun toggle sul sito) ---- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --c-carta: #1a1613; --c-superficie: #241f1b; --c-inchiostro: #f3ede4; --c-inchiostro-60: #b3a99c; --c-inchiostro-40: #8a8074; --c-bordo: #362f28; --c-bordo-forte: #443b32; --c-teal-600: #3bb5a8; --c-teal-700: #6fd0c4; --c-teal-100: #17322e; --c-ambra-500: #e8a165; --c-ambra-600: #e8a165; --c-ambra-100: #3a2b1c; --c-verde-600: #57b97e; --c-verde-100: #1c3025; --c-giallo-600: #d69b4a; --c-giallo-100: #332915; --c-rosso-600: #e08268; --c-rosso-100: #3a221c; --su-azione: #06201d; --su-semaforo: #211a10; --superficie-2: #2b2521; --overlay: rgba(0, 0, 0, 0.6); --viola: #b6a4e8; --viola-bg: #2c2340; --ombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35); --ombra-lift: 0 6px 24px rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 3px rgba(59, 181, 168, 0.4); } }