body {


  $parent-color: $primary;
  $parent-color-dark: scale_color($primary, $lightness: -20%);
  $parent-color-light: scale_color($primary, $lightness: 30%);
  $parent-color-light-trans: adjust_color($primary, $alpha: -0.4);

  --parent-color: #{$parent-color};
  --parent-color-dark: #{$parent-color-dark};
  --parent-color-light: #{$parent-color-light};
  --parent-color-light-trans: #{$parent-color-light-trans};
}

@each $color, $value in $colors {

  :root .parent-#{$color} {

    $parent-color: $value;
    $parent-color-dark: scale_color($value, $lightness: -20%);
    $parent-color-light: scale_color($value, $saturation: -30%, $lightness: 20%);
    $parent-color-light-trans: adjust_color(scale_color($value, $lightness: -10%), $alpha: -0.5);

    --parent-color: #{$parent-color};
    --parent-color-dark: #{$parent-color-dark};
    --parent-color-light: #{$parent-color-light};
    --parent-color-light-trans: #{$parent-color-light-trans};
  }
}

