:root {
    --header-height-sm: 84px;
    --header-height: 95px;
    /*color*/
    --primary-light: #F5FDFF;
    --primary-active-20: rgba(1, 128, 161, 0.2);
    --primary-active: #057E9C;
    --primary-dark: #1F5070;

    --secondary-lighr: #FDE4B6;
    --secondary-active: #F2BA53;
    --secondary-dark: #AC3F1E;

    --grey-white: #FFFFFF;
    --grey-100: #F8F9FA;
    --grey-200: #EFF2F5;
    --grey-300: #DBDFE9;
    --grey-400: #B5B5C3;
    --grey-500: #A1A5B7;
    --grey-600: #70748B;
    --grey-700: #545974;
    --grey-800: #383B4F;
    --grey-900: #11152B;

    --warning-light: #FFF5E7;
    --warning-active: #FFA621;
    --warning-dark: #E48C07;

    --success-light: #E8FFF3;
    --success-active: #50CD89;
    --success-dark: #15803D;

    --info-light: #F8F5FF;
    --info-active: #7239EA;
    --info-dark: #5014D0;

    --danger-light: #FFF5F8;
    --danger-active: #EB325F;
    --danger-dark: #D31443;

    --blue-light: #EFF6FF;
    --blue-active: #1B84FF;

    --neutral-100: #F5F5F5;

    --background-body: var(--grey-100);
    --background-card: var(--grey-white);
    --background-card-on-dark: rgba(0, 0, 0, 0.4);
    --background-hover-light: var(--grey-200);

    --text-headline-title: var(--grey-800);
    --text-label-body: var(--grey-700);
    --text-label-body-light: var(--grey-600);
    --text-label-light: var(--grey-white);

    --icon-light: var(--grey-600);
    --icon-on-color: var(--grey-white);
    --icon-main: var(--grey-800);
    --icon-brand: var(--primary-active);

    --borad-light: var(--grey-300);
    --borad-active: var(--primary-active);

    --light-active: #FCFCFC;

    /*spacing*/
    --spacing-none: 0px;
    --spacing-xx-sm: 4px;
    --spacing-x-sm: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-big: 20px;
    --spacing-x-big: 24px;
    --spacing-xx-big: 28px;
    --spacing-xxx-big: 32px;
    --spacing-lg: 40px;
    --spacing-x-lg: 48px;
    --spacing-xx-lg: 64px;
    --spacing-xxx-lg: 80px;
    --spacing-container-sm: 20px;
    --spacing-container: 88px;
    --spacing-huge: 96px;
    --spacing-xx-huge: 128px;

    /*radius*/
    --radius-none: 0px;
    --radius-xx-sm: 2px;
    --radius-x-sm: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-big: 16px;
    --radius-lg: 32px;
    --radius-full: 9999px;

    /*shadow*/
    --shadow-widget:  0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    --shadow-widget-intence: 0px -2px 8px 0px rgba(49, 49, 49, 0.08) inset;
    --shadow-light: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
    --shadow-primary: 0px 4px 12px 0px rgba(40, 132, 239, 0.35);
    --shadow-success: 0px 4px 12px 0px rgba(53, 189, 100, 0.35);
    --shadow-danger: 0px 4px 12px 0px rgba(241, 65, 108, 0.35);
    --shadow-info: 0px 4px 12px 0px rgba(114, 57, 234, 0.35);
    --shadow-warning: 0px 4px 12px 0px rgba(246, 192, 0, 0.35);
    --shadow-dark: 0px 4px 12px 0px rgba(37, 47, 74, 0.35);
    --shadow-orange: 0px 4px 12px 0px rgba(255, 111, 30, 0.35);
    --shadow-dropdown: 0px 7px 18px 0px rgba(0, 0, 0, 0.09);
    --shadow-select-click: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

    .display {
        font-size: 34px; /* 34px */
        line-height: 115%;
        letter-spacing: 0;
        font-weight: 700;
    }

    .display2 {
        font-size: 30px; /* 30px */
        line-height: 115%;
        letter-spacing: 0;
        font-weight: 700;
    }

    .display3 {
        font-size: 22px; /* 22px */
        line-height: 115%;
        letter-spacing: 0;
        font-weight: 700;
    }

    .h1 {
        font-size: 20px; /* 20px */
        line-height: 130%;
        letter-spacing: 0;
        font-weight: 700;
    }

    .h2 {
        font-size: 18px; /* 18px */
        line-height: 130%;
        letter-spacing: 0;
        font-weight: 700;
    }

    .h3 {
        font-size: 16px; /* 16px */
        line-height: 130%;
        letter-spacing: 0;
        font-weight: 600;
    }

    .label1 {
        font-size: 15px; /* 15px */
        line-height: 125%;
        letter-spacing: 0;
        font-weight: 500;
    }

    .label2 {
        font-size: 14px; /* 14px */
        line-height: 125%;
        letter-spacing: 0.1px;
        font-weight: 500;
    }

    .label3 {
        font-size: 13px; /* 13px */
        line-height: 125%;
        letter-spacing: 0;
        font-weight: 500;
    }

    .label4 {
        font-size: 12px; /* 12px */
        line-height: 125%;
        letter-spacing: 0;
        font-weight: 500;
    }

    .body1 {
        font-size: 16px; /* 16px */
        line-height: 150%;
        letter-spacing: 0;
        font-weight: 400;
    }

    .body2 {
        font-size: 14px; /* 14px */
        line-height: 150%;
        letter-spacing: 0;
        font-weight: 400;
    }

    .body3 {
        font-size: 13px; /* 13px */
        line-height: 150%;
        letter-spacing: 0;
        font-weight: 400;
    }

    .body4 {
        font-size: 11px; /* 11px */
        line-height: 12px;
        letter-spacing: 0;
        font-weight: 400;
    }

    .body-11-12-500 {
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 12px; /* 109.091% */
    }

    .body-13-14-500 {
        font-size: 13px; /* 13px */
        line-height: 14px;
        letter-spacing: -0.13px;
        font-weight: 500;
    }

    .body-14-14-500 {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 14px; /* 100% */
    }

    .body-15-16-500 {
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 106.667% */
    }
}