:root {
    --defaultTextColor: #474747;
    --bg-defaultTextColor: #474747;
    --bg-dark: #333534;
    --white: #fff;
    --primary: #02bbcf;
    --primary-hover: #029aab;
    --primary-active: #029aab;
    --placeholder: #949494;
    --light: #949494;
    --light-2: #b7b7b6;
    --light-3: #f3f3f3;
    --border-1: #e9e9e9;
    --border-2: #e7e7e7;
    --border-3: #5c5c59;
    --border-4: #e0e1e1;
    --border-5: #e8e8e8;
    --border-6: #f2f2f2;
    --image-placeholder: #f3f3f3;

    --secondary-color-1: #fa673e;
    --secondary-color-2: #02bbcf;
    --secondary-color-3: #92cc60;
    --secondary-color-4: #029946;
    --secondary-color-5: #faa43f;
    --secondary-color-6: #22619c;
    --secondary-color-7: #92cc60;
    --secondary-color-8: #fcaf51;

    --secondary-color-1-hover: #ed4b1e;
    --secondary-color-2-hover: #029aab;
    --secondary-color-3-hover: #7ab84f;
    --secondary-color-4-hover: #027a38;
    --secondary-color-5-hover: #f2952b;
    --secondary-color-6-hover: #1c4f7f;
    --secondary-color-7-hover: #7ab84f;
    --secondary-color-8-hover: #e69a44;
    --white-hover: #f5f5f5;

    /* tipografy */
    --ico-size: 20px;
    --fontFamily: "Open Sans", sans-serif;

    --h1Size: 28px;
    --h2Size: 24px;
    --h3Size: 20px;
    --h4Size: 17px;
    --h5Size: 14px;
    --h6Size: 12px;
    --defaultRaduis: 16px;
    --header-single-size: 120px;
    --header-other-size: 70px;
    --header-height: calc(var(--header-single-size) + var(--header-other-size));
    --header-mobile: 260px;
    --header-mibile-headsize: 62px;
    --container-size: 1190px;
    /* font-size */
    --text--xs: 10px;
    --text--sm: 11px;
    --text--md: 12px;
    --text--lg: 13px;
    --text--xl: 14px;
    /* gap */
    --gap--xs: 6px;
    --gap--sm: 10px;
    --gap--md: 12px;
    --gap--lg: 16px;
    --gap--xl: 20px;
    --defaultFontSize: var(--text--md);
    --defaultLineHeight: normal;
    /* sizes */
    --size-xs: 32px;
    --size-sm: 36px;
    --size-md: 40px;
    --size-lg: 46px;
    --size-xl: 60px;
    /* icons */
    --ico-size--xs: var(--size-xs);
    --ico-size--sm: var(--size-sm);
    --ico-size--md: var(--size-md);
    --ico-size--lg: var(--size-lg);
    --ico-size--xl: var(--size-xl);
    /* buttons */
    --btn-size--xs: var(--size-xs);
    --btn-size--sm: var(--size-sm);
    --btn-size--md: var(--size-md);
    --btn-size--lg: var(--size-lg);
    --btn-size--xl: var(--size-xl);
    /* inputs */
    --input-size--xs: var(--size-xs);
    --input-size--sm: var(--size-sm);
    --input-size--md: var(--size-md);
    --input-size--lg: var(--size-lg);
    --input-size--xl: var(--size-xl);
}