:root {
    --white: #fff;
    --black: #000;

    --blue: #3d6adb;
    --blue-darker: #092c5d;
    --blue-darkest: #001534;

    --cyan-lightest: #e4f2f2;
    --cyan: #009eb3;
    --cyan-dark: #007d8e;

    --yellow-lighter: #faecd6;
    --yellow-light: #f8deb5;
    --yellow: #fabd5c;
    --yellow-dark: #e9ac4b;
    --red: #fa8373;
    --red-dark: #ea5e4c;
    --red-light: #fbdad7;
    --red-lightest: #fcedeb;

    --red-outline: #fa837300;

    --creme-light: #f7f6f2;
    --creme-dark: #e5e4e1;

    --grey-50: #f7f7f7;
    --grey-100: #e6e7e9;
    --grey-200: #dadbde;
    --grey-300: #c8c9cd;
    --grey-400: #bdbfc4;
    --grey-500: #aaadb2;
    --grey-600: #878b93;
    --grey-700: #686c74;
    --grey-800: #3e4146;
    --grey-900: #222326;

    --color-background-light-beige: hsla(40, 38%, 95%, 1);

    --color-background-dark-beige: hsla(40, 8%, 89%, 1);

    --font-family: "Nunito Sans", system-ui, sans-serif;
    --font-family-display: "Playfair Display";

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-xxs: 0.75rem;
    /* 12px */
    --font-size-xs: 0.875rem;
    /* 14px */
    --font-size-s: 1rem;
    /* 16px */
    --font-size-m: 1.125rem;
    /* 18px */
    --font-size-l: 1.25rem;
    /* 20px */
    --font-size-xl: 2rem;
    /* 32px */
    --font-size-xxl: 2.5rem;
    /* 40px */
    --font-size-3xl: 3.375rem;
    /* 54px */


    --line-height-xs: 1.2;
    --line-height-s: 1.4;
    --line-height-m: 1.5;

    --spacing-xs: 0.125rem;
    /* 2px */
    --spacing-s: 0.25rem;
    /* 4px */
    --spacing-m: 0.5rem;
    /* 8px */
    --spacing-l: 0.75rem;
    /* 12px */
    --spacing-xl: 1rem;
    /* 16px */
    --spacing-xxl: 1.25rem;
    /* 20px */
    --spacing-3xl: 1.5rem;
    /* 24px */
    --spacing-4xl: 1.75rem;
    /* 28px */
    --spacing-5xl: 2rem;
    /* 32px */
    --spacing-6xl: 2.25rem;
    /* 36px */
    --spacing-7xl: 3rem;
    /* 48px */
    --spacing-8xl: 4rem;
    /* 64px */
    --spacing-9xl: 5rem;
    /* 80px */
}

.fc-primary {
    color: var(--blue-darker);
}


.margin-bottom-l {
    margin-bottom: var(--spacing-xl);
}
.margin-bottom-7xl {
    margin-bottom: var(--spacing-7xl);
}

.margin-bottom-9xl {
    margin-bottom: var(--spacing-9xl);
}

.txt-align-center {
    text-align: center;
}

.txt-align-left {
    text-align: left;
}

.bg-cyan {
    background-color: var(--cyan);
}

.bg-red {
    background-color: var(--red);
}

.bg-primary {
    background-color: var(--blue-darker);
}

.bg-white {
    background-color: white;
}

.bg-grey {
    background-color: var(--grey-500);
}

.bg-creme {
    background-color: var(--creme-light);
}

.fc-white {
    color: white;
}