:root {
  --white: rgba(255, 255, 255, 1);
  --gray-300: rgba(208, 213, 221, 1);
  --display-md-medium-font-family: "Gilroy-Medium", Helvetica;
  --display-md-medium-font-weight: 400;
  --display-md-medium-font-size: 36px;
  --display-md-medium-letter-spacing: 0px;
  --display-md-medium-line-height: 44px;
  --display-md-medium-font-style: normal;
  --text-xl-regular-font-family: "Gilroy-Regular-☞", Helvetica;
  --text-xl-regular-font-weight: 400;
  --text-xl-regular-font-size: 20px;
  --text-xl-regular-letter-spacing: 0px;
  --text-xl-regular-line-height: 30px;
  --text-xl-regular-font-style: normal;
  --text-xl-semibold-font-family: "Gilroy-SemiBold", Helvetica;
  --text-xl-semibold-font-weight: 400;
  --text-xl-semibold-font-size: 20px;
  --text-xl-semibold-letter-spacing: 0px;
  --text-xl-semibold-line-height: 30px;
  --text-xl-semibold-font-style: normal;
  --text-lg-medium-font-family: "Gilroy-Medium", Helvetica;
  --text-lg-medium-font-weight: 400;
  --text-lg-medium-font-size: 18px;
  --text-lg-medium-letter-spacing: 0px;
  --text-lg-medium-line-height: 28px;
  --text-lg-medium-font-style: normal;
  --text-md-regular-font-family: "Gilroy-Regular-☞", Helvetica;
  --text-md-regular-font-weight: 400;
  --text-md-regular-font-size: 16px;
  --text-md-regular-letter-spacing: 0px;
  --text-md-regular-line-height: 22px;
  --text-md-regular-font-style: normal;
  --text-md-link-link-default-font-family: "Gilroy-Bold", Helvetica;
  --text-md-link-link-default-font-weight: 400;
  --text-md-link-link-default-font-size: 16px;
  --text-md-link-link-default-letter-spacing: 0px;
  --text-md-link-link-default-line-height: 22px;
  --text-md-link-link-default-font-style: normal;
  --text-md-link-link-hover-font-family: "Gilroy-Bold", Helvetica;
  --text-md-link-link-hover-font-weight: 400;
  --text-md-link-link-hover-font-size: 16px;
  --text-md-link-link-hover-letter-spacing: 0px;
  --text-md-link-link-hover-line-height: 22px;
  --text-md-link-link-hover-font-style: normal;
  --text-md-medium-font-family: "Gilroy-Medium", Helvetica;
  --text-md-medium-font-weight: 400;
  --text-md-medium-font-size: 16px;
  --text-md-medium-letter-spacing: 0px;
  --text-md-medium-line-height: 22px;
  --text-md-medium-font-style: normal;
  --text-sm-medium-font-family: "Gilroy-Medium", Helvetica;
  --text-sm-medium-font-weight: 400;
  --text-sm-medium-font-size: 14px;
  --text-sm-medium-letter-spacing: 0px;
  --text-sm-medium-line-height: 20px;
  --text-sm-medium-font-style: normal;
  --text-sm-regular-font-family: "Gilroy-Regular-☞", Helvetica;
  --text-sm-regular-font-weight: 400;
  --text-sm-regular-font-size: 14px;
  --text-sm-regular-letter-spacing: 0px;
  --text-sm-regular-line-height: 20px;
  --text-sm-regular-font-style: normal;
  --text-xl-medium-font-family: "Gilroy-Medium", Helvetica;
  --text-xl-medium-font-weight: 400;
  --text-xl-medium-font-size: 20px;
  --text-xl-medium-letter-spacing: 0px;
  --text-xl-medium-line-height: 30px;
  --text-xl-medium-font-style: normal;
  --text-lg-regular-font-family: "Gilroy-Regular-☞", Helvetica;
  --text-lg-regular-font-weight: 400;
  --text-lg-regular-font-size: 18px;
  --text-lg-regular-letter-spacing: 0px;
  --text-lg-regular-line-height: 28px;
  --text-lg-regular-font-style: normal;
  --display-sm-medium-font-family: "Gilroy-Medium", Helvetica;
  --display-sm-medium-font-weight: 400;
  --display-sm-medium-font-size: 30px;
  --display-sm-medium-letter-spacing: 0px;
  --display-sm-medium-line-height: 38px;
  --display-sm-medium-font-style: normal;
  --display-sm-regular-font-family: "Gilroy-Regular-☞", Helvetica;
  --display-sm-regular-font-weight: 400;
  --display-sm-regular-font-size: 30px;
  --display-sm-regular-letter-spacing: 0px;
  --display-sm-regular-line-height: 38px;
  --display-sm-regular-font-style: normal;
  --display-xl-medium-font-family: "Gilroy-Medium", Helvetica;
  --display-xl-medium-font-weight: 400;
  --display-xl-medium-font-size: 60px;
  --display-xl-medium-letter-spacing: 0px;
  --display-xl-medium-line-height: 72px;
  --display-xl-medium-font-style: normal;
  --display-xs-medium-font-family: "Gilroy-Medium", Helvetica;
  --display-xs-medium-font-weight: 400;
  --display-xs-medium-font-size: 24px;
  --display-xs-medium-letter-spacing: 0px;
  --display-xs-medium-line-height: 32px;
  --display-xs-medium-font-style: normal;
  --display-lg-medium-font-family: "Gilroy-Medium", Helvetica;
  --display-lg-medium-font-weight: 400;
  --display-lg-medium-font-size: 48px;
  --display-lg-medium-letter-spacing: 0px;
  --display-lg-medium-line-height: 60px;
  --display-lg-medium-font-style: normal;
  --display-xs-regular-font-family: "Gilroy-Regular-☞", Helvetica;
  --display-xs-regular-font-weight: 400;
  --display-xs-regular-font-size: 24px;
  --display-xs-regular-letter-spacing: 0px;
  --display-xs-regular-line-height: 32px;
  --display-xs-regular-font-style: normal;
  --display-xs-semibold-font-family: "Gilroy-SemiBold", Helvetica;
  --display-xs-semibold-font-weight: 400;
  --display-xs-semibold-font-size: 24px;
  --display-xs-semibold-letter-spacing: 0px;
  --display-xs-semibold-line-height: 32px;
  --display-xs-semibold-font-style: normal;
  --display-lg-regular-font-family: "Gilroy-Regular-☞", Helvetica;
  --display-lg-regular-font-weight: 400;
  --display-lg-regular-font-size: 48px;
  --display-lg-regular-letter-spacing: 0px;
  --display-lg-regular-line-height: 60px;
  --display-lg-regular-font-style: normal;
  --text-lg-semi-bold-font-family: "Gilroy-SemiBold", Helvetica;
  --text-lg-semi-bold-font-weight: 400;
  --text-lg-semi-bold-font-size: 18px;
  --text-lg-semi-bold-letter-spacing: 0px;
  --text-lg-semi-bold-line-height: 28px;
  --text-lg-semi-bold-font-style: normal;
  --shadow-small:
    0px 4.5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1.899999976158142px 4px 0px rgba(
      0,
      0,
      0,
      0.05
    ), 0px 0.699999988079071px 1.399999976158142px 0px rgba(0, 0, 0, 0.07);
  --shadow-x-small: 0px 2.299999952316284px 2px 0px rgba(0, 0, 0, 0.03), 0px
    0.800000011920929px 0.800000011920929px 0px rgba(0, 0, 0, 0.04);
  --4-color-mapping-text-title: var(--3-theme-neutral-950);
  --4-color-mapping-text-subdued: var(--3-theme-neutral-400);
  --4-color-mapping-text-title-duplicate: var(--3-theme-neutral-950-duplicate);
  --4-color-mapping-text-subdued-duplicate: var(--3-theme-neutral-400-duplicate);
  --4-color-mapping-text-default: var(--3-theme-neutral-900);
  --4-color-mapping-text-default-duplicate: var(--3-theme-neutral-900-duplicate);
  --4-color-mapping-page-plain: var(--3-theme-neutral-00);
  --4-color-mapping-page-plain-duplicate: var(--3-theme-neutral-00-duplicate);
  --2-swatches-blue-500: rgba(42, 115, 255, 1);
  --2-swatches-grey-50: rgba(245, 245, 246, 1);
  --2-swatches-grey-200: rgba(207, 208, 210, 1);
  --2-swatches-blue-50: rgba(231, 246, 255, 1);
  --2-swatches-grey-00: rgba(255, 255, 255, 1);
  --2-swatches-blue-400: rgba(81, 156, 255, 1);
  --2-swatches-grey-950: rgba(41, 41, 44, 1);
  --2-swatches-grey-400: rgba(131, 132, 141, 1);
  --2-swatches-grey-950-duplicate: rgba(41, 41, 44, 1);
  --2-swatches-grey-400-duplicate: rgba(131, 132, 141, 1);
  --2-swatches-grey-900: rgba(59, 59, 62, 1);
  --2-swatches-grey-900-duplicate: rgba(59, 59, 62, 1);
  --2-swatches-grey-50-duplicate: rgba(245, 245, 246, 1);
  --2-swatches-grey-200-duplicate: rgba(207, 208, 210, 1);
  --2-swatches-grey-100: rgba(229, 229, 232, 1);
  --2-swatches-grey-100-duplicate: rgba(229, 229, 232, 1);
  --2-swatches-grey-00-duplicate: rgba(255, 255, 255, 1);
  --2-swatches-blue-950: rgba(8, 30, 94, 1);
  --2-swatches-blue-600: rgba(6, 67, 255, 1);
  --2-swatches-red-700: rgba(187, 36, 26, 1);
  --2-swatches-green-700: rgba(40, 109, 44, 1);
  --2-swatches-red-100: rgba(254, 228, 226, 1);
  --2-swatches-green-100: rgba(226, 246, 227, 1);
  --3-theme-neutral-950: var(--2-swatches-grey-950);
  --3-theme-neutral-400: var(--2-swatches-grey-400);
  --3-theme-neutral-950-duplicate: var(--2-swatches-grey-950-duplicate);
  --3-theme-neutral-400-duplicate: var(--2-swatches-grey-400-duplicate);
  --3-theme-neutral-900: var(--2-swatches-grey-900);
  --3-theme-neutral-900-duplicate: var(--2-swatches-grey-900-duplicate);
  --3-theme-neutral-00: var(--2-swatches-grey-00);
  --3-theme-neutral-50: var(--2-swatches-grey-50);
  --3-theme-neutral-200: var(--2-swatches-grey-200);
  --3-theme-neutral-50-duplicate: var(--2-swatches-grey-50);
  --3-theme-neutral-200-duplicate: var(--2-swatches-grey-200-duplicate);
  --3-theme-neutral-100: var(--2-swatches-grey-100);
  --3-theme-neutral-100-duplicate: var(--2-swatches-grey-100-duplicate);
  --3-theme-neutral-00-duplicate: var(--2-swatches-grey-00-duplicate);
  --5-dimensions-mapping-spacing-1: 4px;
  --5-dimensions-mapping-spacing-2: 8px;
  --5-dimensions-mapping-spacing-3: 12px;
  --5-dimensions-mapping-spacing-4: 16px;
  --5-dimensions-mapping-spacing-12: 48px;
  --5-dimensions-mapping-spacing-5: 20px;
  --5-dimensions-mapping-spacing-6: 24px;
  --5-dimensions-mapping-button-medium-spacing: 8px;
  --5-dimensions-mapping-button-small-spacing: 8px;
  --5-dimensions-mapping-spacing-14: 56px;
  --5-dimensions-mapping-spacing-8: 32px;
  --5-dimensions-mapping-button-medium-vertical-padding: 12px;
  --5-dimensions-mapping-button-small-vertical-padding: 8px;
  --5-dimensions-mapping-spacing-10: 40px;
  --5-dimensions-mapping-button-minimum-width: 112px;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-4-color-mapping-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-4-color-mapping-mode="light"] {
  --4-color-mapping-page-plain: var(--3-theme-neutral-00);
  --4-color-mapping-text-default: var(--3-theme-neutral-900);
  --4-color-mapping-text-title: var(--3-theme-neutral-950);
  --4-color-mapping-text-subdued: var(--3-theme-neutral-400);
  --4-color-mapping-text-default-duplicate: var(--3-theme-neutral-900-duplicate);
  --4-color-mapping-text-subdued-duplicate: var(--3-theme-neutral-400-duplicate);
  --4-color-mapping-page-plain-duplicate: var(--3-theme-neutral-00-duplicate);
}

[data-4-color-mapping-mode="dark"] {
  --4-color-mapping-page-plain: var(--3-theme-neutral-950);
  --4-color-mapping-text-default: var(--3-theme-neutral-100);
  --4-color-mapping-text-title: var(--3-theme-neutral-50);
  --4-color-mapping-text-subdued: var(--3-theme-neutral-200-duplicate);
  --4-color-mapping-text-default-duplicate: var(--3-theme-neutral-100-duplicate);
  --4-color-mapping-text-subdued-duplicate: var(--3-theme-neutral-200);
  --4-color-mapping-page-plain-duplicate: var(--3-theme-neutral-950-duplicate);
}