/* Fonts */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Lato/Lato-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}

:root {

    /* Font Variables */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;

    /* Brand Colors */
    --brand-color-500: #00381CFF;
    --brand-color-400: #004E27FF;
    --brand-color-300: #007038FF;
    --brand-color-200: #2B885AFF;
    --brand-color-100: #6BAC8CFF;
    --brand-color-75: #96C4ADFF;
    --brand-color-50: #E6F1EBFF;

    /* System Colors */
    --system-color-green-500: #1B683EFF;
    --system-color-green-300: #2BAA66FF;
    --system-color-green-50: #EAF7F0FF;
    --system-color-blue-500: #124191FF;
    --system-color-blue-300: #1E6AEDFF;
    --system-color-blue-50: #E9EBF8FF;
    --system-color-yellow-500: #9C8800FF;
    --system-color-yellow-300: #FFDF00FF;
    --system-color-yellow-50: #FFFCE6FF;
    --system-color-red-500: #832524FF;
    --system-color-red-300: #D93B3BFF;
    --system-color-red-50: #FBEBEBFF;

    /* Border Radius */
    --round-80: 12px;
    --round-100: 16px;
    --round-120: 20px;
    --round-button: 9999px;
    --round-circle: 9999px;

    /* Shadows */
    --shadow-x-button: 0px;
    --shadow-x-md: 0px;
    --shadow-y-button: 0px;
    --shadow-y-md: 8px;
    --shadow-blur-button: 0px;
    --shadow-blur-md: 20px;
    --shadow-spread-button: 0px;
    --shadow-spread-md: 0px;
    --shadow-color-button: rgba(0, 0, 0, 0);
    --shadow-color-md: rgba(0, 0, 0, 0.2);

    /* Base Colors */
    --base-black: #000000FF;
    --base-white: #FFFFFFFF;

    /* Alpha Colors */
    --alpha-black-75: #000000BF;
    --alpha-black-50: #00000080;
    --alpha-black-25: #00000040;
    --alpha-white-75: #FFFFFFBF;
    --alpha-white-50: #FFFFFF80;
    --alpha-white-25: #FFFFFF40;

    /* Grey Scale */
    --grey-500: #212121FF;
    --grey-400: #424242FF;
    --grey-300: #8F8F8FFF;
    --grey-200: #BDBDBDFF;
    --grey-100: #EEEEEEFF;
    --grey-50: #FCFCFCFF;

    /* Spacing Scale */
    --space-60: 8px;
    --space-70: 12px;
    --space-80: 16px;
    --space-100: 24px;
    --space-120: 32px;
    --space-140: 40px;
    --space-180: 56px;
    --space-240: 80px;

    /* Typography - Font Sizes */
    --typography-font-size-80: 12px;
    --typography-font-size-90: 14px;
    --typography-font-size-100: 16px;
    --typography-font-size-120: 20px;
    --typography-font-size-140: 24px;
    --typography-font-size-200: 36px;
    --typography-font-size-260: 48px;
    --typography-font-size-380: 72px;

    /* Typography - Line Heights */
    --typography-line-height-80: 20px;
    --typography-line-height-100: 24px;
    --typography-line-height-120: 28px;
    --typography-line-height-140: 32px;
    --typography-line-height-200: 44px;
    --typography-line-height-260: 56px;
    --typography-line-height-380: 80px;

    /* Typography - Font Families */
    --font-family-heading: var(--font-heading), sans-serif;
    --font-family-body: var(--font-body), sans-serif;
    --font-family-caption: var(--font-body), sans-serif;
    --font-family-overline: var(--font-body), sans-serif;
    --font-family-action: var(--font-body), sans-serif;

    /* Typography - Font Weights */
    --font-weight-bold: 700;
    --font-weight-regular: 400;
    --font-weight-action: 400;

    /* ============================================
       Custom Colors
       ============================================ */

    /* Typography */
    --typography-title: var(--grey-500);
    --typography-body: var(--grey-400);
    --typography-caption: var(--grey-300);

    /* Button */
    --text--primary-button: var(--base-white);
    --stroke--primary-button: none;
    --text--neutral-button: var(--base-white);
    --text--outline-button: var(--grey-500);
    --stroke--outline-button: var(--grey-200);
}