:root {
  --bg: #fafaf7;
  --panel: #fff;
  --panel-overlay: rgba(255, 255, 255, 0.92);
  --panel-overlay-strong: rgba(255, 255, 255, 0.95);
  --fg: #111;
  /* All UI text is the same near-black; `--muted` kept for backwards compat. */
  --muted: #111;
  --faint: #bbb;
  --border: #e6e6e1;
  --border-strong: #111;
  --hover: #f0f0eb;
  --accent: #111;
  --radius: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  /* Standard control height — applies to chips, buttons, inputs, selects */
  --ctrl-h: 28px;
  --ctrl-s: 20px; /* compact (color swatches) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

/* Browser default for [hidden] is display:none, but our scoped rules
   (e.g. .view .controls { display: flex }) outrank that. Force the
   attribute to win so toggling element.hidden = true actually hides. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }