/* Цвета */
:root {
    /**/
    --color-error: #F04438;
    --color-success: #43A162;

    /**/
    --color-black: #000F1F;
    --color-black-08: #000F1F14;
    --color-black-12: #000F1F1F;
    --color-black-16: #000F1F29;
    --color-black-20: rgba(0,0,0, 0.2);
    --color-black-24: #000F1F3D;
    --color-black-32: #000F1F52;
    --color-black-40: rgba(0,0,0, 0.4);
    --color-black-80: rgba(0,0,0, 0.8);

    --color-navy-dark-56: #011B378F;

    --color-blue: #00B7DC;
    --color-blue-medium: #d4dbff;
    --color-blue-hover: #3939BC;
    --color-blue-active: #363499;
    --color-blue-dark: #272b7c;
    --color-blue-light: #F1F3FD;
    --color-blue-light-secondary: #F0F1FB;
    --color-blue-light-third: #F5F7FF;
    --color-blue-light-hover: #E0E5F9;
    --color-blue-light-active: #C9D1F4;
    --color-purple: #7C3FCD;
    --color-purple-light: #F6F4FE;
    --color-purple-medium: #EFEBFC;
    --color-purple-light-hover: #EFEBFC;
    --color-purple-light-active: #E0D9FB;
    --color-purple-hover: #632DAA;
    --color-purple-active: #52278B;
    --color-orange: #FE5100;
    --color-orange-light: #FFF7EC;
    --color-orange-medium: #FFECD3;
    --color-orange-light-hover: #FFF7EC;
    --color-orange-light-active: #FFECD3;
    --color-orange-hover: #CC3802;
    --color-orange-active: #A12C0B;
    --color-positive: #00AA8C;
    --color-positive-medium: #C7FFEF;
    --color-positive-light: #EFFEFA;
    --color-positive-light-hover: #f0fffb;
    --color-positive-light-active: #d9fff5;
    --color-positive-hover: #05806B;
    --color-positive-active: #0A6557;
    --color-badge: #F63D86;
    --color-danger: #E31B73;
    --color-danger-light: #FFF1F5;
    --color-grey: #B8B9BA;
    --color-grey-secondary: #5A6066;
    --color-grey-08: #70788C14;
    --color-grey-32: #70788C52;
    --color-grey-40: #565C6B;
    --color-grey-60: #8D9099;
    --color-grey-dark: #D0D1D6;
    --color-white: #fff;
    --color-white-04: rgba(255,255,255, 0.04);
    --color-white-06: rgba(255,255,255, 0.06);
    --color-white-08: rgba(255,255,255, 0.08);
    --color-white-10: rgba(255,255,255, 0.10);
    --color-white-12: rgba(255,255,255, 0.12);
    --color-white-16: rgba(255,255,255, 0.16);
    --color-white-20: rgba(255,255,255, 0.2);
    --color-white-24: rgba(255,255,255, 0.24);
    --color-white-32: rgba(255,255,255, 0.32);
    --color-white-40: rgba(255,255,255, 0.4);
    --color-white-48: rgba(255,255,255, 0.48);
    --color-white-64: rgba(255,255,255, 0.64);
    --color-white-70: rgba(255,255,255, 0.7);
    --color-white-72: rgba(255,255,255, 0.72);
    --color-white-80: rgba(255,255,255, 0.8);
    --color-white-90: rgba(255,255,255, 0.9);

    --color-seafoam: #00B7DC;
    --color-opensea: #005693;

    --color-dark-85: #0C111DD9;

    /**/
    --color-primary: var(--color-blue);
    --color-primary-light: var(--color-blue-light);
    --color-primary-light-secondary: var(--color-blue-light-secondary);
    --color-primary-light-third: var(--color-blue-light-third);
    --color-primary-light-hover: var(--color-blue-light-hover);
    --color-primary-light-active: var(--color-blue-light-active);
    --color-primary-medium: var(--color-blue-medium);
    --color-primary-hover: var(--color-blue-hover);
    --color-primary-active: var(--color-blue-active);
    --color-primary-dark: var(--color-blue-dark);
    --color-secondary: var(--color-purple);
    --color-dark: var(--color-black);

    --color-muted: var(--color-grey);

    --color-dark: var(--color-black);
    --color-extralight: var(--color-white);

    --color-bg: var(--color-black);

    --color-disabled: var(--color-grey);

    --color-border: var(--color-grey);

    --color-text: var(--color-extralight);
    --color-text-extralight: var(--color-white);
    --color-text-primary: var(--color-primary);
    --color-text-muted: var(--color-grey);
    --color-text-muted-secondary: var(--color-grey-secondary);
    --color-text-dark: var(--color-dark);

    /**/
    --color-example-grey: var(--color-white);
}

/* Типографика */
:root {
    --font-family: "Open Sans", sans-serif;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-title-family: "Open Sans", sans-serif;
}

/* Прочее */
:root {
    --container-width: 100%;
    --container-medium-width: 103rem;
    --grid-gap: 1rem;

    --section-offset-big: 1.5rem;
    --section-offset: 1.5rem;
    --section-offset-medium: 2rem;
    --section-offset-small: 2rem;
    --section-header-offset: 1rem;
    --section-header-offset-small: 0.75rem;

    --offset-extrabig: 2.5rem;
    --offset-big: 2rem;
    --offset-main: 1.5rem;
    --offset-medium: 1.25rem;
    --offset-semimedium: 1.125rem;
    --offset-secondary: 1rem;
    --offset-small: 0.75rem;
    --offset-extrasmall: 0.5rem;

    --height-input: 4.25rem;
    --height-logo: 3rem;
    --width-sidebar: calc(100% - 6.25rem);

    --size-icon-big: 2rem;
    --size-icon: 1.5rem;
    --size-icon-medium: 1.25rem;
    --size-icon-semimedium: 1.125rem;
    --size-icon-small: 1rem;
    --size-icon-extrasmall: 0.75rem;

    --radius: 0.75rem;
    --radius-extrasmall: 0.5rem;
    --radius-small: 0.625rem;
    --radius-secondary: 1rem;
    --radius-medium: 1.25rem;
    --radius-main: 1.5rem;
    --radius-input: var(--radius);
    --radius-btn: var(--radius);

    --shadow: 0 0.5rem 2rem 0 #1313141A;
    --shadow-light: 0 0.5rem 2rem 0 #1313140A;
    --shadow-hover: 0 0.5rem 2.5rem 0 #0000001F;
    --shadow-dropdown: 0 0.75rem 2.5rem 0 #00000017;
    --shadow-button: 0 0 0 0.25rem #4F60FF40;
    --shadow-modal: 0 2rem 4rem -0.75rem #10182824;
    --shadow-small: 0 0 0.75rem -0.25rem #1018281F;
    --shadow-extrasmall: 0 0.0625rem 0.125rem 0 #1018280D;

    --shadow-md: 0 0.75rem 1rem -0.25rem #10182814;

    --transition: 0.2s all;
    --transition-long: 0.5s all;
    --transition-bg: background-color 0.2s;
    --scale: scale(1.05);
    --scale-small: scale(1.025);

    --blur: blur(1.5rem);
    --blur-medium: blur(1.25rem);
}

@media screen and (min-width: 768px) {
    :root {
        --height-logo: 3.75rem;
        --width-sidebar: 4rem;
    }
}
@media screen and (min-width: 1024px) {
    :root {
        --grid-gap: 2rem;
        --section-offset-big: 12.5rem;
        --section-offset: 2rem;
        --section-offset-medium: 2rem;
        --section-header-offset: 1.5rem;
        --section-header-offset-small: 1rem;
        --width-sidebar: 7.25rem;
    }
}
@media screen and (min-width: 1280px) {
    :root {
        --section-offset: 7.5rem;
        --section-header-offset: 2rem;
        --section-header-offset-small: 1.5rem;
        --width-sidebar: 8.5rem;
    }
}