:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #666666;
  --accent: #2563eb;
  --border: #e5e5e5;
  --code-bg: #f5f5f5;
  --sidebar-bg: #fafafa;
  --hover-bg: #f0f0f0;

  /* Mobile menu */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --sidebar-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.dark {
  --bg: #0f172a;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
  --border: #334155;
  --code-bg: #1e293b;
  --sidebar-bg: #1e293b;
  --hover-bg: #334155;

  /* Mobile menu - dark mode */
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --sidebar-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
}

/* Better code block and image styling in dark mode */
.dark .chapter pre {
  background: #f2f0ee !important;
  border-color: #2d3748;
  color: #1a1a1a;
}

.dark .chapter pre code {
  background: transparent;
  color: #1a1a1a;
}

.dark .chapter code {
  background: #1a2332;
  color: #cbd5e1;
}

.dark .chapter img {
  background: #f2f0ee;
  padding: 1rem;
  border-radius: 6px;
}