$white: #fefefe;
$light-1: #e0e0e0;
$light-2: #c0c0c0;
$light-3: #a0a0a0;
$light-4: #808080;

$dark-4: #5c5c5c;
$dark-3: #4c4c4c;
$dark-2: #3c3c3c;
$dark-1: #2c2c2c;
$black: #181818;

//Darkmode (default)
$fg-1: $white;
$fg-2: $light-1;
$fg-3: $light-2;
$fg-4: $light-3;
$fg-5: $light-4;

$bg-5: $dark-4;
$bg-4: $dark-3;
$bg-3: $dark-2;
$bg-2: $dark-1;
$bg-1: $black;

//lightmode
$fga-1: $black;
$fga-2: $dark-1;
$fga-3: $dark-2;
$fga-4: $dark-3;
$fga-5: $dark-4;

$bga-5: $light-4;
$bga-4: $light-3;
$bga-3: $light-2;
$bga-2: $light-1;
$bga-1: $white;

:root,html{
  font-family: Helvetica;

  background: $bg-1;
  color: $fg-2;

  @media (prefers-color-scheme: light) {
    background: $bga-1;
    color: $fga-2;
  }
}