:root {
  color-scheme: light dark;
  --site-bg: #ffffff;
  --site-surface: #ffffff;
  --site-surface-soft: #f8fafc;
  --site-text: #0f172a;
  --site-text-secondary: #475569;
  --site-muted: #64748b;
  --site-border: #e2e8f0;
  --site-border-soft: #f1f5f9;
  --site-primary: #2563eb;
  --site-primary-hover: #1d4ed8;
  --site-primary-soft: #eff6ff;
  --site-accent-text: #1d4ed8;
  --site-link: #1d4ed8;
  --site-danger: #b91c1c;
  --site-code-bg: #0f172a;
  --site-code-text: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-bg: #0b1220;
    --site-surface: #111c2f;
    --site-surface-soft: #16213e;
    --site-text: #e5eaf3;
    --site-text-secondary: #c0cadb;
    --site-muted: #a9b7ca;
    --site-border: #334155;
    --site-border-soft: #253449;
    --site-primary: #1d4ed8;
    --site-primary-hover: #1e40af;
    --site-primary-soft: #172554;
    --site-accent-text: #93c5fd;
    --site-link: #93c5fd;
    --site-danger: #fca5a5;
  }
}

body.theme-page {
  color-scheme: light dark;
  background: var(--site-bg);
  color: var(--site-text);
}

body.theme-page .card,
body.theme-page .panel,
body.theme-page .sidebar,
body.theme-page .detail,
body.theme-page .agents-sidebar,
body.theme-page .agent-detail {
  color: var(--site-text);
  background-color: var(--site-surface);
  border-color: var(--site-border);
}

body.theme-page .topbar,
body.theme-page .tabs,
body.theme-page .agent-tabs {
  border-color: var(--site-border);
}

body.theme-page .wordmark,
body.theme-page .terms-content strong {
  color: var(--site-text);
}

body.theme-page p,
body.theme-page li,
body.theme-page blockquote {
  color: var(--site-text-secondary);
}

body.theme-page th {
  color: var(--site-muted);
  border-color: var(--site-border);
}

body.theme-page .transcript-entry .role.agent {
  color: var(--site-link);
}

body.theme-page [role="alert"],
body.theme-page .error,
body.theme-page .accept-banner .status {
  color: var(--site-danger) !important;
}

body.theme-page .muted,
body.theme-page .hint,
body.theme-page .terms-meta,
body.theme-page .modal-sub,
body.theme-page label,
body.theme-page .method-desc,
body.theme-page .counter,
body.theme-page .empty-state,
body.theme-page .transcript-entry .ts,
body.theme-page .foot a {
  color: var(--site-muted);
}

body.theme-page .topbar a:not(.wordmark):not(.topbar-cta),
body.theme-page .topbar button.secondary,
body.theme-page .tab,
body.theme-page .agent-tab,
body.theme-page .terms-content p,
body.theme-page .terms-content li,
body.theme-page .steps,
body.theme-page .lede,
body.theme-page .subtitle,
body.theme-page .google-terms-note,
body.theme-page .accept-banner .copy {
  color: var(--site-text-secondary);
}

body.theme-page .terms-row a,
body.theme-page .google-terms-note a,
body.theme-page .terms-content a,
body.theme-page .card p a,
body.theme-page .setup-link,
body.theme-page .muted a {
  color: var(--site-link);
}

body.theme-page input:not([type="checkbox"]):not([type="range"]),
body.theme-page textarea,
body.theme-page select {
  color: var(--site-text);
  background-color: var(--site-surface);
  border-color: var(--site-border);
}

body.theme-page .card,
body.theme-page .panel,
body.theme-page .sidebar,
body.theme-page .detail,
body.theme-page .agents-sidebar,
body.theme-page .agent-detail,
body.theme-page .value-prop,
body.theme-page .copybox {
  border-color: var(--site-border);
}

body.theme-page .btn-primary,
body.theme-page .topbar-cta,
body.theme-page button:not(.secondary):not(.danger):not(.google):not(.method-option):not(.copy-icon):not(.agent-item):not(.tab):not(.agent-tab),
body.theme-page a.btn:not(.secondary) {
  color: #ffffff;
  background-color: var(--site-primary);
}

body.theme-page .btn-primary:hover,
body.theme-page .topbar-cta:hover,
body.theme-page button:not(.secondary):not(.danger):not(.google):not(.method-option):not(.copy-icon):not(.agent-item):not(.tab):not(.agent-tab):hover,
body.theme-page a.btn:not(.secondary):hover {
  background-color: var(--site-primary-hover);
}

body.theme-page button.secondary,
body.theme-page a.btn.secondary,
body.theme-page .btn-secondary {
  color: var(--site-text-secondary);
  background-color: var(--site-surface);
  border-color: var(--site-border);
}

body.theme-page .google,
body.theme-page .value-prop,
body.theme-page .agent-item:hover {
  color: var(--site-text);
  background-color: var(--site-surface-soft);
}

body.theme-page .tab:hover,
body.theme-page .agent-tab:hover,
body.theme-page button.secondary:hover,
body.theme-page a.btn.secondary:hover,
body.theme-page .btn-secondary:hover,
body.theme-page .google:hover,
body.theme-page .method-option:hover {
  color: var(--site-text);
  background-color: var(--site-surface-soft);
}

body.theme-page .method-option {
  color: var(--site-text);
  background-color: var(--site-surface);
  border-color: var(--site-border);
}

body.theme-page .browser-warning,
body.theme-page .accept-banner {
  color: var(--site-text);
  background-color: var(--site-surface-soft);
  border-color: var(--site-border);
}

body.theme-page .eyebrow,
body.theme-page .kicker {
  color: var(--site-accent-text);
  background-color: var(--site-primary-soft);
}

body.theme-page .value-prop strong,
body.theme-page .tag,
body.theme-page a.inline,
body.theme-page .help-row a,
body.theme-page .step-number {
  color: var(--site-accent-text);
}

body.theme-page .browser-warning strong {
  color: var(--site-text);
}

body.theme-page .browser-warning p {
  color: var(--site-text-secondary);
}

body.theme-page .detail .tab.active {
  color: var(--site-text);
  border-bottom-color: var(--site-primary);
}

body.theme-page .agent-item {
  color: var(--site-text);
  background: transparent;
  border: 0;
}

body.theme-page .code-block,
body.theme-page .code-preview,
body.theme-page .copybox {
  color: var(--site-code-text);
  background-color: var(--site-code-bg);
}

body.theme-page .account-tabs .tab.active,
body.theme-page .agent-tab.active,
body.theme-page .method-option.selected,
body.theme-page .agent-item.active {
  color: #ffffff;
  background-color: var(--site-primary);
}

body.theme-page :focus-visible {
  outline: 3px solid var(--site-accent-text);
  outline-offset: 2px;
}