:root,
body[data-theme='light'] {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-soft: #eff6ff;
  --surface-strong: #dbeafe;
  --text: #0f172a;
  --muted: #475569;
  --border: #cbd5e1;
  --primary: #1e40af;
  --primary-weak: #3b82f6;
  --accent: #f59e0b;
  --success: #15803d;
  --danger: #b91c1c;
  --focus: #2563eb;
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --row-alt: #f8fafc;
  --row-hover: #eff6ff;
  --radius: 8px;
  --sidebar-width: 320px;
  --font-body: 'Fira Sans', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-mono: 'Fira Code', 'Consolas', monospace;
}

body[data-theme='dark'] {
  --bg: #0b1120;
  --surface: #111827;
  --surface-soft: #172033;
  --surface-strong: #1f2a44;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: #334155;
  --primary: #60a5fa;
  --primary-weak: #93c5fd;
  --accent: #fbbf24;
  --success: #4ade80;
  --danger: #f87171;
  --focus: #93c5fd;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  --row-alt: #0f172a;
  --row-hover: #1e293b;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.07), transparent 260px), var(--bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
button, select, input { font: inherit; }