:root {
    --heder-mobile-height: 67px;
    --heder-tablet-height: 127px;
    /*color*/
    --iamSmart: #407167;
    --iamSmart-hover: #37655c;

    --text-headline-and-title: #383B4F;

    --primary-50: #F5F8F7;
    --primary-100: #DDEAE5;
    --primary-200: #BBD4CB;
    --primary-300: #91B7AB;
    --primary-400: #6A978A;
    --primary-500: #507C70;
    --primary-600: #3F645B;
    --primary-700: #35504A;
    --primary-800: #2D423E;
    --primary-900: #293835;
    --primary-950: #141F1d;

    --lightmode-primary: #1B84FF;
    --lightmode-primary-light: #EFF6FF;
    --lightmode-gray-800: #252F4A;
    --lightmode-gray-900: #071437;

    --secondary-50: #FFFBEF;
    --secondary-100: #FFF7E0;
    --secondary-300: #E5C97E;
    --secondary-700: #995324;

    --light-50: #FCFCFC;

    --grey-white: #FFFFFF;
    --grey-50: #F9FAFB;
    --grey-100: #F3F4F6;
    --grey-200: #E5E7EB;
    --grey-300: #D1D5DB;
    --grey-400: #9CA3AF;
    --grey-500: #6B7280;
    --grey-600: #4B5563;
    --grey-700: #374151;
    --grey-800: #1F2937;
    --grey-900: #111827;

    --text-body: #262626;

    --warning-50: #FEEEF3;
    --warning-clarity-20: rgba(248, 40, 90, 0.2);
    --warning-100: #DC2626;
    --warning-600: #F8285A;
    --warning-700: #D81A48;

    --danger-light: #FFEEF3;
    --danger: #F8285A;
    --danger-active: #D81A48;
    --danger-clarity-20: rgba(248, 40, 90, 0.20);

    --success-light: #ECFDF5;
    --success-clarity-20: rgba(5, 150, 105, 0.20);
    --success-active: #166534;
    --success-50: #F0FDF4;
    --success-100: #16A34A;
    --success-600: #16A34C;
    --success-700: #15803E;
    --success: #059669;

    --info-light: #EFF6FF;
    --info-clarity-20: rgba(27, 132, 255, 0.20);
    --info-100: rgba(27, 132, 255, 0.2);
    --info-600: #1B84FF;
    --info-700: #056EE9;
    --info-active: #056EE9;

    --others-info-active: #7239EA;
    --others-clarity-20: rgba(114, 57, 234, 0.20);
    --others-light: #F8F5FF;

    --neutral-white: #FFF;
    --neutral-50: #FAFAFA;
    --neutral-100: #F5F5F5;
    --neutral-500: #737373;
    --neutral-800: #262626;
    --neutral-black: #171717;

    /*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: 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-inner: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    --shadow-base: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0px 8px 15px -3px rgba(0, 0, 0, 0.10), 0 2px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-2xl: 0px 13px 35px rgba(0, 0, 0, 0.20);
    --shadow-widget: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);

    /*blur backdrop-filter*/
    --blur-large: blur(7.5px);

    --header-height: auto;

    .display1 {
        font-size: 1.5rem;
        line-height: 120%;
        letter-spacing: 0;
        font-weight: 800;
    }

    .h1 {
        font-size: 1.25rem;
        line-height: 120%;
        letter-spacing: 0;
        font-weight: 700;
    }

    .h2 {
        font-size: 1.5rem;
        line-height: 120%;
        letter-spacing: 0;
        font-weight: 700;
    }

    .h3 {
        font-size: 1.125rem;
        line-height: 120%;
        letter-spacing: 0;
        font-weight: 600;
    }

    .subtitle {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: 0;
        font-weight: 600;
    }

    .subtitle2 {
        font-size: 0.9375rem;
        line-height: 130%;
        letter-spacing: 0;
        font-weight: 600;
    }

    .body1 {
        font-size: 0.8125rem;
        line-height: 150%;
        letter-spacing: 0;
        font-weight: 400;
    }

    .body2 {
        font-size: 0.8125rem;
        line-height: 150%;
        letter-spacing: 0;
        font-weight: 400;
    }

    .label1 {
        font-size: 0.875rem;
        line-height: 150%;
        letter-spacing: 0;
        font-weight: 500;
    }

    .label2 {
        font-size: 0.8125rem;
        line-height: 130%;
        letter-spacing: 0;
        font-weight: 500;
    }

    .label3 {
        font-size: .75rem;
        line-height: 120%;
        letter-spacing: 0;
        font-weight: 500;
    }

    .caption1 {
        font-size: .75rem;
        line-height: 140%;
        letter-spacing: 0;
        font-weight: 400;
    }

    .caption2 {
        font-size: .625rem;
        line-height: 140%;
        letter-spacing: 0;
        font-weight: 400;
    }

    @media only screen and (min-width: 768px) {
        --header-height: 100px;
        --nav-width: 280px;

        .display1 {
            font-size: 2rem;
            line-height: 120%;
            letter-spacing: 0;
            font-weight: 800;
        }

        .h1 {
            font-size: 1.625rem;
            line-height: 120%;
            letter-spacing: 0;
            font-weight: 700;
        }

        .subtitle {
            font-size: 1.25rem;
            line-height: 130%;
            letter-spacing: 0;
            font-weight: 600;
        }

        .subtitle2 {
            font-size: 1.125rem;
            line-height: 130%;
            letter-spacing: 0;
            font-weight: 600;
        }

        .body1 {
            font-size: 1.0625rem;
            line-height: 150%;
            letter-spacing: 0;
            font-weight: 400;
        }

        .body2 {
            font-size: 1rem;
            line-height: 150%;
            letter-spacing: 0;
            font-weight: 400;
        }

        .label1 {
            font-size: 1.0625rem;
            line-height: 130%;
            letter-spacing: 0;
            font-weight: 500;
        }

        .label2 {
            font-size: 1rem;
            line-height: 130%;
            letter-spacing: 0;
            font-weight: 500;
        }

        .label3 {
            font-size: 0.875rem;
            line-height: 120%;
            letter-spacing: 0;
            font-weight: 500;
        }

        .caption1 {
            font-size: 0.875rem;
            line-height: 140%;
            letter-spacing: 0;
            font-weight: 400;
        }

        .caption2 {
            font-size: 0.625rem;
            line-height: 140%;
            letter-spacing: 0;
            font-weight: 400;
        }
    }
}
