/* Design tokens — lifted verbatim from prototype.html so the shipped UI
   matches the approved design. */
:root {
  --paper: #faf8f3;
  --paper2: #f3f0e8;
  --card: #ffffff;
  --ink: #1a1a1a;
  --ink2: #4a4843;
  --muted: #8a877e;
  --faint: #b5b1a6;
  --line: #e3dfd4;
  --line2: #d6d1c4;
  --red: #e0483d;
  --red-soft: #fbeae8;
  --ok: #2f7d5b;
  --ok-soft: #e8f2ec;
  --warn: #9a6b00;
  --warn-soft: #f6efdd;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.serif { font-family: Georgia, 'Times New Roman', serif; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; border: 1px solid;
}
.tag.red { color: var(--red); background: var(--red-soft); border-color: #f3cdc8; }
.tag.ok { color: var(--ok); background: var(--ok-soft); border-color: #c5e0d2; }
.tag.warn { color: var(--warn); background: var(--warn-soft); border-color: #e6d6ac; }
.tag.plain { color: var(--ink2); background: var(--paper2); border-color: var(--line2); }
.btn {
  border-radius: 6px; padding: 11px 18px; font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: inherit; transition: 0.12s;
}
.btn.primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn.primary:hover { background: #000; }
.btn.red { background: var(--red); color: #fff; border: 1px solid var(--red); }
.btn.red:hover { background: #c93a30; }
.btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--ink2); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:disabled { opacity: 0.5; cursor: default; }