$_desaturate_amount: 35%;

$_color_1: #ff6800;
$_color_2: #e8ff00;
$_color_3: #00a9ff;
$_color_4: #b346e2;

$_color_1_dark: desaturate($_color_1, $_desaturate_amount);
$_color_2_dark: desaturate($_color_2, $_desaturate_amount);
$_color_3_dark: desaturate($_color_3, $_desaturate_amount);
$_color_4_dark: desaturate($_color_4, $_desaturate_amount);

.logo__wrapper {
  width: 7rem;
  line-height: 0;
  margin-bottom: 1em;
}

.logo__color_1 { fill: $_color_1; }
.logo__color_2 { fill: $_color_2; }
.logo__color_3 { fill: $_color_3; }
.logo__color_4 { fill: $_color_4; }

@media (prefers-color-scheme: dark) {
  .logo__color_1 { fill: $_color_1_dark; }
  .logo__color_2 { fill: $_color_2_dark; }
  .logo__color_3 { fill: $_color_3_dark; }
  .logo__color_4 { fill: $_color_4_dark; }
}