:root {
  color-scheme: light;
  --bg: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 42%, #edf4ff 100%);
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --surface-strong: #eff6ff;
  --text: #0f172a;
  --text-soft: #334155;
  --text-muted: #475569;
  --border: #dbeafe;
  --border-strong: #bfdbfe;
  --accent: #1d4ed8;
  --accent-strong: #1e40af;
  --accent-soft: rgba(59, 130, 246, 0.14);
  --hero-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  --shadow-card: 0 10px 25px rgba(15, 23, 42, 0.05);
  --shadow-hero: 0 18px 40px rgba(59, 130, 246, 0.1);
  --code-bg: #f8fafc;
}

html.dark {
  color-scheme: dark;
  --bg: radial-gradient(circle at top, #0f2742 0%, #020617 55%, #020617 100%);
  --surface: #0f172a;
  --surface-soft: #111827;
  --surface-strong: #172554;
  --text: #e2e8f0;
  --text-soft: #cbd5e1;
  --text-muted: #94a3b8;
  --border: #1e293b;
  --border-strong: #334155;
  --accent: #7dd3fc;
  --accent-strong: #bae6fd;
  --accent-soft: rgba(14, 165, 233, 0.18);
  --hero-bg: linear-gradient(135deg, #0f172a 0%, #172554 100%);
  --shadow-card: 0 12px 30px rgba(2, 6, 23, 0.45);
  --shadow-hero: 0 18px 40px rgba(2, 6, 23, 0.5);
  --code-bg: #020617;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  transition: background-color 180ms ease, color 180ms ease;
}

a {
  color: var(--accent) !important;
}

a:hover {
  color: var(--accent-strong) !important;
}

.hero,
.card,
.box,
.top-link,
.footer-links a,
.filter,
.page-btn,
.tool-search input {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.hero {
  border-color: var(--border-strong) !important;
  background: var(--hero-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-hero) !important;
}

.hero h1,
.content h1,
.content h2,
.content h3,
.content strong,
.card h2 a,
.box strong {
  color: var(--text) !important;
}

.hero p,
.content p,
.content li {
  color: var(--text-soft) !important;
}

.meta,
.hero .meta,
.site-footer {
  color: var(--text-muted) !important;
}

.card,
.box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

.eyebrow,
.top-link,
.footer-links a,
.filter,
.page-btn {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
}

.top-link:hover,
.footer-links a:hover,
.filter:hover,
.page-btn:hover:not([disabled]) {
  background: var(--surface-strong) !important;
}

.page-btn.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.tool-search input,
#search {
  background: var(--surface-soft) !important;
  border-color: #93c5fd !important;
  color: var(--text) !important;
}

.tool-search input::placeholder,
#search::placeholder {
  color: var(--text-muted) !important;
}

.tool-search input:focus,
#search:focus {
  outline: none;
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
}

pre,
code {
  color: var(--text) !important;
}

pre {
  background: var(--code-bg) !important;
  border-color: var(--border) !important;
}

.content hr,
.site-footer {
  border-color: var(--border) !important;
}

.theme-toggle {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--surface-strong);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}