// Базовые цвета https://colorscheme.ru/color-converter.html

$black: hsl(0, 0%, 0%);
$gray-darkest: hsl(0, 0%, 10%);
$gray-darker: hsl(0, 0%, 20%);
$gray-darken: hsl(0, 0%, 30%);
$gray-dark: hsl(0, 0%, 40%);
$gray: hsl(0, 0%, 50%);
$gray-light: hsl(0, 0%, 60%);
$gray-lighten: hsl(0, 0%, 70%);
$gray-lighter: hsl(0, 0%, 80%);
$gray-lightest: hsl(0, 0%, 90%);
$white: hsl(0, 0%, 100%);

$color-main: hsl(208, 98%, 43%);
$color-success: hsl(120, 39%, 54%);
$color-danger: hsl(2, 64%, 58%);
$color-warning: hsl(35, 84%, 62%);

$color-1: #f36601;
$color-1-1: #d35800;
$color-2: #1b1b1b;
$color-3: #303030;

$color-vk: #4a76a8;
$color-fb: #4267b2;
$color-tw: #40a2f5;
$color-gh: #24292e;

// Семантические цвета

$text-color: $gray-darkest;
$text-color-muted: $gray;
$body-bg: $white;

$link-color: $color-main;
$link-color--hover: darken($color-main, 15%);

$border-color: $gray-lighten;

// Базовая типографика

$font-size: 18px;

$font-size-h1: 40px;
$font-size-h2: 32px;
$font-size-h3: 24px;
$font-size-h4: 18px;
$font-size-h5: 16px;
$font-size-h6: 16px;

$font-size-sm: 0.75em; // 12px от 16px

$line-height: 160%;

$typo-margin-vertical: 1em;

$font-family: "Manrope", sans-serif;
$font-family--monospace: "SFMono-Regular", Menlo, Monaco, Consolas,
  Liberation Mono, "Courier New", monospace;
// Georgia, Times New Roman, Times, serif

// Ширины

$screen-xs: 0;
$screen-sm: 480px;
$screen-md: 798px;
$screen-lg: 1022px;
$screen-xl: 1230px;
$screen-xxl: 1670px;

$container-sm: 100%;
$container-md: 100%;
$container-lg: $screen-lg + 30;
$container-xl: $screen-xl + 30;
$container-xxl: $screen-xxl + 30;

// Модульная сетка

$grid-columns: 12;
$grid-gutter-width: 30px;

// Разное

$field-padding-vertical: 5px;
$field-padding-horizontal: 12px;

$border-radius: 8px;
$opacity: 0.7;
$transition-time: 0.3s;
$shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);

$menu-desktop-width: $screen-lg;
$toggler-part-height: 2px;

$z-index-modal: 100;
