/* ===========================================================
   THE BEGGARS — Design tokens
   Un solo posto per colori, tipografia, spazi e tempi.
   =========================================================== */

:root {
  /* ---------- Colore ----------
     I fondi non sono nero puro: su OLED farebbe il "buco". La saturazione sta
     solo sull'accento. */
  --c-bg:          #0a0d0b;   /* verde-nero: il fondo di una bottiglia */
  --c-bg-elev:     #101512;   /* superfici sollevate (card, barre) */
  --c-bg-deep:     #060806;   /* footer / crediti */
  --c-ink:         #f0ece0;   /* bianco sporco, tirato al caldo */
  /* Su --c-bg stanno a 9,6:1 e 5,0:1. Il secondario regge la bio intera, il
     terzo i crediti in corpo piccolo: sotto 4,5:1 quello non passa AA. */
  --c-ink-dim:     #b5b7a8;   /* testo secondario */
  --c-ink-faint:   #7e8271;   /* metadati, disabilitati */
  --c-accent:      #2f9e4f;   /* verde irlandese */
  --c-accent-hi:   #4fd07a;   /* hover / focus */
  --c-line:        rgb(var(--c-ink-rgb) / 0.14);
  --c-line-strong: rgb(var(--c-ink-rgb) / 0.32);

  /* Le stesse tinte in terne RGB, per comporre veli a opacità diverse con
     rgb(... / alpha) senza riscrivere il colore. */
  --c-ink-rgb:   240 236 224;
  --c-shade-rgb: 6 8 6;
  --c-wash:      rgb(var(--c-ink-rgb) / 0.04);   /* evidenziazione all'hover */

  /* Colori di brand: hover dei link social e icone dei bottoni di ascolto */
  --c-whatsapp:  #25d366;
  --c-facebook:  #1877f2;
  --c-instagram: #e1306c;
  --c-spotify:   #1ed760;
  --c-apple:     #fa243c;
  --c-amazon:    #25d1da;
  --c-youtube:   #ff0033;
  --c-mail:      #ffa32f;

  /* ---------- Tipografia ---------- */
  /* Cambiare famiglia vuol dire toccare tre punti: queste due righe e il
     <link> a Google Fonts in index.html e in epk.html. */
  --f-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scala fluida: il valore centrale usa i vw, i due estremi lo bloccano.
     Cambiando la root font-size sui monitor enormi (vedi in fondo) l'intera
     scala si adatta a 1440p / 4k senza aggiungere breakpoint. */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.88rem);
  --t-sm:   clamp(0.86rem, 0.82rem + 0.2vw, 1rem);
  --t-base: clamp(1rem, 0.94rem + 0.28vw, 1.06rem);
  --t-md:   clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --t-lg:   clamp(1.35rem, 1.1rem + 0.95vw, 2rem);
  --t-xl:   clamp(1.9rem, 1.4rem + 1.5vw, 3rem);
  --t-2xl:  clamp(2.6rem, 1.7rem + 2.5vw, 5rem);

  /* La hero è tarata a mano sulla scala precedente, più generosa: questi due
     valori la tengono ferma mentre le sezioni rimpiccioliscono (vedi .hero). */
  --t-hero-base: clamp(1rem, 0.95rem + 0.25vw, 1.19rem);
  --t-hero-md:   clamp(1.12rem, 1.03rem + 0.45vw, 1.44rem);

  --lh-tight: 0.92;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --ls-display: 0.01em;
  --ls-wide: 0.18em;

  /* ---------- Spazio ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);

  /* ---------- Layout ---------- */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
  --container-max: 1200px;
  --nav-h: 4.5rem;
  --radius: 2px;          /* quasi zero: l'estetica è da manifesto, non da app */

  /* ---------- Movimento ---------- */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-nav: 100;
  --z-overlay: 200;
  --z-lightbox: 300;
}

/* Monitor molto grandi: alzo la base rem, tutta la scala segue.
   Così su 4k il sito non diventa una miniatura al centro dello schermo. */
@media (min-width: 2200px) {
  :root {
    font-size: 20px;
    --container-max: 1500px;
  }
}

@media (min-width: 3000px) {
  :root {
    font-size: 24px;
    --container-max: 2000px;
    --nav-h: 5.25rem;
  }
}