:root {
    --typography-body-body: Manrope;
    --typography-icons-icons5-500: "Material Symbols Outlined";
    --typography-heading-h2lg: "Bakbak One";
    --typography-body-body-size: 16px;
    --typography-icons-icons5-500-size: 20px;
    --typography-icons-icons6-600-size: 24px;
    --font-size-lgi: 19px;
    --typography-body-bodysm-size: 14px;
    --font-size-13xl: 32px;
    --font-size-7xl: 26px;
    --typography-heading-h2lg-size: 48px;
    --font-size-19xl: 38px;
    --typography-labels-buttonhero-size: 22px;
    --typography-heading-h1lg-size: 64px;

    --color-gainsboro-100: #e6e6e6;
    --color-gainsboro-200: #d9d9db;
    --colors-fill-disabledHigh: #d7d8db;
    --colors-border-neutrallight: #D7D8DB;
    --color-gainsboro-300: rgba(217, 217, 219, 0.55);
    --colors-border-disabled: #878a92;
    --colors-text-soft: #28292a;
    --colors-text-base: #141415;
    --colors-border-deep: #FFFFFF;
    --border-maincta: rgba(255, 255, 255, 0.5);
    --colors-fill-bgmain: #fff;
    --colors-text-link: #046a95;
    --colors-fill-bgsoft: #f3f3f4;
    --colors-overlay-onmedia: rgba(243, 243, 244, 0.55);
    --colors-border-primary: #f86407;
    --colors-fill-secondary: #24a404;
    --color-dimgray: #6e7078;
    --color-darkslategray: #474747;
    --colors-brand-orange-high: #fa8338;
    --colors-border-neutralbase: #878a92;
    --colors-overlay-backdrop: rgba(243, 243, 244, 0.77);
    --colors-fill-primary: #f86407;
    --colors-fill-primary-hover: #cc4c06;
    --colors-fill-bgInverted: #141415;
    --colors-text-base_inverted: #FFF;
    --colors-border-secondary: #24A404;
    --colors-fill-bgAccent: #FEE0CD;
    --colors-neutrals-neutral-11: #FFF;
    --fill-mainCTA: #141415;
    --colors-fill-error: #99210F;
    --colors-fill-bgaccentalt: #ECF6FA;
    --color-dimgray-search: #ffffff;
    --viewport: 100%;
    --spacing-inner-s-4: 16px;
    --spacing-inner-s-5: 20px;
    --spacing-outter-s-8: 32px;
    --spacing-outter-s-5: 20px;
    --spacing-inner-s-3: 12px;
    --spacing-outter-s-6: 24px;
    --spacing-inner-s-2: 8px;
    --spacing-inner-s-1: 4px;
    --spacing-outter-s-12: 48px;
    --spacing-outter-s-16: 64px;
    --styling-border-radius-r-rounded: 9999px;
    --spacing-outter-s-10: 40px;
    --styling-border-radius-r-xl: 16px;
    --spacing-inner-s-6: 24px;
    --styling-border-radius-r-sm: 4px;
    --spacing-inner-s-half: 2px;
    --spacing-outter-spacing-28: 112px;
    --sizing-20: 80px;
    --gap-base: 16px;
    --gap-xs: 12px;
    --gap-5xl: 24px;
    --gap-5xs: 8px;
    --gap-29xl: 48px;
    --gap-21xl: 40px;
    --gap-xl: 20px;
    --gap-9xs: 4px;
    --padding-base: 16px;
    --padding-xl: 20px;
    --padding-13xl: 32px;
    --padding-9xs: 4px;
    --padding-8xl: 27px;
    --padding-5xs: 8px;
    --padding-5xl: 24px;
    --padding-6xl: 25px;
    --padding-121xl: 140px;
    --padding-11xs: 2px;
    --padding-10xs: 3px;
    --padding-xs: 12px;
    --padding-4xs: 9px;
    --br-9980xl: 9999px;
    --br-base: 16px;
    --br-9xs: 4px
}

@media (prefers-color-scheme: dark) {
    html.system {
        --typography-body-body: Manrope;
        --typography-icons-icons5-500: "Material Symbols Outlined";
        --typography-heading-h2lg: "Bakbak One";
        --typography-body-body-size: 16px;
        --typography-icons-icons5-500-size: 20px;
        --typography-icons-icons6-600-size: 24px;
        --font-size-lgi: 19px;
        --typography-body-bodysm-size: 14px;
        --font-size-13xl: 32px;
        --font-size-7xl: 26px;
        --typography-heading-h2lg-size: 48px;
        --font-size-19xl: 38px;
        --typography-labels-buttonhero-size: 22px;
        --typography-heading-h1lg-size: 64px;
        --colors-text-soft: #f3f3f4;
        --colors-text-base: #fff;
        --colors-fill-error: #ff7a66;
        --colors-border-neutralbase1: #878a92;
        --colors-border-neutralbase: #797e86;
        --colors-border-neutrallight: #505358;
        --colors-fill-bgmain: #28292a;
        --colors-fill-bgsoft: #141415;
        --colors-fill-accent: #058dc7;
        --colors-fill-bgaccentalt: #1c3540;
        --colors-fill-bgAccent: #6e2c02;
        --colors-fill-disabledHigh: #505358;
        --colors-fill-secondary-accent: #24a404;
        --colors-fill-secondary: #68fa44;
        --colors-fill-primary-accent: #f86407;
        --colors-fill-primary: #fa8338;
        --colors-brand-orange-faded: #fee0cd;
        --colors-fill-bgInverted : #FFF;
        --colors-text-base_inverted: #141415;
        --colors-border-secondary: #68FA44;
        --colors-neutrals-neutral-11: #FFF;
        --fill-mainCTA: #141415;
        --color-dimgray-search: #606060;
        --viewport: 100%;
        --spacing-inner-s-4: 16px;
        --spacing-inner-s-5: 20px;
        --spacing-outter-s-8: 32px;
        --spacing-outter-s-5: 20px;
        --spacing-inner-s-3: 12px;
        --spacing-outter-s-6: 24px;
        --spacing-inner-s-2: 8px;
        --spacing-inner-s-1: 4px;
        --spacing-outter-s-12: 48px;
        --spacing-outter-s-16: 64px;
        --styling-border-radius-r-rounded: 9999px;
        --spacing-outter-s-10: 40px;
        --styling-border-radius-r-xl: 16px;
        --spacing-inner-s-6: 24px;
        --styling-border-radius-r-sm: 4px;
        --spacing-inner-s-half: 2px;
        --spacing-outter-spacing-28: 112px;
        --sizing-20: 80px;
        --gap-base: 16px;
        --gap-xs: 12px;
        --gap-5xl: 24px;
        --gap-5xs: 8px;
        --gap-29xl: 48px;
        --gap-21xl: 40px;
        --gap-xl: 20px;
        --gap-9xs: 4px;
        --padding-base: 16px;
        --padding-xl: 20px;
        --padding-13xl: 32px;
        --padding-9xs: 4px;
        --padding-8xl: 27px;
        --padding-5xs: 8px;
        --padding-5xl: 24px;
        --padding-6xl: 25px;
        --padding-121xl: 140px;
        --padding-11xs: 2px;
        --padding-10xs: 3px;
        --padding-xs: 12px;
        --padding-4xs: 9px;
        --br-9980xl: 9999px;
        --br-base: 16px;
        --br-9xs: 4px
    }
}

html.dark {
    --typography-body-body: Manrope;
    --typography-icons-icons5-500: "Material Symbols Outlined";
    --typography-heading-h2lg: "Bakbak One";
    --typography-body-body-size: 16px;
    --typography-icons-icons5-500-size: 20px;
    --typography-icons-icons6-600-size: 24px;
    --font-size-lgi: 19px;
    --typography-body-bodysm-size: 14px;
    --font-size-13xl: 32px;
    --font-size-7xl: 26px;
    --typography-heading-h2lg-size: 48px;
    --font-size-19xl: 38px;
    --typography-labels-buttonhero-size: 22px;
    --typography-heading-h1lg-size: 64px;
    --colors-text-soft: #f3f3f4;
    --colors-text-base: #fff;
    --colors-fill-error: #ff7a66;
    --colors-border-neutralbase1: #878a92;
    --colors-border-neutralbase: #797e86;
    --colors-border-neutrallight: #505358;
    --colors-fill-bgmain: #28292a;
    --colors-fill-bgsoft: #141415;
    --colors-fill-accent: #058dc7;
    --colors-fill-bgaccentalt: #1c3540;
    --colors-fill-bgAccent: #6e2c02;
    --colors-fill-disabledHigh: #505358;
    --colors-fill-secondary-accent: #24a404;
    --colors-fill-secondary: #68fa44;
    --colors-fill-primary-accent: #f86407;
    --colors-fill-primary: #fa8338;
    --colors-brand-orange-faded: #fee0cd;
    --colors-fill-bgInverted : #FFF;
    --colors-text-base_inverted: #141415;
    --colors-border-secondary: #68FA44;
    --colors-neutrals-neutral-11: #FFF;
    --fill-mainCTA: #141415;
    --color-dimgray-search: #606060;
    --viewport: 100%;
    --spacing-inner-s-4: 16px;
    --spacing-inner-s-5: 20px;
    --spacing-outter-s-8: 32px;
    --spacing-outter-s-5: 20px;
    --spacing-inner-s-3: 12px;
    --spacing-outter-s-6: 24px;
    --spacing-inner-s-2: 8px;
    --spacing-inner-s-1: 4px;
    --spacing-outter-s-12: 48px;
    --spacing-outter-s-16: 64px;
    --styling-border-radius-r-rounded: 9999px;
    --spacing-outter-s-10: 40px;
    --styling-border-radius-r-xl: 16px;
    --spacing-inner-s-6: 24px;
    --styling-border-radius-r-sm: 4px;
    --spacing-inner-s-half: 2px;
    --spacing-outter-spacing-28: 112px;
    --sizing-20: 80px;
    --gap-base: 16px;
    --gap-xs: 12px;
    --gap-5xl: 24px;
    --gap-5xs: 8px;
    --gap-29xl: 48px;
    --gap-21xl: 40px;
    --gap-xl: 20px;
    --gap-9xs: 4px;
    --padding-base: 16px;
    --padding-xl: 20px;
    --padding-13xl: 32px;
    --padding-9xs: 4px;
    --padding-8xl: 27px;
    --padding-5xs: 8px;
    --padding-5xl: 24px;
    --padding-6xl: 25px;
    --padding-121xl: 140px;
    --padding-11xs: 2px;
    --padding-10xs: 3px;
    --padding-xs: 12px;
    --padding-4xs: 9px;
    --br-9980xl: 9999px;
    --br-base: 16px;
    --br-9xs: 4px
}