:root {
  --wu-bg: #ffffff;
  --wu-bg-elevated: #f7f8fa;
  --wu-bg-soft: #f7f8fa;
  --wu-text: #111827;
  --wu-text-muted: #6b7280;
  --wu-text-subtle: #6b7280;
  --wu-border: #e1e4e8;
  --wu-nav-bg: #ffffff;
  --wu-nav-text: #111827;
  --wu-nav-hover: #f7f8fa;
  --wu-surface-1: var(--wu-bg-elevated);
  --wu-surface-2: #f7f8fa;
  --wu-surface-inset: #f7f8fa;
  --wu-accent: #0057ff;
  --wu-accent-contrast: #ffffff;
  --wu-success: #10b981;
  --wu-error: #ef4444;
  --wu-warning: #b45309;
  --wu-focus: #00c2ff;
  --wu-nav-active-bg: #e6f8ff;
  --wu-nav-active-text: #0057ff;
}

html.dark {
  --wu-bg: #111827;
  --wu-bg-elevated: #1b2433;
  --wu-bg-soft: #263244;
  --wu-text: #e5e7eb;
  --wu-text-muted: #a8b3c7;
  --wu-text-subtle: #c0cad9;
  --wu-border: #334155;
  --wu-nav-bg: #1b2433;
  --wu-nav-text: #e5e7eb;
  --wu-nav-hover: #263244;
  --wu-surface-1: var(--wu-bg-elevated);
  --wu-surface-2: #202c3d;
  --wu-surface-inset: #263244;
  --wu-accent: #60a5fa;
  --wu-accent-contrast: #0f172a;
  --wu-success: #4ade80;
  --wu-warning: #f59e0b;
  --wu-focus: #93c5fd;
  --wu-nav-active-bg: #1e3a8a;
  --wu-nav-active-text: #dbeafe;

  --bg: #111827;
  --panel: #1b2433;
  --border: #334155;
  --text: #e5e7eb;
  --muted: #a8b3c7;
  --accent-light: #1e3a8a;
}

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

.container,
.card,
.history-column,
.sidebar,
.editor-main,
.editor-secondary-panel,
.modal-content {
  background: var(--wu-bg-elevated);
  color: var(--wu-text);
  border-color: var(--wu-border);
}

.profile-box,
.support-slot,
#free-doc-quota {
  background: var(--wu-bg-soft);
  color: var(--wu-text);
  border-color: var(--wu-border);
}

.navbar {
  background: var(--wu-nav-bg);
}

.nav-links li a,
.btn {
  color: var(--wu-nav-text);
  border-color: var(--wu-nav-text);
}

.nav-links li a.active {
  background: var(--wu-nav-active-bg);
  color: var(--wu-nav-active-text);
}

.nav-links li a:hover,
.theme-toggle-btn:hover {
  background: var(--wu-nav-hover);
}

footer {
  color: var(--wu-text-subtle);
  background: transparent;
}

.theme-toggle-item {
  display: flex;
  align-items: center;
}

.theme-toggle-btn {
  border: 1px solid var(--wu-nav-text);
  color: var(--wu-nav-text);
  background: transparent;
  border-radius: 14px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--wu-focus);
  outline-offset: 2px;
}