/* ==========================================================================
   tokens.css — Design token (colori, tipografia, spaziature)
   Ordine dei layer: dichiarato qui una volta sola, vale per tutti i file CSS.
   ========================================================================== */
@layer reset, base, layout, components, print;

:root {
  color-scheme: light dark;

  /* Colori (tema chiaro). Contrasti verificati per WCAG 2.2 AA:
     --c-ink su --c-bg ≈ 15:1 · --c-muted su --c-bg ≈ 6,7:1 · --c-link su --c-bg ≈ 6,3:1
     --c-brand-ink su --c-brand ≈ 8:1 */
  --c-bg: #f6f8f4;
  --c-surface: #ffffff;
  --c-ink: #14231a;
  --c-muted: #4a5a50;
  --c-line: #cfd8d0;
  --c-brand: #4dd14a;      /* verde storico del marchio */
  --c-brand-ink: #0b2a14;  /* testo su verde brand */
  --c-deep: #0c2a14; /*0d3a1c;       /* verde scuro: header, footer, velo della hero */
  --c-link: #17692b;
  --c-focus: #0b57d0;

  /* Tipografia: font di sistema = 0 KB e nessuna richiesta a terzi (GDPR) */
  --font-body: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --fs-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-1: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --fs-2: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-3: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);

  /* Forme e spaziature */
  --radius: 6px;
  --gutter: 1rem;
  --max-w: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0f1713;
    --c-surface: #17221b;
    --c-ink: #e9f1ea;
    --c-muted: #a9b9ae;
    --c-line: #2c3b31;
    --c-link: #6fe06c;
    --c-focus: #8ab4ff;
  }
}