:root {
  /* Gruvbox Dark */
  --bg:     #282828;
  --bg1:    #3c3836;
  --bg3:    #504945;
  --fg:     #ebdbb2;
  --fg0:    #fbf1c7;
  --fg4:    #a89984;
  --blue:   #83a598;
  --purple: #d3869b;
  --yellow: #fabd2f;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Gruvbox Light */
    --bg:     #fbf1c7;
    --bg1:    #ebdbb2;
    --bg3:    #bdae93;
    --fg:     #3c3836;
    --fg0:    #282828;
    --fg4:    #7c6f64;
    --blue:   #076678;
    --purple: #8f3f71;
    --yellow: #b57614;
  }
}

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

h1 {
  color: var(--fg0);
  font-size: x-large;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: var(--purple);
}

.card-header {
  color: var(--fg0);
  font-weight: bold;
  background-color: var(--bg1);
  border-bottom-color: var(--bg3);
}

.text-highlight {
  color: var(--yellow);
  font-weight: normal;
}

/* Override Bootstrap hardcoded dark classes */
.bg-dark {
  background-color: var(--bg1) !important;
}

.text-white {
  color: var(--fg0) !important;
}

.text-muted {
  color: var(--fg4) !important;
}

.card {
  border-color: var(--bg3) !important;
  background-color: var(--bg1);
}

.card-body {
  background-color: var(--bg1);
}

.btn-dark {
  background-color: var(--bg) !important;
  border-color: var(--bg3) !important;
  color: var(--blue) !important;
}

.btn-dark:hover {
  background-color: var(--bg3) !important;
  border-color: var(--bg3) !important;
  color: var(--purple) !important;
}

.btn {
  color: var(--blue);
}

.btn:hover {
  color: var(--purple);
}

.badge.bg-secondary {
  background-color: var(--bg3) !important;
  color: var(--fg) !important;
}

.nav-tabs {
  border-bottom-color: var(--bg3);
}

.nav-tabs .nav-item .nav-link.active {
  background-color: var(--bg1);
  color: var(--fg);
  border-color: var(--bg3);
}

.nav-tabs .nav-item .nav-link {
  color: var(--blue);
}

.nav-tabs .nav-item .nav-link:hover {
  border-color: var(--bg3);
  color: var(--purple);
}

.nav-tabs .nav-item .nav-link.active:hover {
  color: var(--fg);
}