/* Design tokens. I colori del marchio (--brand, --accent) li imposta tenant.js dal branding del tenant:
   nei sorgenti non c'è il nome, il logo o il colore di nessuna officina. */
:root {
  --brand: #1d4ed8;
  --brand-contrast: #ffffff;
  --brand-soft: color-mix(in srgb, var(--brand) 12%, white);
  --accent: #f59e0b;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #dde1e7;
  --border-strong: #c3c9d2;
  --text: #1c2430;
  --text-muted: #5d6878;
  --text-faint: #8a94a3;

  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  /* stati dell'officina: rosso da fare, giallo in lavorazione, verde completato */
  --todo: #dc2626;
  --doing: #eab308;
  --done: #16a34a;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow: 0 4px 16px rgb(16 24 40 / 0.08);
  --shadow-lg: 0 16px 48px rgb(16 24 40 / 0.18);

  --sidebar-w: 220px;
  --topbar-h: 56px;
  --tap: 44px; /* altezza minima di un bersaglio al tocco */
}

[data-theme="dark"] {
  --bg: #0f141b;
  --surface: #171e27;
  --surface-2: #1f2833;
  --border: #2b3643;
  --border-strong: #3a4757;
  --text: #eef2f6;
  --text-muted: #a3afbd;
  --text-faint: #75818f;
  --brand-soft: color-mix(in srgb, var(--brand) 25%, #171e27);
  --ok-soft: #12351f;
  --warn-soft: #3b2c0b;
  --danger-soft: #3d1616;
  --info-soft: #172a4d;
}