/* ============================================================ Token — l'unica sorgente di colore, spazio, tipografia e forma ============================================================ Va caricato subito dopo Bootstrap e prima di ogni altro foglio. I nomi storici (--bg-card, --text-primary, --accent, --border, --radius…) restano in fondo come API pubblica: sono usati in oltre 500 punti del CSS e rinominarli non porterebbe nulla. Cambiano i valori, non i nomi. Ogni colore di testo qui dentro e' stato misurato sulle superfici su cui viene davvero usato. Le soglie sono quelle WCAG AA: 4.5:1 per il testo, 3:1 per gli elementi non testuali. Se tocchi un valore, rimisura. ============================================================ */ :root { color-scheme: light; /* ---- Superfici ------------------------------------------------------- La card bianca stacca dal fondo solo per 1.08:1: da sola non basta a definirsi. Serve sempre insieme a --line-strong e a un'ombra. */ --bg-app: #F4F6F8; /* fondo pagina, grigio chiarissimo neutro */ --bg-surface: #FFFFFF; /* card, pannelli, righe di tabella */ --bg-sunken: #F9FAFB; /* colonne profilo, header di tabella, pozzetti */ --bg-raised: #EEF1F5; /* hover di riga e di card */ /* ---- Inchiostro ------------------------------------------------------ Il numero e' il minimo misurato su tutte e quattro le superfici. --ink-3 a #646E7B darebbe 4.57, appena sopra soglia: si tiene il valore con margine. Schiarirlo per "alleggerire" lo porta sotto. */ --ink-1: #111827; /* 15.66 — titoli, numeri, valori */ --ink-2: #4B5563; /* 6.67 — testo corrente */ --ink-3: #5F6874; /* 4.98 — microetichette maiuscole */ --ink-inverse: #FFFFFF; /* testo sopra le tinte piene */ /* ---- Tratto ed elevazione -------------------------------------------- */ --line: #E3E7EC; /* divisori dentro le card */ --line-strong: #D5DBE3; /* bordo esterno delle card */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06); --shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 48px rgba(16, 24, 40, .10); /* ---- Accenti semantici ----------------------------------------------- Tre valori per ruolo, perche' il colore che regge come decorazione non regge come testo: base bordo, icona, filetto — >= 3:1, mai testo -ink testo — >= 4.5:1 su avorio, su card e sulla propria tinta -tint fondo delle pill, sempre con il proprio -ink sopra Le pill sono tinta pallida con inchiostro scuro, mai bianco su tinta piena: bianco su ambra da' 3.80 e bianco su oro 3.13, insufficienti. */ --gold: #B0803F; --gold-ink: #845C1E; --gold-tint: #F2E7D4; --navy: #14385F; --navy-ink: #14385F; --navy-tint: #DCE7F2; --positive: #2E7D5E; --positive-ink: #256B50; --positive-tint: #DAEDE3; --caution: #C07A14; --caution-ink: #92590B; --caution-tint: #F7E7C6; --negative: #B3261E; --negative-ink: #A81F18; --negative-tint: #F7DEDC; /* L'arancio del marchio: l'accento secondario chiesto dalla specifica. Non porta testo bianco — #E2622A con il bianco sopra da' 3.49 — quindi ha un valore pieno separato per i riempimenti. Va usato solo dove c'e' urgenza d'asta: pill di fase, tempo residuo, stella della shortlist, reparto mancante. L'interazione ordinaria (tab attiva, riga selezionata, ordinamento, link) resta navy. */ --brand: #E2622A; /* decorazione: filetti, icone, barra del timer */ --brand-solid: #BC4C1A; /* riempimenti con testo bianco sopra (5.02) */ --brand-ink: #A8410F; /* testo arancio (4.98 sulla propria tinta) */ --brand-tint: #FBE3D6; /* fondo delle pill */ /* stati premuti delle tinte piene: bianco sopra resta sempre >= 4.5 */ --navy-hover: #1D4E80; --positive-hover: #1F5C43; --negative-hover: #8E1A14; /* L'oro e' il filetto sotto il motto, l'anello del badge, il bordo di un accento. Non e' mai testo. Passato da #B8894B a #B0803F: sul grigio freddo il vecchio valore scendeva a 2.89 e non reggeva piu' nemmeno come decorazione. Per il testo oro esiste --gold-ink. */ /* ---- Tipografia ------------------------------------------------------- Una voce sola. --font-display esisteva per il serif dei titoli; ora punta allo stesso stack, cosi' i nove punti che lo citano non vanno toccati e il ruolo "titolo" resta nominato dove serve. Di Outfit sono caricati 400/500/600/700: sono gli unici pesi che il CSS puo' chiedere. Valori piu' alti collassano su 700 e la gerarchia sparisce (e' gia' successo, in 40 dichiarazioni). */ --font-ui: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-display: var(--font-ui); /* Il condensato delle maglie: nomi in stampatello sulle figurine in campo, dove la larghezza e' quella che e' e il nome deve restare intero. Caricati 500/600/700. Fuori dal campo non si usa: e' un carattere da dorso di maglia, non da interfaccia. */ --font-condensed: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; --fs-micro: 0.6875rem; /* microetichette maiuscole */ --fs-sm: 0.8125rem; /* tabelle dense, didascalie */ --fs-base: 0.9375rem; /* testo corrente */ --fs-md: 1.0625rem; /* titoli di card */ --fs-lg: 1.375rem; /* titoli di sezione */ --fs-xl: 1.75rem; /* numeri grandi delle tile */ --fs-display: 2.25rem; /* nome nella fascia */ --tracking-micro: 0.08em; --lh-tight: 1.2; --lh-base: 1.5; /* ---- Forma ------------------------------------------------------------ */ --r-xs: 6px; /* chip, pill, badge */ --r-sm: 10px; /* box e riquadri interni */ --r-md: 14px; /* card */ --r-lg: 18px; /* pannelli, modale */ --r-full: 999px; /* ---- Spazio, base 4 --------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ---- Movimento -------------------------------------------------------- */ --t-fast: 150ms; --t-base: 200ms; --ease: cubic-bezier(.2, .7, .3, 1); /* Spazio sotto la barra home dei telefoni senza tasto (viewport-fit=cover). */ --safe-bottom: env(safe-area-inset-bottom, 0px); /* ---- Piani ------------------------------------------------------------ Erano numeri sparsi decisi caso per caso. 1050 e' quello di Bootstrap per i modali e non si tocca. */ --z-sticky: 100; --z-bidbar: 200; --z-nav: 300; /* barra inferiore del telefono */ --z-sheet: 350; /* fogli che coprono la barra (offerta espansa) */ --z-dropdown: 400; --z-modal: 1050; --z-tv: 2000; --z-toast: 2100; /* ==================================================================== Compatibilita': i nomi storici, rimappati sui token nuovi ==================================================================== Sono l'API che il resto del CSS usa gia'. Nel codice nuovo usa i nomi qui sopra; questi restano perche' oltre 500 dichiarazioni li citano. */ --bg-primary: var(--bg-app); --bg-secondary: var(--bg-sunken); --bg-card: var(--bg-surface); --bg-input: var(--bg-surface); --text-primary: var(--ink-1); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); /* Rivisti uno a uno: i 79 usi di --accent sono tutti interattivi (tab attiva, bordo di focus, riga selezionata, valore in evidenza), nessuno ornamentale. Vanno tutti sul navy; l'oro entra solo nel codice nuovo. */ --accent: var(--navy); --accent-hover: var(--navy-hover); --accent-light: var(--navy-tint); /* era citato ma mai definito */ /* Puntano all'inchiostro, non alla decorazione: nel CSS esistente sono colore di testo in 53 dichiarazioni su 72. Usati come sfondo restano validi, perche' l'inchiostro e' piu' scuro e il bianco sopra ci guadagna. */ --success: var(--positive-ink); --success-hover: var(--positive-hover); --danger: var(--negative-ink); --danger-hover: var(--negative-hover); --warning: var(--caution-ink); --border: var(--line); --radius: var(--r-sm); --shadow: var(--shadow-md); /* Anche questi erano citati senza essere definiti: si risolvevano nel nulla. I due punti che li citavano stavano nella Shortlist, e sono spariti quando la vista e' passata a css/views/shortlist.css. */ --primary: var(--navy); --primary-rgb: 20, 56, 95; --bg: var(--bg-surface); /* ---- Colori di ruolo ---- Stesse tinte di prima, portate al punto in cui il bianco sopra regge: i vecchi valori davano 3.15 (P), 2.87 (D), 2.19 (C) e 3.82 (A) contro il 4.5 richiesto dal testo piccolo dei badge. */ --role-p: #1F6FA8; --role-d: #1E7A46; --role-c: #9A6210; --role-a: #B3261E; /* ---- Scala dei voti ---- La vecchia rampa distingueva i livelli sbiadendo: su riga zebrata dava da 1.65 a 3.82, sotto soglia in ogni passo. Qui la distinzione la fanno luminosita' e peso, restando tutti sopra 4.5 anche sull'hover. */ /* ---- Difficolta' dell'avversario ---- Cinque gradini dal verde al rosso. Quattro tinte su cinque sono quelle che il sito usa gia' per positivo, attenzione, marchio e negativo: una famiglia di colore sola, un token in meno da tenere allineato. Ogni inchiostro regge 4.5 sulla propria tinta e sul bianco, perche' la variante compatta e' il solo glifo su fondo chiaro. */ --diff-1-ink: #14603D; --diff-1-tint: #CFE6DA; /* molto facile 5.77 / 7.58 */ --diff-2-ink: #256B50; --diff-2-tint: #DAEDE3; /* facile 5.22 / 6.37 */ --diff-3-ink: #92590B; --diff-3-tint: #F7E7C6; /* media 4.70 / 5.74 */ --diff-4-ink: #A8410F; --diff-4-tint: #FBE3D6; /* difficile 4.98 / 6.13 */ --diff-5-ink: #A81F18; --diff-5-tint: #F7DEDC; /* molto diff. 5.72 / 7.31 */ /* ---- Il campo ---- Non e' una superficie del documento: e' una raffigurazione, come le illustrazioni degli eventi. I valori sono identici a quelli che tv-mode.css aveva scritti a mano: qui prendono un nome, non un valore nuovo, cosi' il campo smette di essere l'ultimo esadecimale in un foglio condiviso fra TV, Serie A, Fanta Rosa e Formazione. Il bianco sopra --pitch-1 misura 5.17, quindi regge anche come fondo di testo; --pitch-line e' solo il filetto perimetrale. */ --pitch-1: #1F7D3C; --pitch-2: #1B7136; --pitch-line: rgba(255, 255, 255, .12); --voto-ottimo: #14603D; /* 7.14 su zebra */ --voto-buono: #256B50; /* 6.00 */ --voto-positivo: #3C755F; /* 5.07 */ --voto-scarso: #9E4A3C; /* 5.66 */ --voto-pessimo: #A81F18; /* 6.88 */ } /* Le variabili di Bootstrap. Il selettore vale sia per (index.html) sia per , dove l'attributo si trova nelle tre pagine autonome. */ :root, [data-bs-theme="light"] { --bs-body-bg: var(--bg-app); --bs-body-color: var(--ink-1); --bs-secondary-bg: var(--bg-sunken); --bs-tertiary-bg: var(--bg-surface); --bs-emphasis-color: var(--ink-1); --bs-secondary-color: var(--ink-2); --bs-primary: #14385F; --bs-primary-rgb: 20, 56, 95; --bs-success: #2E7D5E; --bs-success-rgb: 46, 125, 94; --bs-danger: #B3261E; --bs-danger-rgb: 179, 38, 30; --bs-warning: #C07A14; --bs-warning-rgb: 192, 122, 20; --bs-link-color: #14385F; --bs-link-hover-color: #1D4E80; --bs-border-color: #E3E7EC; --bs-border-radius: 10px; }