$brand-primary: hsl(186, 72%, 24%);
$brand-light: hsl(186, 72%, 37%);
$brand-dark: hsl(186, 74%, 20%);
$brand-tertiary: rgb(68, 69, 84);

$link-color: $brand-primary;
$link-color-hover: $brand-dark;

$line-height: 1.4;

$color-bg-hover: hsla(186, 72%, 37%, 0.6);
$color-bg-active: hsla(95, 49%, 71%, 0.2);
$color-fg-active: black;

$color-border-top: #e5e6e9;
$color-border-side: #dfe0e4;
$color-border-bottom: #d0d1d5;

$navbar-height: 40px;

$screen-xs: 0;
$screen-sm: 576px;
$screen-md: 768px;
$screen-lg: 992px;
$screen-xl: 1200px;

$block-header-color-bg: hsl(220, 20%, 96%);
$block-header-color-bg-hover: hsl(220, 20%, 92%);
$block-header-color-fg: hsl(0, 0%, 20%);
$block-color-bg-alt: hsl(220, 20%, 98%);
$block-color-bg-hover: hsl(220, 20%, 94%);
$block-color-border: #e5e5e5;

$block-header-button-hover: hsl(220, 20%, 92%);
$block-header-button-border: hsl(220, 7%, 82%);
$block-header-button-active: hsl(220, 20%, 86%);

$sidebar-padding: 0.9375rem;
$sidebar-width: 18rem;
$sidebar-fg-color: hsl(0, 0%, 90%);
$sidebar-bg-color: hsl(186, 74%, 13%);
$sidebar-header-color: hsl(220, 6%, 70%);
$sidebar-link-fg-color: white;
$sidebar-link-fg-active: white;
$sidebar-link-bg-color: transparent;
$sidebar-link-bg-hover: hsla(0, 0%, 100%, 0.1);
$sidebar-link-bg-active: hsl(142, 13%, 13%);

$padding-xs: 0.75rem;
$padding-sm: 0.9375rem;
$padding-lg: 1.5rem;

$grid-gutter-width: 30px;

$container-tablet: (720px + $grid-gutter-width);
$container-sm: $container-tablet;
$container-desktop: (940px + $grid-gutter-width);
$container-md: $container-desktop;
$container-large-desktop: (1140px + $grid-gutter-width);
$container-lg: $container-large-desktop;

$toolbar-background: linear-gradient(#fefefe, #fafafa); //white;
$toolbar-height: 3.125rem;
$toolbar-border-color: #dedede;
$toolbar-border-width: 1px;

$toolbar-btn-color: hsla(0, 0%, 60%, 0.8);
$toolbar-btn-hover-color: hsla(0, 0%, 40%, 0.8);
$toolbar-btn-bg: transparent;
$toolbar-btn-hover-bg: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 87%));