/* Design tokens: unica fonte per colori, tipografia, spazi e forme. */
:root {
  /* Colori */
  --color-primary: #0b4c8c;
  --color-primary-strong: #083a6b;
  --color-primary-soft: #e8f0f8;
  --color-text: #1b232c;
  --color-text-muted: #4a5560;
  --color-text-inverse: #ffffff;
  --color-bg: #ffffff;
  --color-bg-alt: #f3f5f8;
  --color-surface: #ffffff;
  --color-border: #d5dbe1;
  --color-border-strong: #6b7785;
  /* Focus (sito pubblico e area riservata): un solo anello, verde salvia.
     Contrasto: 3,8:1 su bianco, 3,5:1 su crema e grigio, 3,3:1 sull'azzurro.
     Su header blu e footer scuro l'anello è bianco (8,6:1 e 13,3:1). */
  --color-focus: #4f8f6c;
  --color-success: #1e6b3a;
  --color-success-soft: #e7f3eb;
  --color-info-soft: #eef4fa;
  --color-footer-bg: #233140;
  --color-footer-text: #ffffff;

  /* Tipografia */
  --font-sans: "Titillium Web", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.625rem;
  --font-size-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 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: 4rem;

  /* Layout */
  --container-max: 72rem;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --card-min: 15rem;
  /* Paginazione: area di tocco minima 44 px (2,75rem). */
  --pagine-target: 2.75rem;

  /* Forme */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.08);
  --shadow-md: 0 4px 12px rgb(16 24 40 / 0.12);

  /* Livelli (z-index) */
  --z-header: 100;
  --z-skip-link: 200;

  /* Header sticky: altezza della barra (valori di riserva, il JS li misura) */
  --header-height: 4.5rem;
  --header-height-desktop: 4.5rem;
  --header-pad: var(--space-4);
  --header-pad-compatto: var(--space-2);
  --header-scroll-gap: var(--space-2);
  --shadow-header: 0 2px 8px rgb(16 24 40 / 0.25);

  /* Marchio nell'header (riquadro bianco con icona blu) */
  --brand-mark-size: 2rem;
  --brand-mark-size-desktop: 2.5rem;
  --brand-mark-scala-compatto: 0.8;
  --brand-mark-bg: #ffffff;
  --brand-mark-color: var(--color-primary);

  /* Box contatti */
  --z-dialog: 300;
  --dialog-max: 38rem;
  --dialog-backdrop: rgb(16 24 40 / 0.6);
  --color-error: #b3261e;
  --color-error-soft: #fdecea;

  /* Striscia fissa di icone decorative (home) */
  --striscia-icon-size: 2rem;
  --striscia-icon-size-desktop: 2.5rem;
  --striscia-gap: 2rem;
  --striscia-opacity: 0.6;
  --striscia-sfumatura: 12%;

  /* Stemma nel footer */
  --stemma-height: 11rem;
  --stemma-height-mobile: 7rem;
  --stemma-opacity: 0.55;

  /* Area riservata */
  --color-warning: #7a4f00;
  --color-warning-soft: #fff4d6;
  --admin-miniatura: 4rem;
  --admin-accesso-max: 28rem;
  --admin-numero-size: 2.5rem;

  /* Icone */
  --icon-size: 1.25em;

  /* Movimento */
  --transition-fast: 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
  }
}