/* ============================================================================
   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 —————————————————————————————————————————————————————————————
     Dal logo (foto profilo Facebook ufficiale, vedi identita.json): monogramma
     bianco su blu cornflower. --blu è quel blu, portato a un tono che regge
     AA sia come testo su chiaro sia come fondo con testo bianco sopra
     (verificato: ~5.6:1 in entrambe le direzioni). Sabbia e terracotta sono il
     territorio (spiaggia, tramonto): usate come superfici e accenti larghi,
     mai come fondo pieno sotto testo piccolo — terracotta pieno con testo
     bianco piccolo scende sotto 4:1. */
  --fondo: #fbf7f0;            /* sabbia chiara, non bianco puro */
  --fondo-alt: #f1ebe0;        /* sezioni alternate */
  --testo: #1b2130;
  --testo-tenue: #5b6472;      /* didascalie, metadati — mai testo corrente */
  --accento: #4863b6;          /* CTA, link — il blu del logo */
  --accento-chiaro: #7c97e0;   /* tinte, hover, shader di apertura */
  --su-accento: #ffffff;       /* testo sopra --accento */
  --terracotta: #c1693f;       /* accento largo: numeri, titoli, badge — mai testo piccolo sopra */
  --salvia: #7c9070;           /* accento largo: territorio/verde */
  --notte: #1f2a4d;            /* fondo scuro (footer, CTA finale) */
  --su-notte: #fbf7f0;
  --bordo: #ddd3c2;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Coppia assegnata nel BRIEF: Playfair Display (titoli, editoriale, alto
     contrasto) + Karla (testo). Il <link> Google Fonts è in index.html. */
  --font-titoli: 'Playfair Display', Georgia, serif;
  --font-testo: 'Karla', 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.5rem, 1.6rem + 4vw, 5.5rem);

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

  /* ——— RESPIRO: ampio ———————————————————————————————————————————————————— */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --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: mista ————————————————————————————————————————————————————————
     Contenitori squadrati (raggio 0), elementi interattivi a pillola. */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: 0 1.5rem 3rem -1.5rem rgb(27 33 48 / 0.25);

  /* ——— 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);
}