@media (prefers-color-scheme: dark) {
  body {
    --text-color: #e2e8f0;
    --text-light: #94a3b8;
    --secondary-color: #a3b8cc; /* Lighter secondary color for dark mode */
    --primary-color: #0066cc;
    --accent-color: #0066cc;
    --light-bg: #f5f7fa;
    --dark-bg: #2c3e50;
    color: var(--text-color);
  }

  main.flex-shrink-0 {
    background-color: var(--dark-bg);
  }

  h1 {
    color: #f8fafc;
  }

  h2,
  h3 {
    color: #63b3ed;
  }

  /* Override Bootstrap bg-primary-subtle in dark mode */
  body.bg-primary-subtle {
    background-color: var(--dark-bg) !important;
  }

  /* Ensure container has proper contrast against dark background */
  main.flex-shrink-0 {
    background-color: var(--dark-bg);
  }
}