// colors
$color-white: #ffff;
$color-white-dark: #fafafa;
$color-white-opaque: rgba(225, 225, 225, 0.33);
$color-gray-light: #f2f3f5;
$color-gray-mid-light: #d2d2d2;
$color-gray-mid: #989898;
$color-gray-dark: #5a5a5a;
$color-gray-dark-opaque: rgba(51, 51, 51, 0.33);
$color-black-opaque: rgba(0, 0, 0, 0.5);

$color-hub-orange: #ffb742;
$color-cdon-green: #78bd23;

// color variables
$color-body-bg: $color-white;
$color-aside-bg: $color-gray-light;
$color-card-bg: $color-gray-light;
$color-opaque-light-bg: $color-white-opaque;

$color-shadow: $color-gray-dark-opaque;
$color-seperator: $color-white-opaque;
$color-border-darken: $color-black-opaque;

$color-text-light: $color-white-dark;
$color-text-mid: $color-gray-mid;
$color-text-dark: $color-gray-dark;

$color-main: $color-cdon-green;
$color-hub-main: $color-hub-orange;

$color-label-title: $color-text-dark;
$color-input-placeholder: $color-gray-light;
$color-border-light: $color-gray-mid-light;