@charset "UTF-8";

// Responsive (for example: xs, sm, md, lg, xl)
$mq-breakpoints: (
  'sm': 639px,
  'sx': 640px,
  'sm-md': 768px,
  'md': 984px,
  'lg': 1200px,
  'xl': 1440px,
);

$mq-indents: (
  'sm': 24px,
  'sx': 32px,
  'sm-md': 32px,
  'md': 32px,
  'lg': 32px,
);

$mq-container-widths: (
  'sm': 100%,
  'sx': 100%,
  'sm-md': 100%,
  'md': 100%,
  'lg': 100%,
  'xl': 156.8rem,
);

$mq-container-indents: (
  'sm': 16px,
  'sx': 64px,
  'sm-md': 64px,
  'md': 64px,
  'lg': 64px,
  'xl': 64px,
);

@if $enable-new-mq-rules == true {
  $mq-breakpoints: (
    'sm': 767px,
    'sx': 768px,
    'sm-md': 768px,
    'md': 984px,
    'lg': 1200px,
    'xl': 1440px,
  );

  $mq-indents: (
    'sm': 24px,
    'sx': 32px,
    'sm-md': 32px,
    'md': 32px,
    'lg': 32px,
  );

  $mq-container-widths: (
    'sm': 100%,
    'sx': 100%,
    'sm-md': 100%,
    'md': 100%,
    'lg': 100%,
    'xl': 156.8rem,
  );

  $mq-container-indents: (
    'sm': 16px,
    'sx': 64px,
    'sm-md': 64px,
    'md': 64px,
    'lg': 64px,
    'xl': 64px,
  );
}

$mq-grid-gutters: (
  'sm': map-get($mq-indents, 'sm'),
  'sx': map-get($mq-indents, 'sm'),
  'sm-md': map-get($mq-indents, 'sm'),
  'md': map-get($mq-indents, 'md'),
  'lg': map-get($mq-indents, 'lg'),
  'xl': map-get($mq-indents, 'lg'),
);

// Not responsive
$width: 1220px;
$indent: 2rem;

$container-width: $width;
$container-indent: $indent;

$grid-gutter: $indent;

// Border radius
$border-radius-min: 2px;
$border-radius-base: 6px;
$border-radius-xl: 16px;
$border-radius-max: 16px;

// Colors
$color-base: #1a1a1a;
$color-cod-gray: #191919;
$color-gray: #999;

$color-light: #404040;
$color-lighter: #666666;
$color-lighter-secondary: #595959;
$color-lightest: #cccccc;
$color-n-lightest: #e6e7e8;
$color-lightest-minimal: #e8e8e8;
$color-lightest-popup: #ebeced;
$color-lightest-page: #ebeced;
$color-lightest-border: #ebeced;
$color-lightest-porcelain: #ebeced;
$color-lightest-border2: #d9dadb;
$color-lightest-secondary: #f2f2f2;
$color-transparent-black: rgba(0, 0, 0, 0.07);
$border-default: 0 0 0 1px rgba(0, 0, 0, 0.09);
$border-default-hover: 0 0 0 1px rgba(0, 0, 0, 0.09), 0 12px 12px 0 rgba(0, 0, 0, 0.12);

// brand colors
$brand-grapefruit: #ff5f5f;
$brand-reddish: #8f1a1a;
$brand-greyish: #a8a8a8;
$brand-gray: #808080;
$brand-steelblue: #207fc7;
$brand-steelblue-light: #289ffa;
$brand-sky: #248fe0;

$brand-gazprom-blue: #165bbc;
$brand-gazprom-dark: #262c40;

$brand-vtb-blue: #0a2896;
$brand-vtb-red: #e32a38;

$brand-rfb-red: #ee3a45;
$brand-rfb-lightred: #f3757d;

$brand-herbal: #bcf2eb;
$brand-turquoise: #02c5ab;
$brand-blue-green: #136a5e;
$brand-green-pea: #174d45;

$brand-duck-egg-blue: #bcf2eb;
$brand-bluish: #2898bc;

$color-amber: #ffbb03;

$color-clinging-pearl: #e5e5e5;

// support colors
$color-error: $brand-grapefruit;
$color-warning: #f90;
$color-success: #390;
$color-placeholder: #999;

// Fonts
$font-family-text: 'SF Pro Display', Arial, Helvetica, sans-serif;
$font-family-title: $font-family-text;

$font-weight-text: 400;
$font-weight-title: $font-weight-text;

// Forms
$checkbox-size: 2rem;

$radio-size: 2rem;

// Links
$color-link: #369;

// Transitions
$transition-duration-base: 0.4s;
$transition-duration-base-min: 0.2s;