/* Design tokens of the panel. The only place where colors are written as hex.
   Light by default. Dark only when the user picked it (data-theme="dark", set by the theme
   switch and kept in that browser). Statuses always come with a text badge, color alone never
   carries meaning. */
:root {
  /* type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 28px;
  /* spacing, multiples of 4 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* radii */
  --radius-control: 6px; --radius-card: 10px;

  /* surfaces and text */
  --bg: #f8fafc;
  --surface: #ffffff;
  --qr-bg: #ffffff;       /* a QR code is always dark on light, in both themes */
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --nav-bg: #1e293b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #1e293b;
  --text-2: #475569;
  --muted: #64748b;
  --subtle: #94a3b8;
  --on-accent: #ffffff;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08);
  --overlay: rgba(15, 23, 42, .45);

  /* statuses: base, soft background, strong text on the soft background, line */
  /* fills (buttons, bars, markers) take --on-accent text; *-text is for text and lines on surfaces */
  --primary: #3b82f6;          --primary-text: #2563eb;    --primary-strong: #1d4ed8;  --primary-soft: #eff6ff;  --primary-soft-2: #dbeafe;  --primary-line: #93c5fd;
  --success: #10b981;          --success-text: #047857;    --success-strong: #065f46;  --success-soft: #d1fae5;
  --warning: #f59e0b;          --warning-text: #b45309;    --warning-strong: #92400e;  --warning-soft: #fef3c7;  --warning-line: #fcd34d;
  --danger: #ef4444;           --danger-text: #dc2626;     --danger-strong: #991b1b;   --danger-soft: #fee2e2;
  --neutral: #64748b;          --neutral-soft: #f1f5f9;
  --info: #3b82f6;             --info-soft: #eff6ff;
  --primary-hover: #2563eb; --success-hover: #059669; --danger-hover: #dc2626;
  --btn-neutral: #64748b; --btn-neutral-hover: #475569; --btn-disabled: #94a3b8;

  /* categorical palette for charts (Okabe-Ito, distinguishable with color blindness) */
  --chart-1: #0072b2; --chart-2: #e69f00; --chart-3: #009e73;
  --chart-4: #cc79a7; --chart-5: #56b4e9; --chart-6: #d55e00;
}

:root[data-theme="dark"] {
  --bg: #0f172a; --surface: #1e293b; --surface-2: #172033; --surface-3: #273449; --nav-bg: #0b1220;
  --border: #334155; --border-strong: #475569;
  --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8; --subtle: #64748b;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5); --overlay: rgba(0, 0, 0, .6);
  --primary: #2563eb; --primary-text: #60a5fa; --primary-strong: #93c5fd; --primary-soft: #172554; --primary-soft-2: #1e3a8a; --primary-line: #3b82f6;
  --success: #059669; --success-text: #34d399; --success-strong: #6ee7b7; --success-soft: #064e3b;
  --warning: #d97706; --warning-text: #fbbf24; --warning-strong: #fcd34d; --warning-soft: #451a03; --warning-line: #b45309;
  --danger: #dc2626; --danger-text: #f87171; --danger-strong: #fca5a5; --danger-soft: #450a0a;
  --neutral: #94a3b8; --neutral-soft: #273449; --info: #60a5fa; --info-soft: #172554;
  --primary-hover: #1d4ed8; --success-hover: #047857; --danger-hover: #b91c1c;
  --btn-neutral: #475569; --btn-neutral-hover: #64748b; --btn-disabled: #334155;
  --chart-1: #56b4e9; --chart-2: #f0b429; --chart-3: #2dd4a7; --chart-4: #e39bc0; --chart-5: #8ccaf0; --chart-6: #f08a4b;
}