
$nav-item-hover-background: rgb(249, 245, 241);

$red-50: rgb(253, 245, 242);
$red-100: rgb(251, 235, 233);
$red-200: rgb(249, 229, 227);

$gray-opacity-10: rgba(15, 15, 15, 0.1);
$gray-opacity-15: rgba(15, 15, 15, 0.15);
$gray-opacity-20: rgba(15, 15, 15, 0.2);
$gray-opacity-50: rgba(15, 15, 15, 0.5);

$light-gray: rgba(15, 15, 15, 0.1);
$medium-light-gray: rgba(0, 0, 0, 0.4);

$sidebar-hover: rgba(55, 53, 47, 0.08);
$sidebar-page-block: rgba(25, 23, 17, 0.6);


$sidebar-switch: rgba(55, 53, 47, 0.4);
$sidebar-icon: rgba(55, 53, 47, 0.6);
$switcher-label: rgba(55, 53, 47, 1);

$gray-500: rgb(247, 246, 243);

$blue-300: rgba(46, 170, 220, 1);
$blue-500: rgba(43, 154, 199, 1);
$blue-700: rgba(6, 156, 205, 1);

$red-300: rgba(235, 87, 87, 30%);
$red-400: #e16259;
$red-500: #cf534a;
$red-600: #be5643;
$red-700: #bf4d45;

$t-gray-50: hsl(0, 0%, 98%);
$t-gray-100: hsl(240, 5%, 96%);
$t-gray-200: hsl(240, 6%, 90%);
$t-gray-300: hsl(240, 5%, 84%);
$t-gray-400: hsl(240, 5%, 65%);
$t-gray-500: hsl(240, 4%, 46%);
$t-gray-600: hsl(240, 5%, 34%);
$t-gray-700: hsl(240, 5%, 26%);
$t-gray-800: hsl(240, 4%, 16%);
$t-gray-900: hsl(240, 6%, 10%);

$t-sky-50: hsl(204, 100%, 97%);
$t-sky-100: hsl(204, 94%, 94%);
$t-sky-200: hsl(201, 94%, 86%);
$t-sky-300: hsl(199, 95%, 74%);
$t-sky-400: hsl(198, 93%, 60%);
$t-sky-500: hsl(199, 89%, 48%);
$t-sky-600: hsl(200, 98%, 39%);
$t-sky-700: hsl(201, 96%, 32%);
$t-sky-800: hsl(201, 90%, 27%);
$t-sky-900: hsl(202, 80%, 24%);
