:root {
  --neutralblack: rgba(0, 0, 0, 1);
  --neutralgrey-900: rgba(30, 30, 30, 1);
  --neutralwhite: rgba(255, 255, 255, 1);
  --neutralgrey-400: rgba(191, 191, 191, 1);
  --heading-mobile-h1-font-family: "Gambetta", Helvetica;
  --heading-mobile-h1-font-weight: 500;
  --heading-mobile-h1-font-size: 48px;
  --heading-mobile-h1-letter-spacing: -0.96px;
  --heading-mobile-h1-line-height: 120.00000476837158%;
  --heading-mobile-h1-font-style: normal;
  --heading-mobile-h6-font-family: "Roboto", Helvetica;
  --heading-mobile-h6-font-weight: 300;
  --heading-mobile-h6-font-size: 20px;
  --heading-mobile-h6-letter-spacing: -0.4px;
  --heading-mobile-h6-line-height: 139.9999976158142%;
  --heading-mobile-h6-font-style: normal;
  --paragraph-lg-medium-font-family: "Roboto", Helvetica;
  --paragraph-lg-medium-font-weight: 500;
  --paragraph-lg-medium-font-size: 18px;
  --paragraph-lg-medium-letter-spacing: 0px;
  --paragraph-lg-medium-line-height: 150%;
  --paragraph-lg-medium-font-style: normal;
  --heading-mobile-h4-font-family: "Gambetta", Helvetica;
  --heading-mobile-h4-font-weight: 500;
  --heading-mobile-h4-font-size: 32px;
  --heading-mobile-h4-letter-spacing: -0.64px;
  --heading-mobile-h4-line-height: 120.00000476837158%;
  --heading-mobile-h4-font-style: normal;
  --paragraph-md-regular-font-family: "Roboto", Helvetica;
  --paragraph-md-regular-font-weight: 400;
  --paragraph-md-regular-font-size: 16px;
  --paragraph-md-regular-letter-spacing: 0px;
  --paragraph-md-regular-line-height: 150%;
  --paragraph-md-regular-font-style: normal;
  --heading-mobile-h5-font-family: "Roboto", Helvetica;
  --heading-mobile-h5-font-weight: 300;
  --heading-mobile-h5-font-size: 24px;
  --heading-mobile-h5-letter-spacing: -0.48px;
  --heading-mobile-h5-line-height: 139.9999976158142%;
  --heading-mobile-h5-font-style: normal;
  --paragraph-md-medium-font-family: "Roboto", Helvetica;
  --paragraph-md-medium-font-weight: 500;
  --paragraph-md-medium-font-size: 16px;
  --paragraph-md-medium-letter-spacing: 0px;
  --paragraph-md-medium-line-height: 150%;
  --paragraph-md-medium-font-style: normal;
  --paragraph-sm-regular-font-family: "Roboto", Helvetica;
  --paragraph-sm-regular-font-weight: 400;
  --paragraph-sm-regular-font-size: 14px;
  --paragraph-sm-regular-letter-spacing: 0px;
  --paragraph-sm-regular-line-height: 150%;
  --paragraph-sm-regular-font-style: normal;
  --heading-desktop-h1-font-family: "Gambetta", Helvetica;
  --heading-desktop-h1-font-weight: 500;
  --heading-desktop-h1-font-size: 96px;
  --heading-desktop-h1-letter-spacing: -1.92px;
  --heading-desktop-h1-line-height: 110.00000238418579%;
  --heading-desktop-h1-font-style: normal;
  --heading-desktop-h6-font-family: "Roboto", Helvetica;
  --heading-desktop-h6-font-weight: 300;
  --heading-desktop-h6-font-size: 24px;
  --heading-desktop-h6-letter-spacing: -0.48px;
  --heading-desktop-h6-line-height: 139.9999976158142%;
  --heading-desktop-h6-font-style: normal;
  --heading-desktop-h4-font-family: "Gambetta", Helvetica;
  --heading-desktop-h4-font-weight: 500;
  --heading-desktop-h4-font-size: 40px;
  --heading-desktop-h4-letter-spacing: -0.8px;
  --heading-desktop-h4-line-height: 120.00000476837158%;
  --heading-desktop-h4-font-style: normal;
  --paragraph-lg-regular-font-family: "Roboto", Helvetica;
  --paragraph-lg-regular-font-weight: 400;
  --paragraph-lg-regular-font-size: 18px;
  --paragraph-lg-regular-letter-spacing: 0px;
  --paragraph-lg-regular-line-height: 150%;
  --paragraph-lg-regular-font-style: normal;
  --heading-desktop-h5-font-family: "Roboto", Helvetica;
  --heading-desktop-h5-font-weight: 300;
  --heading-desktop-h5-font-size: 32px;
  --heading-desktop-h5-letter-spacing: -0.64px;
  --heading-desktop-h5-line-height: 129.99999523162842%;
  --heading-desktop-h5-font-style: normal;
  --xs: 0px 1px 1px 0px rgba(68, 64, 60, 0.25);
  --md:
    0px 2px 8px 0px rgba(0, 0, 0, 0.02), 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 18px 25px 0px rgba(
      0,
      0,
      0,
      0.05
    );
  --sm: 0px 2px 2px 0px rgba(68, 64, 60, 0.15);
  --lg:
    0px 3.6011242866516113px 8.48432445526123px 0px rgba(0, 0, 0, 0.04), 0px 7.466316223144531px 10.645149230957031px 0px rgba(
      0,
      0,
      0,
      0.06
    ), 0px 18px 29px 0px rgba(0, 0, 0, 0.1);
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --semantic-text-heading: var(--primitive-neutral-900);
  --semantic-text-paragraph: var(--primitive-neutral-700);
  --semantic-surface-tertiary: var(--primitive-neutral-300);
  --semantic-surface-secondary: var(--primitive-base-white);
  --semantic-outline-primary: var(--primitive-neutral-300);
  --semantic-surface-accent: var(--primitive-base-base);
  --semantic-surface-primary: var(--primitive-neutral-200);
  --semantic-outline-card: var(--primitive-neutral-200);
  --semantic-outline-secondary: var(--primitive-neutral-500);
  --primitive-base-white: rgba(255, 255, 255, 1);
  --primitive-neutral-25: rgba(253, 253, 252, 1);
  --primitive-neutral-900: rgba(28, 25, 23, 1);
  --primitive-base-base: rgba(23, 20, 18, 1);
  --primitive-neutral-300: rgba(221, 217, 213, 1);
  --primitive-neutral-200: rgba(236, 235, 233, 1);
  --primitive-neutral-700: rgba(68, 64, 60, 1);
  --primitive-neutral-600: rgba(87, 83, 78, 1);
  --primitive-neutral-500: rgba(122, 118, 113, 1);
  --primitive-neutral-50: rgba(250, 250, 249, 1);
  --themes-white-100: rgba(255, 255, 255, 1);
  --themes-black-100: rgba(28, 28, 28, 1);
  --themes-primary-brand: rgba(28, 28, 28, 1);
  --themes-black-10: rgba(28, 28, 28, 0.1);
  --themes-secondary-blue: rgba(177, 227, 255, 1);
  --show-icon-show-icon: initial;
  --show-text-show-text: initial;
}

/*

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

<body data-spacing-mode="standard">
    <!-- the rest of your content -->
</body>

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

*/

[data-spacing-mode="standard"] {
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
}

[data-spacing-mode="expanded-4"] {
  --spacing-4: 8px;
  --spacing-8: 12px;
  --spacing-12: 16px;
  --spacing-16: 20px;
}

[data-spacing-mode="expanded-8"] {
  --spacing-4: 12px;
  --spacing-8: 16px;
  --spacing-12: 20px;
  --spacing-16: 24px;
}

[data-spacing-mode="condensed-4"] {
  --spacing-4: 0px;
  --spacing-8: 4px;
  --spacing-12: 8px;
  --spacing-16: 12px;
}

[data-semantic-mode="light"] {
  --semantic-text-heading: var(--primitive-neutral-900);
  --semantic-text-paragraph: var(--primitive-neutral-700);
  --semantic-surface-secondary: var(--primitive-base-white);
  --semantic-outline-primary: var(--primitive-neutral-300);
  --semantic-outline-card: var(--primitive-neutral-200);
  --semantic-outline-secondary: var(--primitive-neutral-500);
}

[data-semantic-mode="dark"] {
  --semantic-text-heading: var(--primitive-base-white);
  --semantic-text-paragraph: var(--primitive-neutral-50);
  --semantic-surface-secondary: var(--primitive-neutral-25);
  --semantic-outline-primary: rgba(255, 255, 255, 1);
  --semantic-outline-card: rgba(255, 255, 255, 1);
  --semantic-outline-secondary: rgba(255, 255, 255, 1);
}

[data-themes-mode="pastel-light"] {
  --themes-white-100: rgba(255, 255, 255, 1);
  --themes-black-100: rgba(28, 28, 28, 1);
  --themes-primary-brand: rgba(28, 28, 28, 1);
  --themes-black-10: rgba(28, 28, 28, 0.1);
  --themes-secondary-blue: rgba(177, 227, 255, 1);
}

[data-themes-mode="pastel-dark"] {
  --themes-white-100: rgba(28, 28, 28, 1);
  --themes-black-100: rgba(255, 255, 255, 1);
  --themes-primary-brand: rgba(198, 199, 248, 1);
  --themes-black-10: rgba(255, 255, 255, 0.1);
  --themes-secondary-blue: rgba(177, 227, 255, 1);
}

[data-themes-mode="bright-light"] {
  --themes-white-100: rgba(255, 255, 255, 1);
  --themes-black-100: rgba(46, 52, 62, 1);
  --themes-primary-brand: var(--themes-secondary-blue);
  --themes-black-10: rgba(46, 52, 62, 0.1);
  --themes-secondary-blue: rgba(24, 134, 254, 1);
}

[data-themes-mode="bright-dark"] {
  --themes-white-100: rgba(28, 28, 28, 1);
  --themes-black-100: rgba(255, 255, 255, 1);
  --themes-primary-brand: var(--themes-secondary-blue);
  --themes-black-10: rgba(255, 255, 255, 0.1);
  --themes-secondary-blue: rgba(24, 134, 254, 1);
}

[data-show-icon-mode="true"] {
  --show-icon-show-icon: initial;
}

[data-show-icon-mode="false"] {
  --show-icon-show-icon: none;
}

[data-show-text-mode="true"] {
  --show-text-show-text: initial;
}

[data-show-text-mode="false"] {
  --show-text-show-text: none;
}