:root {
    /* Brand Colors */
    --brand-50:  #FAFCF8;
    --brand-100: #E4EFD9;
    --brand-200: #CDE2BA;
    --brand-300: #B5D69A;
    --brand-400: #9DC97A;
    --brand-500: #84BD5A;
    --brand-600: #6CA942;
    --brand-700: #4F8E32;
    --brand-800: #357224;
    --brand-900: #1F5318;

    /* Neutral Colors */
    --neutral-00: #EEF3F1;
    --neutral-25: #DCE9E3;
    --neutral-50: #B5C0BB;
    --neutral-100: #9FAEA7;
    --neutral-200: #899C93;
    --neutral-300: #738A7F;
    --neutral-400: #60756B;
    --neutral-500: #4D5F56;
    --neutral-600: #3B4942;
    --neutral-700: #29332E;
    --neutral-800: #1D1D1D;
    --neutral-900: #121812;

    /* Misc Colors */
    --input-bg: #34343480;
    --footer-bg: #131417;
    --card-circle-bg: #222b26;

    /* Font sizes */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl : 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --font-4xl: 2.5rem;

    /* Shadow */
    --shadow-input: 0 0 0 4px rgba(31, 81, 229, 0.08);
    --shadow-nav: 0 -8px 12px 3px rgba(159, 174, 167, 0.10);

    /* Constraints */
    --max-width-screen: 28rem;

}

.text-xs {
    font-size: var(--font-xs);
    font-weight: 400;
    line-height: normal;
    color: var(--neutral-00);
}

.text-sm {
    font-size: var(--font-sm);
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--neutral-00);
}

.text-md {
    font-size: var(--font-md);
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--neutral-00);
}

.text-lg {
    font-size: var(--font-lg);
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--neutral-00);
}

.text-xl {
    font-size: var(--font-xl);
    font-weight: 400;
    line-height: normal;
    color: var(--neutral-00);
}


.title-sm {
    font-size: var(--font-xl);
    font-weight: 400;
    line-height: normal;
    color: var(--brand-500);
    padding-bottom: 1rem;
}

.title-md {
    font-size: var(--font-2xl);
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--brand-500);
    padding-bottom: 1rem;
}

.title-lg {
    font-size: var(--font-3xl);
    font-weight: 500;
    line-height: 2rem;
    color: var(--brand-500);
    padding-bottom: 1rem;
}

.title-xl {
    font-size: var(--font-4xl);
    font-weight: 500;
    line-height: 2.5rem;
    color: var(--brand-500);
    padding-bottom: 1.75rem;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/IBMPlexSansVar-Roman.woff2') format('woff2');
}

* {
    font-family: "IBM Plex Sans", sans-serif;
}