/* ==========================================================================
   Tutto Spina — design token
   Ogni valore del sito nasce qui. Se serve un colore, uno spazio o un tempo
   che non c'è, si aggiunge qui e non in mezzo alle scene.

   Da dove viene la palette (non è inventata, è nelle loro fotografie):
   - acciaio   le colonne, i gocciolatoi, i banchi inox che montano
   - grafite   il sotto-banco: il buio dove stanno fusti, linee, refrigeratori
   - ambra     la birra nella linea — il colore più raro e più importante
   - schiuma   la testa della birra, la carta su cui si fanno i conti
   - rame      le colonne in rame dei pub che assistono da trent'anni
   ========================================================================== */

/* Caratteri: nessuno dei due compare negli altri siti del gruppo (verificato su
   tutto il repo, non solo sul registro).
   - League Gothic: gotico condensato da caratteri di legno, il parente più
     stretto delle lettere alte e strette del loro logo ad arco. Ha un solo
     peso: la @font-face lo dichiara per 100–900 così il browser non inventa
     un grassetto finto quando una regola chiede 700 o 800.
   - Source Serif 4: un graziato da catalogo stampato per il testo, con i
     maiuscoletti veri che fanno da etichette (niente monospaziato). */
@font-face {
  font-family: "League Gothic";
  src: url("../fonts/leaguegothic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Colore: materiali ------------------------------------------------- */
  --acciaio-50: #eef0ee;   /* fondo chiaro: luce diurna d'officina */
  --acciaio-100: #e3e6e4;
  --acciaio-200: #d2d7d5;
  --acciaio-300: #b6bdba;  /* filetti, bordi */
  --acciaio-500: #848c89;
  --grafite-500: #5a6166;  /* testo secondario su chiaro — 5,4:1 */
  --grafite-700: #2b3034;
  --grafite-800: #1d2124;
  --grafite-900: #131618;  /* inchiostro e scene buie */
  --ambra: #e8a317;        /* la birra. Su chiaro solo come campitura, mai testo */
  --ambra-chiara: #f5c55a;
  --ambra-scura: #8f5408;  /* l'ambra quando deve diventare testo su chiaro — 5,3:1 */
  --schiuma: #fbf5e6;
  --rame: #b0602f;

  /* --- Colore: ruoli ----------------------------------------------------- */
  --fondo: var(--acciaio-50);
  --testo: var(--grafite-900);
  --testo-2: var(--grafite-500);
  --filetto: var(--acciaio-300);
  --azione: var(--ambra);          /* la CTA ha il colore della birra */
  --azione-testo: var(--grafite-900);
  --buio-testo: #e9ece9;
  --buio-testo-2: #a3abaa;         /* su grafite-900 — 7,6:1 */
  --buio-filetto: #343a3e;
  --errore: #b3261e;
  --ok: #2e7d4f;

  /* --- Tipografia -------------------------------------------------------- */
  --f-display: "League Gothic", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-testo: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;

  --t-hero: min(clamp(3.6rem, 0.9rem + 7.4vw, 9.75rem), 13svh);
  --t-display: clamp(3.1rem, 1.6rem + 6vw, 7rem);
  --t-h2: clamp(2.6rem, 1.7rem + 3.5vw, 4.6rem);
  --t-h3: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  --t-corpo-l: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --t-corpo: 1.125rem;
  --t-piccolo: 1rem;
  --t-etichetta: 1.125rem;

  --interlinea-display: 0.88;
  --interlinea-testo: 1.6;
  --misura: 62ch;

  /* --- Spazio: scala 4-8-16-24-32-48-64-96-128-160 ---------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 160px;
  --scena-y: clamp(var(--s-8), 12vw, var(--s-10));
  --gutter: clamp(22px, 4vw, 48px);  /* minimo 22: su telefono la linea corre nel margine sinistro */
  --contenitore: 1320px;

  /* --- Forma: industriale, quindi spigoli quasi vivi --------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-pillola: 999px;

  /* --- Ombre: luce dall'alto, come i faretti sopra il banco -------------- */
  --ombra-1: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 1px 2px rgb(19 22 24 / 0.08);
  --ombra-2: 0 18px 40px -18px rgb(19 22 24 / 0.35);

  /* --- Tempo ------------------------------------------------------------- */
  --d-breve: 180ms;
  --d-media: 420ms;
  --d-lunga: 900ms;
  --ease-uscita: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-fluido: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Strati ------------------------------------------------------------ */
  --z-linea: 3;   /* sopra gli sfondi delle scene, ma corre solo negli spazi vuoti */
  --z-contenuto: 2;
  --z-testata: 50;
  --z-barra: 60;

  /* --- La linea ---------------------------------------------------------- */
  --linea-tubo: 12px;
  --linea-birra: 6px;
}