/* ═══════════════════════════════════════════════════════════════ SOLVERA — token di design condivisi solverauno.com · crm.solverauno.com · driver.solverauno.com Ogni colore qui dentro è stato misurato, non scelto a occhio: le coppie testo/sfondo dichiarate superano 4.5:1 (WCAG AA) e il numero è annotato accanto al token. Dove il valore di marchio non passava, c'è una variante — e il motivo è scritto. Regole applicate: ombre a due livelli mai nere, tracking legato alla dimensione, interlinea inversa alla dimensione, scala di raggi annidabili, easing definiti. ═══════════════════════════════════════════════════════════════ */ :root { /* ── MARCHIO — non si toccano ───────────────────────────────── Identici in tutte e tre le app da sempre: sono l'unica cosa che ha tenuto insieme il sistema finora. */ --brand-navy: #0C1B2E; --brand-navy-2: #162840; --brand-orange: #C8430A; --brand-orange-2: #A33508; /* Il crema nasce dalla luce dei fari della scena, non da un grigio neutro: era #F7F4EF, che non ha dentro né l'ambra né il blu freddo dell'eroe. Con un soffio d'ambra le sezioni chiare diventano la stessa fotografia, di giorno. Deciso il 21 agosto 2026. */ --brand-cream: #F9F2E6; /* ── SUPERFICI, tema chiaro ───────────────────────────────── */ --bg: #F7F8FC; /* pagina */ --surface: #FFFFFF; /* card, pannelli */ --surface-2: #F1F3F8; /* zone incassate, righe alterne */ --surface-inv: #0C1B2E; /* barre scure, tooltip */ /* ── TESTO, tema chiaro ───────────────────────────────────── --text-2 era #7b8eaa (driver) / #8a8278 (crm) / #8A96A2 (public): nessuno dei tre superava 4.5:1. Questo sì. */ --text: #1A2B3C; /* 13.60 su --bg · 14.44 su --surface */ /* ⚠ Era #5A6B80: 5,46 sul bianco, ma il testo secondario non vive solo sul bianco. Sui fondi VERI misurati coi pixel — la finestra modale col fondo crema all'82% sopra il velo scuro (216 grigio), le lavature del marketplace, il pannello contratti — scendeva fino a 3,26. #44536A sta a 4,66 sul peggiore di quei fondi: 4,5 di legge piu 0,1 di margine, cosi una sfumatura di fondo non lo fa oscillare fra verde e rosso. Il passo MINIMO che basta: il tono si giudica a occhio dopo, e semmai si scurisce ancora. (30 agosto 2026) */ --text-2: #44536A; /* 4.66 sul fondo reale peggiore (216 grigio) */ --text-inv: #FFFFFF; /* ── STATI, tema chiaro ───────────────────────────────────── Verde e ambra sono stati scuriti: #16a34a dava 3.30 e #d97706 dava 3.19 su bianco — sotto la soglia, e sono proprio i colori che dicono «consegnato» e «in attesa». */ --ok: #15803d; /* 5.02 su --surface (era #16a34a, 3.30) */ --warn: #b45309; /* 5.02 su --surface (era #d97706, 3.19) */ --danger: #dc2626; /* 4.83 su --surface */ --info: #2563eb; /* 5.17 su --surface */ /* L'arancio ha DUE ruoli e non possono essere lo stesso valore: --accent è testo — deve staccare dal fondo della pagina --accent-solid è superficie — sopra ci va testo bianco Su fondo chiaro coincidono. Su fondo scuro no, ed è il motivo per cui questa separazione esiste: vedi il blocco del tema scuro. */ --accent: #C8430A; /* 4.64 su --bg — l'arancio come testo */ --accent-solid: #C8430A; /* 4.93 col bianco sopra — pulsanti */ --accent-solid-2: #A33508; /* stato premuto / hover */ /* Fondi tenui per le pastiglie di stato. Il testo sopra usa il colore pieno corrispondente, non una tinta più chiara. */ --ok-bg: rgba(21,128,61,.10); --warn-bg: rgba(180,83,9,.10); --danger-bg: rgba(220,38,38,.10); --info-bg: rgba(37,99,235,.10); --accent-bg: rgba(200,67,10,.10); /* ── LINEE ─────────────────────────────────────────────────── Un'interfaccia densa si separa con linee, non con ombre. Il capello è navy trasparente, mai grigio neutro: su fondo caldo o freddo si adatta invece di sporcare. */ --hairline: rgba(12,27,46,.10); --hairline-strong: rgba(12,27,46,.18); --hairline-faint: rgba(12,27,46,.05); /* ── OMBRE ─────────────────────────────────────────────────── Due livelli sempre: una ambientale larga e quasi invisibile, una diretta più stretta. Tinte navy, mai nere — il nero puro è il segno più immediato di un'interfaccia non disegnata. Da usare SOLO su ciò che galleggia davvero. */ --sh-xs: 0 1px 2px 0 rgba(12,27,46,.04), 0 1px 1px -1px rgba(12,27,46,.06); --sh-sm: 0 4px 12px -2px rgba(12,27,46,.06), 0 1px 3px -1px rgba(12,27,46,.10); --sh-md: 0 10px 28px -6px rgba(12,27,46,.10), 0 3px 8px -2px rgba(12,27,46,.12); --sh-lg: 0 24px 56px -12px rgba(12,27,46,.16), 0 6px 16px -4px rgba(12,27,46,.14); --sh-accent: 0 8px 24px -6px rgba(200,67,10,.30), 0 2px 6px -1px rgba(200,67,10,.24); /* ── TIPOGRAFIA ─────────────────────────────────────────────── */ --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Scala. Parte da 12px: sotto quella misura non si legge in un gestionale, e sul telefono nemmeno. Ogni gradino porta con sé il proprio tracking e la propria interlinea — sono la stessa decisione, non tre. */ --fs-label: 12px; --tr-label: .07em; --lh-label: 1.35; /* MAIUSCOLETTO */ --fs-xs: 12px; --tr-xs: .015em; --lh-xs: 1.45; --fs-sm: 13px; --tr-sm: .005em; --lh-sm: 1.5; --fs-base: 14px; --tr-base: 0; --lh-base: 1.6; --fs-md: 16px; --tr-md: 0; --lh-md: 1.6; --fs-lg: 18px; --tr-lg: -.008em; --lh-lg: 1.4; --fs-xl: 21px; --tr-xl: -.014em; --lh-xl: 1.3; --fs-2xl: 26px; --tr-2xl: -.02em; --lh-2xl: 1.24; --fs-3xl: 32px; --tr-3xl: -.028em; --lh-3xl: 1.12; --fs-4xl: 42px; --tr-4xl: -.032em; --lh-4xl: 1.06; --fs-5xl: 54px; --tr-5xl: -.035em; --lh-5xl: 1.02; /* ── RAGGI ─────────────────────────────────────────────────── Scala annidabile: raggio esterno = raggio interno + padding. Con padding 4 → interno --r-sm(8) sta in --r-md(12). Con padding 6 → interno --r-md(12) sta in --r-lg(16) + 4. */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* ── MISURA DELLA RIGA ─────────────────────────────────────── In ch e non in px: così la riga resta di 62-72 caratteri qualunque sia il corpo del testo, invece di allungarsi quando il font rimpicciolisce. */ --measure: 66ch; /* paragrafi correnti */ --measure-tight: 46ch; /* occhielli, didascalie, colonne strette */ --measure-wide: 74ch; /* introduzioni in corpo grande */ /* ── SPAZIO ─────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 72px; --sp-10: 96px; /* Ritmo editoriale: distanze fra sezioni di una pagina che deve vendere. Si riducono con la finestra invece di spezzarsi. */ --sp-section: clamp(72px, 9vw, 152px); --sp-section-tight: clamp(48px, 6vw, 96px); /* ── MOVIMENTO ─────────────────────────────────────────────── Mai ease, linear o ease-in-out di serie. La durata cresce con la distanza percorsa: un interruttore si muove di pochi pixel, un pannello attraversa lo schermo. */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* entrate, aperture */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* spostamenti */ --ease-in: cubic-bezier(.55, 0, 1, .45); /* uscite */ --ease-spring: cubic-bezier(.34, 1.42, .64, 1); /* conferme, rimbalzi */ --dur-1: 120ms; /* micro: colore, opacità, stato di un tasto */ --dur-2: 180ms; /* piccolo: pastiglia, tooltip, spunta */ --dur-3: 260ms; /* medio: dropdown, riga che si apre */ --dur-4: 380ms; /* grande: modale, pannello laterale */ --dur-5: 520ms; /* schermo intero */ /* ── FOCUS E SELEZIONE ─────────────────────────────────────── Disegnati, non lasciati al browser. */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(200,67,10,.55); --focus-ring-inv: 0 0 0 2px var(--surface-inv), 0 0 0 4px rgba(240,133,74,.65); --selection-bg: rgba(200,67,10,.20); --selection-fg: #0C1B2E; } /* ═══════════════════════════════════════════════════════════════ TEMA SCURO Non è il chiaro con i colori invertiti: è una seconda palette misurata sul proprio fondo. Sorpresa che vale la pena sapere: l'arancio di marchio #C8430A dà 3.52:1 su navy — NON passa come testo su fondo scuro. Resta perfetto come fondo di un pulsante con testo bianco (4.93:1), ma quando fa da testo va schiarito. È il motivo di --accent qui sotto. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg: #0C1B2E; --surface: #162840; --surface-2: #1E3550; --surface-inv: #F7F8FC; --text: #E8EDF5; /* 14.74 su --bg · 12.65 su --surface */ --text-2: #9AA9BF; /* 7.26 su --bg · 6.23 su --surface */ --text-inv: #0C1B2E; --ok: #34d399; /* 9.01 su --bg */ --warn: #FBBF24; /* 10.38 su --bg */ --danger: #F87171; /* 6.26 su --bg */ --info: #7DA6F5; /* Qui i due ruoli divergono, ed è il difetto che questa separazione ripara: #F0854A funziona come TESTO su navy (6.73) ma col bianco sopra dà 2.57 — sotto soglia. Il tasto OK del tastierino, le pastiglie di stato e il pulsante note usavano quello. La superficie resta l'arancio pieno, che col bianco dà 4.93. */ --accent: #F0854A; /* 6.73 su --bg — testo */ --accent-solid: #C8430A; /* 4.93 col bianco sopra — pulsanti */ --accent-solid-2: #A33508; /* stato premuto / hover */ --ok-bg: rgba(52,211,153,.14); --warn-bg: rgba(251,191,36,.14); --danger-bg: rgba(248,113,113,.14); --info-bg: rgba(125,166,245,.14); --accent-bg: rgba(240,133,74,.14); /* Sul chiaro la linea è il fondo scurito; sullo scuro è il fondo schiarito. Un capello nero su navy sparisce. */ --hairline: rgba(232,237,245,.12); --hairline-strong: rgba(232,237,245,.20); --hairline-faint: rgba(232,237,245,.06); /* Sullo scuro l'ombra deve essere più scura del fondo, non nera: un nero puro su navy stacca in modo sporco. */ --sh-xs: 0 1px 2px 0 rgba(3,8,16,.28), 0 1px 1px -1px rgba(3,8,16,.34); --sh-sm: 0 4px 12px -2px rgba(3,8,16,.34), 0 1px 3px -1px rgba(3,8,16,.44); --sh-md: 0 10px 28px -6px rgba(3,8,16,.44), 0 3px 8px -2px rgba(3,8,16,.40); --sh-lg: 0 24px 56px -12px rgba(3,8,16,.56), 0 6px 16px -4px rgba(3,8,16,.44); --sh-accent: 0 8px 24px -6px rgba(200,67,10,.44), 0 2px 6px -1px rgba(200,67,10,.32); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(240,133,74,.65); --selection-bg: rgba(240,133,74,.28); --selection-fg: #F7F8FC; } /* ═══════════════════════════════════════════════════════════════ BASE COMUNE ═══════════════════════════════════════════════════════════════ */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } ::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); } :where(input, textarea, [contenteditable]) { caret-color: var(--accent); } :where(input, textarea)::placeholder { color: var(--text-2); opacity: .75; } /* Il focus si vede solo a chi naviga da tastiera, ma quando si vede è disegnato: due anelli, il primo del colore del fondo, così stacca anche sopra un elemento colorato. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); } /* Le cifre in colonna devono allinearsi: è l'errore più visibile in un gestionale, e il più facile da non commettere. */ :where(table, .num, [data-num], input[type="number"]) { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Barre di scorrimento coerenti con la superficie invece che di sistema. */ * { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--text-2); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }