/* Token del sito consumer (2026-09-25, seconda stesura). Solo le pagine del sito li caricano: colors_and_type.css resta alla console per le aziende. Tema: segue il sistema; data-theme="dark|light" sull' (scritto da /js/sito/tema.js prima del primo disegno) lo forza nei due sensi. Tre piani, in entrambi i temi: la CARTA è il fondo della pagina, la SUPERFICIE è ciò che ci sta sopra (schede, campi, tabelle, testata), CARTA-2/3 sono riquadri tenui e segnaposto. In chiaro la prima stesura aveva fondo e schede quasi dello stesso bianco: non si capiva dove finiva una cosa. Colori con un significato solo: - bosco: azioni e link; segnale: dettagli, mai sotto un testo bianco (2,3:1); - offerta (rosso): SOLO "in offerta"; - attenzione (ambra): avvisi, limiti, stati da controllare; - fasce: sotto / nella / sopra la media (mappa, voto, grafici). Il "sopra" è indaco e non rosso, perché il rosso qui vuol dire offerta. Contrasti misurati (chiaro): inchiostro/carta 16,1:1; inchiostro-2/superficie 9,3:1; inchiostro-3/superficie 5,9:1; bianco su bosco 7,1:1. */ :root { --carta: #F3F5F2; --carta-2: #E9EEEA; --carta-3: #DCE3DE; --superficie: #FFFFFF; --superficie-2: #F8FAF8; --inchiostro: #0E1A12; --inchiostro-2: #3E4C43; --inchiostro-3: #56665B; --linea: #D5DDD7; --linea-2: #B7C4BB; --bosco: #166534; /* azioni e link */ --bosco-forte: #14532D; --su-bosco: #FFFFFF; --bosco-tenue: #E1F1E6; --bosco-bordo: #A9D6B7; --bosco-testo: #14532D; /* testo sopra bosco-tenue */ --segnale: #22C55E; /* cartellino grande, puntini */ --logo-cestello: #166534; /* il segno: cestello bosco, spunta segnale */ --logo-spunta: #22C55E; --su-segnale: #0E1A12; --offerta: #DC2626; /* SOLO "in offerta" */ --offerta-testo: #B91C1C; --offerta-tenue: #FDECEC; --offerta-bordo: #F5B5B5; --su-offerta: #FFFFFF; /* bianco su #DC2626: 4,8:1 */ --attenzione: #B45309; --attenzione-testo: #92400E; --attenzione-tenue: #FEF4DC; --attenzione-bordo: #F2CF83; --fascia-bassa: #15803D; --fascia-media: #8A968D; --fascia-alta: #4F46E5; --fascia-bassa-tenue: #E1F1E6; --fascia-media-tenue: #E6EBE7; --fascia-alta-tenue: #E8E7FB; --fascia-alta-testo: #3730A3; --grafico-griglia: #E3E9E4; --grafico-asse: #56665B; /* Serie dei grafici (una per insegna): niente rosso, che vuol dire offerta. */ --serie-1: #166534; --serie-2: #4F46E5; --serie-3: #B45309; --serie-4: #0E7490; --serie-5: #A21CAF; --serie-6: #4D7C0F; --serie-7: #1E3A8A; --serie-8: #78716C; --scontrino: #FFFFFF; --scontrino-testo: #1B211C; --scontrino-2: #56605A; --scontrino-linea: #BFC8C0; --scontrino-meglio: #E4F5E9; --scontrino-meglio-testo: #14532D; --scontrino-offerta: #C21B1B; --tessera: #FFFFFF; /* fondo dei loghi delle insegne: chiaro in entrambi i temi */ --ombra: 0 22px 44px -26px rgb(14 26 18 / .30); --ombra-piccola: 0 1px 2px rgb(14 26 18 / .06), 0 4px 12px -6px rgb(14 26 18 / .12); --velo: rgb(243 245 242 / .88); --f-testo: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Un carattere solo nel sito: i numeri usano lo stesso, con cifre tabellari. Il monospaziato resta SOLO dentro lo scontrino, dove imita la cassa. */ --f-cifre: var(--f-testo); --f-cassa: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --t-12: .75rem; --t-14: .875rem; --t-16: 1rem; --t-17: 1.0625rem; --t-19: 1.1875rem; --t-24: 1.5rem; --t-32: 2rem; --t-42: 2.625rem; --t-56: 3.5rem; --t-74: 4.625rem; --r-piccolo: 8px; --r: 12px; --r-grande: 16px; --r-pillola: 999px; --largo: 1200px; --margine: clamp(16px, 4vw, 40px); --sezione: clamp(56px, 8vw, 104px); --t-pressione: 120ms; --t-passaggio: 160ms; --t-comparsa: 220ms; --t-stampa: 340ms; --curva: cubic-bezier(.2, .7, .2, 1); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --carta: #0B120D; --carta-2: #152019; --carta-3: #1D2B22; --superficie: #111A14; --superficie-2: #16211A; --inchiostro: #E8F0EA; --inchiostro-2: #B2C2B7; --inchiostro-3: #93A699; --linea: #24332A; --linea-2: #365040; --bosco: #4ADE80; --bosco-forte: #86EFAC; --su-bosco: #052E16; --bosco-tenue: #13301F; --bosco-bordo: #235C39; --bosco-testo: #86EFAC; --segnale: #22C55E; --su-segnale: #052E16; --logo-cestello: #4ADE80; --logo-spunta: #FFFFFF; --offerta: #F87171; --offerta-testo: #FCA5A5; --offerta-tenue: #3A1414; --offerta-bordo: #6B2323; --su-offerta: #2B0A0A; --attenzione: #FBBF24; --attenzione-testo: #FCD34D; --attenzione-tenue: #33250A; --attenzione-bordo: #6B4E12; --fascia-bassa: #4ADE80; --fascia-media: #8FA295; --fascia-alta: #A5B4FC; --fascia-bassa-tenue: #13301F; --fascia-media-tenue: #1D2B22; --fascia-alta-tenue: #221F4A; --fascia-alta-testo: #C7D2FE; --grafico-griglia: #1F2D24; --grafico-asse: #93A699; --serie-1: #4ADE80; --serie-2: #A5B4FC; --serie-3: #FBBF24; --serie-4: #67E8F9; --serie-5: #F0ABFC; --serie-6: #BEF264; --serie-7: #93C5FD; --serie-8: #D6D3D1; --scontrino: #F3F6F1; --scontrino-meglio: #DDF2E3; --tessera: #F3F6F1; --ombra: 0 22px 44px -22px rgb(0 0 0 / .7); --ombra-piccola: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -8px rgb(0 0 0 / .6); --velo: rgb(11 18 13 / .88); } } :root[data-theme="dark"] { color-scheme: dark; --carta: #0B120D; --carta-2: #152019; --carta-3: #1D2B22; --superficie: #111A14; --superficie-2: #16211A; --inchiostro: #E8F0EA; --inchiostro-2: #B2C2B7; --inchiostro-3: #93A699; --linea: #24332A; --linea-2: #365040; --bosco: #4ADE80; --bosco-forte: #86EFAC; --su-bosco: #052E16; --bosco-tenue: #13301F; --bosco-bordo: #235C39; --bosco-testo: #86EFAC; --segnale: #22C55E; --su-segnale: #052E16; --logo-cestello: #4ADE80; --logo-spunta: #FFFFFF; --offerta: #F87171; --offerta-testo: #FCA5A5; --offerta-tenue: #3A1414; --offerta-bordo: #6B2323; --su-offerta: #2B0A0A; --attenzione: #FBBF24; --attenzione-testo: #FCD34D; --attenzione-tenue: #33250A; --attenzione-bordo: #6B4E12; --fascia-bassa: #4ADE80; --fascia-media: #8FA295; --fascia-alta: #A5B4FC; --fascia-bassa-tenue: #13301F; --fascia-media-tenue: #1D2B22; --fascia-alta-tenue: #221F4A; --fascia-alta-testo: #C7D2FE; --grafico-griglia: #1F2D24; --grafico-asse: #93A699; --serie-1: #4ADE80; --serie-2: #A5B4FC; --serie-3: #FBBF24; --serie-4: #67E8F9; --serie-5: #F0ABFC; --serie-6: #BEF264; --serie-7: #93C5FD; --serie-8: #D6D3D1; --scontrino: #F3F6F1; --scontrino-meglio: #DDF2E3; --tessera: #F3F6F1; --ombra: 0 22px 44px -22px rgb(0 0 0 / .7); --ombra-piccola: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -8px rgb(0 0 0 / .6); --velo: rgb(11 18 13 / .88); }