/* Dominion Dynamics web tokens (Variables/dd-primitives-figma.tokens.json)
   and the base controls every page under tools/sim shares: ink ground,
   warm khaki "low-vis" accent, 1px hairlines, 4px radius, JetBrains Mono
   caps for labels, Space Grotesk display, Geist body. */
:root {
  color-scheme: dark;
  --ink: #0a0b0d;
  --ink-90: #1b1c1e;
  --ink-80: #25262a;
  --ink-60: #3a3b3f;
  --graphite: #5a5a58;
  --graphite-70: #777775;
  --lowvis: #acaba0;
  --lowvis-70: #c2c1b8;
  --paper: #ffffff;
  --paper-soft: #f6f5f1;
  --hairline: rgba(255, 255, 255, 0.14);
  --hairline-soft: rgba(255, 255, 255, 0.08);
  --node-1: #9dde62;
  --node-2: #2be3ff;
  --node-3: #4772fc;
  --node-4: #acaba0;
  --good: #777775;
  --warning: #acaba0;
  --critical: #ffffff;
  --display: "Space Grotesk", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
button, select, input { color: inherit; }
button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--graphite);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 14px;
  min-height: 36px;
  cursor: pointer;
  transition: background 120ms;
}
button:hover { background: var(--graphite-70); }
button[aria-pressed="true"] { background: var(--lowvis); color: var(--ink); }
button.primary { background: var(--paper-soft); color: var(--ink); font-weight: 700; }
button.primary:hover { background: var(--paper); }
button.outline { background: transparent; border-color: var(--lowvis); color: var(--lowvis); }
button.outline:hover { background: var(--ink-80); }
select, input[type="number"], input[type="text"] {
  font-family: var(--sans);
  font-size: 13px;
  background: var(--ink);
  border: 1px solid var(--ink-60);
  border-radius: 4px;
  padding: 5px 8px;
  min-height: 32px;
}
input[type="number"] { font-family: var(--mono); font-size: 12px; }
input[type="checkbox"] { accent-color: var(--lowvis); }
label { color: var(--lowvis-70); }
.eyebrow, .field > span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lowvis);
}
.field { display: flex; flex-direction: column; gap: 4px; }