/* ============================================================================ FantaManager — Design Tokens (single source of truth) Concept: "Album & Campo" — nostalgia del fantacalcio fisico (figurine Panini, panno verde del Subbuteo, tabelloni segnapunti) in una UI manageriale moderna, mobile-first. Tutto è tokenizzato: nessun magic number nei componenti. Temi: light di default, dark via [data-theme="dark"] sull' (oppure prefers-color-scheme se l'utente non ha scelto). Tutti i colori rispettano contrasti WCAG AA per testo/sfondo. ============================================================================ */ :root { /* ---- Brand palette (raw scale) -------------------------------------- */ /* Verde campo (Subbuteo felt) — colore firma del brand */ --pitch-50: #e9f5ee; --pitch-100: #c9e7d5; --pitch-200: #95cfb0; --pitch-300: #5fb389; --pitch-400: #319a6b; --pitch-500: #1e7d4f; /* primario */ --pitch-600: #166440; --pitch-700: #114e33; --pitch-800: #0d3b27; --pitch-900: #08281b; /* Verde bosco — colore dell'INTERFACCIA dal redesign 2026-07-31 (PRODUCT-REDESIGN §4.16). Famiglia separata da --pitch-*: il campetto resta verde per conto suo in entrambi i temi, e ribasare i suoi token avrebbe ricolorato pedine e campo insieme all'interfaccia. Nel tema scuro il verde deve restare percepibile COME verde e non scivolare nel nero: è una scelta approvata, non un difetto di contrasto. */ --forest-50: #eef4ef; --forest-100: #d3e3d8; --forest-200: #a7c6b2; --forest-300: #6fa383; --forest-400: #3d7f5d; --forest-500: #1f6446; /* primario interfaccia */ --forest-600: #17513a; --forest-700: #0f4131; --forest-800: #0b382b; /* superficie base del tema scuro */ --forest-900: #06281f; /* Arancio Fantasista: CTA dominante, stato attivo, notifiche, accenti editoriali. */ --fanta-orange-300: #ffb07a; --fanta-orange-400: #ff8a4b; --fanta-orange-500: #ff620f; /* riempimento CTA */ --fanta-orange-600: #d94700; /* Arancio per TESTO su fondo crema: #d94700 sul crema è 3,61:1 e non passa AA. Questo è il valore da usare quando l'arancio è inchiostro e non superficie. Il test ContrastTokensTest verifica entrambi i temi, quindi il valore non può regredire in silenzio. */ --fanta-orange-ink: #9c3200; /* Stadio notturno: superfici di partita e stato, con radice verde-petrolio. */ --night-900: #05161a; --night-800: #0a2027; --night-700: #0f2f38; --night-600: #164450; --night-text: #eaf2f2; --night-muted: #9fbcc2; --sky-300: #8fc7d8; --sky-500: #267a91; --sky-600: #1d6175; --sky-700: #154b5b; /* Carta da album (warm cream) — calore nostalgico delle superfici */ --paper-50: #fffdf8; --paper-100: #faf6ec; --paper-200: #f1ead7; --paper-300: #e4d9bf; --paper-400: #cdbd9a; /* Luce fredda: controparte diurna dello stadio petrolio. */ --mist-50: #f8fbfc; --mist-100: #edf3f5; --mist-200: #e1ebee; --mist-300: #c8d9de; --mist-400: #a9c0c7; /* Inchiostro freddo per superfici chiare. */ --blue-ink-900: #10262d; --blue-ink-700: #29434b; --blue-ink-500: #546c73; --blue-ink-300: #81969c; /* Accent retro (arancio da scatola Subbuteo / stampa anni '70) */ --amber-300: #f2b277; --amber-400: #ec934a; --amber-500: #e3742f; /* accent */ --amber-600: #c25a1e; /* Inchiostro (near-black con tinta calda) */ --ink-900: #15211b; --ink-700: #2c3a32; --ink-500: #50615a; --ink-300: #8a9991; /* Stati */ --red-500: #c8402f; /* danger / cartellino rosso / sconfitta */ --red-600: #a32f22; --green-ok: #2e9e63; /* success / vittoria */ /* Verde USATO COME TESTO: `--green-ok` sulla carta crema sta a 3,43:1, sotto AA. Stessa regola già applicata a oro, rosso e arancio: la tinta piena è per le superfici, l'inchiostro per il testo (spunta degli obiettivi, audit UI/UX 2026-08-14). */ --green-ok-ink: #1f7a4a; --amber-warn: #d99412; /* warning / diffida */ --blue-info: #1f5a91; /* info — ritarato: #2a6fb0 non passava AA sulla carta crema scura */ --gold-500: #c9a227; /* capitano, "momento magico", premio — SUPERFICIE, non testo */ --gold-ink: #7a5c00; /* oro USATO COME TESTO: il #c9a227 su crema sta a 2,38:1 */ --gold-on: #1a1400; /* inchiostro sopra una superficie oro piena */ /* Squadre — indaco/cremisi, non azzurro/arancio: casa e trasferta condividevano la tinta (e `--away-500` era esattamente `--role-att`) con difensore e attaccante, quindi nella stessa scheda partita due semantiche diverse si presentavano con lo stesso colore. */ --home-500: #2c3f8f; /* casa — indaco */ --away-500: #9c2340; /* trasferta — cremisi */ /* ---- I due strati di "Album & Campo" -------------------------------- Il progetto ha DUE superfici semantiche, non una superficie che cambia col tema: · STADIO — blu-petrolio notturno SEMPRE, anche nel tema chiaro: header, hero della home, superfici partita. È il telaio del prodotto e il posto dove "succede" il calcio. Per questo i token `--stadium-*` sono identici nei due temi: lo stadio non è una conseguenza del dark mode. · ALBUM — i contenuti gestionali (rosa, mercato, classifiche, "Cosa puoi fare"). Carta crema `--paper-*` nel tema chiaro (la carta sostituisce il bianco, non il blu), superfici petrolio nel tema scuro. Regole d'uso dei colori, valide in tutta l'app — REDESIGN 2026-07-31, PRODUCT-REDESIGN §4.16. Supera la regola precedente («il verde non tocca l'interfaccia», 2026-07-28), che era legata al primario celeste-petrolio ormai sostituito: · verde bosco `--forest-*` / `--color-primary`: il colore dell'INTERFACCIA — telaio, header, navigazione, superfici, link. · crema/avorio `--paper-*`: sostituisce il bianco nel tema chiaro; è il testo nel tema scuro. · arancio Fantasista `--color-accent`: CTA dominante, stato attivo, notifiche, indicatori, avanzamenti, piccoli richiami editoriali. Mai una grande superficie decorativa. Come TESTO su crema si usa `--color-accent-ink`, che passa AA. · verde campo `--pitch-*`: SOLO la rappresentazione fisica del campo (campetto, pedine). Resta una famiglia separata da `--forest-*` proprio perché il campetto deve restare verde in entrambi i temi senza dipendere dal colore dell'interfaccia. -------------------------------------------------------------------- */ --stadium-900: var(--forest-900); --stadium-800: var(--forest-800); --stadium-700: var(--forest-700); --stadium-600: var(--forest-600); --stadium-text: var(--paper-100); --stadium-muted: var(--forest-200); --stadium-info: var(--forest-200); --stadium-border: rgba(255,255,255,0.10); --stadium-border-strong: rgba(255,255,255,0.18); --stadium-panel: rgba(255,255,255,0.045); --stadium-arc: rgba(255,255,255,0.035); --stadium-warning: var(--fanta-orange-300); /* Petrolio "acceso": partire da --night-700 tiene lo stadio distinguibile dalle superfici dell'album anche nel tema scuro, che è petrolio come lui. */ --stadium-surface: linear-gradient(180deg, var(--stadium-700), var(--stadium-900)); /* ---- Semantic tokens (USA QUESTI nei componenti) -------------------- */ /* Strato Album, tema chiaro: carta crema al posto del bianco-celeste. I token --paper-* erano dichiarati ma non usati da nessuna superficie: era il motivo per cui il tema chiaro leggeva come una UI SaaS monocromatica invece che come un album. Cambiano le SUPERFICI, non il colore d'interfaccia: primario, link e CTA restano petrolio. */ --color-bg: var(--paper-100); --color-surface: var(--paper-50); --color-surface-2: var(--paper-200); --color-surface-muted: var(--paper-200); --color-surface-sunken: var(--paper-300); --color-border: var(--paper-300); --color-border-strong: var(--paper-400); /* Verde inchiostro su carta calda: è il contrasto che tiene insieme i due strati. */ --color-text: var(--forest-900); --color-text-muted: #4b5d51; /* Terzo gradino della gerarchia testuale. Non è decorativo: ci vivono hint, timestamp, range e le righe del Centro attività, quindi deve passare AA sul fondo PEGGIORE su cui compare, che è `--color-surface-2` e non `--color-surface`. Il valore precedente (#6d8074) stava a 3,51:1 lì sopra. Resta cromaticamente distinto da `--color-text-muted`: la gerarchia non si regge solo sul colore, ma anche su dimensione, peso e spaziatura. */ --color-text-subtle: #566b5f; --color-text-on-brand: #ffffff; --color-primary: var(--forest-500); --color-primary-hover: var(--forest-600); --color-primary-soft: var(--forest-100); /* Il verde primario è una SUPERFICIE. Quando è INCHIOSTRO serve un token suo, come già per l'arancio (`--color-accent-ink`): nel tema chiaro coincide col primario, nel tema scuro no, perché lì `--color-primary` è un verde medio che come testo scende sotto AA. */ --color-primary-ink: var(--forest-500); /* L'arancio pieno è la superficie della CTA dominante; sopra ci va inchiostro scuro, non bianco. Per l'arancio USATO COME TESTO su crema serve --color-accent-ink, che passa AA. */ --color-accent: var(--fanta-orange-500); --color-accent-hover: var(--fanta-orange-600); --color-accent-ink: var(--fanta-orange-ink); --color-on-accent: var(--forest-900); /* Link di testo (prosa): verde bosco su carta chiara, verde chiaro su fondo scuro — così restano leggibili in entrambi i temi (il blu di default del browser era illeggibile sul verde scuro, feedback 2026-07-24). */ --color-link: var(--forest-600); --color-link-hover: var(--forest-700); --color-success: var(--green-ok); --color-success-ink: var(--green-ok-ink); --color-warning: var(--amber-warn); --color-danger: var(--red-500); /* Rosso USATO COME TESTO: `--red-500` sul verde-petrolio del tema scuro sta a 2,32:1 (era il caso della ✕ che rimuove un giocatore dalla rosa). Stesso schema di `--color-accent-ink`. */ --color-danger-ink: var(--red-600); --color-info: var(--blue-info); --color-gold: var(--gold-500); --color-gold-ink: var(--gold-ink); --color-on-gold: var(--gold-on); --color-home: var(--home-500); --color-away: var(--away-500); /* Ruoli (badge P/D/C/A). Le tinte restano le quattro di sempre — portiere giallo, difensore azzurro, centrocampista verde, attaccante arancio — ma la lettera dentro il badge usa `--color-on-role`: il bianco non passava AA su nessuna delle quattro. */ --role-por: #d9a441; /* portiere — giallo */ --role-dif: #2f8fd0; /* difensore — azzurro */ --role-cen: #2e9e63; /* centrocampista — verde */ --role-att: #e2703f; /* attaccante — arancio (schiarito quel tanto che regge l'inchiostro) */ --color-on-role: #0d1a12; --pawn-skin: #e9c39c; /* incarnato giocatore stilizzato */ /* Anello di focus: arancio, l'unico accento che si stacca sia dalla crema sia dal verde bosco. Usato da una sola regola :focus-visible globale in app.css. */ --color-focus: var(--fanta-orange-600); /* ---- Tipografia ----------------------------------------------------- */ --font-display: "Bebas Neue", "Arial Narrow", "Oswald", sans-serif; /* tabellone / figurina */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* numeri/punteggi */ /* scala tipografica (mobile-first, rem) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-display: 3.5rem; /* 56 — punteggio */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal:1.6; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --tracking-wide: 0.04em; /* ---- Spaziatura (scala 4px) ----------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ---- Raggi ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Ombre (morbide, "carta") --------------------------------------- */ --shadow-sm: 0 1px 2px rgba(5,22,28,0.08); --shadow-md: 0 2px 8px rgba(5,22,28,0.10); --shadow-lg: 0 8px 24px rgba(5,22,28,0.14); --shadow-pop: 0 12px 40px rgba(5,22,28,0.22); /* ---- Z-index -------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-bottomnav: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ---- Breakpoint (riferimento per @media / container) ---------------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ---- Scala dei ritratti dei narratori ------------------------------ Quattro gradini, uno per intenzione: prima ne convivevano diciotto (40…208px), nati uno alla volta per contenere un layout. Il volto vale ~26% dell'altezza del taglio `close`, quindi la dimensione del riquadro decide se il personaggio si riconosce: alla scala si abbina lo zoom (`--art-zoom`), non il contrario. Misure e prove in docs/prodotto/ARTWORK-SITE-AUDIT-2026-07-26.md §17. */ --art-sign: 56px; /* segnale di stato in riga densa — volto ~28px */ --art-badge: 80px; /* segnale che identifica chi parla — volto ~40px */ --art-portrait: 112px; /* ritratto del balloon, mobile — volto ~56px */ --art-portrait-lg: 160px; /* ritratto del balloon, da 1024px — volto ~61px */ --art-zoom-face: 1.9; /* inquadratura sul volto: 56/80/112 */ --art-zoom-bust: 1.45; /* mezzo busto, c'è spazio per spalle e gesto: 160 */ /* ---- Tap target & motion ------------------------------------------- */ --tap-min: 44px; /* accessibilità: target minimo */ --topbar-h: 56px; --duration-fast: 120ms; --duration-base: 220ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Dark mode: scelta esplicita ------------------------------------- Superfici petrolio, come il resto dell'interfaccia: lo stacco con lo stadio lo dà la luminosità (--stadium-surface parte da --night-700), non un cambio di famiglia. */ :root[data-theme="dark"] { --color-bg: var(--forest-800); --color-surface: #0e4132; --color-surface-2: #12503d; --color-surface-muted: #16553f; --color-surface-sunken:var(--forest-900); --color-border: #1c5a46; --color-border-strong: #2b7159; --color-text: var(--paper-100); --color-text-muted: #b7c9bb; /* Come nel tema chiaro, il vincolo è `--color-surface-2`: #8ba593 stava a 3,53:1 sulle righe del Centro attività. */ --color-text-subtle: #a6bfad; /* Nel tema scuro il primario è un verde CHIARO: il bianco sopra stava a 2,90:1, cioè un chip attivo o una pedina della bottom-nav che nessuno riusciva a leggere. Stesso ragionamento già applicato a `--color-on-accent`: sopra una superficie chiara ci va inchiostro scuro. */ --color-text-on-brand: var(--forest-900); --color-primary: var(--forest-300); --color-primary-hover: var(--forest-200); --color-primary-soft: #0d4634; /* `--forest-300` come testo sta a 3,98:1 su `--color-surface` e a 3,23:1 su `--color-surface-2`: va bene per riempire, non per scrivere. L'inchiostro primario del tema scuro è due passi più chiaro (5,07:1 sul fondo peggiore). */ --color-primary-ink: var(--forest-200); /* Stati e squadre ritarati sulle superfici scure: i valori di :root erano pensati per la carta crema e sul verde-petrolio scendevano fino a 1,77:1 (casa su `--color-surface-2`). */ --color-info: #9ecbee; --color-danger-ink: #ffa196; --color-success-ink: #4fc389; --color-gold: #e8c65a; --color-gold-ink: #edd07a; --color-home: #c2b8f8; --color-away: #f2a7bb; /* Stesse quattro identità cromatiche, schiarite: i badge di ruolo devono staccarsi dal fondo scuro, e l'inchiostro (`--color-on-role`) resta quello di :root. */ --role-por: #e8bd63; --role-dif: #5cb0e8; --role-cen: #4fc389; --role-att: #f08a5c; /* L'arancio pieno passa AA come testo sul fondo pagina, NON sulle superfici alzate: `orange-400` stava a 4,01:1 su `--color-surface-2`, che è il fondo del balloon del narratore. La variante inchiostro sale quindi di uno scalino anche qui, come nel tema chiaro. */ --color-accent: var(--fanta-orange-400); --color-accent-hover: var(--fanta-orange-300); --color-accent-ink: var(--fanta-orange-300); --color-on-accent: var(--forest-900); --color-focus: var(--fanta-orange-400); --color-link: var(--forest-200); --color-link-hover: var(--forest-100); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 2px 8px rgba(0,0,0,0.5); --shadow-lg: 0 8px 24px rgba(0,0,0,0.6); --shadow-pop: 0 12px 40px rgba(0,0,0,0.7); } /* ---- Dark mode: automatico se l'utente non ha scelto ----------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: var(--forest-800); --color-surface: #0e4132; --color-surface-2: #12503d; --color-surface-muted: #16553f; --color-surface-sunken:var(--forest-900); --color-border: #1c5a46; --color-border-strong: #2b7159; --color-text: var(--paper-100); --color-text-muted: #b7c9bb; --color-text-subtle: #a6bfad; --color-text-on-brand: var(--forest-900); --color-primary: var(--forest-300); --color-primary-hover: var(--forest-200); --color-primary-soft: #0d4634; --color-primary-ink: var(--forest-200); --color-info: #9ecbee; --color-danger-ink: #ffa196; --color-success-ink: #4fc389; --color-gold: #e8c65a; --color-gold-ink: #edd07a; --color-home: #c2b8f8; --color-away: #f2a7bb; --role-por: #e8bd63; --role-dif: #5cb0e8; --role-cen: #4fc389; --role-att: #f08a5c; --color-accent: var(--fanta-orange-400); --color-accent-hover: var(--fanta-orange-300); --color-accent-ink: var(--fanta-orange-400); --color-on-accent: var(--forest-900); --color-focus: var(--fanta-orange-400); --color-link: var(--forest-200); --color-link-hover: var(--forest-100); } }