/* ════════════════════════════════════════════════════════════════════════════ ORBIT — DESIGN TOKENS Specifica: "ORBIT — Specifica Design System" v2.0 del 20/08/2026, §2. ════════════════════════════════════════════════════════════════════════════ Questo file è l'unica sorgente dei colori del prodotto. Nessun componente scrive un esadecimale: se un colore serve e qui non c'è, si aggiunge qui. In fondo al file le variabili STORICHE (--purple, --gold, --sidebar-*) non vengono cancellate ma ricondotte ai token. È la scelta che fa cambiare pelle a tutto il prodotto senza riscrivere cento template uno per uno: ogni regola che diceva "viola" ora dice "ink", e lo dice ovunque nello stesso momento. Il file va caricato DOPO style.css, altrimenti i vecchi valori vincono. ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── INK (navy) — struttura, testo, chrome ──────────────────────────── */ --ink-900: #0A1723; /* sidebar, topbar */ --ink-800: #12222F; --ink-700: #1E3341; /* testo primario su chiaro, righe di sezione */ --ink-500: #43596A; /* testo secondario */ --ink-300: #8296A3; /* testo terziario, placeholder, icone inattive */ /* ── NEUTRI CALDI — sfondi, bordi ───────────────────────────────────── */ --bone-50: #FAF8F4; /* sfondo applicazione */ --bone-100: #F4F1EA; /* fondo sezione, riga zebra, header tabella */ --bone-200: #E9E4D9; /* bordo standard, divisori */ --bone-300: #D8D1C3; /* bordo enfatizzato, bordo input */ --surface: #FFFFFF; /* ── LIME — firma di marca. Max 10% della superficie ────────────────── */ --lime-500: #C3F53C; --lime-600: #A8DC20; --lime-100: #EEFBC9; --lime-ink: #3D5307; /* ── SEMANTICI — solo significato, mai decorazione ──────────────────── */ --pos-600: #0E7A4B; --pos-100: #E3F3EA; --neg-600: #B3261E; --neg-100: #FBE9E7; --warn-600: #A05E00; --warn-100: #FBEFD9; --info-600: #1F5C8B; --info-100: #E4EFF7; /* Varianti schiarite per il tema scuro (§10) */ --pos-400: #34C77B; --neg-400: #F27B72; --warn-400: #E0A63C; --info-400: #6BA9D6; /* ── SCALA ANZIANITÀ — rampa ordinale, non sette categorie (§2.1) ───── */ --age-0: #8296A3; /* a scadere (neutro) */ --age-1: #C8A24A; /* ≤ 30 gg */ --age-2: #C98A3C; /* 31–60 */ --age-3: #C87233; /* 61–90 */ --age-4: #C25A2E; /* 91–180 */ --age-5: #B94329; /* 181–365 */ --age-6: #A32B22; /* oltre 365 */ /* ── MODULI del gestionale (§3.3) ───────────────────────────────────── */ --mod-sales: #6B4FA8; --mod-marketing: #1F5C8B; --mod-operations: #0E7A4B; --mod-finance: #A05E00; /* ── TENANT (§3.4) — il colore dell'azienda vive QUI e solo qui ─────── */ /* Chi lo usa: avatar/monogramma azienda, chip azienda in topbar, barra 4px dell'intestazione scheda cliente. Nessun altro selettore può leggerlo. */ --tenant-accent: var(--ink-500); /* ── TIPOGRAFIA (§2.2) ──────────────────────────────────────────────── */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-num: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-kpi: 26px; --lh-kpi: 30px; --fs-h1: 20px; --lh-h1: 28px; --fs-h2: 16px; --lh-h2: 24px; --fs-body: 14px; --lh-body: 20px; --fs-sm: 13px; --lh-sm: 18px; --fs-label: 11px; --lh-label: 16px; /* ── SPAZIATURA, RAGGI, OMBRE, LAYOUT (§2.3) ────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(10,23,35,.06); --sh-2: 0 4px 12px rgba(10,23,35,.08); /* Larghezza del contenuto. 1440px erano tarati sulla lettura di un testo; le schermate di lavoro sono tabelle con dieci colonne, e su un monitor da 1920 lasciavano 480px di margine vuoto mentre la tabella scorreva. --content-max serve le pagine normali, --content-max-wide quelle che dichiarano `content-wide` (scadenzari, tesoreria, banche, voci). */ --content-max: 1680px; --content-max-wide: 2040px; --form-max: 1180px; /* ════════════════════════════════════════════════════════════════════ PONTE CON IL CSS STORICO Le variabili qui sotto esistevano prima del design system e sono usate in centinaia di regole. Non si cancellano: si ricollegano ai token, così il prodotto cambia pelle tutto insieme invece che schermata per schermata. ════════════════════════════════════════════════════════════════════ */ --purple: var(--ink-700); --purple-dark: var(--ink-900); --purple-light: var(--ink-500); /* L'oro esce di scena: era un accento di tenant diventato colore di prodotto. */ --gold: var(--ink-500); --gold-light: var(--ink-300); --gold-pale: var(--bone-100); --bg: var(--bone-50); --bg-card: var(--surface); --text: var(--ink-700); --text-muted: var(--ink-500); --border: var(--bone-200); --input-bg: var(--surface); --shadow: rgba(10,23,35,.08); --table-hover: var(--bone-50); --positive: var(--pos-600); --negative: var(--neg-600); --topbar-h: 56px; --topbar-bg: var(--ink-900); --topbar-border: var(--ink-800); --sidebar-w: 240px; --sidebar-bg: var(--ink-900); --sidebar-bg-deep: var(--ink-800); --sidebar-text: rgba(255,255,255,.86); --sidebar-text-dim: rgba(255,255,255,.52); --sidebar-hover: rgba(255,255,255,.06); --sidebar-active: rgba(255,255,255,.08); --sidebar-accent: var(--lime-500); /* Compatibilità con i nomi ORBIT già in uso nel CSS storico */ --orbit-navy: var(--ink-900); --orbit-navy-2: var(--ink-800); --orbit-lime: var(--lime-500); --orbit-lime-dark: var(--lime-ink); --orbit-text-on-navy: #FFFFFF; --orbit-text-muted: var(--ink-300); /* Tinte tenui usate dalle fasce delle tabelle: diventano i neutri caldi. */ --brand-tint-1: var(--bone-100); --brand-tint-2: var(--bone-200); --brand-tint-3: var(--bone-300); --brand-ink: var(--ink-700); --brand-accent: var(--ink-700); --brand-accent-dark: var(--ink-900); --brand-accent-light: var(--ink-500); --brand-on-accent: #FFFFFF; --brand-border: var(--bone-200); --brand-surface: var(--surface); } /* ════════════════════════════════════════════════════════════════════════ TEMA SCURO (§10) Non è un filtro sul tema chiaro: i semantici pieni non reggono sul buio e vanno sostituiti dalle varianti schiarite, altrimenti il rosso di un saldo negativo diventa illeggibile proprio quando conta. ════════════════════════════════════════════════════════════════════════ */ body.dark { --bone-50: #0F1A24; --bone-100: #16242F; --bone-200: #21323E; --bone-300: #2E4250; --surface: #12202B; --ink-900: #060F17; --ink-800: #0C1822; --ink-700: rgba(255,255,255,.90); --ink-500: rgba(255,255,255,.66); --ink-300: rgba(255,255,255,.45); --pos-600: var(--pos-400); --neg-600: var(--neg-400); --warn-600: var(--warn-400); --info-600: var(--info-400); --pos-100: rgba(52,199,123,.14); --neg-100: rgba(242,123,114,.14); --warn-100: rgba(224,166,60,.14); --info-100: rgba(107,169,214,.14); --bg: var(--bone-50); --bg-card: var(--surface); --text: var(--ink-700); --text-muted:var(--ink-500); --border: var(--bone-200); --input-bg: var(--bone-100); --shadow: rgba(0,0,0,.45); --table-hover: rgba(255,255,255,.04); --sidebar-bg: #060F17; --sidebar-bg-deep: #040B11; --topbar-bg: #060F17; --topbar-border: #0C1822; --brand-tint-1: rgba(255,255,255,.05); --brand-tint-2: rgba(255,255,255,.09); --brand-tint-3: rgba(255,255,255,.14); --brand-ink: rgba(255,255,255,.90); }