/*
 * components/json-pretty.css — syntax coloring for embedded JSON that
 * json-pretty.js pretty-prints inside the live log surfaces (the Logs
 * terminal viewer and the "Live activity" feed). Both surfaces render on
 * --color-terminal-bg, so one palette (from tokens.css, D5) reads well in
 * both. Structural punctuation stays neutral; values are colored by type.
 */

.json-pretty {
  display: block;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  color: var(--color-terminal-fg);
  border-left: 2px solid var(--color-json-border);
  padding-left: var(--space-2);
  margin: var(--space-1) 0;
}

.json-tok--key { color: var(--color-json-key); }
.json-tok--string { color: var(--color-json-string); }
.json-tok--number { color: var(--color-json-number); }
.json-tok--boolean { color: var(--color-json-boolean); }
.json-tok--null { color: var(--color-json-null); font-style: italic; }