/* tokens.css — unica fonte di verità per il frontend delle app. Non usare colori letterali nei componenti. */
:root {
  /* marca */
  --brand: #3730a3;          /* sfondo di pulsanti primari e header */
  --brand-fg: #ffffff;       /* testo su --brand */
  --brand-text: #3730a3;     /* marca usata come testo/link su sfondo pagina */
  --accent: #0d9488;         /* evidenziazioni, stato attivo */
  --accent-soft: #ccfbf1;

  /* neutri (leggermente indaco) */
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #efeff7;
  --border: #dcdce8;
  --fg: #17172b;
  --muted: #5b5b78;

  /* semantici: solo per stati, mai come marca */
  --ok: #15803d;    --ok-bg: #dcfce7;
  --err: #b91c1c;   --err-bg: #fee2e2;
  --warn: #b45309;  --warn-bg: #fef3c7;

  /* fascia di ruolo (PWA operative) */
  --role-vendite: #0a7d47;
  --role-inventario: #c2410c;
  --role-scanner: #0b5fa4;

  /* tipografia */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem;  --text-2xl: 1.75rem;

  /* forma e spazio */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-6: 1.5rem; --space-8: 2rem;
  --radius-sm: 6px;   --radius: 10px;
  --shadow: 0 1px 2px rgb(23 23 43 / .06), 0 4px 12px rgb(23 23 43 / .06);
  --touch: 44px;             /* altezza minima dei controlli toccabili */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #4f46e5; --brand-fg: #ffffff; --brand-text: #a5b4fc;
    --accent: #2dd4bf; --accent-soft: #123a37;
    --bg: #0f0f1a; --surface: #181826; --surface-2: #222236; --border: #2f2f48;
    --fg: #ececf7; --muted: #9a9ab8;
    --ok: #4ade80; --ok-bg: #12301f; --err: #f87171; --err-bg: #3a1618; --warn: #fbbf24; --warn-bg: #3a2a0b;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #4f46e5; --brand-fg: #ffffff; --brand-text: #a5b4fc;
  --accent: #2dd4bf; --accent-soft: #123a37;
  --bg: #0f0f1a; --surface: #181826; --surface-2: #222236; --border: #2f2f48;
  --fg: #ececf7; --muted: #9a9ab8;
  --ok: #4ade80; --ok-bg: #12301f; --err: #f87171; --err-bg: #3a1618; --warn: #fbbf24; --warn-bg: #3a2a0b;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px rgb(0 0 0 / .35);
  color-scheme: dark;
}