/* ============================================================================
   TOKENS — Stabilimento Balneare Molo 13, Frigole (Lecce)
   Nessun logo trovato online: palette dalla direzione di categoria assegnata
   nel BRIEF (calda e del territorio), vedi DA-CONFERMARE.md.
   Contrasti verificati (WCAG AA, testo normale) sulle coppie usate in pagina.
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————
     Sabbia, terracotta, verde pineta, azzurro cielo: i toni di Frigole. */
  --fondo: #fbf6ee;
  --fondo-alt: #f0e4d3;        /* sezioni alternate, superfici */
  --testo: #2e2a24;
  --testo-tenue: #6b5f4f;      /* didascalie, metadati — mai testo corrente */
  --accento: #a8501f;          /* terracotta — CTA, link, il colore che si ricorda */
  --su-accento: #fff8ef;       /* testo sopra --accento — 5.2:1 */
  --bordo: #e4d5be;

  --verde-salvia: #b9c4a7;     /* sfondo chip/badge, sempre con --testo sopra */
  --blu-cielo: #a9cbd4;        /* sfondo chip/badge alternativo, sempre con --testo sopra */

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Instrument Serif nei titoli (solo peso 400/italic: mai font-weight alto
     sui titoli, vedi override in site.css), Hanken Grotesk nel corpo. */
  --font-titoli: 'Instrument Serif', Georgia, serif;
  --font-testo: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 2rem);
  --t-h2: clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
  --t-h1: clamp(2.75rem, 1.8rem + 4.5vw, 6rem);

  --interlinea: 1.6;
  --interlinea-titoli: 1.08;
  --spaziatura-titoli: -0.01em;

  /* ——— RESPIRO ————————————————————————————————————————————————————————————
     Alternato: il valore ampio è il normale, le sezioni dense usano
     .u-sezione--fitta (vedi base.css). */
  --spazio-sezione: clamp(5rem, 4rem + 6vw, 11rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

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

  /* ——— FORMA ——————————————————————————————————————————————————————————————
     Morbida: raggi generosi, superfici piene, nessun bordo — la separazione
     la fa il colore. */
  --raggio: 1.75rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0px;
  --ombra: 0 24px 48px -28px rgba(46, 42, 36, 0.35);

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————————
     Riservato: solo reveal d'ingresso (già coperto da app.js) + hover CSS. */
  --durata: 400ms;
  --durata-breve: 180ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}