:root {
  /* Colori brand */
  --color-primary: #c11058;      /* magenta/rosa - titoli, date, badge */
  --color-accent: #a8c82a;       /* verde lime - separatori, dettagli */
  --color-text: #71706f;         /* grigio - testo secondario */
  --color-text-dark: #4b4a48;    /* grigio scuro - testo principale soon */
  --color-white: #ffffff;
  --color-surface: #f7f7f7;      /* grigio chiaro - sfondi sezione (es. Hero) */
  --color-ink: #1d1d1b;          /* quasi-nero - SOLO sfondi pieni/overlay scuri (es. sezioni fotografiche a schermo intero), non per il testo */
  --color-conferenza-blue: #005ba7;   /* blu della Conferenza delle Regioni */
  --color-conferenza-azzurro: #99cbde; /* azzurro della Conferenza delle Regioni */

  /* Font */
  --font-display: 'Montserrat', sans-serif;   /* titoli, date, numeri */
  --font-body: 'Titillium Web', sans-serif;   /* testo corrente, luoghi */

  /* Border radius */
  --radius-sm: 6px;    /* datebox */
  --radius-md: 8px;    /* glass */
  --radius-lg: 12px;   /* soon */
  --radius-pill: 999px; /* soon-badge */

  /* Ombre */
  --shadow-glass: 0 24px 60px rgba(29,29,27,.28);
  --shadow-badge: 0 8px 22px rgba(193,16,88,.38);

  /* Bordi trasparenti ricorrenti */
  --border-glass: 1px solid rgba(255,255,255,.6);
  --border-datebox: 1px solid rgba(168,200,42,.5);
  --border-soon: 2px dashed rgba(168,200,42,.65);

  /* Transizioni */
  --transition-fast: .15s ease;
  --transition-hover-out: .25s ease .05s;

  /* Layout */
  /* Padding laterale mobile uniforme delle sezioni Home (≤900px), introdotto
     con la sezione "Un luogo di proposta": da riusare in ogni sezione,
     comprese quelle future. */
  --section-pad-mobile: 40px;
  /* Padding sopra/sotto mobile uniforme delle sezioni Home (≤900px): stesso
     principio di --section-pad-mobile ma per l'asse verticale, tenuto
     distinto perché i due valori non sempre coincidono. La prima sezione
     (Hero) vi somma lo scarico dell'header fisso (var(--header-height)). */
  --section-pad-mobile-y: 64px;

  /* Spazio verticale uniforme tra gli elementi interni di una sezione
     (badge → titolo → testo, blocchi di contenuto, ecc.): da riusare in
     ogni sezione, comprese quelle future. Su mobile (≤900px) scende a 16px. */
  --gap-elements: 24px;
}

@media (max-width: 900px) {
  :root { --gap-elements: 16px; }
}