:root {
    /* Keyframes */
    /* 1200
    950 - пропадает фильтр
    845
    810
    767 - mobile menu
    470 */
    --kf-min-xl: 1200px;
    --kf-max-l: 1199px;
    --kf-min-l: 950px;
    --kf-max-m: 949px;
    --kf-min-m: 768px;
    --kf-max-s: 767px;
    --kf-min-s: 470px;
    --kf-max-xs: 469px;


    /* frame */
	--gap:              24px;
    --gap-small:        10px;
    --padding-default:  30px;
    --padding-xxs:      5px;
    --padding-xs:       10px;
    --padding-small:    15px;
    --padding-medium:   18px;
    --padding-large:    45px;
    --count-columns:    3;
    --border-radius-s:  6px;
    --border-radius-m:  10px;
    --border-radius-l:  15px;
    --margin-medium: 20px;
    --margin-negative-medium: -20px;
    --margin-negative-small: -15px;
    --margin-negative-xs: -10px;

    /* colors */
    --color-grey-0: #f5f5f5;    --color-orange:     #EA6120;    --color-green:      #3caa3c;    --color-sea:    #2E766E;    --color-ruby:   #A92424;
    --color-grey-1: #ededed;    --color-orange-1:   #FBDFD2;    --color-green-0:    #ECF7EC;    --color-sea-1:  #EAF1F1;    --color-ruby-1: #EED3D3;
    --color-grey-2: #e0e0e0;    --color-orange-2:   #F2A079;    --color-green-1:    #B1DDB1;    --color-sea-2:  #C0D6D4;    --color-ruby-2: #E5BDBD;
    --color-grey-3: #c2c2c2;    --color-orange-3:   #D3571D;    --color-green-2:    #246624;    --color-sea-3:  #20534D;    --color-ruby-3: #761919;
    --color-grey-4: #9e9e9e;    --color-orange-4:   #A44416;    --color-green-3:    #184418;    --color-sea-4:  #173B37;    --color-ruby-4: #440E0E;
    --color-grey-5: #777777;
    --color-grey-6: #757575;
    --color-grey-7: #616161;
    --color-grey-8: #424242;
    --color-grey-9: #232323;

    /* named-colors */
    --color-white:      #ffffff;
    --color-black:      #000000;
    --color-grey-input:  var(--color-grey-0);
    --color-grey-second: var(--color-grey-2);
    --color-grey-border: var(--color-grey-4);
    --color-grey-focus:  var(--color-grey-2);
    --color-grey-hover:  var(--color-grey-3);
    --color-grey-active: var(--color-grey-3);
    --color-grey-border-light:  var(--color-grey-1);
    --color-grey-border-input:  var(--color-grey-2);
    --color-grey-no-active:  var(--color-grey-5);

    --bg-white:         var(--color-white);
    --bg-grey-0:        #fafafa;

    --border-color-default: var(--color-grey-border);
    --border-color-lightly: var(--color-grey-border-input);
    --border-color-light: var(--color-grey-border-light);

    --shadow-color:     rgba(0, 0, 0, 0.1);
    --shadow-color-h:   rgba(0, 0, 0, 0.2);
    /* --shadow-m:     0 0 5px 0 var(--shadow-color); */
    --shadow-m: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
    /* --shadow-hm:    0 0 7px 0 var(--shadow-color-h); */
    --shadow-hm:    0 4px 8px -1px var(--shadow-color-h), 0 2px 4px -2px var(--shadow-color-h);
	--shadow-l:     0 6px 12px 0 var(--shadow-color);
	--shadow-hl:     0 6px 12px 0 var(--shadow-color-h);

    /* text */
    --text-size-default:        16px;
    --text-size-large:          24px;
    --text-size-medium:         18px;
    --text-size-medium-small:   14px;
    --text-size-small:          12px;
    --text-line-default:        24px;
    --text-line-meidum:         28px;
    --text-line-large:          36px;
    --text-line-medium-small:   20px;
    --text-line-small:          16px;
    --text-color:                   var(--color-grey-9);
    --text-color-light-grey:        var(--color-grey-4);
    --text-color-light-medium-grey: var(--color-grey-6);
    --text-color-medium-grey:       var(--color-grey-7);
	--text-color-grey:              var(--color-grey-8);
    --text-color-orange:            var(--color-orange);

    /* elements */
    --border-default: 1px solid var(--border-color-default);
    --border-input: 1px solid var(--color-grey-border-input);
    --border-input-focus: 2px solid var(--color-orange-2);
    --border-light: 1px solid var(--color-grey-border-light);

    /* transitions */
	--tr-speed:         0.1s;
    --tr-speed-delay:   0.05s;
    --tr-slow-delay:    0.2s;
	--tr-linear:        all var(--tr-speed) linear;
    --tr-linear-delay:  all 0s linear var(--tr-speed);
    --tr-linear-delay-delay:  all var(--tr-speed) linear var(--tr-slow-delay);

    /* catalog section block */

}