/* ============================================================================= SEDNA DESIGN SYSTEM - TOKENS Design System moderno con tema chiaro/scuro ============================================================================= */ :root { /* BRAND COLORS */ --sedna-brand-50: #e3f2fd; --sedna-brand-100: #bbdefb; --sedna-brand-200: #90caf9; --sedna-brand-300: #64b5f6; --sedna-brand-400: #42a5f5; --sedna-brand-500: #2196f3; --sedna-brand-600: #1e88e5; --sedna-brand-700: #1976d2; --sedna-brand-800: #1565c0; --sedna-brand-900: #0d47a1; /* NEUTRAL COLORS */ --sedna-neutral-0: #ffffff; --sedna-neutral-50: #fafafa; --sedna-neutral-100: #f5f5f5; --sedna-neutral-200: #eeeeee; --sedna-neutral-300: #e0e0e0; --sedna-neutral-400: #bdbdbd; --sedna-neutral-500: #9e9e9e; --sedna-neutral-600: #757575; --sedna-neutral-700: #616161; --sedna-neutral-800: #424242; --sedna-neutral-900: #212121; --sedna-neutral-950: #121212; /* SEMANTIC COLORS */ --sedna-success-50: #e8f5e9; --sedna-success-500: #4caf50; --sedna-success-600: #43a047; --sedna-success-700: #388e3c; --sedna-warning-50: #fff8e1; --sedna-warning-500: #ffc107; --sedna-warning-600: #ffb300; --sedna-warning-700: #ffa000; --sedna-error-50: #ffebee; --sedna-error-500: #f44336; --sedna-error-600: #e53935; --sedna-error-700: #d32f2f; /* D28: Alias semantici per i token error/text — risolvono i 8 var(--sedna-*) inesistenti scoperti durante audit impeccable. Bug: bottoni danger DX e link logout sidebar perdevano colore perché sostituivano un token rotto. */ --sedna-error: var(--sedna-error-600); --sedna-error-hover: var(--sedna-error-700); --sedna-color-error: var(--sedna-error-600); --sedna-info-50: #e0f7fa; --sedna-info-500: #00bcd4; --sedna-info-600: #00acc1; --sedna-info-700: #0097a7; --sedna-accent-50: #f3e8ff; --sedna-accent-500: #a855f7; --sedna-accent-600: #9333ea; --sedna-accent-700: #7e22ce; /* Oro — accento caldo del marchio, riservato ai momenti "committed" (login, splash/loader, foglia del logo). Stesso valore in chiaro e scuro. */ --sedna-gold: #ffd54f; /* CONTABILITÀ — Dare (giallo/ambra) / Avere (verde): token dedicati e theme-aware. Linguaggio visivo di dominio (distinguere le colonne Dare/Avere). Il dark è ridefinito in .sedna-theme-dark per restare leggibile su sfondo scuro. */ --sedna-dare: #92400e; --sedna-dare-bg: #fef3c7; --sedna-dare-border: #fcd34d; --sedna-avere: #065f46; --sedna-avere-bg: #d1fae5; --sedna-avere-border: #6ee7b7; /* Tinta MOLTO tenue per lo sfondo riga (più leggera del chip). */ --sedna-dare-row: #fffbeb; --sedna-avere-row: #f0fdf4; /* Sfondo dell'input CON FOCUS: tinta primaria appena percettibile, per trovare a colpo d'occhio "dove sto scrivendo" senza risultare invasiva. */ --sedna-input-focus-bg: color-mix(in srgb, var(--sedna-primary, #1e88e5) 10%, #ffffff); /* Barretta "campo attivo": filo verticale in tinta sul lato sinistro dell'input col focus. Costa 2px, si vede subito e non sposta nulla nel layout. */ --sedna-input-focus-bar: inset 2px 0 0 0 var(--sedna-primary, #1e88e5); /* LIGHT THEME */ --sedna-bg: var(--sedna-neutral-50); --sedna-bg-subtle: var(--sedna-neutral-100); --sedna-bg-elevated: var(--sedna-neutral-0); --sedna-surface: var(--sedna-neutral-0); --sedna-surface-variant: var(--sedna-neutral-100); --sedna-surface-hover: var(--sedna-neutral-200); /* Superficie "muted" per pannelli/sezioni secondarie (es. .pz-section--muted) e bordo tenue. Vanno definiti come token, altrimenti in dark cadono sul fallback chiaro (#f8fafc/#f1f5f9) → effetto "lampadina" sui pannelli. */ --sedna-surface-muted: var(--sedna-neutral-100); --sedna-border-light: var(--sedna-neutral-200); /* D28: alias retrocompatibili per text/bg-hover (vedi blocco error sopra) */ --sedna-color-bg-hover: var(--sedna-surface-hover); --sedna-border: var(--sedna-neutral-300); --sedna-border-strong: var(--sedna-neutral-400); --sedna-divider: var(--sedna-neutral-200); --sedna-text: var(--sedna-neutral-900); --sedna-text-secondary: var(--sedna-neutral-700); /* D28: alias retrocompatibile */ --sedna-color-text-secondary: var(--sedna-text-secondary); --sedna-text-tertiary: var(--sedna-neutral-600); --sedna-text-disabled: var(--sedna-neutral-400); --sedna-text-inverse: var(--sedna-neutral-0); --sedna-primary: var(--sedna-brand-600); --sedna-primary-hover: var(--sedna-brand-700); --sedna-primary-active: var(--sedna-brand-800); --sedna-primary-subtle: var(--sedna-brand-50); --sedna-primary-subtle-hover: var(--sedna-brand-100); --sedna-on-primary: var(--sedna-neutral-0); /* SHADOWS */ --sedna-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --sedna-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --sedna-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --sedna-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --sedna-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* FOCUS */ --sedna-focus-ring: 0 0 0 2px var(--sedna-brand-200), 0 0 0 3px color-mix(in srgb, var(--sedna-brand-500, #2196f3) 22%, transparent); --sedna-focus-color: var(--sedna-brand-500); /* TYPOGRAPHY */ /* ⚠️ INTER, il carattere storico del design system, e ora SERVITO DA NOI (v. sedna.fonts.css): il carattere non si lascia all'elenco di quelli installati, o ognuno vede il suo — e' esattamente il difetto da cui e' partita questa storia. I ripieghi restano per il caso in cui il file non arrivi: meglio un carattere di sistema che nessun testo. La parentesi Poppins (2026-08-04, scelta di Antonio) e' rientrata lo stesso giorno. Quello che di quella giornata VA TENUTO non e' il nome del font ma le tre cose imparate: servirselo da soli, vincere sulle variabili di Bootstrap/DevExpress qui sotto, e non lasciare le cifre a un font diverso dal testo (v. --sedna-font-mono). */ --sedna-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ⚠️ IL «MONO» NON E' PIU' MONOSPAZIATO, ed e' voluto (2026-08-04). Antonio, due volte: «in fattura vedo ancora il font dei numeri diverso» e «anche in merce produttori alcuni valori numerici non rispettano il font family del design system». Aveva ragione: nella stessa riga della stessa griglia convivevano il font del testo sulle descrizioni e Consolas sulle cifre. Le dichiarazioni `var(--sedna-font-mono, …)` sono SETTANTUNO sparse per le pagine. Invece di rincorrerle una per una si cambia QUI: e' lo stesso rimedio usato per le variabili di Bootstrap e DevExpress, e vale anche per le prossime che qualcuno scrivera' senza sapere di questa scelta. ⚠️ Quello che serviva davvero non era il monospaziato: era `font-variant-numeric: tabular-nums`, che tiene le cifre incolonnate e che i punti interessati dichiarano gia' per conto loro. Inter ce l'ha. Se un giorno servisse un vero monospaziato in un punto preciso — un tracciato, un XML, un log — lo si dichiara LI', non riaprendo questo token. */ --sedna-font-mono: var(--sedna-font-sans); /* ⚠️ IL CARATTERE DEL DESIGN SYSTEM VINCEVA SOLO NELLA GRIGLIA (misurato 2026-08-04 su un MacBook, dal DOM vivo). Su `body` c'erano TRE regole che impostano il font — Bootstrap (--bs-body-font-family), DevExpress (--dxds-font-family-sans-serif) e la nostra (--sedna-font-sans) — tutte con la stessa specificita', quindi vinceva l'ULTIMA CARICATA: quella di DevExpress (global.min.css). Risultato: la griglia editabile, che il token lo usa direttamente, mostrava Inter; TUTTO IL RESTO dell'app — pulsanti, barra laterale, campi DevExpress — mostrava il carattere di DevExpress. Due facce diverse nella stessa schermata, ed e' la differenza che si vedeva. Si sovrascrivono le loro DUE variabili invece di rincorrere i selettori: cosi' il carattere e' uno solo ovunque, DevExpress compreso, e chi un domani cambia --sedna-font-sans cambia davvero tutta l'app. ⚠️ `!important` serve: i loro fogli si caricano DOPO questo, e senza vincerebbero loro anche su :root. E' l'unico modo che non dipende dall'ordine di caricamento. */ --bs-body-font-family: var(--sedna-font-sans) !important; --dxds-font-family-sans-serif: var(--sedna-font-sans) !important; /* ⚠️ SERVE ANCHE --bs-font-sans-serif, e non e' un doppione (censimento 2026-08-04). Bootstrap ha DUE variabili: `--bs-body-font-family` la usa solo `body`, mentre TOOLTIP e POPOVER (bootstrap.css:5779 e :5889) leggono direttamente `--bs-font-sans-serif`. Sovrascrivendo solo la prima, i suggerimenti restavano nel carattere di Bootstrap: pochi pixel di testo, ma in una schermata dove tutto il resto e' allineato si notano. ⚠️ --bs-font-monospace NON si tocca DI PROPOSITO: la usano `code`, `pre`, `kbd`, `samp` e `.font-monospace`, cioe' i punti dove il monospaziato serve davvero — la stessa eccezione dichiarata su --sedna-font-mono qui sopra. Il tema DevExpress (Fluent 25.2.8) e' stato verificato riga per riga: tutte le sue 48 dichiarazioni passano da --dxds-font-family-sans-serif o da variabili che vi ricadono, e gli unici nomi letterali sono il font delle icone e `monospace`. Niente altro da rincorrere. */ --bs-font-sans-serif: var(--sedna-font-sans) !important; --sedna-text-xs: 0.75rem; --sedna-text-sm: 0.875rem; --sedna-text-base: 1rem; --sedna-text-lg: 1.125rem; --sedna-text-xl: 1.25rem; --sedna-text-2xl: 1.5rem; --sedna-text-3xl: 1.875rem; --sedna-text-4xl: 2.25rem; --sedna-text-5xl: 3rem; --sedna-font-normal: 400; --sedna-font-medium: 500; --sedna-font-semibold: 600; --sedna-font-bold: 700; --sedna-leading-none: 1; --sedna-leading-tight: 1.25; --sedna-leading-snug: 1.375; --sedna-leading-normal: 1.5; --sedna-leading-relaxed: 1.625; --sedna-leading-loose: 2; /* SPACING — cadenza 4px continua (impeccable D28) */ --sedna-space-0: 0; --sedna-space-1: 0.25rem; /* 4px */ --sedna-space-2: 0.5rem; /* 8px */ --sedna-space-3: 0.75rem; /* 12px */ --sedna-space-4: 1rem; /* 16px */ --sedna-space-5: 1.25rem; /* 20px */ --sedna-space-6: 1.5rem; /* 24px */ --sedna-space-7: 1.75rem; /* 28px - D28 (era mancante, salto 6→8) */ --sedna-space-8: 2rem; /* 32px */ --sedna-space-9: 2.25rem; /* 36px - D28 (era mancante) */ --sedna-space-10: 2.5rem; /* 40px */ --sedna-space-11: 2.75rem; /* 44px - D28 (era mancante, salto 10→12) */ --sedna-space-12: 3rem; /* 48px */ --sedna-space-14: 3.5rem; /* 56px - D28 (era mancante, salto 12→16) */ --sedna-space-16: 4rem; /* 64px */ --sedna-space-20: 5rem; /* 80px */ --sedna-space-24: 6rem; /* 96px */ /* BORDER RADIUS */ --sedna-radius-none: 0; --sedna-radius-xs: 0.1875rem; --sedna-radius-sm: 0.25rem; --sedna-radius-base: 0.375rem; --sedna-radius-md: 0.5rem; --sedna-radius-lg: 0.75rem; --sedna-radius-xl: 1rem; --sedna-radius-2xl: 1.5rem; --sedna-radius-full: 9999px; /* Input-specific radius (crisper than general md) */ --sedna-radius-input: var(--sedna-radius-base); /* TRANSITIONS */ --sedna-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --sedna-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --sedna-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-INDEX */ --sedna-z-dropdown: 1000; --sedna-z-sticky: 1020; --sedna-z-fixed: 1030; --sedna-z-modal-backdrop: 1040; --sedna-z-modal: 1050; --sedna-z-popover: 1060; --sedna-z-tooltip: 1070; /* COMPONENT SIZES — RESPONSIVE FLUIDI (D25) Le altezze degli input/control scalano con la larghezza viewport tramite clamp(min, base + n vw, max). A 1100px viewport siamo al minimo, a 1600px al massimo. Nessun salto di breakpoint visibile. Prima del fix tutte queste erano FISSE (sm:28px md:34px lg:40px) → su schermo 14" 1200px gli input apparivano "alti e ingombranti". sm: 22→26px (1.375rem→1.625rem) — usato in grid editabili e action bar md: 26→30px (1.625rem→1.875rem) — DEFAULT (form, lookup, date, spin) lg: 32→36px (2rem→2.25rem) — modali, hero forms, prominenti CTA */ --sedna-control-height-sm: clamp(1.375rem, 1.2rem + 0.18vw, 1.625rem); --sedna-control-height-md: clamp(1.625rem, 1.375rem + 0.25vw, 1.875rem); --sedna-control-height-lg: clamp(2rem, 1.75rem + 0.25vw, 2.25rem); /* INPUT XS DI SERIE (richiesta 2026-07-06): tutti gli INPUT dell'app alla scala della testata documento/contabilita (~20-22px, font 12px). I bottoni restano su control-height-md. Consumati dagli override DX con fallback su control-height-md. */ --sedna-input-height: clamp(1.25rem, 1.15rem + 0.12vw, 1.375rem); /* 20-22px */ --sedna-input-font-size: 0.75rem; /* 12px */ /* DATA GRID — altezze responsive D26 Prima erano fissate (data:48 header:44 filter:40 footer:56) → liste come Prima Nota apparivano "spaziose" su 14". Adesso scalano con il viewport in modo proporzionato al resto della UI. */ --sedna-grid-row-h: clamp(2.25rem, 2rem + 0.25vw, 2.5rem); /* 36→40 */ --sedna-grid-header-h: clamp(2.125rem, 1.75rem + 0.38vw, 2.5rem); /* 34→40 */ --sedna-grid-filter-h: clamp(2rem, 1.75rem + 0.25vw, 2.25rem); /* 32→36 */ --sedna-grid-footer-h: clamp(2.75rem, 2.5rem + 0.25vw, 3rem); /* 44→48 */ /* Input padding */ --sedna-input-padding-x: var(--sedna-space-2); --sedna-input-padding-y: var(--sedna-space-1); --sedna-sidebar-width: 16rem; --sedna-sidebar-collapsed: 4rem; --sedna-topbar-height: 4rem; /* Strip delle schede workspace (SednaWorkspaceStrip): sottile di proposito, lo spazio verticale e' delle pagine. Usata anche dal calcolo altezza di .sedna-page quando la shell ha la strip (v. sedna.layout.css). */ --sedna-tabstrip-height: 2.25rem; /* Spazio verticale consumato dalla SHELL sopra le pagine (strip schede, e qualunque barra futura). Le pagine che si dimensionano sul viewport lo SOTTRAGGONO: height: calc(100dvh - Npx - var(--sedna-shell-dy, 0px)). Vale 0 di default; .sedna-has-tabstrip lo alza (sedna.layout.css). */ --sedna-shell-dy: 0px; /* OPACITY */ --sedna-opacity-disabled: 0.5; --sedna-opacity-overlay: 0.5; --sedna-opacity-hover: 0.08; /* FORM STATE BACKGROUNDS */ --sedna-state-error-bg: var(--sedna-error-50); --sedna-state-warning-bg: var(--sedna-warning-50); --sedna-state-success-bg: var(--sedna-success-50); --sedna-state-info-bg: var(--sedna-info-50); /* DIALOG SIZING */ --sedna-dialog-width-sm: 400px; --sedna-dialog-width-md: 600px; --sedna-dialog-width-lg: 900px; --sedna-dialog-max-height: 90vh; /* TABLE/GRID */ --sedna-table-header-bg: var(--sedna-surface-variant); --sedna-table-row-hover: var(--sedna-surface-hover); --sedna-table-stripe-bg: rgba(0, 0, 0, 0.02); --sedna-table-border: var(--sedna-border); /* DATA VISUALIZATION (D28: ridotti da 8 a 6, derivati dai semantici) Prima erano 8 colori decorativi hardcoded (#8e24aa viola, #fb8c00 arancione, #3949ab indigo) fuori dalla palette. Ora derivano dai token semantici → cambiando i semantici cambiano automaticamente i chart. */ --sedna-chart-1: var(--sedna-brand-500); /* primary */ --sedna-chart-2: var(--sedna-success-500); /* success/positive */ --sedna-chart-3: var(--sedna-warning-500); /* warning/attention */ --sedna-chart-4: var(--sedna-error-500); /* error/negative */ --sedna-chart-5: var(--sedna-info-500); /* info/neutral cool */ --sedna-chart-6: var(--sedna-neutral-500); /* neutral/other */ /* DENSITY */ --sedna-density: 1; } /* DARK THEME */ .sedna-theme-dark { --sedna-bg: var(--sedna-neutral-950); --sedna-bg-subtle: var(--sedna-neutral-800); --sedna-bg-elevated: var(--sedna-neutral-900); --sedna-surface: var(--sedna-neutral-900); --sedna-surface-variant: var(--sedna-neutral-800); --sedna-surface-hover: var(--sedna-neutral-700); /* Pannelli/sezioni "muted" in dark: leggermente elevati rispetto alla superficie base (no glow chiaro), bordo molto tenue. */ --sedna-surface-muted: var(--sedna-neutral-800); --sedna-border-light: rgba(255, 255, 255, 0.06); --sedna-border: rgba(255, 255, 255, 0.12); --sedna-border-strong: rgba(255, 255, 255, 0.20); --sedna-divider: rgba(255, 255, 255, 0.08); --sedna-text: var(--sedna-neutral-100); --sedna-text-secondary: var(--sedna-neutral-400); --sedna-text-tertiary: var(--sedna-neutral-500); --sedna-text-disabled: var(--sedna-neutral-600); --sedna-text-inverse: var(--sedna-neutral-900); --sedna-primary: var(--sedna-brand-400); --sedna-primary-hover: var(--sedna-brand-300); --sedna-primary-active: var(--sedna-brand-200); --sedna-primary-subtle: rgba(33, 150, 243, 0.12); --sedna-primary-subtle-hover: rgba(33, 150, 243, 0.20); --sedna-on-primary: var(--sedna-neutral-900); --sedna-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --sedna-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --sedna-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --sedna-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --sedna-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --sedna-focus-ring: 0 0 0 3px rgba(33, 150, 243, 0.4); --sedna-focus-color: var(--sedna-brand-400); /* Dark overrides for semantic-50 backgrounds (used by KPI, alerts, etc.) */ --sedna-success-50: rgba(76, 175, 80, 0.15); --sedna-warning-50: rgba(255, 193, 7, 0.15); --sedna-error-50: rgba(244, 67, 54, 0.15); --sedna-info-50: rgba(0, 188, 212, 0.15); --sedna-accent-50: rgba(168, 85, 247, 0.15); /* Dark overrides per Dare/Avere: testo in tinta CHIARA (leggibile su scuro), sfondo e bordo come tint scuri translucidi. Restano distinguibili (giallo/verde). */ --sedna-dare: #fcd34d; --sedna-dare-bg: rgba(252, 211, 77, 0.14); --sedna-dare-border: rgba(252, 211, 77, 0.32); --sedna-avere: #6ee7b7; --sedna-avere-bg: rgba(110, 231, 183, 0.14); --sedna-avere-border: rgba(110, 231, 183, 0.32); --sedna-dare-row: rgba(252, 211, 77, 0.06); --sedna-avere-row: rgba(110, 231, 183, 0.06); --sedna-input-focus-bg: color-mix(in srgb, var(--sedna-primary, #1e88e5) 20%, transparent); --sedna-input-focus-bar: inset 2px 0 0 0 var(--sedna-primary, #42a5f5); /* Dark overrides for form state backgrounds */ --sedna-state-error-bg: rgba(244, 67, 54, 0.12); --sedna-state-warning-bg: rgba(255, 193, 7, 0.12); --sedna-state-success-bg: rgba(76, 175, 80, 0.12); --sedna-state-info-bg: rgba(0, 188, 212, 0.12); /* Dark overrides for table */ --sedna-table-stripe-bg: rgba(255, 255, 255, 0.02); } /* DENSITY VARIATIONS (legacy) */ .sedna-density-compact { --sedna-density: 0.875; --sedna-control-height-sm: 1.5rem; --sedna-control-height-md: 1.875rem; --sedna-control-height-lg: 2.125rem; } .sedna-density-comfortable { --sedna-density: 1; } .sedna-density-spacious { --sedna-density: 1.125; --sedna-control-height-sm: 2rem; --sedna-control-height-md: 2.5rem; --sedna-control-height-lg: 3rem; } /* SCALE VARIATIONS - allineate con DevExpress SizeMode */ .sedna-scale-compact { --sedna-density: 0.875; --sedna-control-height-sm: 1.5rem; /* 24px */ --sedna-control-height-md: 1.75rem; /* 28px - matches DX Small */ --sedna-control-height-lg: 2.125rem; /* 34px */ --sedna-text-xs: 0.6875rem; /* 11px */ --sedna-text-sm: 0.8125rem; /* 13px */ --sedna-text-base: 0.875rem; /* 14px */ } .sedna-scale-comfort { --sedna-density: 1.125; --sedna-control-height-sm: 2.25rem; /* 36px */ --sedna-control-height-md: 2.75rem; /* 44px - matches DX Large */ --sedna-control-height-lg: 3.25rem; /* 52px */ --sedna-text-xs: 0.8125rem; /* 13px */ --sedna-text-sm: 0.9375rem; /* 15px */ --sedna-text-base: 1.0625rem; /* 17px */ }