$darker ?= 20%;
$lighter ?= 20%;
$white ?= #fff;
$black ?= #333;

$navy ?= #001F3F;
$blue ?= #0074D9;
$aqua ?= #7FDBFF;
$teal ?= #39CCCC;
$olive ?= #3D9970;
$green ?= #2ECC40;
$brown ?= brown;
$lime ?= #01FF70;
$yellow ?= #FFDC00;
$orange ?= #FF851B;
$red ?= #FF4136;
$fuchsia ?= #F012BE;
$purple ?= #B10DC9;
$maroon ?= #85144B;
$white ?= #FFFFFF;
$gray ?= #AAAAAA;
$silver ?= #DDDDDD;
$black ?= #111111;

$gray-dark ?= #018786;
$gray-light ?= lighten($gray, $lighter);
$red-dark ?= darken($red, $darker);
$red-light ?= lighten($red, $lighter);
$blue-dark ?= #3700b3;
$blue-light ?= lighten($blue, $lighter);
$yellow-dark ?= darken($yellow, $darker);
$yellow-light ?= lighten($yellow, $lighter);
$green-dark ?= darken($green, $darker);
$green-light ?= lighten($green, $lighter);
$brown-dark ?= darken($brown, $darker);
$brown-light ?= lighten($brown, $lighter);
$orange-dark ?= darken($orange, $darker);
$orange-light ?= lighten($orange, $lighter);

:root {
    --color-white: $white;
    --color-black: $black;
    --color-gray: $gray;
    --color-red: $red;
    --color-blue: $blue;
    --color-yellow: $yellow;
    --color-green: $green;
    --color-brown: $brown;
    --color-orange: $orange;

    --color-gray-dark: $gray-dark;
    --color-gray-light: $gray-light;
    --color-red-dark: $red-dark;
    --color-red-light: $red-light;
    --color-blue-dark: $blue-dark;
    --color-blue-light: $blue-light;
    --color-yellow-dark: $yellow-dark;
    --color-yellow-light: $yellow-light;
    --color-green-dark: $green-dark;
    --color-green-light: $green-light;
    --color-brown-dark: $brown-dark;
    --color-brown-light: $brown-light;
    --color-orange-dark: $orange-dark;
    --color-orange-light: $orange-light;
}