/* ============================================================================
   TIPOGRAFIA: UNICO PUNTO DI VERITA'
   ============================================================================
   Questo file e' la copia canonica. Copie identiche vivono in:
     lorenzo-perotti-wp/wp-content/themes/lorenzo-perotti/typography-tokens.css
     lorenzo-perotti-engine/public/typography-tokens.css
   Se cambi qui, riallinea le copie (i binari dei font sono duplicati perche' le
   tre app servono file da radici diverse, ma i VALORI stanno solo qui).

   SCELTA DEL CLIENTE, 10 SETTEMBRE 2026, in chiamata, guardando il pannello
   di confronto sull'anteprima: Newsreader per i titoli, Instrument Sans per il testo,
   Bodoni Moda nero corsivo SOLO nel marchio (come sul suo Instagram).
   Sostituisce la proposta 7 dell'11 agosto (Cormorant Garamond e Space
   Grotesk). Le famiglie scartate non esistono piu': ne' i valori, ne' i
   binari. Restano in git.

   IL CORSIVO NON ESISTE IN QUESTO PROGETTO.
   Dove starebbe l'enfasi in corsivo c'e' il trattamento maiuscolo, nelle tre
   varianti in fondo al file.
   ============================================================================ */

:root {
  /* --- Le due scelte che decidono tutto ------------------------------------ */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;

  /* Bodoni Moda nero corsivo: il marchio, "Off Menu" in testata e nel piede.
     Mai nei titoli e mai nei testi: "non mi piace come testo in maiuscolo nel
     sito", parole di Lorenzo. Il corsivo generale del sito resta spento, come
     chiesto a luglio: qui e' una scelta esplicita su un elemento. */
  --font-accento: "Bodoni Moda", "Newsreader", Georgia, serif;

  /* --- Trattamento maiuscolo: parametri ------------------------------------
     Il maiuscolo non e' leggibile per default: senza le ascendenti e le
     discendenti la parola perde la sua sagoma, quindi serve piu' aria fra le
     lettere, un peso leggermente maggiore per compensare la spaziatura, e un
     corpo ridotto perche' le maiuscole occupano piu' spazio verticale del
     minuscolo con cui convivono nella stessa riga.

     I valori qui sotto sono quelli calibrati per QUESTA coppia. Newsreader ha
     corpo e occhio pieni, quindi il maiuscolo dentro un titolo puo' scendere
     un po' (0.84) con meno aria (0.08) e tenere un peso pieno a 600. */

  /* parola singola dentro un titolo o un paragrafo */
  --up-word-size: 0.84em;
  --up-word-ls: 0.08em;
  --up-word-weight: 600;

  /* riga intera, tipo occhiello sopra un titolo */
  --up-eyebrow-size: 0.72rem;
  --up-eyebrow-ls: 0.22em;
  --up-eyebrow-weight: 500;
  --up-eyebrow-lh: 1.5;

  /* sottotitolo o citazione: piu' lungo, quindi meno spaziatura */
  --up-lead-size: 0.86em;
  --up-lead-ls: 0.07em;
  --up-lead-weight: 500;
  --up-lead-lh: 1.65;
}

/* ============================================================================
   LE TRE VARIANTI DEL TRATTAMENTO MAIUSCOLO
   Sostituiscono ogni uso precedente del corsivo.
   ============================================================================ */

/* Parola o poche parole dentro un titolo o un paragrafo.
   Sostituisce <em> e .italic nei titoli. */
.up-word {
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--up-word-size);
  letter-spacing: var(--up-word-ls);
  font-weight: var(--up-word-weight);
  /* Le maiuscole hanno bisogno di un filo di respiro a sinistra, ma la
     spaziatura finale creerebbe un buco prima della punteggiatura. */
  margin-right: calc(var(--up-word-ls) * -1);
  font-variant-numeric: lining-nums;
}

/* Riga intera sopra un titolo. Sostituisce gli occhielli in corsivo. */
.up-eyebrow {
  font-style: normal;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--up-eyebrow-size);
  letter-spacing: var(--up-eyebrow-ls);
  font-weight: var(--up-eyebrow-weight);
  line-height: var(--up-eyebrow-lh);
}

/* Testo piu' lungo: sottotitoli, citazioni, lead.
   Sotto le due righe il maiuscolo affatica, quindi qui la spaziatura scende e
   l'interlinea sale. */
.up-lead {
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--up-lead-size);
  letter-spacing: var(--up-lead-ls);
  font-weight: var(--up-lead-weight);
  line-height: var(--up-lead-lh);
}

/* Il corsivo resta disattivato anche se un blocco di contenuto lo reintroduce
   (per esempio un <em> incollato dall'editor di WordPress). */
em, i, cite, address, dfn, var {
  font-style: normal;
}