/* Design token Uniservice — brand book §10-§13.
   Questo file cambia solo se cambia il brand. */

:root {
  /* Colori */
  --verde: #bad43b;        /* blocchi, CTA primaria, accenti. Mai per il testo. */
  --verde-scuro: #5e7a12;  /* link, testo accent, icone */
  --antracite: #262a2e;    /* testo, titoli, sezioni scure */
  --grigio-testo: #565b62; /* testo secondario */
  --grigio-bordo: #e3e5df; /* separatori decorativi: righe, bordi delle card */
  /* Bordo dei controlli del form. Il criterio 1.4.11 chiede 3,0 fra il controllo e
     ciò che gli sta intorno, e il bordo è l'unica cosa che disegna il campo: il
     grigio decorativo qui farebbe 1,27 su bianco. Questo fa 4,26 su bianco e 3,91
     su --sfondo-chiaro, quindi regge il campo su entrambi i fondi della pagina. */
  --grigio-bordo-forte: #767b82;
  --sfondo-chiaro: #f4f6ec;
  --bianco: #ffffff;

  --successo: #3e8e3f;
  --avviso: #e39a00;
  --errore: #c63a2e;
  --info: #2c6bb3;

  /* Testo su fondo antracite */
  --su-scuro: #e7e8e4;
  --bordo-scuro: #3a4046;

  /* Spaziatura, griglia 8px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 120px;

  /* Forma */
  --r-ctrl: 6px;
  --r-card: 10px;
  --ombra: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ombra-alta: 0 8px 24px rgba(38, 42, 46, 0.12);
  --max-w: 1140px;

  /* Tipografia */
  --font-titolo: "Archivo", "Roboto", system-ui, sans-serif;
  --font-testo: "Inter", "Roboto", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", monospace;

  /* Motion */
  /* Curve: quint per le entrate (parte decisa, si posa piano), cubic per i
     movimenti che restano sullo schermo. Le uscite sono più corte delle entrate. */
  --e-entrata: cubic-bezier(0.23, 1, 0.32, 1);
  --e-movimento: cubic-bezier(0.645, 0.045, 0.355, 1);
  --t-veloce: 150ms var(--e-entrata);
  --t-medio: 240ms var(--e-entrata);
  --t-uscita: 160ms var(--e-movimento);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

/* L'header è sticky e alto 73px a ogni larghezza (.header__interno ha min-height 72px).
   Senza scroll-padding ogni salto a un'ancora finisce sotto la barra: su mobile
   il titolo della sezione bersaglio sparisce del tutto. 72 + 16 di respiro. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

img, picture, svg { max-width: 100%; display: block; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--verde-scuro); }

:focus-visible {
  outline: 2px solid var(--verde-scuro);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Su fondo antracite il focus verde scuro sparisce: fa 2,94 contro il fondo, sotto
   il 3,0 del criterio 1.4.11. Il verde chiaro fa 8,65. Vale per tutte e tre le zone
   antracite della pagina, non solo per le sezioni: topbar e piede hanno link propri. */
.sezione-scura :focus-visible,
.topbar :focus-visible,
.piede :focus-visible { outline-color: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Marcatura dei dati non ancora verificati: visibile in pagina, cercabile nel codice. */
.is-placeholder {
  background: rgba(227, 154, 0, 0.14);
  box-shadow: inset 0 -1px 0 var(--avviso);
}