/* ============================================================================
   TOKENS — Moro Guest House, Lecce
   ----------------------------------------------------------------------------
   Palette assegnata (verde-bosco) applicata nei valori dati dal BRIEF.
   L'unica aggiunta è --vino: il bordeaux del disco del loro logo Instagram,
   usato come superficie di sezione (la tavola / Bar Moro), mai come fondo
   di pagina né come accento. Dichiarato in identita.json e DA-CONFERMARE.md.

   Contrasti calcolati su --fondo #1a2b20 (L = 0.0205):
     --testo       12.7:1  AAA
     --testo-tenue  5.6:1  AA   (4.8:1 su --fondo-alt)
     --accento      7.9:1  AAA
     --bordo        4.6:1
     --su-accento su --accento  9.0:1
     --testo su --vino          9.6:1
   ========================================================================= */

:root {
  /* ——— COLORE ——————————————————————————————————————————————————————————— */
  --fondo: #1a2b20;
  --fondo-alt: #24382a;
  --testo: #e6efe6;
  --testo-tenue: #8fa593;
  --accento: #9ccb6a;
  --su-accento: #10200f;
  --bordo: #7d9580;

  /* Eco del marchio: il bordeaux del logo. Superficie, non accento. */
  --vino: #6b2029;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Familjen Grotesk + Figtree. Il <link> Google Fonts in index.html deve
     restare allineato a questi due nomi. */
  --font-titoli: 'Familjen Grotesk', Georgia, serif;
  --font-testo: 'Figtree', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-piccolo: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --t-h4: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --t-h3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --t-h2: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --t-h1: clamp(2.75rem, 1.8rem + 4.4vw, 6rem);

  --interlinea: 1.72;
  --interlinea-titoli: 1.05;
  --spaziatura-titoli: -0.015em;

  /* ——— RESPIRO — ampio ————————————————————————————————————————————————— */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

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

  /* ——— FORMA — mista: contenitori squadrati, interattivi a pillola —————— */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: none;

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

  /* Altezza dell'intestazione sticky: usata da scroll-margin-top delle
     ancore, così nessun titolo di sezione finisce sotto la barra. */
  --altezza-header: 4.75rem;
}