$light-bg: #ddcf99;
$light-bg-alt: #4e5463;
$light-fg: #202020;
$light-ln: #4e5463;
$light-active: #f1866c;

$dark-bg: #4b3d44;
$dark-bg-alt: #bd97a9;
$dark-fg: #e6d0c4;
$dark-ln: #bd97a9;
$dark-active: #4b4361;
$transition-time: 1.5s;

body {
  &.light {
    background-color: $light-bg;
    color: $light-fg;
  }
  background-color: $dark-bg;
  color: $dark-fg;
  transition: $transition-time;
}

a {
  &.light {
    background-color: $light-ln;
    color: $light-bg;
  }
  background-color: $dark-ln;
  color: $dark-bg;
  transition: $transition-time;
}

a.footer-nav-item.active {
  &.light {
    color: $light-active;
  }
  color: $dark-active;
  transition: $transition-time;
}

footer {
  &.light {
    background-color: $light-bg-alt;
    color: $light-bg;
  }
  background-color: $dark-bg-alt;
  color: $dark-bg;
  transition: $transition-time;
}

footer a {
  &.light {
    color: $light-bg;
    background-color: $light-bg-alt;
  }
  color: $dark-bg;
  background-color: $dark-bg-alt;
  transition: $transition-time;
}

.togglelabel {
  &.light {
    background-color: $light-bg;
  }
  background-color: $dark-bg;
  transition: $transition-time;
}

.togglelabel.light::after {
  background-color: $light-fg;
  color: $light-bg;
}

.togglelabel::after {
  background-color: $dark-fg;
  color: $dark-bg;
  transition: $transition-time;
}