$STRAWBERRY_100: #FF8C82;
$STRAWBERRY_300: #ED5353;
$STRAWBERRY_500: #C6262E;
$STRAWBERRY_700: #A10705;
$STRAWBERRY_900: #7A0000;

$ORANGE_100: #FFC27D;
$ORANGE_300: #FFA154;
$ORANGE_500: #F37329;
$ORANGE_700: #CC3B02;
$ORANGE_900: #A62100;

$BANANA_100: #FFF394;
$BANANA_300: #FFE16B;
$BANANA_500: #F9C440;
$BANANA_700: #D48E15;
$BANANA_900: #AD5F00;

$LIME_100: #D1FF82;
$LIME_300: #9BDB4D;
$LIME_500: #68B723;
$LIME_700: #3A9104;
$LIME_900: #206B00;

$BLUEBERRY_100: #8CD5FF;
$BLUEBERRY_300: #64BAFF;
$BLUEBERRY_500: #3689E6;
$BLUEBERRY_700: #0D52BF;
$BLUEBERRY_900: #002E99;

$GRAPE_100: #E4C6FA;
$GRAPE_300: #CD9EF7;
$GRAPE_500: #A56DE2;
$GRAPE_700: #7239B3;
$GRAPE_900: #452981;

$COCOA_100: #A3907C;
$COCOA_300: #8A715E;
$COCOA_500: #715344;
$COCOA_700: #57392D;
$COCOA_900: #3D211B;

$SILVER_100: #FAFAFA;
$SILVER_300: #D4D4D4;
$SILVER_500: #ABACAE;
$SILVER_700: #7E8087;
$SILVER_900: #555761;

$SLATE_100: #95A3AB;
$SLATE_300: #667885;
$SLATE_500: #485A6C;
$SLATE_700: #273445;
$SLATE_900: #0E141F;

$BLACK_100: #666666;
$BLACK_300: #4D4D4D;
$BLACK_500: #333333;
$BLACK_700: #1A1A1A;
$BLACK_900: #000000;

:root {
  --bg-color:  #{$SILVER_100};
  --fg-color:  #{$BLACK_500};
  --view-color: white;
  --dim-color: #{mix($SILVER_300, $SILVER_100)};

  --link-color:  #{$BLUEBERRY_700};

  --status-bg-color: #{transparentize($SILVER_300, 0.5)};
  --status-fg-color: #{$SILVER_900};

  --success-bg-color: #{transparentize($LIME_100, 0.5)};
  --success-fg-color: #{$LIME_900};

  --warning-bg-color: #{transparentize($BANANA_100, 0.5)};
  --warning-fg-color: #{$BANANA_900};

  --critical-bg-color: #{transparentize($STRAWBERRY_100, 0.5)};
  --critical-fg-color: #{$STRAWBERRY_900};
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color:  #{mix($BLACK_900, $BLACK_700)};
    --fg-color:  #{$SILVER_300};
    --view-color: #{mix($BLACK_500, $BLACK_700)};
    --dim-color: #{$BLACK_700};

    --link-color:  #{$BLUEBERRY_100};

    --status-bg-color: #{transparentize($SILVER_500, 0.75)};
    --status-fg-color: #{$SILVER_100};

    --success-bg-color: #{transparentize($LIME_500, 0.75)};
    --success-fg-color: #{$LIME_100};

    --warning-bg-color: #{transparentize($BANANA_500, 0.75)};
    --warning-fg-color: #{$BANANA_100};

    --critical-bg-color: #{transparentize($STRAWBERRY_500, 0.75)};
    --critical-fg-color: #{$STRAWBERRY_100};
  }
}
