/* ============================================================================
   TOKENS — Vineria La Mara, Lecce
   ----------------------------------------------------------------------------
   Palette `panna-terra` assegnata nel BRIEF, copiata nei valori.
   L'unico scostamento ammesso in modalità `libero` è l'accento preso dal
   marchio: il logo della vineria è un tondo blu notte con lettering panna
   (immagine profilo Instagram, l'unico canale ufficiale). Lo stesso blu è
   nelle tende della sala di Palazzo Andretta. Vedi identita.json.
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————— */
  --fondo: #fdf8f0;            /* panna calda — assegnato */
  --fondo-alt: #f0e2cd;        /* sabbia — assegnato */
  --testo: #302418;            /* bruno scuro — assegnato */
  --su-accento: #fffaf3;       /* assegnato */
  --accento: #1f3a52;          /* blu notte del logo — 11,1:1 su --fondo */

  --terra: #96501a;            /* l'accento assegnato, qui come colore caldo
                                  secondario: 5,7:1 su --fondo, AA sul corpo */
  --testo-tenue: #6b543c;      /* derivato — 6,6:1 su --fondo, 5,5:1 su --fondo-alt */
  --bordo: #e3d3ba;            /* derivato — solo filetti, la forma è morbida */

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Bodoni Moda + Inter, assegnati. Il <link> Google Fonts in index.html
     porta gli stessi tagli: se ne cambi uno, cambia anche l'altro. */
  --font-titoli: 'Bodoni Moda', 'Times New Roman', serif;
  --font-testo: 'Inter', system-ui, -apple-system, sans-serif;

  /* Scala assegnata: si copia, non si reinventa. */
  --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;

  /* Impianto `manifesto`: i titoli di sezione vanno oltre la scala dei
     contenuti. Token in più, non al posto di --t-h2 (che resta e si usa per i
     titoli di secondo livello dentro le sezioni dense). */
  --t-manifesto: clamp(2.75rem, 1.9rem + 4.2vw, 6rem);

  /* ——— RESPIRO — `alternato` ——————————————————————————————————————————————
     Valore ampio come base; le sezioni dense usano .u-sezione--fitta. */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --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: separa il colore. */
  --raggio: 1.5rem;
  --raggio-piccolo: 0.875rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0;
  --ombra: 0 1.5rem 3rem -1.5rem rgba(48, 36, 24, 0.22);

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————————
     Le due animazioni `scrub` stanno in site.js. */
  --durata: 400ms;
  --durata-breve: 180ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}