body {
    /* brand colors */
    --color-brand--kind_blue_raw: #0c111d;
    --color-brand--kind_blue_bold: #222875;
    --color-brand--kind_blue_medium: #0061fe;
    --color-brand--kind_blue_light: #dfeafb;
    --color-brand--kind_blue_subtle: #f3f7fe;

    /* accent colors */
    /* lime melon */
    --color-accent--lime_melon_raw: #3a460b;
    --color-accent--lime_melon_bold: #8eae14;
    --color-accent--lime_melon_medium: #b4dc19;
    --color-accent--lime_melon_light: #d8f07a;
    --color-accent--lime_melon_subtle: #edf2d9;

    /* teal turquoise */
    --color-accent--teal_turquoise_raw: #043944;
    --color-accent--teal_turquoise_bold: #007891;
    --color-accent--teal_turquoise_medium: #10a0bc;
    --color-accent--teal_turquoise_light: #56d7f1;
    --color-accent--teal_turquoise_subtle: #e0eaeb;

    /* king crimson */
    --color-accent-king_crimson_raw: #611f3e;
    --color-accent-king_crimson_bold: #a62664;
    --color-accent-king_crimson_medium: #cd2f7b;
    --color-accent-king_crimson_light: #e693bb;
    --color-accent-king_crimson_subtle: #f4ebf1;

    /* chilli red */
    --color-accent-chili_red_raw: #5c0a18;
    --color-accent-chili_red_bold: #9b001a;
    --color-accent-chili_red_medium: #ff0026;
    --color-accent-chili_red_light: #ffafa5;
    --color-accent-chili_red_subtle: #ffe4dc;

    /* pumpkin orange */
    --color-accent-pumpkin_orange_raw: #8e2c0b;
    --color-accent-pumpkin_orange_bold: #fa551e;
    --color-accent-pumpkin_orange_medium: #ff8c19;
    --color-accent-pumpkin_oranged_light: #ffbf80;
    --color-accent-pumpkin_orange_subtle: #ffe4cc;

    /* keen green */
    --color-accent-keen_green_raw: #0b2d23;
    --color-accent-keen_green_bold: #0f503c;
    --color-accent-keen_green_medium: #1d9b74;
    --color-accent-keen_green_light: #62dab5;
    --color-accent-keen_green_subtle: #e2ece8;

    /* mustard yellow */
    --color-accent-mustard_yellow_raw: #554307;
    --color-accent-mustard_yellow_bold: #f3bd07;
    --color-accent-mustard_yellow_medium: #ffd752;
    --color-accent-mustard_yellow_light: #ffe385;
    --color-accent-mustard_yellow_subtle: #faf5e5;

    /* deep purple */
    --color-accent-deep_purple_raw: #401c3b;
    --color-accent-deep_purple_bold: #78286e;
    --color-accent-deep_purple_medium: #c8aff0;
    --color-accent-deep_purple_light: #e4d8f8;
    --color-accent-deep_purple_subtle: #f3f0fa;

    /* neutrals */
    /* black */
    --color-neutral-black--neutral_100: #131720;
    --color-neutral-black--neutral_90: #1b222d;
    --color-neutral-black--neutral_80: #2e333d;
    --color-neutral-black--neutral_70: #3f434b;
    --color-neutral-black--neutral_60: #515358;

    /* beige */
    --color-neutral-beige--neutral_50: #7b7774;
    --color-neutral-beige--neutral_40: #9c9691;
    --color-neutral-beige--neutral_30: #bbb5ae;
    --color-neutral-beige--neutral_20: #d3cec9;
    --color-neutral-beige--neutral_10: #ebe9e6;

    /* white */
    --color-neutral-white--neutral_0: #f7f5f2;
    --color-neutral-white--neutral_bright_white: #fdfdfc;

    /* alpha */
    /* black */
    --color-alpha--black_alpha_3: rgba(19, 23, 32, 0.03);
    --color-alpha--black_alpha_5: rgba(19, 23, 32, 0.05);
    --color-alpha--black_alpha_15: rgba(19, 23, 32, 0.15);
    --color-alpha--black_alpha_25: rgba(19, 23, 32, 0.25);
    --color-alpha--black_alpha_35: rgba(19, 23, 32, 0.35);
    --color-alpha--black_alpha_50: rgba(19, 23, 32, 0.5);
    --color-alpha--black_alpha_65: rgba(19, 23, 32, 0.65);
    --color-alpha--black_alpha_80: rgba(19, 23, 32, 0.8);

    /* white */
    --color-alpha--white_alpha_10: rgba(247, 245, 242, 0.1);
    --color-alpha--white_alpha_15: rgba(247, 245, 242, 0.15);
    --color-alpha--white_alpha_25: rgba(247, 245, 242, 0.25);
    --color-alpha--white_alpha_35: rgba(247, 245, 242, 0.35);
    --color-alpha--white_alpha_45: rgba(247, 245, 242, 0.45);
    --color-alpha--white_alpha_60: rgba(247, 245, 242, 0.6);
    --color-alpha--white_alpha_75: rgba(247, 245, 242, 0.75);
    --color-alpha--white_alpha_90: rgba(247, 245, 242, 0.9);

    /* shadows */
    --shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(10, 13, 18, 0.10), 0 1px 2px 0 rgba(10, 13, 18, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(10, 13, 18, 0.10), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
    --shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03);
    --shadow-xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03);
    --shadow-xxl: 0 24px 48px -12px rgba(10, 13, 18, 0.18);
    --shadow-xxxl: 0 32px 64px -12px rgba(10, 13, 18, 0.14);

    /* Typography */
    /* font family */
    --font-family--default: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
    --font-family--default_mono: "Geist Mono", "SF Mono", "Roboto Mono", "Liberation Mono", "Courier New", monospace;

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

    /* font size */
    --font-size--emphasis: 100px;
    --font-size--h1: 68px;
    --font-size--h2: 55px;
    --font-size--h3: 48px;
    --font-size--h4: 36px;
    --font-size--h5: 28px;
    --font-size--h6: 24px;
    --font-size--body-xl: 21px;
    --font-size--body-l: 18px;
    --font-size--body-m: 16px;
    --font-size--body-s: 14px;
    --font-size--body-xs: 12px;

    /* letter spacing */
    --letter-spacing-positive--2: 1px;
    --letter-spacing-positive--1: 0.3px;
    --letter-spacing--0: 0;
    --letter-spacing-negative--1: -0.5px;
    --letter-spacing-negative--2: -1px;

    /* button font size */
    --button-xl: 20px;
    --button-large: 18px;
    --button-medium: 16px;
    --button-small: 14px;

    /* icon size */
    --icon-size--64: 64px;
    --icon-size--56: 56px;
    --icon-size--48: 48px;
    --icon-size--40: 40px;
    --icon-size--32: 32px;
    --icon-size--24: 24px;
    --icon-size--20: 20px;
    --icon-size--16: 16px;
    --icon-size--14: 14px;
    --icon-size--12: 12px;

    /* border radius */
    --radius-0: 0;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-16: 16px;
    --radius-18: 18px;
    --radius-20: 20px;
    --radius-22: 22px;
    --radius-24: 24px;
    --radius-full: 1000px;

    /* spacing */
    --space-0: 0px;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-112: 112px;
    --space-128: 128px;
    --space-160: 160px;
    --space-192: 192px;

    /* layout */
    --header-height: 72px;
    --space-224: 224px;
    --space-256: 256px;

    /* layout */
    --header-height: 72px;

    /* breakpoints [xlg] */
    --breakpoint--xlg-max: 1920px;
    --breakpoint--xlg-min: 1600px;

    /* breakpoints [lg] */
    --breakpoint-lg-max: 1599px;
    --breakpoint-lg-min: 1400px;

    /* breakpoints [md] */
    --breakpoint--md-max: 991px;
    --breakpoint--md-min: 768px;

    /* breakpoints [xs] */
    --breakpoint--xs-max: 767px;
    --breakpoint--xs-min: 375px;

    /* grid padding */
    --padding-xxxl: 160px;
    --padding-xxl: 122px;
    --padding-xl: 80px;
    --padding-large: 48px;
    --padding-medium: 32px;
    --padding-small: 24px;
    --padding-extra-small: 16px;

    /* timing variables */
    --timing--transition-duration: 150ms;
    --timing--transition-function: ease-out;

    /* column widths */
    --col-1: 86px;
    --col-2: 196px;
    --col-3: 306px;
    --col-4: 416px;
    --col-5: 526px;
    --col-6: 636px;
    --col-7: 746px;
    --col-8: 856px;
    --col-9: 966px;
    --col-10: 1076px;
    --col-11: 1186px;
    --col-12: 1296px;
}

/* breakpoints */
/* --breakpoint-lg-min: 1400px; */
@media (min-width: 1400px) {
    body main,
    .li-elementor-widget,
    .elementor-widget-text-editor {
        --font-size--em: 86px;
        --font-size--h1: 64px;
        --font-size--h2: 55px;
        --font-size--h3: 48px;
        --font-size--h4: 36px;
        --font-size--h5: 28px;
        --font-size--h6: 24px;
        --font-size--body-xl: 21px;
        --font-size--body-l: 18px;
        --font-size--body-m: 16px;
        --font-size--body-s: 14px;
        --font-size--body-xs: 12px;

        --col-1: 97px;
        --col-2: 218px;
        --col-3: 339px;
        --col-4: 460px;
        --col-5: 581px;
        --col-6: 702px;
        --col-7: 823px;
        --col-8: 944px;
        --col-9: 1065px;
        --col-10: 1186px;
        --col-11: 1307px;
        --col-12: 1428px;
    }
}

/* --breakpoint--md-max: 991px; --breakpoint--md-min: 768px */
@media (min-width: 768px) and (max-width: 991px) {
    body main,
    .li-elementor-widget,
    .elementor-widget-text-editor {
        --font-size--em: 48px;
        --font-size--h1: 48px;
        --font-size--h2: 36px;
        --font-size--h3: 36px;
        --font-size--h4: 28px;
        --font-size--h5: 24px;
        --font-size--h6: 21px;
        --font-size--body-xl: 18px;
        --font-size--body-l: 16px;
        --font-size--body-m: 16px;
        --font-size--body-s: 12px;
        --font-size--body-xs: 11px;

        --padding-xxxl: 122px;
        --padding-xxl: 96px;
        --padding-xl: 64px;
        --padding-large: 32px;

        --col-1: 66px;
        --col-2: 156px;
        --col-3: 246px;
        --col-4: 336px;
        --col-5: 426px;
        --col-6: 516px;
        --col-7: 606px;
        --col-8: 696px;
        --col-9: 696px;
        --col-10: 696px;
        --col-11: 696px;
        --col-12: 696px;
    }
}

/* --breakpoint--xs-max: 767px; */
@media (max-width: 767px) {
    body main,
    .li-elementor-widget,
    .elementor-widget-text-editor {
        --font-size--em: 36px;
        --font-size--h1: 36px;
        --font-size--h2: 32px;
        --font-size--h3: 28px;
        --font-size--h4: 24px;
        --font-size--h5: 21px;
        --font-size--h6: 18px;
        --font-size--body-xl: 16px;
        --font-size--body-l: 16px;
        --font-size--body-m: 14px;
        --font-size--body-s: 12px;
        --font-size--body-xs: 11px;

        --padding-xxxl: 64px;
        --padding-xxl: 64px;
        --padding-xl: 48px;
        --padding-large: 32px;
        --padding-medium: 24px;

        --col-1: 69px;
        --col-2: 158px;
        --col-3: 246px;
        --col-4: 335px;
        --col-5: 335px;
        --col-6: 335px;
        --col-7: 335px;
        --col-8: 335px;
        --col-9: 335px;
        --col-10: 335px;
        --col-11: 335px;
        --col-12: 335px;
    }
}

/* --breakpoint--xxs-max: 389px; */
@media (max-width: 389px) {
    body main,
    .li-elementor-widget,
    .elementor-widget-text-editor {
        --font-size--em: 32px;
        --font-size--h1: 32px;
        --font-size--h2: 28px;
        --font-size--h3: 25px;
        --font-size--h4: 22px;
    }
}

:root {
    /* plyr variables overwrite */
    --plyr-color-main: var(--color-brand--kind_blue_raw) !important;
    --plyr-focus-visible-color: var(--color-brand--kind_blue_medium) !important;
    --plyr-video-background: var(--color-neutral-white--neutral_bright_white) !important;
}
