/* ============================================================================
   TOKENS — Alfra Pianoforti, Supersano (LE)
   ----------------------------------------------------------------------------
   Modalità `redesign`: la palette viene dal marchio, non dalla direzione.
   Il bordeaux è misurato sul renderizzato del loro sito — rgb(115, 16, 24),
   il colore dei pulsanti e della fascia di chiusura di alfrapianoforti.com.
   Il resto (bianco pieno, grigi freddi, un solo accento) coincide con l'asse
   `bianco-clinico` assegnato: il loro sito è già bianco, ad alto contrasto.

   Il nero non è puro: #16110f tiene una traccia del legno e del bordeaux
   senza scaldare il bianco, che resta #ffffff.
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————— */
  --fondo: #ffffff;
  --fondo-alt: #f1f2f4;        /* grigio freddo: sezioni alternate, superfici */
  --testo: #16110f;            /* 17,6:1 su bianco */
  --testo-tenue: #575c63;      /* 6,7:1 su bianco */
  --accento: #731018;          /* bordeaux del marchio, 11,6:1 su bianco */
  --su-accento: #ffffff;
  --bordo: #e4e5e9;            /* solo separatori sottili: la forma è morbida */

  /* Superficie scura: il pannello che spezza il ritmo e il piede pagina. */
  --scuro: #1c0d10;            /* quasi nero, virato al bordeaux */
  --scuro-alt: #2a1418;
  --su-scuro: #f6f2f1;         /* 17,4:1 su --scuro */
  --su-scuro-tenue: #c2b3b3;   /* 9,3:1 su --scuro */
  --accento-chiaro: #e0a3a8;   /* l'accento leggibile su fondo scuro, 9:1 —
                                  occhielli e titoli, mai corpo del testo */

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Instrument Serif nei titoli, Hanken Grotesk nel corpo. La riga dei Google
     Fonts è in testa a index.html: cambiare solo qui non basta. */
  --font-titoli: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-testo: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --t-piccolo: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
  --t-h4: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --t-h3: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --t-h2: clamp(2.125rem, 1.7rem + 2vw, 3.25rem);
  --t-h1: clamp(3rem, 1.9rem + 5vw, 6.5rem);

  --interlinea: 1.62;
  --interlinea-titoli: 0.92;
  --spaziatura-titoli: -0.03em;

  /* ——— RESPIRO — compatto ————————————————————————————————————————————————— */
  --spazio-sezione: clamp(2.5rem, 2rem + 3vw, 5rem);
  --spazio-blocco: clamp(0.75rem, 0.55rem + 0.9vw, 1.25rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

  --larghezza-max: 78rem;
  --larghezza-lettura: 36rem;

  /* ——— FORMA — morbida ———————————————————————————————————————————————————— */
  --raggio: 1.5rem;
  --raggio-piccolo: 0.875rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0;
  --ombra: 0 1.5rem 3rem -1.5rem rgba(22, 17, 15, 0.28);

  /* ——— MOVIMENTO —————————————————————————————————————————————————————————— */
  --durata: 400ms;
  --durata-breve: 180ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}