:root {
    --white: rgba(255, 255, 255, 1);
    --black: rgba(0, 0, 0, 1);
    --primary-000: rgba(245, 240, 255, 1);
    --primary-100: rgba(238, 229, 255, 1);
    --primary-200: rgba(220, 204, 255, 1);
    --primary-300: rgba(186, 153, 255, 1);
    --primary-400: rgba(151, 102, 255, 1);
    --primary-500: rgba(116, 51, 255, 1);
    --primary-600: rgba(93, 41, 204, 1);
    --primary-700: rgba(70, 31, 153, 1);
    --primary-800: rgba(47, 20, 102, 1);
    --primary-900: rgba(21, 6, 53, 1);
    --secondary-100: rgba(255, 245, 205, 1);
    --secondary-200: rgba(255, 233, 140, 1);
    --secondary-300: rgba(255, 207, 3, 1);
    --secondary-400: rgba(235, 172, 0, 1);
    --secondary-500: rgba(201, 131, 0, 1);
    --secondary-600: rgba(153, 94, 0, 1);
    --secondary-700: rgba(102, 61, 0, 1);
    --secondary-800: rgba(62, 37, 0, 1);
    --alert-50: rgba(255, 247, 247, 1);
    --alert-100: rgba(255, 230, 230, 1);
    --alert-200: rgba(248, 191, 191, 1);
    --alert-300: rgba(238, 132, 132, 1);
    --alert-500: rgba(184, 61, 61, 1);
    --alert-600: rgba(148, 47, 47, 1);
    --alert-700: rgba(124, 31, 37, 1);
    --alert-800: rgba(74, 24, 24, 1);
    --grey-900: rgba(38, 38, 51, 1);
    --grey-850: rgba(45, 45, 60, 1);
    --grey-800: rgba(59, 59, 77, 1);
    --grey-700: rgba(92, 92, 115, 1);
    --grey-600: rgba(126, 126, 153, 1);
    --grey-500: rgba(162, 162, 191, 1);
    --grey-400: rgba(191, 191, 217, 1);
    --grey-300: rgba(205, 205, 225, 1);
    --grey-200: rgba(220, 220, 237, 1);
    --grey-100: rgba(234, 234, 245, 1);
    --grey-000: rgba(245, 245, 251, 1);
    --greyopacity000-60: rgba(245, 245, 251, 0.6);
    --greyopacity900-75: rgba(38, 38, 51, 0.75);
    --display-extra-large-font-family: "Montserrat", Helvetica;
    --display-extra-large-font-weight: 800;
    --display-extra-large-font-size: 72px;
    --display-extra-large-letter-spacing: 0px;
    --display-extra-large-line-height: 90px;
    --display-extra-large-font-style: normal;
    --display-large-font-family: "Montserrat", Helvetica;
    --display-large-font-weight: 700;
    --display-large-font-size: 62px;
    --display-large-letter-spacing: 0px;
    --display-large-line-height: 77.5px;
    --display-large-font-style: normal;
    --display-medium-font-family: "Montserrat", Helvetica;
    --display-medium-font-weight: 700;
    --display-medium-font-size: 50px;
    --display-medium-letter-spacing: 0px;
    --display-medium-line-height: 62.5px;
    --display-medium-font-style: normal;
    --display-small-font-family: "Montserrat", Helvetica;
    --display-small-font-weight: 700;
    --display-small-font-size: 44px;
    --display-small-letter-spacing: 0px;
    --display-small-line-height: 55px;
    --display-small-font-style: normal;
    --body-medium-bold-font-family: "Montserrat", Helvetica;
    --body-medium-bold-font-weight: 600;
    --body-medium-bold-font-size: 40px;
    --body-medium-bold-letter-spacing: 0px;
    --body-medium-bold-line-height: 60px;
    --body-medium-bold-font-style: normal;
    --body-medium-regular-font-family: "Montserrat", Helvetica;
    --body-medium-regular-font-weight: 400;
    --body-medium-regular-font-size: 40px;
    --body-medium-regular-letter-spacing: 0px;
    --body-medium-regular-line-height: 60px;
    --body-medium-regular-font-style: normal;
    --body-medium-light-font-family: "Montserrat", Helvetica;
    --body-medium-light-font-weight: 300;
    --body-medium-light-font-size: 40px;
    --body-medium-light-letter-spacing: 0px;
    --body-medium-light-line-height: 60px;
    --body-medium-light-font-style: normal;
    --body-small-bold-font-family: "Montserrat", Helvetica;
    --body-small-bold-font-weight: 600;
    --body-small-bold-font-size: 32px;
    --body-small-bold-letter-spacing: 0px;
    --body-small-bold-line-height: normal;
    --body-small-bold-font-style: normal;
    --body-small-regular-font-family: "Montserrat", Helvetica;
    --body-small-regular-font-weight: 400;
    --body-small-regular-font-size: 32px;
    --body-small-regular-letter-spacing: 0px;
    --body-small-regular-line-height: 48px;
    --body-small-regular-font-style: normal;
    --body-small-light-font-family: "Montserrat", Helvetica;
    --body-small-light-font-weight: 300;
    --body-small-light-font-size: 32px;
    --body-small-light-letter-spacing: 0px;
    --body-small-light-line-height: normal;
    --body-small-light-font-style: normal;
    --body-XS-regular-font-family: "Montserrat", Helvetica;
    --body-XS-regular-font-weight: 400;
    --body-XS-regular-font-size: 24px;
    --body-XS-regular-letter-spacing: 0px;
    --body-XS-regular-line-height: 36px;
    --body-XS-regular-font-style: normal;
    --body-XXS-regular-font-family: "Montserrat", Helvetica;
    --body-XXS-regular-font-weight: 400;
    --body-XXS-regular-font-size: 16px;
    --body-XXS-regular-letter-spacing: 0px;
    --body-XXS-regular-line-height: 24px;
    --body-XXS-regular-font-style: normal;
    --label-tooltip-font-family: "Montserrat", Helvetica;
    --label-tooltip-font-weight: 400;
    --label-tooltip-font-size: 24px;
    --label-tooltip-letter-spacing: 0px;
    --label-tooltip-line-height: normal;
    --label-tooltip-font-style: normal;
    --label-link-font-family: "Montserrat", Helvetica;
    --label-link-font-weight: 400;
    --label-link-font-size: 20px;
    --label-link-letter-spacing: 0px;
    --label-link-line-height: normal;
    --label-link-font-style: normal;
    --elevation-1: 0px 0px 1px 1px rgba(103, 87, 136, 0.13), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
    --elevation-2: 2px 7px 10px 0px rgba(105, 90, 124, 0.17), 0px 0px 2px 1px rgba(103, 87, 136, 0.1);
    --elevation-3: 3px 13px 18px 0px rgba(105, 90, 124, 0.17), 1px 1px 4px 2px rgba(103, 87, 136, 0.12);
    --backgroundblur-32: ;
    --spacing-XXS: 4px;
    --spacing-XS: 8px;
    --spacing-s: 16px;
    --spacing-m: 32px;
    --spacing-l: 40px;
    --spacing-XL: 56px;
    --spacing-XXL: 80px;
    --modes-medium: rgba(0, 204, 130, 1);
    --modes-light: rgba(240, 255, 249, 1);
    --modes-dark: rgba(0, 71, 41, 1);
    --text-size-text: 24px;
}

/*

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

<body data-modes-mode="positive">
        <!-- the rest of your content -->
</body>

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

*/

[data-modes-mode="positive"] {
    --modes-medium: rgba(0, 204, 130, 1);
    --modes-light: rgba(240, 255, 249, 1);
    --modes-dark: rgba(0, 71, 41, 1);
}

[data-modes-mode="warning"] {
    --modes-medium: rgba(255, 207, 3, 1);
    --modes-light: rgba(255, 252, 237, 1);
    --modes-dark: rgba(90, 55, 3, 1);
}

[data-modes-mode="negitive"] {
    --modes-medium: rgba(184, 61, 61, 1);
    --modes-light: rgba(255, 243, 243, 1);
    --modes-dark: rgba(70, 8, 8, 1);
}

[data-modes-mode="neutral"] {
    --modes-medium: rgba(126, 126, 153, 1);
    --modes-light: rgba(248, 248, 252, 1);
    --modes-dark: rgba(38, 38, 51, 1);
}

[data-text-size-mode="m"] {
    --text-size-text: 24px;
}

[data-text-size-mode="s"] {
    --text-size-text: 16px;
}