:root {
    --color-brand-light-sky: #f1f8ff;
    --color-brand-slate: #3f464d;

    --color-brand-cerulean-100: #d0deec;
    --color-brand-cerulean-200: #a0bdd8;
    --color-brand-cerulean-300: #719cc5;
    --color-brand-cerulean-400: #417bb1;
    --color-brand-cerulean-500: #125a9e;
    --color-brand-cerulean-600: #0e487e;
    --color-brand-cerulean-700: #0b365f;
    --color-brand-cerulean-800: #07243f;
    --color-brand-cerulean-900: #041220;

    --color-brand-cerulean-500-opacity-0: rgb(18 90 158 / 0);
    --color-brand-cerulean-500-opacity-20: rgb(18 90 158 / 0.2);
    --color-brand-cerulean-500-opacity-40: rgb(18 90 158 / 0.4);
    --color-brand-cerulean-500-opacity-60: rgb(18 90 158 / 0.6);
    --color-brand-cerulean-500-opacity-90: rgb(18 90 158 / 0.9);

    --color-neutral-white: #ffffff;

    --color-neutral-50: #f2f2f2;
    --color-neutral-100: #e6e6e6;
    --color-neutral-200: #cccccc;
    --color-neutral-300: #b3b3b3;
    --color-neutral-400: #999999;
    --color-neutral-500: #808080;
    --color-neutral-600: #666666;
    --color-neutral-700: #4d4d4d;
    --color-neutral-800: #333333;
    --color-neutral-900: #1a1a1a;

    --color-neutral-black: #000000;

    --color-neutral-white-opacity-20: rgb(255 255 255 / 0.2);
    --color-neutral-white-opacity-40: rgb(255 255 255 / 0.4);
    --color-neutral-black-opacity-60: rgb(0 0 0 / 0.6);

    --color-utility-green: #17a231;
    --color-utility-yellow: #f49b1d;
    --color-highlight-search: #f4e21d;

    --color-utility-red-100: #f6d6d3;
    --color-utility-red-200: #ecaca8;
    --color-utility-red-500: #d03025;

    --radius-01: 4px;
    --radius-02: 8px;
    --radius-03: 12px;
    --radius-04: 16px;
    --radius-05: 500px;

    --spacing-00: 0px;
    --spacing-01: 2px;
    --spacing-02: 4px;
    --spacing-03: 8px;
    --spacing-04: 12px;
    --spacing-05: 16px;
    --spacing-06: 20px;
    --spacing-07: 24px;
    --spacing-08: 32px;
    --spacing-09: 40px;
    --spacing-10: 48px;
    --spacing-11: 60px;
    --spacing-12: 80px;
    --spacing-13: 100px;
    --spacing-14: 120px;

    --size-01: 10px;
    --size-02: 12px;
    --size-03: 14px;
    --size-04: 16px;
    --size-05: 18px;
    --size-06: 20px;
    --size-07: 24px;
    --size-08: 28px;
    --size-09: 32px;
    --size-10: 40px;
    --size-11: 48px;

    --font-family-poppins: "Poppins", sans-serif;
    --font-family-open-sans: "Open Sans", sans-serif;

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

    --font-family-title: "Poppins", sans-serif;
    --font-family-body: "Open Sans", sans-serif;
    --font-family-label: "Open Sans", sans-serif;
    --font-family-cta: "Open Sans", sans-serif;

    --font-size-title-1: 48px;
    --font-size-title-2: 40px;
    --font-size-title-3: 32px;
    --font-size-title-4: 28px;
    --font-size-title-5: 24px;
    --font-size-title-6: 20px;
    --font-size-title-7: 16px;
    --font-size-title-8: 14px;

    --font-weight-title: var(--font-weight-medium);

    --font-size-body-l: 18px;
    --font-size-body-m: 16px;
    --font-size-body-s: 14px;
    --font-size-body-xs: 12px;

    --font-weight-body: var(--font-weight-regular);
    --font-weight-body-strong: var(--font-weight-bold);

    --font-size-label-2xl: 24px;
    --font-size-label-xl: 18px;
    --font-size-label-l: 16px;
    --font-size-label-m: 14px;
    --font-size-label-s: 12px;
    --font-size-label-xs: 10px;

    --font-weight-label: var(--font-weight-semibold);

    --font-size-cta-m: 14px;
    --font-size-cta-s: 12px;

    --font-weight-cta: var(--font-weight-semibold);

    --crm-header-height: 56px;
    --crm-gutter: var(--spacing-06);
    --gutter: var(--spacing-06);
}

@media (max-width: 768px) {
    :root {
        --spacing-11: 56px;
        --spacing-12: 68px;
        --spacing-13: 84px;
        --spacing-14: 100px;

        --gutter: var(--spacing-06);
        --crm-gutter: var(--spacing-06);

        --font-size-title-1: 32px;
        --font-size-title-2: 28px;
        --font-size-title-3: 24px;
        --font-size-title-4: 20px;
        --font-size-title-5: 18px;
        --font-size-title-6: 16px;
        --font-size-title-7: 14px;
        --font-size-title-8: 12px;

        --font-size-label-2xl: 20px;
        --font-size-label-xl: 18px;
        --font-size-label-l: 16px;
        --font-size-label-m: 14px;
        --font-size-label-s: 12px;
        --font-size-label-xs: 10px;
    }
}