/* ==========================================================
   БЛЕСК CLEAN
   VARIABLES.CSS
========================================================== */

:root {

    /* ======================================================
       COLORS
    ====================================================== */

    --color-primary: #00AEEF;
    --color-primary-hover: #0097d1;

    --color-accent: #2ECC71;
    --color-accent-hover: #28b765;

    --color-dark: #0B1220;

    --color-dark-light: #1B2538;

    --color-white: #FFFFFF;

    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    /* ======================================================
       TEXT
    ====================================================== */

    --text-main: var(--color-gray-700);
    --text-light: var(--color-gray-500);

    --heading-color: var(--color-dark);

    /* ======================================================
       BACKGROUND
    ====================================================== */

    --background: #ffffff;

    --background-light: #f8fafc;

    --background-dark: #0b1220;

    /* ======================================================
       BORDER
    ====================================================== */

    --border-color: #e5e7eb;

    --border-radius-small: 10px;

    --border-radius: 18px;

    --border-radius-large: 28px;

    --border-radius-xl: 40px;

    /* ======================================================
       SHADOW
    ====================================================== */

    --shadow-small:

        0 5px 15px rgba(0,0,0,.05);

    --shadow:

        0 10px 35px rgba(0,0,0,.08);

    --shadow-large:

        0 25px 70px rgba(0,0,0,.12);

    /* ======================================================
       CONTAINER
    ====================================================== */

    --container-width: 1320px;

    --container-padding: 20px;

    /* ======================================================
       HEADER
    ====================================================== */

    --header-height: 84px;

    /* ======================================================
       TRANSITION
    ====================================================== */

    --transition:

        .35s ease;

    /* ======================================================
       BUTTON
    ====================================================== */

    --button-height: 58px;

    --button-radius: 14px;

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --font-family:

        "Manrope",
        sans-serif;

    --font-size-xs: 13px;

    --font-size-sm: 15px;

    --font-size-base: 17px;

    --font-size-lg: 20px;

    --font-size-xl: 26px;

    --font-size-2xl: 34px;

    --font-size-3xl: 48px;

    --font-size-4xl: 64px;

    --line-height:

        1.6;

}
/* ==========================================================
   Z-INDEX
========================================================== */

:root {

    --z-header: 1000;
    --z-menu: 1100;
    --z-modal: 2000;
    --z-tooltip: 3000;
    --z-floating: 900;

}

/* ==========================================================
   SECTION SPACING
========================================================== */

:root {

    --section-padding: 60px;

    --section-padding-mobile: 60px;

    --block-gap: 40px;

}

/* ==========================================================
   CARDS
========================================================== */

:root {

    --card-background: #ffffff;

    --card-padding: 32px;

    --card-radius: 24px;

}

/* ==========================================================
   HERO
========================================================== */

:root {

    --hero-title-width: 760px;

    --hero-image-radius: 34px;

}

/* ==========================================================
   BUTTONS
========================================================== */

:root {

    --button-font-size: 16px;

    --button-padding-horizontal: 34px;

    --button-font-weight: 700;

}

/* ==========================================================
   INPUTS
========================================================== */

:root {

    --input-height: 58px;

    --input-radius: 14px;

}

/* ==========================================================
   ANIMATION
========================================================== */

:root {

    --animation-speed: .35s;

    --animation-slow: .6s;

}

/* ==========================================================
   BORDER
========================================================== */

:root {

    --border-light:

        1px solid rgba(0,0,0,.06);

}

/* ==========================================================
   GLASS
========================================================== */

:root {

    --glass:

        rgba(255,255,255,.72);

    --glass-border:

        rgba(255,255,255,.4);

}

/* ==========================================================
   GRADIENTS
========================================================== */

:root {

    --gradient-primary:

        linear-gradient(
        135deg,
        #00AEEF,
        #0090D6
        );

    --gradient-green:

        linear-gradient(
        135deg,
        #2ECC71,
        #20b35f
        );

}

/* ==========================================================
   MAX WIDTHS
========================================================== */

:root {

    --text-width: 700px;

    --content-width: 620px;

}

/* ==========================================================
   IMAGE RADIUS
========================================================== */

:root {

    --image-radius: 26px;

}

/* ==========================================================
   ICON SIZE
========================================================== */

:root {

    --icon-size: 58px;

}

/* ==========================================================
   END VARIABLES
========================================================== */