/* ===================================================================== assets/tokens.css — i colori del portale, in un posto solo ===================================================================== Il portale ha DUE fogli di stile, e devono restare due: la vetrina è aria e foto grandi (si sceglie), il gestionale è righe strette e tabelle (si lavora). Quello che NON deve essere doppio è la tavolozza: prima i token erano copiati in quattro blocchi — chiaro e scuro × due fogli — e cambiare il verde in uno solo disallineava metà portale senza rompere niente, cioè nel modo peggiore. Qui c'è il nucleo comune. Ogni foglio aggiunge poi i SUOI token: • style.css → --eroe-* (la fascia d'apertura della vetrina) • gestionale.css → --consegna/--rientro, --rosso/--ambra/--verde (il semaforo delle scadenze e i tipi di movimento) Si carica PRIMA del foglio di pagina, con un a sé: niente @import, che aggiungerebbe un viaggio di rete in serie. Tema: la preferenza di sistema è il default, l'interruttore manuale (`data-tema` + localStorage) vince sempre — per questo le regole esplicite stanno DOPO la media query. ===================================================================== */ :root { /* ⚠️ Dal 2026-09-21 il marchio e' AM MOTORI, bianco e nero come il suo logo. L'avorio e l'oro di RT (commenti qui sotto) sono storia: i NOMI dei token restano, i valori no. `--oro` oggi e' nero e `--oro-testo` grigio scuro: rinominarli avrebbe toccato ogni foglio per niente. Contrasti misurati: testo #171717 su #f4f4f3 = 16,1:1; debole #5c5c5c su #f4f4f3 = 6,1:1; bottone nero col testo bianco = 19,6:1. */ /* --- superfici e testo --- */ /* Le stesse superfici del portale Operations in versione chiara (deciso il 2026-09-02: "come portale Operations versione chiara"). Il grigio-verde di prima era freddo e non apparteneva a nessuno; questo avorio caldo e nato per stare accanto all oro del marchio. */ --sfondo: #f4f4f3; /* grigio chiarissimo neutro (AM Motori) */ --superficie: #ffffff; --superficie-2: #f7f7f6; --superficie-3: #eeeeec; --bordo: #e3e3e1; --bordo-forte: #cfcfcc; --testo: #171717; /* quasi nero, 16,1:1 sullo sfondo */ --testo-tenue: #3f3f3f; /* ⚠️ Scuriti rispetto a Operations, che li usa su fondo NERO dove reggono. Su questo avorio i suoi valori davano 3,31 e 4,12, sotto il 4,5 minimo. */ --testo-debole: #5c5c5c; /* --- marchio: i colori di RT (decisi il 2026-09-02) --- Il verde #14653f di prima era inventato per questo portale e non esisteva da nessun'altra parte in RT. Questi sono quelli veri, gli stessi di Operations, del CRM e del control panel. ⚠️ L'ORO NON PUÒ FARE DA COLORE DEI BOTTONI, ed è la ragione per cui l'accento è il nero e non l'oro. Misurato: oro #C8985A con testo bianco dà un contrasto di 2,59 contro il 4,5 minimo — un bottone «Cerca auto» oro con la scritta bianca è illeggibile, e non è una questione di gusto. Negli altri portali RT l'oro funziona perché lì il fondo è NERO; qui il fondo è chiaro e va usato al contrario: il nero porta le azioni, l'oro decora. */ --accento: #0b0b0b; /* nero AM Motori: porta le azioni */ --accento-forte: #2b2b2b; /* lo stato premuto */ --accento-tenue: #ececea; /* ⚠️ TESTO SCURO SULL ORO, non bianco, ed e la sola combinazione che regge: oro con testo bianco da 2,59 di contrasto contro il 4,5 minimo, oro con testo #1a1a1a da 6,26. E anche come lo risolve Operations (.btn-gold). Chi un domani rimette il bianco qui rende illeggibile ogni bottone. */ --accento-testo: #ffffff; /* L'oro: filetti e dettagli, MAI il testo piccolo. ⚠️ Due varianti apposta. Il primo è l'oro vero del marchio e vale per le superfici; il secondo è scurito finché non passa il contrasto (5,11:1), perché l'oro vero come testo su bianco dà 2,59 e non si legge. */ --oro: #0b0b0b; --oro-testo: #3f3f3f; /* ex oro: oggi grigio scuro, 10,4:1 */ --oro-tenue: #f0f0ee; /* --- esiti --- */ --allarme: #c0392b; --allarme-tenue: #fbeae7; --ok: #1a7340; --ok-tenue: #e7f2ea; /* --- forma --- */ --raggio-l: 18px; --raggio: 12px; --raggio-s: 8px; --ombra-1: 0 1px 2px rgba(16, 24, 20, .06); --ombra-2: 0 1px 2px rgba(16, 24, 20, .05), 0 8px 24px -8px rgba(16, 24, 20, .14); --ombra-3: 0 2px 4px rgba(16, 24, 20, .06), 0 18px 40px -12px rgba(16, 24, 20, .22); --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { --sfondo: #0f0f0f; --superficie: #181818; --superficie-2: #202020; --superficie-3: #2a2a2a; --bordo: #2e2e2e; --bordo-forte: #444444; --testo: #f2f2f2; --testo-tenue: #b5b5b5; --testo-debole: #949494; /* ⚠️ Al buio si INVERTE: il nero non può portare le azioni su un fondo nero, quindi lì tocca all'oro — che è poi esattamente come lo usano gli altri portali RT. Oro #c8985a con testo #1a1a1a dà 6,71:1. */ --accento: #f2f2f2; --accento-forte: #d6d6d6; --accento-tenue: #262626; --accento-testo: #0b0b0b; --oro: #f2f2f2; --oro-testo: #d6d6d6; --oro-tenue: #262626; --allarme: #f19a92; --allarme-tenue: #331e1c; --ok: #4ec18a; --ok-tenue: #163023; --ombra-1: 0 1px 2px rgba(0, 0, 0, .4); --ombra-2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -8px rgba(0, 0, 0, .6); --ombra-3: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px -12px rgba(0, 0, 0, .7); } } :root[data-tema="scuro"] { --sfondo: #0f0f0f; --superficie: #181818; --superficie-2: #202020; --superficie-3: #2a2a2a; --bordo: #2e2e2e; --bordo-forte: #444444; --testo: #f2f2f2; --testo-tenue: #b5b5b5; --testo-debole: #949494; --accento: #f2f2f2; --accento-forte: #d6d6d6; --accento-tenue: #262626; --accento-testo: #0b0b0b; --oro: #f2f2f2; --oro-testo: #d6d6d6; --oro-tenue: #262626; --allarme: #f19a92; --allarme-tenue: #331e1c; --ok: #4ec18a; --ok-tenue: #163023; --ombra-1: 0 1px 2px rgba(0, 0, 0, .4); --ombra-2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -8px rgba(0, 0, 0, .6); --ombra-3: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px -12px rgba(0, 0, 0, .7); }