/* Italìque – Direzione B "Verde Istituzionale" – design tokens
   Estratti dai mockup (design/source). Valori UI verificati per contrasto WCAG AA. */
:root{
  /* Colori base */
  --c-verde-bosco:   #1E3A32; /* primario: testi titoli, header, footer, sezioni scure. 10.8:1 su pietra */
  --c-pietra:        #F2F0EA; /* fondo pagina */
  --c-bianco:        #FFFFFF; /* card, input */
  --c-travertino:    #DCD8CD; /* bordi card, divisori */
  --c-salvia:        #4F5B55; /* testo corrente secondario. 6.2:1 su pietra */
  --c-terracotta:    #A34A31; /* CTA, eyebrow, accenti, link hover. 5.15:1 su pietra, 5.86:1 con testo bianco */
  --c-corallo:       #E08A6C; /* accento decorativo, sole hero, accenti su fondo verde (4.7:1 su verde-bosco) */
  --c-cipria:        #F4DCD0; /* "macchia" dietro le icone */

  /* Verdi secondari (sezioni scure, footer, illustrazioni) */
  --c-verde-900:     #223F36;
  --c-verde-850:     #244238;
  --c-verde-800:     #27473E;
  --c-verde-700:     #2F5046;
  --c-verde-600:     #3E5C53; /* filetti su footer */
  --c-verde-500:     #4A6A60;
  --c-salvia-chiaro: #C6D1CC; /* testo secondario su fondo verde. 7.85:1 */
  --c-oliva:         #4F7355; /* foglie ulivo (illustrazioni) */

  /* Neutri caldi secondari */
  --c-sabbia-1:      #E6E1D5;
  --c-sabbia-2:      #E7E2D7;
  --c-sabbia-3:      #EAE5DA;
  --c-bordo-input:   #CFC9BC;

  /* Terracotte SOLO per pattern/maiolica decorativi (non usare per testo/UI) */
  --c-maiolica-1:    #B45A3E;
  --c-maiolica-2:    #B5553A;
  --c-maiolica-3:    #AE5238;

  /* Tipografia */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;          /* titoli, numeri, citazioni. opsz 9–144 */
  --font-sans:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;  /* testo, UI */
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;              /* dati/etichette tecniche (uso raro) */

  /* Scala tipografica (desktop → mobile, fluida con clamp) */
  --fs-display: clamp(2.625rem, 1.6rem + 3.5vw, 4.75rem); /* H1 hero: 42–44px mobile, 76px a 1440 */
  --fs-h2:      clamp(2rem, 1.4rem + 2.05vw, 3.25rem);     /* 32–34 mobile, 52px a 1440 */
  --fs-h3:      clamp(1.3rem, 1.15rem + 0.6vw, 1.875rem); /* 20–23 mobile, 24–30 desktop */
  --fs-h4:      clamp(1.2rem, 1.1rem + 0.3vw, 1.375rem);
  --fs-lead:    1.125rem;  /* 17–18px */
  --fs-body:    1rem;      /* 15–16px */
  --fs-small:   0.875rem;  /* 13–14px */
  --fs-eyebrow: 0.75rem;   /* 12px, MAIUSCOLO, letter-spacing .14–.16em, terracotta */
  --lh-tight: 1.1; --lh-snug: 1.2; --lh-body: 1.6;
  --ls-title: -0.02em; --ls-eyebrow: 0.16em;

  /* Layout */
  --container: 1200px;           /* 1440 - 2×120 */
  --gutter-desktop: 120px;
  --gutter-mobile: 20px;
  --section-py: clamp(64px, 5vw + 32px, 104px);

  /* Raggi */
  --r-pill: 999px;  /* pulsanti, chip, badge */
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px;

  /* Ombre */
  --shadow-hover: 0 14px 34px rgba(30,58,50,0.16);

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: ease-in-out;
  --dur-fast: 200ms; --dur-base: 250ms; --dur-reveal: 600ms;
}