/* Design tokens — Zinc + Ambra. Tema via [data-theme] su <html>. */
:root {
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5; --border:#a1a1a1;
  /* Un solo peso di bordo in tutto il pannello: navbar, sidebar, campi, card,
     metriche e tabelle. Le ripetizioni (righe di tabella, righe di impostazione)
     non portano filetto affatto — si separano per banda o per respiro. */
  /* La tabella ha una superficie propria, che la stacca dal fondo pagina (1.12 di
     rapporto: --surface e --surface-2 stavano a 1.04 e 1.05, invisibili). La banda
     delle righe alternate e' calibrata su QUELLA superficie, non sul fondo pagina. */
  --table-bg:#ededf1; --row-alt:#ffffff;
  /* L'intestazione della tabella deve staccarsi da DUE superfici: il fondo della
     tabella (dove cadono le righe dispari) e la banda delle pari. Senza un fondo
     proprio ereditava quello della tabella ed era identica alla prima riga.
     Il suo inchiostro e' un passo sotto --muted, che su questo fondo darebbe 4.37:1. */
  --thead-bg:#e1e1e8; --thead-ink:#5c5c64;
  /* La freccia "attenuata" di .th-sort sulle colonne non attive: nel chiaro
     --muted gia' si stacca a sufficienza dall'inchiostro della testata. */
  --th-sort-dim:var(--muted);
  /* Il bordo della tabella e' lo stesso di tutto il resto. Il token resta perche'
     nel tema scuro serve un valore proprio, ma nel chiaro non e' piu' un'eccezione:
     esisteva solo perche' col vecchio --border (#e4e4e7) la tabella spariva. */
  --table-border:#a1a1a1;
  /* --muted scende di un passo perche' deve reggere anche sulla banda, che e' la
     superficie piu' scura su cui compare: a #71717a dava 4.03:1, sotto AA. */
  --text:#18181b; --muted:#66666e; --text-on-accent:#ffffff; --text-on-info:#ffffff;
  --accent:#d97706; --accent-hover:#b45309; --accent-bg:rgba(217,119,6,.10);
  /* Superfici accento che portano TESTO SOPRA (bottone primario, voce di menu
     attiva, selezione). Il bianco sull'ambra #d97706 da' 3.19:1, sotto i 4.5:1 di
     AA; un passo piu' scuro lo porta a 5.02:1 restando lo stesso ambra. Bordi,
     aloni di fuoco e il pallino dell'interruttore continuano a usare --accent:
     sono grafica, non testo, e la loro soglia e' 3:1. */
  --accent-solid:#b45309; --accent-solid-hover:#92400e;
  /* Stesso principio per il rosso: --danger e' la tinta, --danger-solid la
     superficie che porta testo bianco sopra. */
  --danger-solid:#dc2626;
  --success:#16a34a; --success-bg:rgba(22,163,74,.10);
  --danger:#dc2626;  --danger-bg:rgba(220,38,38,.10);
  --warning:#d97706; --warning-bg:rgba(217,119,6,.10);
  --info:#0891b2;    --info-bg:rgba(8,145,178,.10);
  /* Inchiostro sui fondi tinti. Le tinte bastano come sfondo ma non come testo:
     misurati, --success su --success-bg dava 2.95:1 e --warning 2.86:1, sotto i
     4.5:1 di AA. Nessun fondo cambia, cambia cosa ci si scrive sopra. */
  --success-ink:#166534; --warning-ink:#854d0e; --danger-ink:#b91c1c; --info-ink:#0e7490;
  /* L'accento come TESTO su una superficie chiara (link): #d97706 su bianco e'
     3.19:1. Come fondo resta lui; scritto, serve un passo piu' scuro. */
  --accent-text:#b45309; --accent-text-hover:#92400e;
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem; --space-5:3rem;
  /* Zona utile: la pagina non si stira, si affianca. La colonna di lavoro tiene una
     misura leggibile, quella di contesto raccoglie stato, azioni e diagnosi. */
  --work-max:900px; --context-w:380px; --shell-gap:2.5rem;
  /* Larghezza dell'intera applicazione: sidebar + le due colonne + il respiro del
     contenuto. Derivata, non scritta a mano, cosi' quando le colonne crescono sui
     monitor molto grandi la shell cresce con loro invece di sfasarsi.
     La usano navbar, sidebar e contenuto: si allineano alla stessa colonna invece
     di allontanarsi ognuna verso il proprio bordo. */
  --shell-w:calc(250px + var(--work-max) + var(--shell-gap) + var(--context-w) + 3rem);
  --radius-sm:.375rem; --radius:.625rem; --radius-lg:.875rem; --radius-pill:50rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow:0 4px 14px rgba(0,0,0,.10);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-sm:.8125rem; --fs:.9375rem; --fs-lg:1.0625rem;
  --z-sidebar:1020; --z-navbar:1030; --z-backdrop:1040; --z-dropdown:1050; --z-toast:1080;
}
/* Sui monitor molto grandi le colonne crescono invece di lasciare il vuoto:
   la zona utile passa da 1320 a 1560px, la shell la segue da sola. */
@media (min-width:2560px){
  :root{--work-max:1100px;--context-w:420px}
}
[data-theme="dark"] {
  --bg:#18181b; --surface:#27272a; --surface-2:#1f1f23; --border:#3f3f46;
  --table-bg:#232328; --row-alt:#2d2d33;
  --thead-bg:#35353d; --thead-ink:#a1a1aa; --table-border:#3f3f46;
  /* Nel tema scuro --muted vale #a1a1aa, identico a --thead-ink: la freccia
     "attenuata" (.th-sort su una colonna non attiva) si leggeva dello stesso
     colore dell'etichetta, cioe' niente affatto attenuata. Un token dedicato,
     piu' scuro ma sopra 3:1 (soglia grafica) sul fondo della testata:
     (#86868f su #35353d) = 3.37:1. */
  --th-sort-dim:#86868f;
  --text:#e4e4e7; --muted:#a1a1aa; --text-on-accent:#271a04; --text-on-info:#04252b;
  --accent:#f59e0b; --accent-hover:#fbbf24; --accent-bg:rgba(245,158,11,.16);
  /* Nel tema scuro l'ambra chiara con inchiostro scuro era gia' conforme: la
     superficie che porta testo e' la stessa dell'accento. */
  --accent-solid:#f59e0b; --accent-solid-hover:#fbbf24;
  /* Nel tema scuro --danger e' un rosso chiaro (#f87171): ottimo come testo su
     fondo tinto, ma il bianco sopra ci dava 2.77:1 e il bottone sembrava rosa
     slavato. La superficie resta il rosso pieno, che col bianco fa 4.83:1. */
  --danger-solid:#dc2626;
  --success:#4ade80; --success-bg:rgba(22,163,74,.16);
  --danger:#f87171;  --danger-bg:rgba(220,38,38,.16);
  --warning:#fbbf24; --warning-bg:rgba(217,119,6,.16);
  --info:#22d3ee;    --info-bg:rgba(8,145,178,.16);
  /* Nel tema scuro tinte e accento erano gia' sopra AA: inchiostro = colore stesso. */
  --success-ink:#4ade80; --warning-ink:#fbbf24; --danger-ink:#f87171; --info-ink:#22d3ee;
  --accent-text:#f59e0b; --accent-text-hover:#fbbf24;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25); --shadow:0 4px 14px rgba(0,0,0,.35);
}