/* ============================================================
   TOKENS — l'unico file da toccare per cambiare l'aspetto del sito.
   Colori, font, spazi, raggi, ombre, velocità animazioni.
   ============================================================ */
:root {
  /* Colori (tema chiaro, contrasto morbido) */
  --bg:            #eef0f6;   /* fondo pagina (le card hanno lo stesso colore: neumorfismo) */
  --bg-soft:       #eef0f6;   /* fondo sezioni alternate */
  --surface:       #eef0f6;   /* card */
  /* Neumorfismo: luce da in alto a sinistra, ombra in basso a destra */
  --neu-light:     rgb(255 255 255 / 0.95);
  --neu-dark:      rgb(163 171 195 / 0.45);
  --neu-out:       -8px -8px 18px var(--neu-light), 8px 8px 18px var(--neu-dark);
  --neu-out-sm:    -4px -4px 10px var(--neu-light), 4px 4px 10px var(--neu-dark);
  --neu-out-lg:    -10px -10px 22px var(--neu-light), 12px 12px 24px var(--neu-dark);
  --neu-in:        inset -4px -4px 10px var(--neu-light), inset 4px 4px 10px var(--neu-dark);
  --ink:           #1c1f26;   /* testo principale */
  --ink-soft:      #4b5160;   /* testo secondario */
  --ink-muted:     #7a8093;   /* didascalie */
  --line:          #e4e7ee;   /* bordi */

  --accent:        #2f6df6;   /* blu primario (link, CTA) */
  --accent-ink:    #ffffff;   /* testo sopra accent */
  --accent-soft:   #e8effe;   /* fondo chip/hover */
  --accent-2:      #7b5cf5;   /* viola secondario (gradienti) */
  --accent-3:      #ff8a3d;   /* arancio per il banner 3D */

  /* Tipografia */
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --fs-xs:  0.8rem;
  --fs-sm:  0.9rem;
  --fs-md:  1rem;
  --fs-lg:  clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
  --fs-xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* Spazi */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4rem, 3rem + 5vw, 8rem);  /* tra sezioni */
  --gutter: clamp(1rem, 4vw, 2.5rem);          /* margine laterale */
  --container: 72rem;                          /* larghezza massima contenuto */
  --container-narrow: 46rem;                   /* larghezza testi lunghi */

  /* Forme */
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.4rem;
  --radius-pill: 999px;

  /* Ombre */
  --shadow-sm: 0 1px 2px rgb(20 24 40 / 0.06), 0 1px 1px rgb(20 24 40 / 0.04);
  --shadow-md: 0 8px 24px -10px rgb(20 24 40 / 0.18), 0 2px 6px rgb(20 24 40 / 0.05);
  --shadow-lg: 0 24px 60px -20px rgb(20 24 40 / 0.28);

  /* Animazioni */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 800ms;
  --reveal-distance: 28px;   /* di quanto salgono gli elementi quando appaiono */
  --hover-lift: -4px;        /* di quanto si alzano le card al passaggio del mouse */
}