/* ============================================================================
   TOKENS — l'identità di QUESTA azienda
   ----------------------------------------------------------------------------
   Questi valori sono volutamente anonimi: bianco, nero, font di sistema,
   spigolo vivo. Sono un punto di partenza tecnico, non una proposta di design.

   **Se la bozza esce con questi valori, non è stata progettata.**

   Vanno riscritti tutti, seguendo gli assi assegnati nel BRIEF (palette,
   font, respiro, forma) e quello che hai scoperto sull'azienda. La palette
   la comanda il logo del cliente, non i gusti di chi scrive.
   ========================================================================= */

:root {
  /* ——— COLORE —————————————————————————————————————————————————————————————
     Palette dal disegno Figma: blu mare di Lecce. */
  --fondo: #f2f7fa;            /* sfondo pagina dal Figma */
  --fondo-bianco: #ffffff;     /* sezioni con sfondo bianco esplicito */
  --fondo-alt: #e0eef4;        /* sezioni alternate (consegna a domicilio) */
  --testo: #0f2530;            /* titoli e testo principale */
  --testo-tenue: #4a6572;      /* didascalie, descrizioni */
  --accento: #0a6083;          /* CTA, etichette di sezione */
  --su-accento: #ffffff;       /* testo sopra --accento — pulsanti */

  /* L'accento scritto come testo sul fondo chiaro: già sufficientemente scuro
     da passare 4.5:1 su #ffffff. */
  --accento-inchiostro: #0a6083;
  --bordo: #d9e3e9;

  /* Inchiostro sopra sezioni scure (apertura #0a6083, footer #0f2530). */
  --su-scuro: #ffffff;
  --su-scuro-tenue: #9eccde;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Fraunces per i titoli, DM Sans per il corpo — dal disegno Figma. */
  --font-titoli: 'Fraunces', serif;
  --font-testo: 'DM Sans', sans-serif;

  --t-corpo: clamp(0.9375rem, 0.91rem + 0.14vw, 1.0625rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-h4: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
  --t-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.5rem);
  --t-h2: clamp(1.5rem, 1.35rem + 0.75vw, 2.125rem);
  --t-h1: clamp(2rem, 1.55rem + 2.2vw, 3.5rem);

  --interlinea: 1.5;
  --interlinea-titoli: 1.15;
  --spaziatura-titoli: -0.005em;

  /* ——— RESPIRO ————————————————————————————————————————————————————————————
     Asse assegnato nel BRIEF. Tre punti di partenza, uno per valore:
       compatto  → sezione clamp(2.5rem, 2rem + 3vw, 5rem)
       ampio     → sezione clamp(5rem, 4rem + 7vw, 12rem)
       alternato → il valore ampio, e le sezioni dense usano .u-sezione--fitta
     Il respiro non è solo spazio verticale: cambia anche quanto testo sta in
     una schermata, quindi la lunghezza dei paragrafi. */
  --spazio-sezione: clamp(4rem, 3rem + 5vw, 9rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);   /* margine laterale della pagina */

  --larghezza-max: 76rem;      /* contenitore largo */
  --larghezza-lettura: 38rem;  /* colonna di testo: 60-75 caratteri, non di più */

  /* ——— FORMA ——————————————————————————————————————————————————————————————
     Forma morbida dal disegno Figma: raggi generosi, bordi sottili. */
  --raggio: 16px;
  --raggio-interattivo: 999px;
  --raggio-grande: 20px;
  --bordo-spessore: 1px;
  --ombra: none;

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————————
     Asse assegnato nel BRIEF. Questi sono i tempi di base per transizioni e
     reveal; le animazioni su scroll si scrivono con GSAP in app.js. */
  --durata: 400ms;
  --durata-breve: 180ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}