// Opacity Values
$hover-alpha: 3;
$active-darken: 15;

// Shades of Grey
$gray-16: #2d2a27;
$gray-18: #2D2D2D;
$gray-20: #323232;
$gray-28: #474747;
$gray-34: #575757;
$gray-37: #5F5F5F;
$gray-44: #707070;
$gray-61: #9C9C9C;
$gray-71: #B4B4B4;
$gray-78: #C7C7C7;
$gray-79: #CACACA;
$gray-80: #CBCBCB;
$gray-87: #DDDDDD;
$gray-92: #EAEAEA;
$gray-95: #F1F1F1;
$gray-96: #F4F4F4;
$gray-97: #F8F8F8;
$gray-98: #B8B8B8;

// General Colors
$white: #ffffff;
$black: #000000;
$red: #e00000;
$red-53: #e12d42;
$red-56: #e33b4e;
$blue-25: #006080;
$blue-39: #0071c7;
$blue-40: #0076ce;
$blue-63: #59CBE8;
$blue-89: #d1edf7;
$blue-98: #f1fcff;
$yellow-48: #dec117;
$yellow-53: #f7d619;
$yellow-64: #ffd746;
$green-33: #35a800;
$green-25: #00802b;
$green-41: #6ab21e;
$green-44: #76bd22;
$green-54: #badf35;
$orange-41: #d14600;
$orange-60: #ffb233;
$orange-68: #ff8b5c;

$deepest-gray: $gray-18;
$deep-gray: $gray-28;
$dark-gray: $gray-44;
$dark-gray-2: $gray-98;
$gray: $gray-79;
$mid-gray: $gray-92;
$light-gray: $gray-96;
$faint-gray: $gray-97;

// Component Colors
$success-color: $green-25;
$error-color: $red-53;

$rating-1-color: $orange-68;
$rating-2-color: $orange-60;
$rating-3-color: $yellow-64;
$rating-4-color: $green-54;
$rating-5-color: $green-41;

$rating-positive-color: $yellow-53;
$rating-selected-color: $blue-40;

//Typography
$title-color: var(--titleText, $deep-gray);
$body-color: var(--bodyText, $deep-gray);

// Theming Colors
$primary-color: var(--primaryColor, $blue-40);
$primary-color-hover: var(--primaryColorHover, lighten($blue-40, $hover-alpha));
$primary-color-active: var(--primaryColorActive, mix($black, $blue-40, $active-darken));
$primary-color-btn-text: var(--primaryColorText, $white);

$secondary-color: var(--secondaryColor, $gray-95);
$secondary-color-hover: var(--secondaryColorHover, lighten($gray-95, $hover-alpha));
$secondary-color-active: var(--secondaryColorActive, mix($black, $gray-95, $active-darken));
$secondary-color-btn-text: var(--secondaryColorText, $deep-gray);

$emphasis-color: var(--emphasisColor, $green-25);
$emphasis-color-hover: var(--emphasisColorHover, lighten($green-25, $hover-alpha));
$emphasis-color-active: var(--emphasisColorActive, mix($black, $green-25, $active-darken));
$emphasis-color-btn-text: var(--emphasisColorText, $white);

$emphasis-colorv2: var(--emphasisColorV2, $green-44);
$emphasis-colorv2-hover: var(--emphasisColorV2Hover, lighten($green-44, $hover-alpha));
$emphasis-colorv2-active: var(--emphasisColorV2Active, mix($black, $green-44, $active-darken));
$emphasis-colorv2-btn-text: var(--emphasisColorText, $white);

$alt-emphasis-color: var(--altEmphasisColor, $orange-41);
$alt-emphasis-color-hover: var(--altEmphasisColorHover, lighten($orange-41, $hover-alpha));
$alt-emphasis-color-active: var(--altEmphasisColorActive, mix($black, $orange-41, $active-darken));
$alt-emphasis-color-btn-text: var(--altEmphasisColorText, $white);

$link-text-color: var(--linkText, $blue-39);
