:root {
  color-scheme: light dark;
  --zf-bg: #f5f7fb;
  --zf-surface: #ffffff;
  --zf-surface-elevated: #ffffff;
  --zf-border: #d8dee8;
  --zf-text-primary: #0f172a;
  --zf-text-secondary: #475569;
  --zf-accent: #2563eb;
  --zf-accent-strong: #1d4ed8;
  --zf-focus-ring: rgba(37, 99, 235, 0.35);
}

[data-theme="dark"] {
  --zf-bg: #090d16;
  --zf-surface: #111827;
  --zf-surface-elevated: #151f31;
  --zf-border: #223149;
  --zf-text-primary: #e2e8f0;
  --zf-text-secondary: #94a3b8;
  --zf-accent: #60a5fa;
  --zf-accent-strong: #3b82f6;
  --zf-focus-ring: rgba(96, 165, 250, 0.4);
}

body {
  background: var(--zf-bg);
  color: var(--zf-text-primary);
}

.zf-theme-toggle {
  height: 40px;
  min-width: 40px;
  border: 1px solid var(--zf-border);
  border-radius: 999px;
  background: var(--zf-surface);
  color: var(--zf-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.zf-theme-toggle:hover {
  background: var(--zf-surface-elevated);
  border-color: var(--zf-accent);
}

.zf-theme-toggle:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--zf-focus-ring);
}