/*!
 * dark-mode.css
 * ------------------------------------
 * Dark mode overrides using
 * prefers-color-scheme: dark
 */

@media (prefers-color-scheme: dark) {
  :root {
    /* Override or adjust variables for dark mode */
    --bg-color: #121212;
    --text-color: #e1e1e1;
    --border-color: #444;
    --primary-ultra-light: rgba(23, 79, 159, 0.15);
    --primary-light: #5d84bc;
    --accent-light: #b07a2a;
  }

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

  /* Example: override containers & sections */
  .container,
  .custom-card,
  .header,
  .footer {
    background-color: #1e1e1e;
    color: var(--text-color);
  }

  /* Adjust shadows for dark mode */
  .custom-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  }

  /* Buttons in dark mode */
  .btn-primary {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
  }
  .btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
  }

  /* Additional overrides for dark mode visuals */
  .navbar,
  .footer {
    background-color: #1a1e25;
  }
  .navbar .nav-link {
    color: var(--text-color) !important;
  }
  .navbar .nav-link:hover {
    color: var(--primary-light) !important;
  }
}