html.dark {
  /* Dark Mode Palette Overrides */
  --bg-color: #0f172a;
  /* Slate 900 */
  --text-color: #cbd5e1;
  /* Slate 300 */
  --heading-color: #f1f5f9;
  /* Slate 100 */
  --accent-color: #818cf8;
  /* Indigo 400 */
  --accent-hover: #a5b4fc;
  /* Indigo 300 */
  --secondary-color: #94a3b8;
  /* Slate 400 */
  --border-color: #334155;
  /* Slate 700 */
  --code-bg: #1e293b;
  /* Slate 800 */
  --quote-bg: #1e293b;
  --quote-border: #818cf8;

  /* Table Headers */
  --table-header-bg: #1e293b;
  --table-header-text: #f1f5f9;
}

/* Ensure images are slightly dimmed in dark mode to reduce glare */
html.dark img {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

html.dark img:hover {
  opacity: 1;
}

/* Syntax Highlighting Adjustments for Dark Mode */
html.dark .highlight {
  background-color: #1e293b;
  /* Match code block bg */
  box-shadow: none;
  border: 1px solid var(--border-color);
}

/* Toggle Icon */
html.dark .header .site-description .scheme-toggle a svg {
  fill: var(--warning-color, #fcd34d) !important;
  /* Yellow for sun/moon */
  color: var(--warning-color, #fcd34d) !important;
}