:root {
  --exchange: #172522; --paper: #FFFFFF; --cream: #F6F7F5; --line-raw: #D7DDD9;
  --jade: #438B78; --amber: #D99028; --night: #101715; --night-panel: #18221F; --chalk: #F0F4EF;

  /* The sidebar is always the dark exchange panel, in both themes, so these don't vary with
     light/dark like the surface tokens below. */
  --sidebar-surface: #172522; --sidebar-raised: #1F2B27; --sidebar-line: #2F3D38;
  --sidebar-text: #F0F4EF; --sidebar-muted: #B8C4BF; --sidebar-faint: #8A9791;
  --sidebar-control-line: #65756E;

  --surface-page: var(--cream);
  --surface-raised: var(--paper);
  --surface-inset: #EEF1EF;
  --text-primary: var(--exchange);
  --text-muted: #596560;
  --line: var(--line-raw);
  --signal-receive: var(--jade);
  --signal-confirm: var(--amber);
  --signal-receive-text: #2F6B5C;
  --signal-confirm-text: #805316;
  --signal-error: #B44736;
  --control-line: #74817B;
  --on-confirm: var(--exchange);
  --focus: #2F6B5C;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #101412; --surface-raised: #161B19; --surface-inset: #1C2320;
    --text-primary: var(--chalk); --text-muted: #A8B2AE; --line: #303936; --control-line: #687670; --focus: #7FC7B0;
    --signal-receive: #67B6A0; --signal-confirm: #FFC268; --signal-receive-text: #7FC7B0; --signal-confirm-text: #FFC268; --signal-error: #FF8A78; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface-page: #101412; --surface-raised: #161B19; --surface-inset: #1C2320;
  --text-primary: var(--chalk); --text-muted: #A8B2AE; --line: #303936; --control-line: #687670; --focus: #7FC7B0;
  --signal-receive: #67B6A0; --signal-confirm: #FFC268; --signal-receive-text: #7FC7B0; --signal-confirm-text: #FFC268; --signal-error: #FF8A78; color-scheme: dark;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font: 16px/1.65 var(--font-body); }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-size: 0.875em; }
.display { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em; }
.status-fact { color: var(--signal-receive-text); }
.status-inference, .status-field-pattern, .status-disputed { color: var(--text-muted); }