/* Color utils */
:root {
    --blue: #1776B5;
    --blue-dark: #123A5E;
    --blue-darker: #051C30;
    --blue-light: #D5E4EF;
    --blue-lighter: #E9F4FC;
    --white: #FFF;
    --off-white: #F2F4F6;
    --border-gray: #123A5E33;
    --border-gray-light: #123A5E20;
    --text-white: #FFF;
    --text-gray: #00000070;
    --text-black: #000;
}
/*font utils*/
:root {
    --text-base: 1rem; /* Base font size */
    --text-6xl: calc(var(--text-base) * 2.5); /* 40px */
    --text-5xl: calc(var(--text-base) * 2); /* 32px */
    --text-4xl: calc(var(--text-base) * 1.75); /* 28px */
    --text-3xl: calc(var(--text-base) * 1.5); /* 24px */
    --text-2xl: calc(var(--text-base) * 1.375); /* 22px */
    --text-xl: calc(var(--text-base) * 1.25); /* 20px */
    --text-lg: calc(var(--text-base) * 1.125); /* 18px */
    --text-md: var(--text-base); /* 16px */
    --text-sm: calc(var(--text-base) * 0.875); /* 14px */
    --text-xs: calc(var(--text-base) * 0.75); /* 12px */
}
/* Form elements */
:root {
    --field-min-height: 42px;
    --field-min-width: 232px;
    --field-padding: 7px 1em 11px;
    --field-border-color: #D1DAE2;
    --field-text-color: #D1DAE2;
    --field-font-size: var(--text-lg);
}
/* Layout utils*/
:root {
    --width-xl: 1400px;
    --width-lg: 1000px;
    --width-md: 768px;
    --width-sm: auto;
    --width-xs: auto;
}

@media screen and (width < 768px) {
    :root {
        --text-base: .85rem;
    }
}