:root {
  --color-card-text: #212529; /* visible dark text for light cards */
  --color-bg: #f8f9fa;
  --color-text: #212529;
  --color-card-bg: #fff;
  --color-navbar-bg: #42678a; /* blue for light mode */
  --color-footer-bg: #42678a;
  --color-navbar-text: #fff; /* white for visibility on blue/navy */
  --color-primary: #0d6efd;
  --color-primary-hover: #0a58ca;
  --color-btn-bg: #0d6efd;
  --color-btn-text: #fff;
}

body.dark-mode {
  --color-card-text: #f3f6fa; /* visible light text for dark cards */
  --color-bg: #23272b;
  --color-text: #f3f6fa;
  --color-card-bg: #292c31;
  --color-navbar-bg: #888888; /* gray for dark mode */
  --color-navbar-text: #f8f9fa;
  --color-primary: #3a71c1;
  --color-primary-hover: #0d6efd;
  --color-btn-bg: #23272b;
  --color-btn-text: #f3f6fa;
}

.card-title {
  color: var(--color-card-text) !important;
}
  --color-bg: #f8f9fa;
  --color-text: #212529;
  --color-card-bg: #fff;
  --color-navbar-bg: #42678a; /* blue for light mode */
  --color-footer-bg: #42678a;
  --color-navbar-text: #fff; /* white for visibility on blue/navy */
  --color-primary: #0d6efd;
  --color-primary-hover: #0a58ca;
  --color-btn-bg: #0d6efd;
  --color-btn-text: #fff;
}
body.dark-mode {
  --color-card-text: #f3f6fa; /* visible light text for dark cards */
  --color-bg: #23272b;
  --color-text: #f3f6fa;
  --color-card-bg: #292c31;
  --color-navbar-bg: #888888; /* gray for dark mode */
  --color-navbar-text: #f8f9fa;
  --color-primary: #3a71c1;
  --color-primary-hover: #0d6efd;
  --color-btn-bg: #23272b;
  --color-btn-text: #f3f6fa;
}