:root {
  --dark-grey: rgba(45, 45, 55, 1);
  --blue: rgba(30, 157, 215, 1);
  --black: rgba(23, 23, 25, 1);
  --mid-gray: rgba(130, 130, 130, 1);
  --light-grey: rgba(164, 164, 164, 1);
  --error: rgba(255, 94, 94, 1);
  --divider: rgba(0, 0, 0, 0.2);
  --background: rgba(247, 247, 247, 1);
  --overlay: rgba(23, 23, 25, 0.6);
  --dark: rgba(25, 26, 35, 1);
  --green: rgba(185, 255, 102, 1);
  --text-40-font-family: "Manrope", Helvetica;
  --text-40-font-weight: 700;
  --text-40-font-size: 40px;
  --text-40-letter-spacing: 0px;
  --text-40-line-height: normal;
  --text-40-font-style: normal;
  --desktop-h1-font-family: "Manrope", Helvetica;
  --desktop-h1-font-weight: 600;
  --desktop-h1-font-size: 96px;
  --desktop-h1-letter-spacing: 0px;
  --desktop-h1-line-height: 110.00000238418579%;
  --desktop-h1-font-style: normal;
  --desktop-menu-btn-font-family: "Manrope", Helvetica;
  --desktop-menu-btn-font-weight: 600;
  --desktop-menu-btn-font-size: 12px;
  --desktop-menu-btn-letter-spacing: 0px;
  --desktop-menu-btn-line-height: normal;
  --desktop-menu-btn-font-style: normal;
  --desktop-text-1-font-family: "Manrope", Helvetica;
  --desktop-text-1-font-weight: 500;
  --desktop-text-1-font-size: 16px;
  --desktop-text-1-letter-spacing: 0px;
  --desktop-text-1-line-height: 28px;
  --desktop-text-1-font-style: normal;
  --desktop-h3-font-family: "Manrope", Helvetica;
  --desktop-h3-font-weight: 700;
  --desktop-h3-font-size: 24px;
  --desktop-h3-letter-spacing: 0px;
  --desktop-h3-line-height: 36px;
  --desktop-h3-font-style: normal;
  --desktop-h4-font-family: "Manrope", Helvetica;
  --desktop-h4-font-weight: 600;
  --desktop-h4-font-size: 20px;
  --desktop-h4-letter-spacing: 0px;
  --desktop-h4-line-height: 28px;
  --desktop-h4-font-style: normal;
  --desktop-h2-font-family: "Manrope", Helvetica;
  --desktop-h2-font-weight: 700;
  --desktop-h2-font-size: 18px;
  --desktop-h2-letter-spacing: 0px;
  --desktop-h2-line-height: 139.9999976158142%;
  --desktop-h2-font-style: normal;
  --desktop-text-2-font-family: "Manrope", Helvetica;
  --desktop-text-2-font-weight: 500;
  --desktop-text-2-font-size: 14px;
  --desktop-text-2-letter-spacing: 0px;
  --desktop-text-2-line-height: 24px;
  --desktop-text-2-font-style: normal;
  --desktop-h3-medium-font-family: "Manrope", Helvetica;
  --desktop-h3-medium-font-weight: 500;
  --desktop-h3-medium-font-size: 24px;
  --desktop-h3-medium-letter-spacing: 0px;
  --desktop-h3-medium-line-height: 36px;
  --desktop-h3-medium-font-style: normal;
  --desktop-text-3-font-family: "Manrope", Helvetica;
  --desktop-text-3-font-weight: 500;
  --desktop-text-3-font-size: 14px;
  --desktop-text-3-letter-spacing: 0px;
  --desktop-text-3-line-height: 20px;
  --desktop-text-3-font-style: normal;
  --mob-menu-btn-font-family: "Manrope", Helvetica;
  --mob-menu-btn-font-weight: 600;
  --mob-menu-btn-font-size: 14px;
  --mob-menu-btn-letter-spacing: 0px;
  --mob-menu-btn-line-height: normal;
  --mob-menu-btn-font-style: normal;
  --mob-text-1-font-family: "Manrope", Helvetica;
  --mob-text-1-font-weight: 500;
  --mob-text-1-font-size: 12px;
  --mob-text-1-letter-spacing: 0px;
  --mob-text-1-line-height: 28px;
  --mob-text-1-font-style: normal;
  --mob-h4-font-family: "Manrope", Helvetica;
  --mob-h4-font-weight: 600;
  --mob-h4-font-size: 16px;
  --mob-h4-letter-spacing: 0px;
  --mob-h4-line-height: 139.9999976158142%;
  --mob-h4-font-style: normal;
  --mob-text-2-font-family: "Manrope", Helvetica;
  --mob-text-2-font-weight: 500;
  --mob-text-2-font-size: 10px;
  --mob-text-2-letter-spacing: 0px;
  --mob-text-2-line-height: 12px;
  --mob-text-2-font-style: normal;
  --mob-text-3-font-family: "Manrope", Helvetica;
  --mob-text-3-font-weight: 500;
  --mob-text-3-font-size: 8px;
  --mob-text-3-letter-spacing: 0px;
  --mob-text-3-line-height: 12px;
  --mob-text-3-font-style: normal;
  --lead-1-font-family: "Manrope", Helvetica;
  --lead-1-font-weight: 500;
  --lead-1-font-size: 48.0000114440918px;
  --lead-1-letter-spacing: 0px;
  --lead-1-line-height: normal;
  --lead-1-font-style: normal;
  --h-2-font-family: "Space Grotesk", Helvetica;
  --h-2-font-weight: 500;
  --h-2-font-size: 40px;
  --h-2-letter-spacing: 0px;
  --h-2-line-height: normal;
  --h-2-font-style: normal;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-24-duplicate: 24px;
  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-28: 28px;
  --icon-size-32: 32px;
  --icon-size-40: 40px;
  --icon-size-48: 48px;
  --icon-size-80: 80px;
  --themes-pink: rgba(228, 47, 128, 1);
  --themes-color: var(--themes-pink);
  --themes-black-100: rgba(28, 28, 28, 1);
  --themes-black-80: rgba(28, 28, 28, 0.8);
  --themes-black-10: rgba(28, 28, 28, 0.1);
  --themes-black-5: rgba(28, 28, 28, 0.05);
  --themes-white-100: rgba(255, 255, 255, 1);
  --themes-primary-blue: rgba(227, 245, 255, 1);
  --themes-primary-purple: rgba(229, 236, 246, 1);
  --themes-secondary-indigo: rgba(149, 164, 252, 1);
  --themes-secondary-purple: rgba(198, 199, 248, 1);
  --themes-pink-duplicate: rgba(228, 47, 128, 1);
  --themes-black-100-duplicate: rgba(28, 28, 28, 1);
  --themes-white-100-duplicate: rgba(255, 255, 255, 1);
  --themes-black-80-duplicate: rgba(28, 28, 28, 0.8);
  --show-icon-show-icon: initial;
  --corner-radius-16-duplicate: 16px;
  --corner-radius-4-duplicate: 4px;
  --corner-radius-8-duplicate: 8px;
  --corner-radius-80-duplicate: 80px;
  --show-text-show-text: initial;
  --color-schemes-color-scheme-1-text: var(--primitives-color-neutral-darkest);
  --primitives-color-neutral-darkest: rgba(0, 0, 0, 1);
}

/*

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-24-duplicate: 24px;
}

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

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

[data-spacing-mode="condensed-4"] {
  --spacing-4: 0px;
  --spacing-8: 4px;
  --spacing-24-duplicate: 20px;
}

[data-icon-size-mode="standard"] {
  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-28: 28px;
  --icon-size-32: 32px;
  --icon-size-40: 40px;
  --icon-size-48: 48px;
  --icon-size-80: 80px;
}

[data-icon-size-mode="expanded-4"] {
  --icon-size-16: 20px;
  --icon-size-20: 24px;
  --icon-size-24: 28px;
  --icon-size-28: 32px;
  --icon-size-32: 36px;
  --icon-size-40: 44px;
  --icon-size-48: 52px;
  --icon-size-80: 84px;
}

[data-icon-size-mode="expanded-8"] {
  --icon-size-16: 24px;
  --icon-size-20: 28px;
  --icon-size-24: 32px;
  --icon-size-28: 36px;
  --icon-size-32: 40px;
  --icon-size-40: 48px;
  --icon-size-48: 56px;
  --icon-size-80: 88px;
}

[data-icon-size-mode="condensed-4"] {
  --icon-size-16: 12px;
  --icon-size-20: 16px;
  --icon-size-24: 20px;
  --icon-size-28: 24px;
  --icon-size-32: 28px;
  --icon-size-40: 36px;
  --icon-size-48: 44px;
  --icon-size-80: 76px;
}

[data-themes-mode="pastel-light"] {
  --themes-black-100: rgba(28, 28, 28, 1);
  --themes-black-80: rgba(28, 28, 28, 0.8);
  --themes-black-10: rgba(28, 28, 28, 0.1);
  --themes-black-5: rgba(28, 28, 28, 0.05);
  --themes-white-100: rgba(255, 255, 255, 1);
  --themes-secondary-indigo: rgba(149, 164, 252, 1);
  --themes-secondary-purple: rgba(198, 199, 248, 1);
  --themes-black-100-duplicate: rgba(28, 28, 28, 1);
  --themes-white-100-duplicate: rgba(255, 255, 255, 1);
  --themes-black-80-duplicate: rgba(28, 28, 28, 0.8);
}

[data-themes-mode="pastel-dark"] {
  --themes-black-100: rgba(255, 255, 255, 1);
  --themes-black-80: rgba(255, 255, 255, 0.8);
  --themes-black-10: rgba(255, 255, 255, 0.1);
  --themes-black-5: rgba(255, 255, 255, 0.1);
  --themes-white-100: rgba(28, 28, 28, 1);
  --themes-secondary-indigo: rgba(149, 164, 252, 1);
  --themes-secondary-purple: rgba(198, 199, 248, 1);
  --themes-black-100-duplicate: rgba(255, 255, 255, 1);
  --themes-white-100-duplicate: rgba(28, 28, 28, 1);
  --themes-black-80-duplicate: rgba(255, 255, 255, 0.8);
}

[data-themes-mode="bright-light"] {
  --themes-black-100: rgba(46, 52, 62, 1);
  --themes-black-80: rgba(46, 52, 62, 0.8);
  --themes-black-10: rgba(46, 52, 62, 0.1);
  --themes-black-5: rgba(46, 52, 62, 0.05);
  --themes-white-100: rgba(255, 255, 255, 1);
  --themes-secondary-indigo: rgba(88, 86, 214, 1);
  --themes-secondary-purple: rgba(175, 82, 222, 1);
  --themes-black-100-duplicate: rgba(46, 52, 62, 1);
  --themes-white-100-duplicate: rgba(255, 255, 255, 1);
  --themes-black-80-duplicate: rgba(46, 52, 62, 0.8);
}

[data-themes-mode="bright-dark"] {
  --themes-black-100: rgba(255, 255, 255, 1);
  --themes-black-80: rgba(255, 255, 255, 0.8);
  --themes-black-10: rgba(255, 255, 255, 0.1);
  --themes-black-5: rgba(255, 255, 255, 0.1);
  --themes-white-100: rgba(28, 28, 28, 1);
  --themes-secondary-indigo: rgba(88, 86, 214, 1);
  --themes-secondary-purple: rgba(175, 82, 222, 1);
  --themes-black-100-duplicate: rgba(255, 255, 255, 1);
  --themes-white-100-duplicate: rgba(28, 28, 28, 1);
  --themes-black-80-duplicate: rgba(255, 255, 255, 0.8);
}

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

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

[data-corner-radius-mode="standard"] {
  --corner-radius-16-duplicate: 16px;
  --corner-radius-4-duplicate: 4px;
  --corner-radius-8-duplicate: 8px;
  --corner-radius-80-duplicate: 80px;
}

[data-corner-radius-mode="expanded-4"] {
  --corner-radius-16-duplicate: 20px;
  --corner-radius-4-duplicate: 8px;
  --corner-radius-8-duplicate: 12px;
  --corner-radius-80-duplicate: 84px;
}

[data-corner-radius-mode="expanded-8"] {
  --corner-radius-16-duplicate: 24px;
  --corner-radius-4-duplicate: 12px;
  --corner-radius-8-duplicate: 16px;
  --corner-radius-80-duplicate: 88px;
}

[data-corner-radius-mode="condensed-4"] {
  --corner-radius-16-duplicate: 12px;
  --corner-radius-4-duplicate: 0px;
  --corner-radius-8-duplicate: 4px;
  --corner-radius-80-duplicate: 76px;
}

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

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