/* * tokens.css — l'unica fonte di verità dei valori di design. * * Qui dentro ci sono SOLO custom properties: nessun selettore di componente, * nessuna regola che dipinga qualcosa. Il vincolo è deliberato — finché i * valori vivono in un unico file dichiarativo, il tema scuro è una questione * di rimappare variabili invece di duplicare fogli di stile. * * Il tema è deciso dal server e scritto su , quindi è * corretto già nel primo byte: nessun lampo di bianco prima del primo paint. */ :root { color-scheme: light; /* ── Accento ────────────────────────────────────────────────────────── Blu ELIS (#5B93CE), il blu storico di bottoni e link del prodotto. Su bianco il contrasto è ~3.2:1: basta per componenti UI e testo grande (AA), non per corpo di testo piccolo — per questo resta riservato a bottoni, badge e stati attivi, mai a testo corrente. In dark la stessa tinta risulterebbe spenta: il tema scuro sale di uno scalino (500) per i fondi pieni e di due (400) per l'hover. */ --accent-300: #B1CBE8; --accent-400: #91B6DE; --accent-500: #76A4D6; --accent-600: #5B93CE; --accent-700: #3F74AD; /* ── Superfici ──────────────────────────────────────────────────────── Tre livelli oltre al canvas: sfondo pagina, superficie di card, superficie di intestazione/hover, superficie premuta. */ --ui-canvas: #F7F8FA; --ui-surface: #FFFFFF; --ui-surface-2: #F2F4F7; --ui-surface-3: #EBEEF2; --ui-border: #E1E4EA; --ui-border-strong: #CDD2DC; --ui-text: #14161A; --ui-text-2: #4A5058; --ui-muted: #737A84; --ui-disabled: #A0A6AF; --ui-accent: #5B93CE; --ui-accent-hover: #3F74AD; --ui-accent-contrast: #FFFFFF; --ui-accent-subtle: #F3F7FC; --ui-accent-border: #C4D8ED; --ui-focus: rgba(91, 147, 206, .32); /* Colore del marchio (solo il logo in topbar, vedi layout.css): il blu petrolio originale del file SVG. Distinto da --ui-accent perché non deve trascinare bottoni/badge/focus quando cambia. */ --brand-logo: #035172; /* ── Stati semantici ────────────────────────────────────────────────── Quattro ruoli per stato: `solid` per i fondi pieni, `fg` per il testo su fondo tenue (più scuro del solid, altrimenti non passa il contrasto), `bg` per il fondo tenue, `border` per il suo bordo. */ --success-solid: #16A34A; --success-fg: #197C46; --success-bg: #E7F6EC; --success-border: #A9DCBC; --warning-solid: #D97706; --warning-fg: #92610B; --warning-bg: #FEF6E7; --warning-border: #F3D69B; --danger-solid: #DC2626; --danger-fg: #B4232B; --danger-bg: #FDECEC; --danger-border: #F5B5B5; --info-solid: #0284C7; --info-fg: #17557F; --info-bg: #E9F3FB; --info-border: #A9CFEA; --neutral-solid: #6B7280; --neutral-fg: #4A5058; --neutral-bg: #F2F4F7; --neutral-border: #CDD2DC; /* ── Data-viz ───────────────────────────────────────────────────────── Serie identica nei due temi: sono tonalità medie, scelte per restare leggibili sia su #FFFFFF sia su #0B0D10. Cambiarle per tema significherebbe che due screenshot dello stesso grafico non sono confrontabili. Solo il "cromo" (griglia, assi, bordo degli archi) segue il tema. */ --viz-1: #5B7CFA; --viz-2: #16A394; --viz-3: #E8963C; --viz-4: #E5484D; --viz-5: #8E5BE8; --viz-6: #2F9E44; --viz-7: #E0629C; --viz-8: #0EA5E9; --viz-9: #B08800; --viz-10: #6E7681; --viz-grid: #EBEEF2; --viz-axis: #737A84; --viz-arc-border: #FFFFFF; /* ── Tipografia ─────────────────────────────────────────────────────── Inter è servito da /webfonts come font variabile: un solo file copre tutti i pesi da 100 a 900. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-3xs: .6875rem; --fs-2xs: .75rem; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --ls-tight: -.011em; --ls-eyebrow: .06em; /* ── Spaziature (base 4px) ───────────────────────────────────────────── */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-9: 2.25rem; --sp-10: 2.5rem; --sp-11: 2.75rem; --sp-12: 3rem; /* ── Raggi ───────────────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* ── Ombre ──────────────────────────────────────────────────────────── Nel tema chiaro la gerarchia la fa il bordo da 1px, non l'ombra: queste restano volutamente appena percettibili. */ --sh-xs: 0 1px 2px rgba(16, 24, 40, .05); --sh-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --sh-md: 0 4px 12px rgba(16, 24, 40, .08); --sh-overlay: 0 12px 32px rgba(16, 24, 40, .16); /* ── Motion ──────────────────────────────────────────────────────────── */ --dur-fast: 120ms; --dur-base: 180ms; --ease-out: cubic-bezier(.2, .8, .2, 1); /* ── Metriche di layout ─────────────────────────────────────────────── Riferita da più file: l'altezza della topbar serve a layout.css per lo sticky, a pages.css per calcolare l'altezza della mappa e per l'offset dello sticky del nella tabella aziende. */ --topbar-h: 56px; --subnav-h: 40px; /* Glow di sfondo (solo dark, vedi sotto): nullo in chiaro così `background-image: var(--ui-canvas-glow, none)` in base.css non ha nemmeno bisogno del fallback per restare corretto in entrambi i temi. */ --ui-canvas-glow: none; } [data-bs-theme="dark"] { color-scheme: dark; /* Superfici con tinta blu ELIS (derivata da #025172), non più grigio neutro: richiesta esplicita — "più sul blu che ti ho passato", il nero piatto letto come "ancora nero" andava corretto anche qui, non solo nel glow di sfondo qui sotto. */ --ui-canvas: #081821; --ui-surface: #0F2531; --ui-surface-2: #15303D; --ui-surface-3: #1C3C4A; --ui-border: #234C5B; --ui-border-strong: #2F6070; --ui-text: #E6E9EF; --ui-text-2: #A8B0BC; --ui-muted: #7B8494; --ui-disabled: #5A6270; /* Accent verde smeraldo (richiesta esplicita del code owner, sostituisce il blu ereditato dal tema chiaro): stessa struttura di prima — solid, hover più chiaro, subtle/border per badge e stati attivi tenui. */ --ui-accent: #10B981; --ui-accent-hover: #34D399; --ui-accent-contrast: #FFFFFF; --ui-accent-subtle: #0F2A22; --ui-accent-border: #1E5A44; --ui-focus: rgba(52, 211, 153, .35); /* Il marchio si inverte in bianco pieno su sfondo scuro. */ --brand-logo: #FFFFFF; /* Glow blu ELIS (#025172), più intenso e esteso lungo tutta l'altezza della pagina (non solo in alto): il feedback era che restava "ancora nero" — rinforzato qui insieme alla tinta blu delle superfici sopra. Applicato in base.css come background-image accanto a --ui-canvas, che resta il colore piatto di fallback/superfici piccole. */ --ui-canvas-glow: radial-gradient(1300px circle at 15% -10%, rgba(2, 81, 114, .8), transparent 65%), radial-gradient(1100px circle at 100% 0%, rgba(2, 81, 114, .5), transparent 60%), linear-gradient(180deg, #0a2a36 0%, var(--ui-canvas) 100%); --success-solid: #2EA043; --success-fg: #56D364; --success-bg: #0E2A18; --success-border: #1E4C2C; --warning-solid: #D29922; --warning-fg: #E3B341; --warning-bg: #2B2109; --warning-border: #4D3B10; --danger-solid: #DA3633; --danger-fg: #FF7B72; --danger-bg: #2C1113; --danger-border: #5C1F1D; --info-solid: #316DCA; --info-fg: #6CB6FF; --info-bg: #0C1E33; --info-border: #1B3E63; --neutral-solid: #6E7681; --neutral-fg: #A8B0BC; --neutral-bg: #1A1E24; --neutral-border: #363C46; --viz-grid: #21262E; --viz-axis: #7B8494; --viz-arc-border: #14171C; /* Su fondo scuro un'ombra tenue è invisibile: serve nero quasi pieno, e il rilievo lo dà comunque il salto di superficie. */ --sh-xs: 0 1px 2px rgba(0, 0, 0, .4); --sh-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3); --sh-md: 0 4px 12px rgba(0, 0, 0, .5); --sh-overlay: 0 12px 32px rgba(0, 0, 0, .6); }