:root {
    --container-width: 1392px;

    /*main colors*/
    --color-white: #ffffff;
    --color-black: #011302;
    --color-dark: hsl(222, 47%, 12%);
    --color-dark-2: hsl(228, 32%, 18%);
    --color-accent-2: hsl(236, 100%, 71%);
    --color-accent-3: hsl(237, 57%, 44%);
    --color-accent: hsl(329, 92%, 42%);
    --color-blue: #124efe;

    /*header, footer, body background*/
    --color-bg-header-footer: var(--color-dark);
    --color-bg-body: var(--color-dark);

    /*texts colors*/
    --color-nav-menu-text: var(--color-accent);
    --color-nav-menu-bg: var(--color-black);
    --color-p: var(--color-white);
    --color-button-text: var(--color-white);
    --color-font-shadow: var(--color-dark);
    --font-shadow: drop-shadow(0 2px 0 var(--color-accent-2));
    --gradient-button: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color-accent), white 25%),
            var(--color-accent)
    );
    --gradient-button-2: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color-accent-3), white 25%),
            var(--color-accent-3)
    );
    /*text gradients settings*/
    --gradient-headers: linear-gradient(to bottom, var(--color-white) 25%, var(--color-accent-2) 75%);
    --gradient-headers-title-fixed: linear-gradient(to bottom, var(--color-white) 25%, var(--color-accent-2) 100%);
    --green-gradient: linear-gradient(
            to bottom,
            var(--color-accent-2),
            color-mix(in srgb, white 0%, var(--color-accent-2) 50%)
    );


    /*buttons and elements*/
    --color-elements: var(--color-accent-2);
    --color-button-anchor-text: var(--color-white);
    --color-button-anchor-bg: var(--color-dark);
    --color-anchor-menu-primary: var(--color-dark);
    --color-anchor-menu-secondary: var(--color-accent);

    /*font settings*/
    --header-height: 8rem;
    --font-base-letter-spacing: -.01em;
    --font-secondary-letter-spacing: .01em;

    /*font sizes*/
    --font-size-xs: 12px;
    --font-size-sm: 20px;
    --font-size-md: 24px;
    --font-size-lg: 28px;
    --font-size-xl: 32px;
    --font-size-2xl: 40px;
    --font-size-3xl: 54px;

    /*line heights*/
    --line-height-xs: 24px;
    --line-height-sm: 28px;
    --line-height-md: 36px;
    --line-height-lg: 42px;
    --line-height-xl: 50px;
    --line-height-relative: 1.2em;

    /*spacing system*/
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 50px;

    /*border radius*/
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 15px;
    --radius-xl: 40px;
    --radius-full: 50%;

    /*transitions*/
    --transition-fast: 0.2s linear;
    --transition-normal: 0.3s ease;
    --transition-slow: 1s ease;


    /*z-index layers*/
    --z-nav: 10;
    --z-aside: 1;
    --z-header: 100;

    /*layout sizes*/
    --header-height-desktop: 80px;
    --header-height-mobile: 58px;
    --aside-width: 194px;
    --container-padding: 30px;
    --container-padding-mobile: 20px;

    --clip-for-corners: polygon(
            calc(0% + 8px) 0%,
            calc(100% - 8px) 0%,
            100% calc(0% + 8px),
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            calc(0% + 8px) 100%,
            0% calc(100% - 8px),
            0% calc(0% + 8px)
    );
}