/* Design token: unica fonte di colori, raggi, ombre e font. Tailwind (blocco @theme in
   tailwind-build/src/tailwind/input.css) e i CSS scritti a mano leggono solo
   queste variabili. Il tema scuro ridefinisce gli stessi token: nessuna
   regola duplicata per componente.
   Il tema scuro si attiva con data-theme="dark" su <html> (impostato da module/view.php). */

:root {
  /* Colore principale (blu del logo): pulsanti, link, voce attiva, focus */
  --brand: #0071ce;
  --brand-dark: #005aa5;
  --brand-soft: #e7f1fb;

  /* Superfici */
  --surface: #ffffff;
  --surface-muted: #f4f6f9;
  --border: #e2e8f0;

  /* Testo */
  --text: #1f2937;
  --text-muted: #64748b;

  /* Forme */
  --radius-card: 1rem;
  --radius-control: 0.6rem;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);

  /* Font */
  --font-main: "Overpass", ui-sans-serif, system-ui, sans-serif;

  /* Grafici: Chart.js legge questi valori da JS (ioChartColors in js/io-ui.js) */
  --chart-grid: rgba(100, 116, 139, .18);

  /* Mappa: stato della posizione dei mezzi (simboli, legenda, elenco) */
  --map-movimento: #16a34a;
  --map-fermo: #0071ce;
  --map-vecchia: #d97706;
  --map-senza: #94a3b8;
}

:root[data-theme="dark"] {
  --brand: #5aa9f0;
  --brand-dark: #3b94e3;
  --brand-soft: rgba(90, 169, 240, .16);

  --surface: #111827;
  --surface-muted: #1a2332;
  --border: #2d3748;

  --text: #e5e7eb;
  --text-muted: #94a3b8;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);

  --chart-grid: rgba(148, 163, 184, .16);

  --map-movimento: #4ade80;
  --map-fermo: #5aa9f0;
  --map-vecchia: #fbbf24;
  --map-senza: #64748b;

  color-scheme: dark;
}

body {
  background: var(--surface-muted);
  color: var(--text);
}