:root {
  --bg-main: #f7f8fb;
  --text-main: #1f2937;
  --hero-bg: #eaf2ff;
}

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

.hero {
  background: var(--hero-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode {
  --bg-main: #12161f;
  --text-main: #ebedf0;
  --hero-bg: #1d2736;
}

body.dark-mode .card,
body.dark-mode .list-group-item,
body.dark-mode .navbar,
body.dark-mode footer,
body.dark-mode .alert {
  background-color: #1b2130 !important;
  color: #ebedf0 !important;
  border-color: #2b3347 !important;
}

body.dark-mode .nav-link,
body.dark-mode .navbar-brand,
body.dark-mode .text-muted {
  color: #d8dbe3 !important;
}