:root {
    --color-black: #070b17;
    --color-white: #ffffff;
    --color-gray-light: #ECEFF1;
    --color-gray-dark: #B2BAC2;
    --color-red: #E74C3C;
    --color-red-hovered: #690000;
    --color-purple: #9b87cf;
    --color-pitch: #f8f5ef;
    --color-violet: #8c5da3;

    --color-backgorund-bottom-header: #7e46c3;

    --color-selection: rgba(255, 255, 255, .2);

    --box-shadow: 0 0 8px 0px rgba(7, 11, 23, 0.4);

    --color-overflow-bg: rgba(7, 11, 23, .8);
    --color-overflow-error: var(--color-red);
    --color-overflow-success: rgb(123, 215, 129);

    --fs-s: 13px;
    --fs-base: 16px;
    --fs-m: 20px;
    --fs-l: 26px;
    --fs-xl: 33px;
    --fs-xxl: 42px;

    --spacing-s: 4px;
    --spacing-base: 7px;
    --spacing-m: 11px;
    --spacing-l: 17px;
    --spacing-xl: 27px;
    --spacing-xxl: 44px;

    --ff: "Comfortaa";
}