:root {
    --gray-white: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f3f3f3;
    --gray-200: #e5e5e5;
    --gray-400: #909090;
    --gray-600: #525252;
    --gray-800: #404040;
    --gray-900: #1e1e1e;

    --primary-50: #E9FAFD;
    --primary-100: #94CDE0;
    --primary-300: #20B4B9;
    --primary-800: #005990;
    --primary-900: #043d60;
    --primary-active: #0074BC;

    --secondary-100: #FFF7EC;
    --secondary-250: #FED06F;
    --secondary-600: #FF8F73;
    --secondary-800: #E24B1E;

    --header-height: 72px;

    /*spacing*/
    /*original 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-huge: 96px;*/
    /*--spacing-xx-huge: 128px;*/

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

    /*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-inner: 0px 2px 4px 0px rgba(0, 0, 0, 0.06) inset;
    --shadow-base: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0px 2px 6px rgba(0, 0, 0, 0.05), 0px 8px 15px rgba(0, 0, 0, 0.10);
    --shadow-2xl: 0px 15px 40px rgba(0, 0, 0, 0.25), 0px 0px 4px rgba(0, 0, 0, 0.05);

    --blur-large: blur(7.5px);

    @media (min-width: 1200px) {
        --header-height: 158px;
    }
}