:root {
  --noptcha-bg: 255 255 255;
  --noptcha-surface: 245 245 245;
  --noptcha-border: 229 229 229;
  --noptcha-text: 10 10 10;
  --noptcha-muted: 107 114 128;
  --noptcha-fg: 10 10 10;
  --noptcha-inverse: 255 255 255;
  --noptcha-code-bg: 250 250 250;
}

html.dark {
  --noptcha-bg: 10 10 10;
  --noptcha-surface: 18 18 18;
  --noptcha-border: 38 38 38;
  --noptcha-text: 229 229 229;
  --noptcha-muted: 156 163 175;
  --noptcha-fg: 255 255 255;
  --noptcha-inverse: 10 10 10;
  --noptcha-code-bg: 17 17 17;
}

html, body {
  background-color: rgb(var(--noptcha-bg));
  color: rgb(var(--noptcha-text));
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--noptcha-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--noptcha-border)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--noptcha-muted)); }

.code-box, pre {
  background-color: rgb(var(--noptcha-code-bg));
  border: 1px solid rgb(var(--noptcha-border));
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  color: rgb(var(--noptcha-text));
}

.syntax-comment { color: #16a34a; }
.syntax-string  { color: #ea580c; }
.syntax-keyword { color: #7c3aed; }
html.dark .syntax-comment { color: #22c55e; }
html.dark .syntax-string  { color: #f97316; }
html.dark .syntax-keyword { color: #a78bfa; }

.noptcha-dropdown-menu {
  background-color: rgb(var(--noptcha-surface));
  border: 1px solid rgb(var(--noptcha-border));
  color: rgb(var(--noptcha-text));
}
.noptcha-dropdown-menu button:hover {
  background-color: rgb(var(--noptcha-border) / 0.5);
}