/* ==========================================================================
   STORIE DI SEGNI — TEMA (colori, font, misure)
   --------------------------------------------------------------------------
   Questo è l'UNICO file da toccare per cambiare palette o font.
   Tutto il resto del CSS (style.css) usa solo queste variabili.

   COME CAMBIARE UN COLORE
   Modifica il valore esadecimale accanto al nome. Es.: --colore-primario.

   COME CAMBIARE UN FONT
   1. Scarica il font in formato .woff2 (da Google Fonts o dal designer)
      e mettilo nella cartella /fonts.
   2. Aggiungi (o sostituisci) la regola @font-face in css/fonts.css.
   3. Cambia qui il nome della famiglia in --font-titoli o --font-testo.
   Non serve toccare nient'altro.
   ========================================================================== */

:root {

  /* ---------- COLORI (ispirati alla cover del podcast) ------------------ */

  /* Grigio della cover: usato per la fascia hero, così la cover "si fonde"
     con lo sfondo. Deve corrispondere al grigio dell'immagine (#ADADAD). */
  --colore-hero:            #ADADAD;

  /* Sfondo pagina (carta chiara, leggermente calda) e variante per le fasce
     alternate, così le sezioni si distinguono senza linee. */
  --colore-sfondo:          #F1EFEB;
  --colore-sfondo-alt:      #E5E2DC;

  /* Bianco delle card (il bianco della "D" nella cover). */
  --colore-carta:           #FBFAF8;

  /* Testo principale, testo attenuato e colore dei "tratti" disegnati. */
  --colore-testo:           #1E1B19;
  --colore-testo-attenuato: #5A514B;
  --colore-tratto:          #1E1B19;

  /* Terracotta della scritta "SEGNI": accento primario (link, titoli, badge). */
  --colore-primario:        #BF5639;
  --colore-primario-scuro:  #9E4630;   /* hover / focus */

  /* Giallo della scritta "STORIE" e del microfono: accento secondario
     (sottolineature, evidenziazioni, numeri episodio). */
  --colore-secondario:      #F3DA4B;

  /* Fondo scuro (footer, riquadro del logo Sono Cose Serie) e testo su scuro. */
  --colore-scuro:           #2A2624;
  --colore-testo-su-scuro:  #F1EFEB;

  /* Colore brand Spotify: usato SOLO sul bottone "Segui su Spotify".
     Non cambiare: è il colore ufficiale della piattaforma. */
  --colore-spotify:         #1DB954;
  --colore-spotify-testo:   #0B0B0B;


  /* ---------- FONT --------------------------------------------------------
     I font sono serviti dal nostro server (cartella /fonts), nessun CDN.
     Le famiglie devono corrispondere ai nomi in css/fonts.css.
     Le famiglie dopo la virgola sono i fallback di sistema. */

  --font-titoli: "Chewy", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-testo:  "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  /* Pesi. Nunito Sans è un font variabile: qualsiasi valore 200–1000 funziona.
     Chewy ha un solo peso (400). Se cambi font, adegua questi valori. */
  --peso-titoli:   400;
  --peso-testo:    400;
  --peso-grassetto: 700;

  /* Spaziatura lettere dei titoli (Chewy sta meglio con un filo d'aria). */
  --spaziatura-titoli: 0.01em;


  /* ---------- MISURE ---------------------------------------------------- */

  --larghezza-max:  1120px;   /* larghezza massima del contenuto */
  --raggio:         14px;     /* arrotondamento card e bottoni */
  --raggio-piccolo: 8px;
  --spessore-tratto: 2px;     /* bordo "disegnato" delle card */
  --ombra: 4px 4px 0 var(--colore-tratto);  /* ombra piatta, stile fumetto */

  /* Scala tipografica fluida: si adatta da mobile a desktop senza media query. */
  --testo-base:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --testo-h1:    clamp(2.6rem, 1.8rem + 3.5vw, 4.6rem);
  --testo-h2:    clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  --testo-h3:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}