/* ============================================================================
   TOKENS — Stranamente Design, Squinzano (LE)
   ----------------------------------------------------------------------------
   Palette: direzione assegnata `bianco-clinico` (bianco pieno, grigi freddi,
   contrasto alto, niente calore) con l'ACCENTO preso dal marchio.

   Il rosso non è stato indovinato: il logo scaricato da Facebook è stato
   affiancato a nove campioni etichettati e fotografato
   (`riferimento/campione.png`). Il fondo del logo cade fra #f00000 e #fa0f0f —
   rosso puro, né aranciato né magenta. Fissato a #ee0000, indistinguibile a
   occhio da quello misurato e con un vantaggio: regge 4,53:1 col bianco, quindi
   lo stesso valore fa da fondo dei pulsanti (testo bianco sopra) e da colore
   dei titoli grandi, senza doppioni.

   Il calore di questa pagina lo portano le fotografie — carta avorio,
   ceralacca dorata, verde salvia. Il fondo resta freddo apposta: scaldarlo
   verso il panna vorrebbe dire competere con le foto.
   ========================================================================= */

:root {
  /* ——— COLORE ——————————————————————————————————————————————————————————— */
  --fondo: #fdfdfd;
  --fondo-alt: #eceff1;
  --testo: #14181c;
  --testo-tenue: #5a636b;      /* 6,0:1 su --fondo */
  --accento: #ee0000;          /* misurato dal logo; 4,53:1 col bianco */
  --su-accento: #ffffff;

  /* Il rosso puro come inchiostro a corpo piccolo passa il contrasto e stanca
     lo stesso: è il difetto `corpo_saturo`. Questa è la sua versione scurita,
     6,8:1 su --fondo, per quando l'accento deve fare da testo. */
  --accento-inchiostro: #b80000;
  --bordo: #d3d8dc;

  /* ——— Superfici scure ————————————————————————————————————————————————————
     Il piede è quasi nero (16,5:1 e 9,0:1). La fascia dei premi è rossa, e lì
     il margine è stretto: bianco puro su #ee0000 misura 4,53:1 ed è l'unico
     inchiostro che regge, quindi in quella sezione site.css rilega
     --su-scuro-tenue a bianco invece che al grigio chiaro. */
  --su-scuro: #f5f6f7;
  --su-scuro-tenue: #b3b9c0;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Anton + Roboto, la coppia assegnata. Anton esiste in un peso solo (400):
     site.css deve annullare il font-weight 600 che base.css mette sui titoli,
     altrimenti il browser lo ingrassa a finto-grassetto. */
  --font-titoli: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-testo: 'Roboto', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1rem, 0.96rem + 0.28vw, 1.1875rem);
  --t-piccolo: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --t-h3: clamp(1.375rem, 1.25rem + 0.65vw, 1.875rem);
  --t-h2: clamp(1.75rem, 1.5rem + 1.3vw, 2.75rem);
  --t-h1: clamp(2.25rem, 1.65rem + 3vw, 4.25rem);

  --interlinea: 1.78;
  --interlinea-titoli: 1.22;
  --spaziatura-titoli: 0em;

  /* ——— RESPIRO — asse `compatto` ————————————————————————————————————————— */
  --spazio-sezione: clamp(2.5rem, 2rem + 3vw, 5rem);
  --spazio-blocco: clamp(1rem, 0.75rem + 1.2vw, 1.75rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

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

  /* ——— FORMA — asse `spigolo` ————————————————————————————————————————————
     Nessun raggio da nessuna parte, bordi netti da un pixel, superfici piatte.
     È la forma giusta per chi vende carta tagliata e stampata: il foglio ha
     lo spigolo vivo, e la pagina lo imita. */
  --raggio: 0;
  --raggio-interattivo: 0;
  --bordo-spessore: 1px;
  --ombra: none;

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