/* ============================================================
   tokens.css — Sistema di design gestionale Perazzeta
   Fonte di verità: DESIGN.md. Importato in ogni pagina, PRIMA
   degli <style> inline, così i token sono disponibili ovunque
   mentre i moduli si migrano uno alla volta.
   ============================================================ */

/* --- Font: Inter self-hosted (vendor/), subset latin (accenti IT inclusi) --- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/vendor/inter-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/vendor/inter-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/vendor/inter-latin-600.woff2') format('woff2'); }

:root {
  /* Colori — palette Tesla-like */
  --blu:        #3E6AE1;  /* SOLO elementi interattivi: bottoni primari, link, focus, tab attiva */
  --blu-hover:  #2E56C4;
  --nero:       #171A20;  /* testo principale */
  --grigio-600: #5C5E62;  /* testo secondario, icone a riposo */
  --grigio-300: #D0D1D2;  /* bordi, divisori */
  --grigio-100: #F4F4F4;  /* sfondi di sezione, righe alternate */
  --bianco:     #FFFFFF;  /* sfondo base */

  /* Semantici — SOLO per stati, mai decorativi */
  --ok:         #2F7D4F;
  --attenzione: #8A5A15;  /* era #B7791F: 3.6:1 su bianco, sotto il minimo 4.5:1 di §6. Nuovo valore 5.9:1, regge anche a 13px (StatusDot). */
  --errore:     #B42318;

  /* Spaziatura — scala 4px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* Forma e profondità */
  --radius: 8px;
  --radius-pill: 999px;  /* solo badge e switch: ogni altro elemento usa --radius */
  --ombra: 0 1px 3px rgba(23, 26, 32, 0.08);
}

/* --- Numeri sempre tabellari (celle, prezzi, quantità, percentuali) --- */
.num { font-variant-numeric: tabular-nums; }

/* --- Icone (sprite Lucide /icone.svg): 20px, stroke 1.75, currentColor.
   Il colore segue il testo del contesto → blu dentro link/bottoni, grigio a riposo. --- */
.ico { width: 20px; height: 20px; flex: none; vertical-align: -0.2em; }
.ico--16 { width: 16px; height: 16px; }
.ico--24 { width: 24px; height: 24px; }

/* --- StatusDot: pallino + etichetta testuale (mai il colore da solo) --- */
.status { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 500; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status--ok  { color: var(--ok); }
.status--att { color: var(--attenzione); }
.status--err { color: var(--errore); }
.status--neu { color: var(--grigio-600); }

/* --- Bottoni: un solo primario per schermata. Il testo dice cosa fa. --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
       font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
       padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); border: 1px solid transparent;
       cursor: pointer; text-decoration: none; white-space: nowrap;
       transition: background-color .15s ease, border-color .15s ease; }
.btn--primario   { background: var(--blu); color: var(--bianco); }
.btn--primario:hover   { background: var(--blu-hover); }
.btn--secondario { background: var(--bianco); color: var(--nero); border-color: var(--grigio-300); }
.btn--secondario:hover { background: var(--grigio-100); }
.btn--ghost      { background: transparent; color: var(--blu); }
.btn--ghost:hover      { background: var(--grigio-100); }
/* Disabilitato: mai opacity (§4/PATCH-8) — porterebbe il testo sotto il contrasto minimo. */
.btn:disabled    { background: var(--grigio-100); color: var(--grigio-600); border-color: var(--grigio-300); cursor: not-allowed; }

/* --- Skeleton di caricamento (§5): sempre nella forma del contenuto, mai un blocco unico.
   Sotto prefers-reduced-motion resta fermo (blocco @media in fondo). --- */
.skeleton { background: var(--grigio-100); border-radius: var(--radius);
            animation: skeleton 1.2s ease-in-out infinite alternate; }
@keyframes skeleton { to { opacity: .45; } }

/* --- Toast: un solo aspetto in tutta l'app (§5/PATCH-12). Sfondo --nero sempre;
   icona check(--ok) o alert-triangle(--attenzione) 20px, in basso al centro. Vedi toast.js.
   Gli errori persistenti NON passano dal toast: banner inline. --- */
.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300;
              display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; pointer-events: none; }
.toast { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--nero); color: var(--bianco);
         font-size: 14px; font-weight: 500; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
         box-shadow: var(--ombra); pointer-events: auto; animation: toast-in .15s ease; }
.toast .ico { width: 20px; height: 20px; flex: none; }
.toast--ok .ico  { color: var(--ok); }
.toast--att .ico { color: var(--attenzione); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Banner d'errore inline (§5): per errori PERSISTENTI (es. caricamento fallito)
   NON usare il toast — mostrare cosa è successo + come rimediare, con azione. --- */
.banner-errore { display: flex; align-items: center; gap: var(--sp-3); background: var(--grigio-100);
                 border: 1px solid var(--grigio-300); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
                 color: var(--nero); font-size: 14px; line-height: 1.45; }
.banner-errore .ico { color: var(--errore); width: 20px; height: 20px; flex: none; }
.banner-errore .be-testo { flex: 1; }

/* --- Focus da tastiera: sempre visibile, mai rimosso (§6) --- */
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* --- Movimento ridotto: disattiva le transizioni non essenziali (§6) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}