/* ============================================================================ JETTULIO DESIGN SYSTEM — TOKEN DI DESIGN (fonte unica della verita') ---------------------------------------------------------------------------- Tutte le variabili del restyling usano il prefisso --ds- e NON toccano le variabili legacy di style.css: le schermate esistenti restano identiche finche' non vengono migrate una a una (Mossa 2+). Il tema si commuta con l'attributo data-theme sull'elemento : - data-theme="light" -> chiaro - data-theme="dark" -> scuro - data-theme="auto" (o assente) -> segue prefers-color-scheme Contrasto: ogni coppia testo/sfondo dichiarata qui e' stata verificata WCAG AA (4.5:1 testo, 3:1 componenti/grafica); vedi docs/DESIGN_SYSTEM.md. ========================================================================== */ /* ---- Font: Inter variabile, self-hosted (nessun servizio esterno) -------- */ @font-face { font-family: "InterVariable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "InterVariable"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); } :root { /* ======================= TOKEN INDIPENDENTI DAL TEMA ==================== */ /* Tipografia */ --ds-font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Scala dimensioni (rem: 1rem = 16px) */ --ds-text-xs: .6875rem; /* 11px etichette minime, meta */ --ds-text-sm: .78125rem; /* 12.5px etichette, celle dense */ --ds-text-base: .875rem; /* 14px corpo */ --ds-text-md: .9375rem; /* 15px corpo comodo */ --ds-text-lg: 1.0625rem; /* 17px titoli di card */ --ds-text-xl: 1.25rem; /* 20px titoli di sezione */ --ds-text-2xl: 1.5rem; /* 24px titolo pagina */ --ds-text-kpi: 2rem; /* 32px numeri KPI */ --ds-text-kpi-lg: 2.5rem; /* 40px KPI in evidenza */ --ds-weight-regular: 430; /* Inter variabile: leggermente sopra i 400 */ --ds-weight-medium: 520; --ds-weight-semibold: 620; --ds-weight-bold: 700; --ds-weight-black: 800; --ds-leading-tight: 1.12; --ds-leading-snug: 1.3; --ds-leading-normal: 1.5; --ds-tracking-label: .05em; /* etichette maiuscole */ /* Numeri sempre incolonnati nelle tabelle: attivare con la classe .ds-tabular o font-feature-settings ereditato dai componenti. */ --ds-numeric: "tnum" 1, "cv05" 1; /* Spaziature (base 4px) */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; /* Raggi degli angoli */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 20px; --ds-radius-full: 999px; /* Movimento: durate brevi, easing sobri */ --ds-dur-fast: 120ms; --ds-dur-base: 180ms; --ds-dur-slow: 260ms; --ds-ease: cubic-bezier(.2, .7, .3, 1); --ds-ease-out: cubic-bezier(.16, .84, .44, 1); --ds-ease-in: cubic-bezier(.55, .05, .68, .53); /* Z-index */ --ds-z-dropdown: 40; --ds-z-sticky: 100; /* allineato alla topbar esistente */ --ds-z-overlay: 900; --ds-z-modal: 1000; --ds-z-toast: 1100; --ds-z-tooltip: 1200; /* Layout */ --ds-content-max: 1600px; /* larghezza massima contenuti (come .wrap) */ --ds-content-pad: 18px; --ds-content-pad-mobile: 12px; /* ========================= TEMA CHIARO (default) ======================== */ color-scheme: light; /* Marca Acton / Forini */ --ds-brand: #e10712; /* rosso Acton: azioni primarie, stati attivi */ --ds-brand-strong: #c80610; /* hover/pressed su fondi chiari */ --ds-brand-text: #c9060f; /* rosso usato come TESTO (AA 4.5:1) */ --ds-brand-solid: #e10712; /* fondo dei bottoni primari (testo bianco) */ --ds-brand-solid-hover: #c80610; --ds-brand-soft: #fdeeee; /* velo rosso per stati selezionati */ --ds-brand-border: #f3b8bb; --ds-on-brand: #ffffff; /* Superfici (grigi caldi) */ --ds-bg: #f6f5f2; /* pagina */ --ds-surface: #ffffff; /* card */ --ds-surface-elevated: #ffffff; /* modali, menu, drawer */ --ds-surface-subtle: #f0efec; /* aree rientrate, testate tabella */ --ds-surface-inset: #eae9e5; /* campi, binari dei toggle */ /* Testo */ --ds-text: #201f1d; --ds-text-secondary: #5d5b56; --ds-text-faint: #8b8880; /* solo elementi decorativi, mai testo utile */ --ds-text-invert: #f6f5f2; /* Bordi e focus */ --ds-border: #ddd9d3; --ds-border-strong: #c4c0b9; --ds-focus-ring: rgba(225, 7, 18, .3); /* Ombre / elevazioni */ --ds-shadow-1: 0 1px 2px rgba(32, 31, 29, .06); --ds-shadow-2: 0 4px 14px rgba(32, 31, 29, .08); --ds-shadow-3: 0 12px 32px rgba(32, 31, 29, .16); --ds-backdrop: rgba(32, 31, 29, .5); /* Semantici (il danger e' rosso-ARANCIO: distinto dal rosso Acton) */ --ds-success: #157a41; --ds-success-surface: #e7f4ec; --ds-success-border: #b2d8c1; --ds-danger: #c2371f; --ds-danger-surface: #fdefec; --ds-danger-border: #eec0b5; --ds-warning: #8f5b00; --ds-warning-surface: #fdf3dc; --ds-warning-border: #e6c98a; --ds-info: #0c5c7d; --ds-info-surface: #e9f4f9; --ds-info-border: #aed2e0; /* Prodotti: identita' cromatica fissa in tutta la suite (grafici, badge, legende). Stessa tinta in entrambi i temi; la luminosita' si adatta per garantire 3:1 sul fondo del tema (WCAG 1.4.11). */ --ds-product-benzina: #1f8a4c; --ds-product-gasolio: #1f4e78; --ds-product-sp100: #7d3c98; --ds-product-hvo: #2f6f73; --ds-product-gpl: #b26f00; --ds-product-metano: #c0392b; --ds-product-gnl: #64748b; --ds-product-adblue: #cf5aa8; --ds-product-gasolio-speciale: #8c564b; --ds-product-agricolo: #9a7207; --ds-product-riscaldamento: #d3462e; /* Grafici */ --ds-chart-grid: rgba(32, 31, 29, .09); --ds-chart-grid-soft: rgba(32, 31, 29, .05); --ds-chart-axis-text: #5d5b56; --ds-chart-tooltip-bg: #201f1d; --ds-chart-tooltip-text: #f6f5f2; --ds-chart-plot-bg: #ffffff; /* fondo dell'area del grafico */ --ds-chart-plot-border: #ddd9d3; /* Colori riservati delle serie (regola di Andrea, 10/09/2026): il NOSTRO prezzo e' rosso scuro con tratto piu' spesso, il VENDUTO (litri) nei grafici di correlazione e' blu scuro. Nessun'altra serie usa rossi, bordeaux, arancioni scuri, blu o indaco (vedi PALETTE in chart_colors.js). Contrasto su plot bianco: 8,2:1 e 10,4:1. */ --ds-chart-own: #9b1c1c; /* rosso nostro prezzo */ --ds-chart-sales: #1e3a8a; /* blu venduto (litri) */ --ds-chart-trade-avg: #a16207; /* ambra: prezzo medio trade area */ --ds-chart-below-fill: rgba(21, 122, 65, .16); /* sotto la media: ok */ --ds-chart-above-fill: rgba(194, 55, 31, .16); /* sopra la media */ } /* =========================== TEMA SCURO ================================== Applicato con data-theme="dark" oppure, in modalita' automatica (data-theme="auto" o assente), quando il sistema e' scuro. I due blocchi devono restare IDENTICI: modificarli sempre insieme. */ [data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } } [data-theme="dark"] { /* Marca: variante piu' chiara del rosso per leggibilita' su fondo scuro */ --ds-brand: #f5424b; --ds-brand-strong: #ff6168; --ds-brand-text: #ff6168; --ds-brand-solid: #e10712; --ds-brand-solid-hover: #f5424b; --ds-brand-soft: rgba(245, 66, 75, .14); --ds-brand-border: rgba(245, 66, 75, .4); --ds-on-brand: #ffffff; /* Superfici: nero/antracite profondo, grigi caldi */ --ds-bg: #141313; --ds-surface: #1c1b1a; --ds-surface-elevated: #232120; --ds-surface-subtle: #242220; --ds-surface-inset: #100f0f; --ds-text: #d4d0c8; --ds-text-secondary: #96918a; --ds-text-faint: #726e66; --ds-text-invert: #201f1d; --ds-border: #353330; --ds-border-strong: #45423e; --ds-focus-ring: rgba(245, 66, 75, .38); --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --ds-shadow-2: 0 4px 14px rgba(0, 0, 0, .45); --ds-shadow-3: 0 12px 32px rgba(0, 0, 0, .6); --ds-backdrop: rgba(0, 0, 0, .62); --ds-success: #4fc57f; --ds-success-surface: rgba(79, 197, 127, .12); --ds-success-border: rgba(79, 197, 127, .34); --ds-danger: #ff7a5c; --ds-danger-surface: rgba(255, 122, 92, .12); --ds-danger-border: rgba(255, 122, 92, .34); --ds-warning: #e8b04b; --ds-warning-surface: rgba(232, 176, 75, .12); --ds-warning-border: rgba(232, 176, 75, .34); --ds-info: #5fb8e0; --ds-info-surface: rgba(95, 184, 224, .12); --ds-info-border: rgba(95, 184, 224, .34); --ds-product-benzina: #3dff9e; --ds-product-gasolio: #4db8ff; --ds-product-sp100: #e08bff; --ds-product-hvo: #3de3ee; --ds-product-gpl: #ffd23d; --ds-product-metano: #ff8577; --ds-product-gnl: #b9c7ff; --ds-product-adblue: #ff9ee0; --ds-product-gasolio-speciale: #e0a58f; --ds-product-agricolo: #d9e05c; --ds-product-riscaldamento: #ff6a4d; --ds-chart-grid: rgba(237, 234, 229, .12); --ds-chart-grid-soft: rgba(237, 234, 229, .05); --ds-chart-axis-text: #a6a29a; --ds-chart-tooltip-bg: #2b2927; --ds-chart-tooltip-text: #edeae5; --ds-chart-plot-bg: #111014; --ds-chart-plot-border: #2c2a28; /* Plot scuro: stesse identita', luminosita' alzata (6,3:1 e 7,9:1). */ --ds-chart-own: #ff5c5c; --ds-chart-sales: #6ea8ff; --ds-chart-trade-avg: #ffd23d; --ds-chart-below-fill: rgba(61, 255, 158, .16); --ds-chart-above-fill: rgba(255, 77, 85, .18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --ds-brand: #f5424b; --ds-brand-strong: #ff6168; --ds-brand-text: #ff6168; --ds-brand-solid: #e10712; --ds-brand-solid-hover: #f5424b; --ds-brand-soft: rgba(245, 66, 75, .14); --ds-brand-border: rgba(245, 66, 75, .4); --ds-on-brand: #ffffff; --ds-bg: #141313; --ds-surface: #1c1b1a; --ds-surface-elevated: #232120; --ds-surface-subtle: #242220; --ds-surface-inset: #100f0f; --ds-text: #d4d0c8; --ds-text-secondary: #96918a; --ds-text-faint: #726e66; --ds-text-invert: #201f1d; --ds-border: #353330; --ds-border-strong: #45423e; --ds-focus-ring: rgba(245, 66, 75, .38); --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --ds-shadow-2: 0 4px 14px rgba(0, 0, 0, .45); --ds-shadow-3: 0 12px 32px rgba(0, 0, 0, .6); --ds-backdrop: rgba(0, 0, 0, .62); --ds-success: #4fc57f; --ds-success-surface: rgba(79, 197, 127, .12); --ds-success-border: rgba(79, 197, 127, .34); --ds-danger: #ff7a5c; --ds-danger-surface: rgba(255, 122, 92, .12); --ds-danger-border: rgba(255, 122, 92, .34); --ds-warning: #e8b04b; --ds-warning-surface: rgba(232, 176, 75, .12); --ds-warning-border: rgba(232, 176, 75, .34); --ds-info: #5fb8e0; --ds-info-surface: rgba(95, 184, 224, .12); --ds-info-border: rgba(95, 184, 224, .34); --ds-product-benzina: #3dff9e; --ds-product-gasolio: #4db8ff; --ds-product-sp100: #e08bff; --ds-product-hvo: #3de3ee; --ds-product-gpl: #ffd23d; --ds-product-metano: #ff8577; --ds-product-gnl: #b9c7ff; --ds-product-adblue: #ff9ee0; --ds-product-gasolio-speciale: #e0a58f; --ds-product-agricolo: #d9e05c; --ds-product-riscaldamento: #ff6a4d; --ds-chart-grid: rgba(237, 234, 229, .12); --ds-chart-grid-soft: rgba(237, 234, 229, .05); --ds-chart-axis-text: #a6a29a; --ds-chart-tooltip-bg: #2b2927; --ds-chart-tooltip-text: #edeae5; --ds-chart-plot-bg: #111014; --ds-chart-plot-border: #2c2a28; --ds-chart-own: #ff5c5c; --ds-chart-sales: #6ea8ff; --ds-chart-trade-avg: #ffd23d; --ds-chart-below-fill: rgba(61, 255, 158, .16); --ds-chart-above-fill: rgba(255, 77, 85, .18); } } /* Transizione morbida al cambio tema: la classe viene aggiunta da theme.js solo per la durata del cambio, cosi' non rallenta ogni altra interazione. */ html.ds-theme-switching, html.ds-theme-switching *, html.ds-theme-switching *::before, html.ds-theme-switching *::after { transition: background-color var(--ds-dur-slow) var(--ds-ease), color var(--ds-dur-slow) var(--ds-ease), border-color var(--ds-dur-slow) var(--ds-ease), fill var(--ds-dur-slow) var(--ds-ease) !important; } @media (prefers-reduced-motion: reduce) { html.ds-theme-switching, html.ds-theme-switching * { transition: none !important; } }