/* ==========================================================================
   Radar Appalto — design token (redesign 09/2026) — direzione A "Cantiere"
   Un solo file di variabili per sito, pagine SEO, guide e dashboard.
   Qui NON ci sono componenti: solo valori. I componenti stanno in ui.css.

   Regole:
   - colori SEMANTICI (--ink, --cta, --ok…), mai "blu"/"arancio": la palette si cambia qui
     (o con un tema [data-theme]) senza toccare i componenti. Se i numeri di Plausible dopo il
     lancio fossero peggiori, si torna alla direzione C sostituendo SOLO questo file
     (design/tokens-C.css ha i valori);
   - spazio su base 4 px (--sp-*), tipografia in clamp() mobile-first;
   - tre soli breakpoint, documentati qui e usati ovunque:
       sm  480px  (telefono largo)     @media (min-width: 30em)
       md  768px  (tablet / tabelle)   @media (min-width: 48em)
       lg  1024px (desktop)            @media (min-width: 64em)
   Scelta di Alberto del 05/09/2026: carta calda, inchiostro scuro, UN solo colore d'azione
   (arancio segnale scurito perche' il bianco sopra passi AA), verde solo per "ok".
   Font: Atkinson Hyperlegible Next (OFL, auto-ospitato: privacy, niente Google Fonts),
   progettato per distinguere 1/l/I e b/d/p/q: il nostro utente legge dal telefono, spesso fuori.
   ========================================================================== */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* --- tipografia --- */
  --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-sans);
  --font-num: var(--font-sans);          /* numeri: cifre tabulari via font-variant-numeric */
  --fs-0: 0.8125rem;                     /* 13.8 px — note, etichette */
  --fs-1: 0.9375rem;                     /* 16 px — testo secondario */
  --fs-2: 1rem;                          /* 17 px — corpo */
  --fs-3: 1.125rem;                      /* 19 px — lead, titolo card */
  --fs-4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* h3 */
  --fs-5: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);     /* h2 */
  --fs-6: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);      /* h1 */
  --fs-7: clamp(2.4rem, 1.6rem + 4vw, 4rem);        /* numero grande */
  --lh-tight: 1.15;
  --lh: 1.5;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  /* --- spazio (base 4 px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- forme --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(27, 31, 36, 0.08), 0 2px 6px rgba(27, 31, 36, 0.06);
  --shadow-2: 0 8px 30px rgba(27, 31, 36, 0.14);
  --z-sticky: 20;
  --z-sheet: 50;
  --z-toast: 60;
  --wrap: 72rem;                         /* larghezza massima dei contenuti */
  --wrap-narrow: 44rem;
  --tap: 2.75rem;                        /* 44 px: area minima toccabile */

  /* --- colori semantici --- */
  --bg: #F7F4EE;                         /* carta */
  --surface: #FFFFFF;                    /* card, pannelli */
  --surface-2: #EFEAE0;                  /* fasce, input, righe alternate */
  --ink: #1B1F24;                        /* testo */
  --ink-2: #454B53;                      /* testo secondario */
  --ink-3: #626870;                      /* etichette, meta (AA su carta: 5.1) */
  --line: #DED8CC;                       /* bordi */
  --brand: #1B1F24;                      /* logo, titoli forti */
  --brand-ink: #FFFFFF;
  --cta: #C2410C;                        /* l'UNICO colore d'azione (bianco sopra: 5.2) */
  --cta-hover: #9A3412;
  --cta-ink: #FFFFFF;
  --accent: #FBE3D4;                     /* evidenziazione tenue (sfondo) */
  --accent-ink: #7C2D12;
  --ok: #256B43;
  --ok-bg: #E4F1E8;
  --warn: #9A4A07;
  --warn-bg: #FBEEDC;
  --danger: #B42318;
  --danger-bg: #FBE4E1;
  --focus: #C2410C;                      /* anello di focus */
  --scrim: rgba(27, 31, 36, 0.5);        /* dietro sheet/modali */
}

/* Tema scuro: non previsto in questa fase (utente in cantiere, luce forte). Il sistema resta
   chiaro anche con prefers-color-scheme: dark, per non avere due palette da mantenere. */