/* ======================================================================
   FOOTBALL CAREER — DESIGN TOKENS

   La grammatica identifica il gioco; fondale e luce identificano la fase.
   Questo e l'unico file autorizzato a definire la palette condivisa, la
   scala tipografica, la profondita e il ritmo. I temi di pagina impostano
   soltanto i token --scene-* e non ridisegnano i componenti.
   ====================================================================== */

:root {
  color-scheme: dark;

  /* Primitivi cromatici: mai usare direttamente nei componenti. */
  --ink-1000: #030705;
  --ink-950: #050908;
  --ink-900: #07100e;
  --ink-850: #0b1714;
  --ink-800: #101a18;
  --ink-700: #162421;
  --ink-600: #20332e;
  --ink-500: #2b3e39;
  --ink-450: #375047;

  --ivory-100: #f4f5ed;
  --sage-300: #b6c1ba;
  --sage-400: #8b9b93;

  --lime-300: #f2ff9e;
  --lime-400: #e9ff70;
  --lime-600: #a7bd38;
  --cyan-400: #75bfff;
  --green-400: #58d98a;
  --pitch-500: #48d17d;
  --amber-400: #ffb657;
  --orange-500: #ff6b35;
  --red-400: #ff6f63;
  --metal-gold: #d7ae57;
  --burgundy-500: #7a2e48;

  /* Superfici. Il contenuto non dipende mai dal fondale scenico. */
  --surface-canvas: var(--ink-900);
  --surface-scene: var(--ink-850);
  --surface-backdrop: var(--ink-950);
  --surface-content: var(--ink-800);
  --surface-content-glass: rgba(16, 26, 24, .96);
  --surface-raised: var(--ink-700);
  --surface-interactive: var(--ink-600);
  --surface-inset: var(--ink-1000);
  --surface-inset-soft: #0b1412;
  --surface-control: #101b18;
  --surface-control-hover: #16241f;
  --surface-scoreboard: #09110f;
  --surface-overlay: rgba(2, 7, 5, .88);

  /* Testo. Anche text-muted supera 4.5:1 sulla superficie piu chiara. */
  --text-primary: var(--ivory-100);
  --text-secondary: var(--sage-300);
  --text-muted: var(--sage-400);
  --text-on-accent: #101807;
  --text-on-accent-deep: #111907;

  /* Ruoli semantici: il lime resta firma e azione, non esito generico. */
  --accent-brand: var(--lime-400);
  --accent-brand-strong: var(--lime-600);
  --accent-brand-soft: rgba(233, 255, 112, .12);
  --accent-brand-glow: rgba(216, 245, 72, .20);
  --accent-player: var(--cyan-400);
  --accent-energy: var(--orange-500);
  --accent-energy-soft: rgba(255, 107, 53, .08);
  --accent-energy-line: rgba(255, 107, 53, .34);
  --accent-achievement: var(--metal-gold);
  --accent-achievement-soft: rgba(215, 174, 87, .12);
  --accent-achievement-glow: rgba(215, 174, 87, .22);
  --text-on-achievement: #1a1205;
  --shirt-print: #141a24;   /* la stampa sulla maglia: cognome e numero */
  /* Le maschere usano solo il canale alfa: il colore non si vede mai, serve
     solo un opaco qualsiasi. Sta qui perche nei fogli non vanno letterali. */
  --scene-mask: #000;
  /* La vignetta della landing: il velo che scurisce la foto dello stadio e
     l ombra ai bordi. Le percentuali stanno in screens.css, dove servono. */
  --scene-veil: #07100e;
  --scene-vignette: #020806;
  --scene-shade: #040b09;
  --scene-lamp: #ffb657;   /* i fari caldi delle scene */
  --text-on-player: #04161c;
  --state-positive: var(--green-400);
  --state-positive-strong: #35c26a;
  --state-warning: var(--amber-400);
  --state-negative: var(--red-400);
  --state-negative-strong: #ef5a52;
  --field-accent: var(--pitch-500);
  --team-home: var(--cyan-400);
  --team-away: var(--orange-500);

  /* VARIANTI DEGLI ACCENTI. Ogni accento serve in tre modi: il colore pieno,
     una versione PIU SCURA per i riempimenti (una barra piena di colore acceso
     acceca) e una PIU CHIARA per il testo sopra una tinta. Erano quindici
     valori scritti a mano in giro per i fogli, e tre di loro — #ffdd7d,
     #ffd66b, #ffe497 — erano lo stesso oro chiaro scritto tre volte. */
  --accent-brand-bright: var(--lime-300);
  --accent-brand-deep: #8fad26;
  --accent-player-bright: #8cc4f7;
  --accent-player-deep: #3d7fc4;
  --accent-achievement-bright: #ffdd7d;
  --accent-achievement-deep: #a67420;
  --state-positive-bright: #7fe0a2;
  --state-positive-deep: #1f8a49;
  --state-negative-bright: #ff9a94;
  --state-negative-deep: #a83730;
  --surface-track: #0c1119;   /* la vaschetta vuota di una barra piena */

  /* I TROFEI, per tipo: ogni famiglia ha il suo colore d identita. */
  --trofeo-top: #b6ff5c;
  --trofeo-club: #3ddbc7;
  --trofeo-naz: #c58cff;
  --trofeo-euro: #7c83ff;
  --trofeo-altro: #9fb3c8;

  /* DISEGNI: la mappa del mondo e il campo. Non sono segnali dell interfaccia,
     sono raffigurazioni di cose che esistono — per questo stanno in una
     famiglia loro e non prendono nessuno dei ranghi di colore. */
  --map-terra: #0b1310;
  --map-giocabile: #2f5c4b;
  --map-giocabile-su: #4a8a72;
  --map-scelta: #7d5c14;
  --map-pin: #486057;
  --map-pin-su: #192a25;
  --pitch-riga-a: #153e2a;
  --pitch-riga-b: #19472f;
  /* LE MAPPE DI FINE PARTITA: le disegna interfaccia-motore, i colori stanno qui
     e il suo renderer li legge con getComputedStyle. Il calore va da freddo a
     caldo, le sei fermate non sono equidistanti (0, .10, .34, .60, .82, 1) e il
     lavoro lo fa l alfa: a zero il prato si deve vedere. I tre esiti del tiro
     stanno distanti in LUMINOSITA oltre che in tinta, perche' le frecce hanno
     tutte lo stesso spessore e il colore e' l unico canale. Il campo non riusa
     --pitch-riga-a/b: creazione.css li usa gia e cambiano per motivi diversi.
     LA RAMPA VA DA GIALLO A ROSSO, e nessuna fermata puo' essere verde: il fondo
     E' verde, e un verde al 34% sopra un prato non si vede per costruzione. Ci
     ero cascato — la fermata 2, quella dove sta la maggior parte dei tocchi,
     spariva.
     I DUE PARAMETRI HANNO DUE MESTIERI, e confonderli e' l errore da non fare:
     la TINTA porta l intensita (giallo -> rosso, e' lei a dire "qui e' successo
     di piu"); l ALFA dice solo SE c e calore. Zero dove non ce n e, cosi' il
     campo si vede; coprente dove ce n e, ed e' giusto che copra. Avevo provato
     a tenere un tetto basso perche' le strisce dell erba restassero visibili
     ovunque: e' il contrario: si devono vedere DOVE NON C E CALORE. */
  --map-heat-0: rgba(255,224,102,0);   --map-heat-1: rgba(255,224,102,.20); --map-heat-2: rgba(255,182,87,.42);
  --map-heat-3: rgba(255,140,26,.62);  --map-heat-4: rgba(255,107,53,.80);  --map-heat-5: rgba(214,40,40,.94);
  --map-shot-goal: var(--green-400); --map-shot-saved: var(--amber-400); --map-shot-wide: var(--sage-400);
  --pass-ok: var(--cyan-400); --pass-assist: var(--metal-gold); --pass-ko: var(--red-400);
  --bracket-filo: color-mix(in srgb, var(--text-muted) 62%, transparent); /* 3.13:1 sul fondo card, misurato */
  --map-pitch-a: #517f4e; --map-pitch-b: #4c7849; --map-pitch-out: #416a3f; --map-pitch-line: #fff;

  /* Ranghi: distinti dagli stati funzionali. */
  --rank-unknown: var(--text-muted);
  --rank-pro: var(--accent-player);
  --rank-star: var(--accent-brand);
  --rank-legend: var(--accent-achievement);

  /* SCHIARIRE E SCURIRE una superficie. Erano bianco e nero scritti a mano in
     sessanta punti, con venti opacita diverse per il bianco. Qui hanno un nome
     perche sono l unica cosa che un tema deve poter ribaltare: sul chiaro
     "schiarire" non e piu il bianco. L opacita resta nel foglio che la usa,
     perche li dice quanto, non cosa. */
  --fx-lift: #ffffff;
  --fx-shade: #000000;

  /* Bordi ed elevazione. */
  --border-default: var(--ink-500);
  --border-subtle: #1c2c28;
  --border-strong: var(--ink-450);
  --focus-ring: var(--accent-player);
  --elevation-1: 0 8px 24px rgba(0, 0, 0, .20);
  --elevation-2: 0 24px 80px rgba(0, 0, 0, .55);
  /* Una carta appoggiata su una FOTO ha bisogno di un'ombra piena, non
     trasparente: sopra uno stadio illuminato un nero al 20% non stacca e il
     pannello sembra incollato. Era scritta a mano in cinque punti di
     fine-stagione.css finche non le ho dato un nome. */
  /* Il fondale dell hub: il velo sopra la foto e il colore che continua sotto
     di essa, campionato sul suo bordo inferiore vero. */
  --scene-hub-veil-top: rgba(3, 7, 5, .06);
  --scene-hub-veil-mid: rgba(3, 7, 5, .28);
  --scene-hub-veil-low: rgba(3, 7, 5, .66);
  --scene-hub-floor: #101710;

  --elevation-scene: 0 8px 24px var(--ink-1000);

  /* La scena cambia per fase; i componenti consumano solo i token sopra. */
  --scene-background-a: var(--surface-scene);
  --scene-background-b: var(--surface-backdrop);
  --scene-accent: var(--accent-brand);
  --scene-accent-alt: var(--accent-energy);
  --scene-glow: rgba(103, 255, 150, .10);
  --scene-dimmer: rgba(3, 7, 5, .34);

  /* Tipografia offline: nessun font remoto. */
  --font-ui: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display-ui: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  /* Scala tipografica: SETTE RUOLI, per funzione e non per misura — cosi
     quando un elemento cambia, cambiano tutti quelli che fanno il suo lavoro.
       etichetta  nomina un dato, non lo e: OVR, TITOLARITA, presenze
       nota       il contorno che spiega: soglie, tooltip, metadati
       corpo      le frasi, i nomi delle squadre, le schede, i bottoni
       valore     il dato che un etichetta introduce: Meteora, 47, 3 anni
       sezione    il titolo di un blocco: Competizioni, Allenamento
       pagina     il titolo di una schermata: Bacheca, Simone Conti
       numero     il protagonista: uno per schermata, non uno per riquadro
     La regola che li ordina: un TITOLO DI SEZIONE domina un VALORE ordinario,
     ma un NUMERO PROTAGONISTA puo' superarlo. Quindi 6,90 di media batte
     "Questa stagione", mentre "Top player" non puo' finire sotto l etichetta
     "Il tuo cammino" che lo nomina. Fuori dai sette restano tre misure da
     manifesto (--fs-num-xl, --fs-hero, --fs-display): vivono solo su fine
     stagione e fine carriera, dove il numero E' la schermata.

     La scala e FLUIDA fra 1280 e 2560 px di finestra: sotto i 1280 vale il
     minimo (identico a prima, quindi telefoni e portatili non cambiano di un
     pixel), sopra i 2560 vale il massimo. Il perche' sta nei numeri del
     mercato (Steam, agosto 2026): 1920x1080 e il 50,5% degli schermi,
     2560x1440 il 21,9%, 2560x1600 il 5,7% — meta del pubblico sta a 1920 e
     un altro quarto a 2560. Sopra i 2560 (4K e ultrawide, circa l 8%) si
     smette di crescere: una riga di testo larga tremila pixel non si legge,
     e quel pubblico ha comunque un testo grande come a 2560. */
  --type-etichetta: clamp(12px, 0.1563vw + 10px, 14px);
  --type-nota: clamp(13px, 0.2344vw + 10px, 16px);
  --type-corpo: clamp(15px, 0.2344vw + 12px, 18px);
  --type-valore: clamp(18px, 0.3125vw + 14px, 22px);
  --type-sezione: clamp(22px, 0.5469vw + 15px, 29px);
  --type-pagina: clamp(31px, 0.7813vw + 21px, 41px);
  --type-numero: clamp(38px, 0.9375vw + 26px, 50px);
  --fs-num-xl: clamp(72px, 1.5625vw + 52px, 92px);
  --fs-hero: clamp(104px, 2.0313vw + 78px, 130px);
  --fs-display: clamp(38px, 2.6563vw + 4px, 72px);

  /* Stemmi e icone non sono tipografia: scala loro, e il testo dentro uno
     stemma deriva dallo stemma e non dalla gerarchia dei testi. */
  --icon-sm: 16px; --icon-md: 24px; --icon-lg: 38px;
  --crest-sm: 32px; --crest-md: 48px; --crest-lg: 64px;  /* i titoli da manifesto: fine stagione */


  /* Larghezze massime. Prima erano numeri scritti a mano dentro i fogli, uno
     per componente: cambiare "quanto puo allargarsi una scena" voleva dire
     trovarli tutti. Crescono con la stessa regola dei corpi — fermi sotto i
     1280, al massimo dai 2560 in su — perche su uno schermo grande il
     problema non e il testo piccolo o la colonna stretta: sono tutti e due. */
  --measure-text: clamp(620px, 21.875vw + 340px, 900px);    /* una colonna che si legge: cronaca, azione */
  --measure-panel: clamp(760px, 26.5625vw + 420px, 1100px);  /* un pannello largo: la tua riga in partita */
  --measure-stage: clamp(850px, 27.3438vw + 500px, 1200px);  /* la colonna delle transizioni */
  --measure-scene: clamp(1180px, 48.4375vw + 560px, 1800px); /* la scena intera: l annuario */

  /* Spaziatura e forma. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-xs: 4px;   /* segni e targhette: cartellini, bandiere, tacche */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;  /* pillole e cerchi: tutto quello che e completamente tondo */
  --touch-min: 44px;

  /* Movimento. */
  --motion-fast: 160ms;
  --motion-state: 300ms;
  --motion-scene: 900ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Gli alias brevi (--gold, --sky, --r…) sono spariti: nessun foglio li usava
     piu, e --gold puntava alla lime, cioe il contrario di quello che dice. */}