:root {
	--h-1-font-family: "Manrope", Helvetica;
	--h-1-font-weight: 600;
	--h-1-font-size: 48px;
	--h-1-letter-spacing: 0px;
	--h-1-line-height: 64px;
	--h-1-font-style: normal;
	--h-5-font-family: "Manrope", Helvetica;
	--h-5-font-weight: 600;
	--h-5-font-size: 18px;
	--h-5-letter-spacing: 0px;
	--h-5-line-height: 24px;
	--h-5-font-style: normal;
	--h-4-font-family: "Manrope", Helvetica;
	--h-4-font-weight: 500;
	--h-4-font-size: 24px;
	--h-4-letter-spacing: 0px;
	--h-4-line-height: 32px;
	--h-4-font-style: normal;
	--h-2-font-family: "Manrope", Helvetica;
	--h-2-font-weight: 600;
	--h-2-font-size: 40px;
	--h-2-letter-spacing: 0px;
	--h-2-line-height: 56px;
	--h-2-font-style: normal;
	--h-3-font-family: "Manrope", Helvetica;
	--h-3-font-weight: 500;
	--h-3-font-size: 32px;
	--h-3-letter-spacing: 0px;
	--h-3-line-height: 44px;
	--h-3-font-style: normal;
	--text-18-font-family: "Manrope", Helvetica;
	--text-18-font-weight: 400;
	--text-18-font-size: 18px;
	--text-18-letter-spacing: 0px;
	--text-18-line-height: 28px;
	--text-18-font-style: normal;
	--text-18-m-font-family: "Manrope", Helvetica;
	--text-18-m-font-weight: 500;
	--text-18-m-font-size: 18px;
	--text-18-m-letter-spacing: 0px;
	--text-18-m-line-height: 28px;
	--text-18-m-font-style: normal;
	--text-description14-font-family: "Manrope", Helvetica;
	--text-description14-font-weight: 400;
	--text-description14-font-size: 14px;
	--text-description14-letter-spacing: 0px;
	--text-description14-line-height: 20px;
	--text-description14-font-style: normal;
	--text-16-font-family: "Manrope", Helvetica;
	--text-16-font-weight: 400;
	--text-16-font-size: 16px;
	--text-16-letter-spacing: 0px;
	--text-16-line-height: 24px;
	--text-16-font-style: normal;
	--text-link-16-stroke-font-family: "Manrope", Helvetica;
	--text-link-16-stroke-font-weight: 400;
	--text-link-16-stroke-font-size: 16px;
	--text-link-16-stroke-letter-spacing: 0px;
	--text-link-16-stroke-line-height: 24px;
	--text-link-16-stroke-font-style: normal;
}
:root {
	--h-1-font-family: "Manrope", Helvetica;
	--h-1-font-weight: 600;
	--h-1-font-size: 48px;
	--h-1-letter-spacing: 0px;
	--h-1-line-height: 64px;
	--h-1-font-style: normal;
	--h-5-font-family: "Manrope", Helvetica;
	--h-5-font-weight: 600;
	--h-5-font-size: 18px;
	--h-5-letter-spacing: 0px;
	--h-5-line-height: 24px;
	--h-5-font-style: normal;
	--h-4-font-family: "Manrope", Helvetica;
	--h-4-font-weight: 500;
	--h-4-font-size: 24px;
	--h-4-letter-spacing: 0px;
	--h-4-line-height: 32px;
	--h-4-font-style: normal;
	--h-2-font-family: "Manrope", Helvetica;
	--h-2-font-weight: 600;
	--h-2-font-size: 40px;
	--h-2-letter-spacing: 0px;
	--h-2-line-height: 56px;
	--h-2-font-style: normal;
	--h-3-font-family: "Manrope", Helvetica;
	--h-3-font-weight: 500;
	--h-3-font-size: 32px;
	--h-3-letter-spacing: 0px;
	--h-3-line-height: 44px;
	--h-3-font-style: normal;
	--text-18-font-family: "Manrope", Helvetica;
	--text-18-font-weight: 400;
	--text-18-font-size: 18px;
	--text-18-letter-spacing: 0px;
	--text-18-line-height: 28px;
	--text-18-font-style: normal;
	--text-18-m-font-family: "Manrope", Helvetica;
	--text-18-m-font-weight: 500;
	--text-18-m-font-size: 18px;
	--text-18-m-letter-spacing: 0px;
	--text-18-m-line-height: 28px;
	--text-18-m-font-style: normal;
	--text-description14-font-family: "Manrope", Helvetica;
	--text-description14-font-weight: 400;
	--text-description14-font-size: 14px;
	--text-description14-letter-spacing: 0px;
	--text-description14-line-height: 20px;
	--text-description14-font-style: normal;
	--text-16-font-family: "Manrope", Helvetica;
	--text-16-font-weight: 400;
	--text-16-font-size: 16px;
	--text-16-letter-spacing: 0px;
	--text-16-line-height: 24px;
	--text-16-font-style: normal;
	--text-link-16-stroke-font-family: "Manrope", Helvetica;
	--text-link-16-stroke-font-weight: 400;
	--text-link-16-stroke-font-size: 16px;
	--text-link-16-stroke-letter-spacing: 0px;
	--text-link-16-stroke-line-height: 24px;
	--text-link-16-stroke-font-style: normal;
	--spacing-0: 0px;
	--spacing-x0-5: 2px;
	--spacing-x1: 4px;
	--spacing-x2: 8px;
	--spacing-x2-5: 10px;
	--spacing-x3: 12px;
	--spacing-x4: 16px;
	--spacing-x5: 20px;
	--spacing-x6: 24px;
	--spacing-x7: 32px;
	--spacing-x8: 48px;
	--spacing-x9: 72px;
	--spacing-x10: 96px;
	--colors-border-critical: rgba(255, 255, 255, 1);
	--colors-icon-critical: rgba(255, 255, 255, 1);
	--colors-icon-caution: rgba(255, 255, 255, 1);
	--colors-icon-success: rgba(255, 255, 255, 1);
	--colors-bg-primary: var(--palette-white-main);
	--colors-bg-secondary: var(--palette-black-100);
	--colors-bg-accent: var(--palette-blue-main);
	--colors-bg-accent-hover: var(--palette-blue-700);
	--colors-bg-accent-active: var(--palette-blue-800);
	--colors-bg-accent-subdued: var(--palette-blue-100);
	--colors-bg-accent-subdued-hover: var(--palette-blue-200);
	--colors-bg-accent-subdued-active: var(--palette-blue-300);
	--colors-bg-primary-inverse: var(--palette-black-600);
	--colors-bg-secondary-inverse: var(--palette-black-500);
	--colors-bg-gray: var(--palette-black-25);
	--colors-text-primary: var(--palette-black-main);
	--colors-text-secondary: var(--palette-black-500);
	--colors-text-disabled: var(--palette-black-400);
	--colors-text-primary-inverse: var(--palette-white-main);
	--colors-text-primary-on-color: var(--palette-white-main);
	--colors-text-accent: var(--palette-blue-main);
	--colors-border-primary: var(--palette-black-300);
	--colors-border-secondary: var(--palette-black-200);
	--colors-icon-primary: var(--palette-black-main);
	--colors-icon-secondary: var(--palette-black-500);
	--colors-icon-disabled: var(--palette-black-400);
	--colors-icon-primary-inverse: var(--palette-white-main);
	--colors-icon-primary-on-color: var(--palette-white-main);
	--colors-icon-accent: var(--palette-blue-main);
	--colors-icon-accent-secondary: var(--palette-orange-main);
	--palette-white-100: rgba(255, 255, 255, 0.06);
	--palette-white-200: rgba(255, 255, 255, 0.09);
	--palette-white-300: rgba(255, 255, 255, 0.14);
	--palette-white-400: rgba(255, 255, 255, 0.4);
	--palette-white-500: rgba(255, 255, 255, 0.6);
	--palette-black-25: rgba(17, 17, 17, 0.02);
	--palette-white-600: rgba(255, 255, 255, 0.88);
	--palette-black-50: rgba(17, 17, 17, 0.04);
	--palette-white-main: rgba(255, 255, 255, 1);
	--palette-black-100: rgba(17, 17, 17, 0.06);
	--palette-black-200: rgba(17, 17, 17, 0.09);
	--palette-black-300: rgba(17, 17, 17, 0.14);
	--palette-black-400: rgba(17, 17, 17, 0.4);
	--palette-black-500: rgba(17, 17, 17, 0.6);
	--palette-black-600: rgba(17, 17, 17, 0.88);
	--palette-black-main: rgba(17, 17, 17, 1);
	--palette-blue-100: rgba(47, 128, 237, 0.05);
	--palette-blue-200: rgba(47, 128, 237, 0.08);
	--palette-blue-300: rgba(47, 128, 237, 0.12);
	--palette-blue-400: rgba(47, 128, 237, 0.4);
	--palette-blue-500: rgba(47, 128, 237, 0.6);
	--palette-blue-600: rgba(47, 128, 237, 0.88);
	--palette-blue-main: rgba(47, 128, 237, 1);
	--palette-blue-700: rgba(25, 100, 230, 1);
	--palette-blue-800: rgba(29, 79, 195, 1);
	--palette-orange-100: rgba(255, 120, 2, 0.04);
	--palette-orange-200: rgba(255, 120, 2, 0.08);
	--palette-orange-300: rgba(255, 120, 2, 0.12);
	--palette-orange-400: rgba(255, 120, 2, 0.4);
	--palette-orange-500: rgba(255, 120, 2, 0.6);
	--palette-orange-600: rgba(255, 120, 2, 0.88);
	--palette-orange-700: rgba(245, 110, 2, 1);
	--palette-orange-800: rgba(250, 115, 2, 1);
	--palette-orange-main: rgba(255, 120, 2, 1);
}

/*

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

<body data-colors-mode="white">
        <!-- the rest of your content -->
</body>

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

*/

[data-colors-mode="white"] {
	--colors-bg-primary: var(--palette-white-main);
	--colors-bg-secondary: var(--palette-black-100);
	--colors-bg-primary-inverse: var(--palette-black-600);
	--colors-bg-secondary-inverse: var(--palette-black-500);
	--colors-bg-gray: var(--palette-black-25);
	--colors-text-primary: var(--palette-black-main);
	--colors-text-secondary: var(--palette-black-500);
	--colors-text-disabled: var(--palette-black-400);
	--colors-text-primary-inverse: var(--palette-white-main);
	--colors-border-primary: var(--palette-black-300);
	--colors-border-secondary: var(--palette-black-200);
	--colors-icon-primary: var(--palette-black-main);
	--colors-icon-secondary: var(--palette-black-500);
	--colors-icon-disabled: var(--palette-black-400);
	--colors-icon-primary-inverse: var(--palette-white-main);
}

[data-colors-mode="dark"] {
	--colors-bg-primary: var(--palette-black-main);
	--colors-bg-secondary: var(--palette-white-100);
	--colors-bg-primary-inverse: var(--palette-white-600);
	--colors-bg-secondary-inverse: var(--palette-white-500);
	--colors-bg-gray: rgba(255, 255, 255, 1);
	--colors-text-primary: var(--palette-white-main);
	--colors-text-secondary: var(--palette-white-500);
	--colors-text-disabled: var(--palette-white-400);
	--colors-text-primary-inverse: var(--palette-black-main);
	--colors-border-primary: var(--palette-white-300);
	--colors-border-secondary: var(--palette-white-200);
	--colors-icon-primary: var(--palette-white-main);
	--colors-icon-secondary: var(--palette-white-500);
	--colors-icon-disabled: var(--palette-white-400);
	--colors-icon-primary-inverse: var(--palette-black-main);
}