/* Design tokens ported from pack-merger */
:root {
  color-scheme: light;
  --paper: 250 249 246;
  --paper-card: 255 255 255;
  --paper-border: 230 227 218;
  --ink: 21 23 31;
  --ink-soft: 57 61 69;
  --ink-muted: 118 123 133;
  --accent: 19 72 220;
  --accent-hover: 15 58 184;
  --accent-soft: 232 237 252;
  --danger: 200 40 60;
  --dot-color: 21 23 31;
  --scrollbar-thumb: 216 212 200;
  --scrollbar-thumb-hover: 196 192 178;
}
.dark {
  color-scheme: dark;
  --paper: 16 18 23;
  --paper-card: 26 29 36;
  --paper-border: 47 51 60;
  --ink: 237 238 240;
  --ink-soft: 199 202 208;
  --ink-muted: 141 146 156;
  --accent: 96 146 255;
  --accent-hover: 130 168 255;
  --accent-soft: 30 41 74;
  --danger: 255 105 120;
  --dot-color: 255 255 255;
  --scrollbar-thumb: 51 55 64;
  --scrollbar-thumb-hover: 66 71 82;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
  color: rgb(var(--ink-soft));
  background-color: rgb(var(--paper));
  background-image: radial-gradient(rgb(var(--dot-color) / 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: color .15s, background-color .15s;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--scrollbar-thumb)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--scrollbar-thumb-hover)); }

.font-display { font-family: "IBM Plex Serif", Georgia, serif; font-style: italic; font-weight: 300; }
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; }

.ink { color: rgb(var(--ink)); }
.muted { color: rgb(var(--ink-muted)); }
.accent { color: rgb(var(--accent)); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--ink-muted)); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 4px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper-card)); color: rgb(var(--ink-soft));
  transition: color .12s, border-color .12s, background-color .12s;
}
.btn:hover { border-color: rgb(var(--accent)); color: rgb(var(--accent)); }
.btn.primary { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: #fff; font-weight: 600; }
.btn.primary:hover { background: rgb(var(--accent-hover)); border-color: rgb(var(--accent-hover)); color: #fff; }
.btn.danger:hover { border-color: rgb(var(--danger)); color: rgb(var(--danger)); }
.btn.sm { height: 28px; padding: 0 9px; font-size: 12px; }
.btn.icon { width: 32px; padding: 0; }
.btn:disabled { cursor: not-allowed; background: rgb(var(--paper-border)); color: rgb(var(--ink-muted)); border-color: rgb(var(--paper-border)); }
.btn svg { width: 16px; height: 16px; }

/* Inputs */
.input {
  width: 100%; height: 36px; padding: 0 10px; border-radius: 4px; font: inherit; font-size: 14px;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper)); color: rgb(var(--ink));
}
.input:focus { outline: none; border-color: rgb(var(--accent)); }

/* Cards */
.card { border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper-card)); border-radius: 4px; }