/* tokens.css: generato da _tools/design/sincronizza.py (--solo-token). Non si modifica: la fonte è _design/. */

/* ===== tokens ===== */

/* =====================================================================
   _design / tokens.css
   Unica fonte per colori, font, scale (testi, spaziature), forme e tempi.
   Valori ricavati dalla sales page di ZETA Evolution (ZETA-Evolution/sito/style.css), che resta congelata.
   Qui e in temi/*.css si scrivono i valori; i componenti usano SOLO queste variabili.
   Il tema di base è il Classico (blu ZETA); gli altri lo ridefiniscono (temi/).
   ===================================================================== */

:root {
  /* ---------- Colori ---------- */
  --bianco: #fff;
  --nero: #000;
  --bg: #131313;
  --bg-deep: #0b0b0c;
  --bg-raised: #1b1b1d;
  --text: #f3f5f8;
  --muted: #c8d5dc;
  --dim: #8a949b;
  --line: rgba(200, 213, 220, 0.14);
  --accent: #467ff7;
  --accent-deep: #06429e;
  --accent-soft: #9dbcff;
  --on-accent: var(--bianco);       /* testo sopra un fondo d'accento */
  --extra: var(--accent-soft);      /* secondo colore del tema (Cyberpunk: ciano) */
  --ok: #2ecc71;                    /* sì, spunta, interruttore acceso */
  --no: #ff3b3b;                    /* no, live, avviso */
  --oro: #e2b13c;                   /* voci riservate alla mentorship */
  --oro-chiaro: #f6dc8e;
  --oro-scuro: #a97b17;
  --oro-testo: #1a1204;             /* testo sopra l'oro */

  /* ---------- Font ---------- */
  --display: "Montserrat", system-ui, sans-serif;
  --body: "Poppins", system-ui, sans-serif;
  --peso-corpo: 300;

  /* ---------- Scala dei testi (da ZETA God, desktop 1280 / mobile 390) ---------- */
  --fs-h2: clamp(1.75rem, 0.74rem + 4.16vw, 4.06rem);       /* titoli di sezione: 65 / 28 px */
  --fs-h3: clamp(1.75rem, 1.2rem + 2.25vw, 3rem);           /* sottotitoli: 48 / 28 */
  --fs-btn: clamp(1.75rem, 1.53rem + 0.9vw, 2.25rem);       /* pulsanti grandi: 36 / 28 */
  --fs-lead: clamp(1.125rem, 0.96rem + 0.674vw, 1.5rem);    /* frasi in evidenza: 24 / 18 */
  --fs-body: clamp(1.125rem, 1.016rem + 0.449vw, 1.375rem); /* testo corrente: 22 / 18 */
  --fs-label: clamp(0.875rem, 0.66rem + 0.9vw, 1.375rem);   /* etichette dei numeri: 22 / 14 */
  --fs-small: clamp(0.875rem, 0.78rem + 0.25vw, 1rem);      /* note e didascalie: 16 / 14 */
  /* Misure grafiche (eccezioni ammesse dalla regola: cifre e prezzi) */
  --fs-numero: clamp(2.6rem, 7vw, 5.2rem);                  /* cifre del countdown */
  --fs-prezzo: clamp(3.4rem, 7vw, 5.6rem);                  /* prezzo di una scheda */

  /* ---------- Scala delle spaziature, a voce ---------- */
  --sp-xs: 0.5rem;                       /* minuscola: etichetta e campo; titoletto e testo sotto */
  --sp-s: 0.75rem;                       /* piccola: elementi dello stesso gruppo */
  --sp-m: 1.25rem;                       /* media: tra paragrafi, titolo e testo, padding delle schede */
  --sp-l: clamp(1.75rem, 3vw, 2.5rem);   /* grande: padding dei riquadri grandi, titolo e griglia sotto */
  --sp-xl: clamp(2.5rem, 5vw, 3.75rem); /* grandissima: tra blocchi diversi di una sezione */
  --sp-xxl: clamp(3.5rem, 8vw, 6rem);    /* enorme: distanza verticale tra sezioni */

  /* ---------- Layout ---------- */
  --gutter: clamp(1rem, 5vw, 4rem);
  --max: 77.5rem;

  /* ---------- Forma (i temi la cambiano) ---------- */
  --bordo: 1px;
  --r-s: 0.5rem;
  --r-m: 1rem;
  --r-l: 1.2rem;
  --r-btn: 1.6em;
  --r-pill: 999px;
  --taglio: none;                  /* angoli tagliati (Cyberpunk): clip-path dei riquadri */
  --tracking-etichetta: 0.6em;    /* interlettera di sopratitoli ed etichette (Cyberpunk: più stretta) */
  --maiuscole: none;               /* titoli e pulsanti in maiuscolo (Cyberpunk) */

  /* ---------- Tempi ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-s: 0.25s;
  --dur-m: 0.5s;
  --dur-l: 0.85s;

  /* ---------- Carattere del movimento (ogni tema sceglie il suo; vedi movimento.css) ---------- */
  --anim-btn-hover: btn-rimbalzo 0.55s var(--ease) 1;   /* all'hover di un bottone */
  --anim-evidenza: sheen 3.2s ease-in-out infinite;      /* parole in evidenza */
  --anim-titolo: none;                                   /* titolo che "scatta" (glitch) */
  --btn-testo-hover: none;                               /* sdoppiamento del testo all'hover */
}

/* Valori derivati dal colore d'accento: stanno su :root e su ogni elemento con data-tema,
   così un tema annidato dentro un altro (catalogo) li ricalcola con i propri colori. */
:root,
[data-tema] {
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --btn-ombra: 0 0 0 0 var(--accent-glow), 0 0.6rem 2.5rem -0.6rem var(--accent-glow);
  --btn-ombra-hover: 0 0 0 0.4rem color-mix(in srgb, var(--accent) 15%, transparent), 0 1rem 3rem -0.6rem var(--accent-glow);
  /* Parole in evidenza (Classico): sfumatura blu → azzurro con un riflesso bianco inclinato che passa */
  --evid-sfondo:
    linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--bianco) 50%, transparent) 50%, transparent 60%) 100% 0 / 300% 100% repeat-y,
    linear-gradient(95deg, var(--accent) 0%, var(--accent-soft) 100%) 0 0 / 100% 100% repeat-y;
  --evid-colore: transparent;
  --evid-corsivo: italic;
  --evid-peso: 900;
  --evid-pad: 0.2em 0.08em 0.1em 0;
  --evid-clip: text;
  /* Bottoni */
  --btn-bg-hover: var(--accent);
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--text);
  --btn-ghost-bordo: color-mix(in srgb, var(--text) 35%, transparent);
  --btn-chiaro-bg: var(--bianco);
  --btn-chiaro-fg: var(--accent-deep);
  --btn-chiaro-bg-hover: var(--bianco);
  /* Fascia countdown: blu a tutta larghezza (Classico); giallo con righe diagonali (Cyberpunk) */
  --fascia-sfondo:
    radial-gradient(ellipse 60% 120% at 85% 50%, color-mix(in srgb, var(--bianco) 16%, transparent), transparent 60%),
    linear-gradient(115deg, var(--accent-deep) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 75%, var(--bianco)) 100%);
  --fascia-testo: var(--bianco);
  --fascia-testo-soft: color-mix(in srgb, var(--bianco) 80%, transparent);
  --fascia-cifre-ombra: 0 0.4rem 2rem color-mix(in srgb, var(--accent-deep) 55%, var(--nero));
  --fascia-righe: 0;                     /* altezza delle righe diagonali in cima alla fascia */
  --fascia-riflesso: color-mix(in srgb, var(--bianco) 12%, transparent);
  /* Interruttore sì/no e spunte */
  --spunta: var(--bianco);
}

@media (max-width: 700px) {
  :root { --r-btn: 1.4em; }
}

/* ===== temi/andrea ===== */

/* Tema Andrea Tarroni (personal brand): stesso blu del Classico, font Avenir Next / Inter, movimento calmo.
   Riproduce l'aspetto attuale di Personal-Brand/site/assets/site.css. Attivo con data-tema="andrea".
   Serve soprattutto per mostrare i componenti nel catalogo con i colori e il carattere del sito. */
[data-tema="andrea"] {
  --bg: #131313;
  --bg-deep: #0b0b0c;
  --bg-raised: #1b1b1d;
  --text: #f3f5f8;
  --muted: #c8d5dc;
  --dim: #8a949b;
  --line: rgba(200, 213, 220, 0.14);
  --accent: #467ff7;
  --accent-deep: #06429e;
  --accent-soft: #9db9fb;
  --on-accent: var(--bianco);
  --extra: var(--accent-soft);
  --display: "Avenir Next", "Avenir Next LT Pro", Avenir, "Nunito Sans", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --peso-corpo: 400;
  --r-s: 0.5rem;
  --r-m: 1rem;
  --r-l: 1.25rem;
  --r-btn: var(--r-pill);
  --taglio: none;
  --maiuscole: none;
  --btn-ombra: 0 0.6rem 1.9rem var(--accent-glow);
  --btn-ombra-hover: 0 0.6rem 1.9rem var(--accent-glow);
  --evid-sfondo: none;
  --evid-colore: var(--accent);
  --evid-corsivo: normal;
  --evid-peso: inherit;
  --evid-pad: 0;
  --evid-clip: border-box;
  /* Movimento calmo: niente rimbalzo né glitch, solo un lieve sollevamento e un riflesso lento */
  --anim-btn-hover: none;
  --anim-evidenza: none;
  --anim-titolo: none;
  --btn-testo-hover: none;
}