:root {
    --semanticsuccess-5: rgba(235, 252, 232, 1);
    --semanticsuccess-55-main: rgba(49, 207, 23, 1);
    --semanticsuccess-75: rgba(28, 114, 13, 1);
    --semanticwarning-5: rgba(255, 249, 229, 1);
    --semanticwarning-55-main: rgba(229, 172, 0, 1);
    --semanticwarning-75: rgba(128, 96, 0, 1);
    --semanticerror-5: rgba(255, 229, 230, 1);
    --semanticerror-55-main: rgba(229, 0, 0, 1);
    --semanticerror-75: rgba(128, 0, 0, 1);
    --headings-display-1-font-family: "Fira Sans", Helvetica;
    --headings-display-1-font-weight: 300;
    --headings-display-1-font-size: 64px;
    --headings-display-1-letter-spacing: 0px;
    --headings-display-1-line-height: normal;
    --headings-display-1-font-style: normal;
    --headings-display-2-font-family: "Fira Sans", Helvetica;
    --headings-display-2-font-weight: 400;
    --headings-display-2-font-size: 56px;
    --headings-display-2-letter-spacing: 0px;
    --headings-display-2-line-height: normal;
    --headings-display-2-font-style: normal;
    --headings-h1-font-family: "Fira Sans", Helvetica;
    --headings-h1-font-weight: 300;
    --headings-h1-font-size: 42px;
    --headings-h1-letter-spacing: 0px;
    --headings-h1-line-height: normal;
    --headings-h1-font-style: normal;
    --headings-h2-font-family: "Fira Sans", Helvetica;
    --headings-h2-font-weight: 300;
    --headings-h2-font-size: 36px;
    --headings-h2-letter-spacing: 0px;
    --headings-h2-line-height: normal;
    --headings-h2-font-style: normal;
    --headings-h3-font-family: "Fira Sans", Helvetica;
    --headings-h3-font-weight: 400;
    --headings-h3-font-size: 28px;
    --headings-h3-letter-spacing: 0px;
    --headings-h3-line-height: normal;
    --headings-h3-font-style: normal;
    --headings-h4-font-family: "Fira Sans", Helvetica;
    --headings-h4-font-weight: 400;
    --headings-h4-font-size: 24px;
    --headings-h4-letter-spacing: 0px;
    --headings-h4-line-height: normal;
    --headings-h4-font-style: normal;
    --buttons-button-lg-font-family: "Fira Sans", Helvetica;
    --buttons-button-lg-font-weight: 600;
    --buttons-button-lg-font-size: 16px;
    --buttons-button-lg-letter-spacing: 0px;
    --buttons-button-lg-line-height: 100%;
    --buttons-button-lg-font-style: normal;
    --buttons-button-md-font-family: "Fira Sans", Helvetica;
    --buttons-button-md-font-weight: 600;
    --buttons-button-md-font-size: 14px;
    --buttons-button-md-letter-spacing: 0px;
    --buttons-button-md-line-height: 100%;
    --buttons-button-md-font-style: normal;
    --buttons-button-sm-font-family: "Fira Sans", Helvetica;
    --buttons-button-sm-font-weight: 600;
    --buttons-button-sm-font-size: 13px;
    --buttons-button-sm-letter-spacing: 0px;
    --buttons-button-sm-line-height: 100%;
    --buttons-button-sm-font-style: normal;
    --subtitles-subtitle-1-font-family: "Fira Sans", Helvetica;
    --subtitles-subtitle-1-font-weight: 600;
    --subtitles-subtitle-1-font-size: 18px;
    --subtitles-subtitle-1-letter-spacing: 0px;
    --subtitles-subtitle-1-line-height: normal;
    --subtitles-subtitle-1-font-style: normal;
    --subtitles-subtitle-2-font-family: "Fira Sans", Helvetica;
    --subtitles-subtitle-2-font-weight: 600;
    --subtitles-subtitle-2-font-size: 14px;
    --subtitles-subtitle-2-letter-spacing: 0px;
    --subtitles-subtitle-2-line-height: normal;
    --subtitles-subtitle-2-font-style: normal;
    --subtitles-body-1-font-family: "Fira Sans", Helvetica;
    --subtitles-body-1-font-weight: 400;
    --subtitles-body-1-font-size: 16px;
    --subtitles-body-1-letter-spacing: 0px;
    --subtitles-body-1-line-height: normal;
    --subtitles-body-1-font-style: normal;
    --subtitles-body-2-font-family: "Fira Sans", Helvetica;
    --subtitles-body-2-font-weight: 400;
    --subtitles-body-2-font-size: 14px;
    --subtitles-body-2-letter-spacing: 0px;
    --subtitles-body-2-line-height: normal;
    --subtitles-body-2-font-style: normal;
    --overline-overline-1-font-family: "Fira Sans", Helvetica;
    --overline-overline-1-font-weight: 600;
    --overline-overline-1-font-size: 12px;
    --overline-overline-1-letter-spacing: 0px;
    --overline-overline-1-line-height: normal;
    --overline-overline-1-font-style: normal;
    --overline-overline-2-font-family: "Fira Sans", Helvetica;
    --overline-overline-2-font-weight: 400;
    --overline-overline-2-font-size: 12px;
    --overline-overline-2-letter-spacing: 0px;
    --overline-overline-2-line-height: normal;
    --overline-overline-2-font-style: normal;
    --overline-overline-3-font-family: "Fira Sans", Helvetica;
    --overline-overline-3-font-weight: 600;
    --overline-overline-3-font-size: 8px;
    --overline-overline-3-letter-spacing: 0px;
    --overline-overline-3-line-height: 100%;
    --overline-overline-3-font-style: normal;
    --overline-overline-4-font-family: "Fira Sans", Helvetica;
    --overline-overline-4-font-weight: 400;
    --overline-overline-4-font-size: 8px;
    --overline-overline-4-letter-spacing: 0px;
    --overline-overline-4-line-height: 100%;
    --overline-overline-4-font-style: normal;
    --drop-drop-xs: 0px 1px 2px 0px rgba(230, 230, 230, 1);
    --drop-drop-sm: 0px 2px 6px 0px rgba(230, 230, 230, 1);
    --drop-drop-md: 0px 6px 12px 0px rgba(230, 230, 230, 1);
    --drop-drop-lg: 0px 16px 32px 0px rgba(230, 230, 230, 1);
    --drop-drop-xl: 0px 24px 40px -8px rgba(230, 230, 230, 1);
    --drop-drop-2xl: 0px 24px 64px -8px rgba(230, 230, 230, 1);
    --primary-lines-color-upperline-s: 0px -1px 0px 0px rgba(149, 128, 255, 1);
    --primary-lines-color-upperline-m: 0px -2px 0px 0px rgba(149, 128, 255, 1);
    --primary-lines-color-upperline-l: 0px -3px 0px 0px rgba(149, 128, 255, 1);
    --primary-lines-color-dropline-s: 0px 1px 0px 0px rgba(149, 128, 255, 1);
    --primary-lines-color-dropline-m: 0px 2px 0px 0px rgba(149, 128, 255, 1);
    --primary-lines-color-dropline-l: 0px 3px 0px 0px rgba(106, 77, 255, 1);
    --neutral-lines-neutral-uperline-s: 0px -1px 0px 0px rgba(217, 217, 217, 1);
    --neutral-lines-neutral-uperline-m: 0px -2px 0px 0px rgba(217, 217, 217, 1);
    --neutral-lines-neutral-uperline-l: 0px -3px 0px 0px rgba(217, 217, 217, 1);
    --neutral-lines-neutral-dropline-s: 0px 1px 0px 0px rgba(217, 217, 217, 1);
    --neutral-lines-neutral-dropline-m: 0px 2px 0px 0px rgba(217, 217, 217, 1);
    --neutral-lines-neutral-dropline-l: 0px 3px 0px 0px rgba(217, 217, 217, 1);
    --focus-lines-focus-primary: 0px 0px 0px 0.5px rgba(0, 138, 67, 0.4), 0px 0px 1px 2.5px rgba(152, 212, 170, 0.1);
    --focus-lines-focus-error: 0px 0px 0px 0.5px rgba(229, 0, 0, 0.5), 0px 0px 1px 2.5px rgba(229, 0, 0, 0.05);
    --primitives-color-primary-50: rgba(229, 245, 234, 1);
    --primitives-color-primary-100: rgba(192, 229, 203, 1);
    --primitives-color-primary-200: rgba(152, 212, 170, 1);
    --primitives-color-primary-300: rgba(108, 196, 137, 1);
    --primitives-color-primary-400: rgba(73, 183, 113, 1);
    --primitives-color-primary-500: rgba(27, 171, 88, 1);
    --primitives-color-primary-600: rgba(17, 156, 78, 1);
    --primitives-color-primary-700: rgba(0, 138, 67, 1);
    --primitives-color-primary-800: rgba(0, 90, 36, 1);
    --primitives-color-primary-900: rgba(0, 46, 22, 1);
    --primitives-color-secondary-50: rgba(229, 242, 253, 1);
    --primitives-color-secondary-100: rgba(193, 222, 252, 1);
    --primitives-color-secondary-200: rgba(155, 202, 250, 1);
    --primitives-color-secondary-300: rgba(120, 181, 246, 1);
    --primitives-color-secondary-400: rgba(98, 165, 244, 1);
    --primitives-color-secondary-500: rgba(84, 150, 241, 1);
    --primitives-color-secondary-600: rgba(79, 136, 227, 1);
    --primitives-color-secondary-700: rgba(73, 118, 207, 1);
    --primitives-color-secondary-800: rgba(58, 70, 156, 1);
    --primitives-color-secondary-900: rgba(6, 14, 71, 1);
    --primitives-color-neutral-0: rgba(255, 255, 255, 1);
    --primitives-color-neutral-50: rgba(251, 251, 252, 1);
    --primitives-color-neutral-100: rgba(247, 247, 248, 1);
    --primitives-color-neutral-200: rgba(241, 241, 242, 1);
    --primitives-color-neutral-300: rgba(229, 229, 230, 1);
    --primitives-color-neutral-400: rgba(194, 194, 195, 1);
    --primitives-color-neutral-500: rgba(164, 164, 165, 1);
    --primitives-color-neutral-600: rgba(122, 122, 123, 1);
    --primitives-color-neutral-700: rgba(102, 102, 103, 1);
    --primitives-color-neutral-800: rgba(71, 71, 72, 1);
    --primitives-color-neutral-900: rgba(37, 37, 38, 1);
    --primitives-color-semantic-green-50: rgba(168, 240, 234, 1);
    --primitives-color-semantic-green-500: rgba(28, 160, 149, 1);
    --primitives-color-semantic-green-700: rgba(16, 88, 82, 1);
    --primitives-color-semantic-yellow-50: rgba(255, 237, 219, 1);
    --primitives-color-semantic-yellow-500: rgba(255, 123, 0, 1);
    --primitives-color-semantic-yellow-700: rgba(145, 74, 8, 1);
    --primitives-color-semantic-red-50: rgba(250, 225, 231, 1);
    --primitives-color-semantic-red-500: rgba(255, 35, 90, 1);
    --primitives-color-semantic-red-700: rgba(117, 21, 45, 1);
    --primitives-spacing-0-5: 4px;
    --primitives-spacing-1: 8px;
    --primitives-spacing-1-5: 12px;
    --primitives-spacing-2: 16px;
    --primitives-spacing-3: 24px;
    --primitives-spacing-4: 32px;
    --primitives-spacing-5: 40px;
    --primitives-spacing-6: 48px;
    --primitives-spacing-7: 64px;
    --primitives-spacing-8: 80px;
    --primitives-spacing-9: 120px;
    --primitives-radius-0-5: 4px;
    --primitives-radius-1: 8px;
    --primitives-radius-2: 16px;
    --primitives-radius-3: 32px;
    --primitives-radius-4: 64px;
    --primitives-color-variants-chart-red-50: rgba(254, 240, 240, 0.5);
    --primitives-color-variants-chart-red-100: rgba(253, 206, 206, 1);
    --primitives-color-variants-chart-red-200: rgba(251, 131, 133, 1);
    --primitives-color-variants-chart-red-300: rgba(249, 65, 68, 1);
    --primitives-color-variants-chart-red-600: rgba(198, 6, 9, 1);
    --primitives-color-variants-chart-red-800: rgba(133, 4, 6, 1);
    --primitives-color-variants-chart-green-50: rgba(244, 251, 250, 0.5);
    --primitives-color-variants-chart-green-100: rgba(196, 235, 231, 1);
    --primitives-color-variants-chart-green-200: rgba(128, 220, 209, 1);
    --primitives-color-variants-chart-green-300: rgba(13, 179, 158, 1);
    --primitives-color-variants-chart-green-600: rgba(9, 119, 105, 1);
    --primitives-color-variants-chart-green-800: rgba(6, 81, 71, 1);
    --primitives-color-variants-chart-purple-50: rgba(244, 242, 253, 0.5);
    --primitives-color-variants-chart-purple-100: rgba(219, 213, 248, 1);
    --primitives-color-variants-chart-purple-200: rgba(143, 124, 233, 1);
    --primitives-color-variants-chart-purple-300: rgba(98, 71, 224, 1);
    --primitives-color-variants-chart-purple-600: rgba(54, 29, 175, 1);
    --primitives-color-variants-chart-purple-800: rgba(34, 18, 109, 1);
    --primitives-color-variants-chart-yellow-50: rgba(254, 250, 241, 0.5);
    --primitives-color-variants-chart-yellow-100: rgba(248, 227, 175, 1);
    --primitives-color-variants-chart-yellow-200: rgba(243, 205, 114, 1);
    --primitives-color-variants-chart-yellow-300: rgba(247, 177, 8, 1);
    --primitives-color-variants-chart-yellow-600: rgba(197, 141, 7, 1);
    --primitives-color-variants-chart-yellow-800: rgba(113, 81, 4, 1);
    --tokens-background-neutral: var(--primitives-color-neutral-0);
    --tokens-background-primary: var(--primitives-color-primary-50);
    --tokens-container-primary-default: var(--primitives-color-primary-700);
    --tokens-container-primary-hover: var(--primitives-color-primary-800);
    --tokens-container-primary-pressed: var(--primitives-color-primary-900);
    --tokens-container-secondary-default: var(--primitives-color-secondary-50);
    --tokens-container-secondary-hover: var(--primitives-color-secondary-100);
    --tokens-container-secondary-pressed: var(--primitives-color-secondary-200);
    --tokens-container-neutral-default: var(--primitives-color-neutral-0);
    --tokens-container-neutral-hover: var(--primitives-color-neutral-100);
    --tokens-container-neutral-pressed: var(--primitives-color-neutral-200);
    --tokens-on-container-primary-default: var(--primitives-color-primary-700);
    --tokens-on-container-primary-support: var(--primitives-color-primary-400);
    --tokens-on-container-secondary-default: var(--primitives-color-secondary-700);
    --tokens-on-container-secondary-support: var(--primitives-color-secondary-600);
    --tokens-on-container-neutral-default: var(--primitives-color-neutral-0);
    --tokens-on-container-grayscale-default: var(--primitives-color-neutral-800);
    --tokens-on-container-grayscale-grayscale-support: var(--primitives-color-neutral-600);
    --tokens-on-container-selected-default: var(--primitives-color-primary-800);
    --tokens-on-container-selected-support: var(--tokens-on-container-grayscale-grayscale-support);
    --tokens-border-primary: var(--primitives-color-primary-700);
    --tokens-border-neutral: var(--primitives-color-neutral-300);
    --tokens-border-grayscale: var(--primitives-color-neutral-100);
    --tokens-border-selected: var(--primitives-color-primary-300);
    --tokens-border-secondary: var(--primitives-color-secondary-500);
    --tokens-border-success: var(--primitives-color-semantic-green-500);
    --tokens-border-warning: var(--primitives-color-semantic-yellow-500);
    --tokens-border-error: var(--primitives-color-semantic-red-500);
    --tokens-spacing-spacing-none: 0px;
    --tokens-spacing-spacing-minimum: var(--primitives-spacing-0-5);
    --tokens-spacing-spacing-xs: var(--primitives-spacing-1);
    --tokens-spacing-spacing-sm: var(--primitives-spacing-2);
    --tokens-spacing-spacing-md: var(--primitives-spacing-3);
    --tokens-spacing-spacing-lg: var(--primitives-spacing-4);
    --tokens-spacing-spacing-xl: var(--primitives-spacing-5);
    --tokens-spacing-spacing-2xl: var(--primitives-spacing-8);
    --tokens-spacing-spacing-border: var(--primitives-spacing-9);
    --tokens-spacing-spacing-button: var(--primitives-spacing-1-5);
    --tokens-radius-radius-xs: var(--primitives-radius-0-5);
    --tokens-radius-radius-s: var(--primitives-radius-1);
    --tokens-radius-radius-m: var(--primitives-radius-2);
    --tokens-on-container-success-secondary: var(--primitives-color-secondary-700);
    --tokens-on-container-success-success: var(--primitives-color-semantic-green-700);
    --tokens-radius-radius-lg: var(--primitives-radius-3);
    --tokens-on-container-success-warning: var(--primitives-color-semantic-yellow-700);
    --tokens-on-container-success-error: var(--primitives-color-semantic-red-700);
    --tokens-radius-radius-full: var(--primitives-radius-4);
    --tokens-container-grayscale-default: var(--primitives-color-neutral-100);
    --tokens-container-grayscale-hover: var(--primitives-color-neutral-200);
    --tokens-container-grayscale-pressed: var(--primitives-color-neutral-300);
    --tokens-container-selected-default: var(--primitives-color-primary-50);
    --tokens-container-selected-hover: var(--primitives-color-primary-100);
    --tokens-container-selected-pressed: var(--primitives-color-primary-200);
    --tokens-container-semantic-secondary: var(--primitives-color-secondary-100);
    --tokens-container-semantic-success: var(--primitives-color-semantic-green-50);
    --tokens-container-semantic-warning: var(--primitives-color-semantic-yellow-50);
    --tokens-container-semantic-error: var(--primitives-color-semantic-red-50);
}

/*

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

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

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

*/

[data-primitives-mode="light"] {
    --primitives-color-primary-50: rgba(229, 245, 234, 1);
    --primitives-color-primary-100: rgba(192, 229, 203, 1);
    --primitives-color-primary-200: rgba(152, 212, 170, 1);
    --primitives-color-primary-300: rgba(108, 196, 137, 1);
    --primitives-color-primary-400: rgba(73, 183, 113, 1);
    --primitives-color-primary-500: rgba(27, 171, 88, 1);
    --primitives-color-primary-600: rgba(17, 156, 78, 1);
    --primitives-color-primary-700: rgba(0, 138, 67, 1);
    --primitives-color-primary-800: rgba(0, 90, 36, 1);
    --primitives-color-primary-900: rgba(0, 46, 22, 1);
    --primitives-color-secondary-50: rgba(229, 242, 253, 1);
    --primitives-color-secondary-100: rgba(193, 222, 252, 1);
    --primitives-color-secondary-200: rgba(155, 202, 250, 1);
    --primitives-color-secondary-300: rgba(120, 181, 246, 1);
    --primitives-color-secondary-400: rgba(98, 165, 244, 1);
    --primitives-color-secondary-500: rgba(84, 150, 241, 1);
    --primitives-color-secondary-600: rgba(79, 136, 227, 1);
    --primitives-color-secondary-700: rgba(73, 118, 207, 1);
    --primitives-color-secondary-800: rgba(58, 70, 156, 1);
    --primitives-color-secondary-900: rgba(6, 14, 71, 1);
    --primitives-color-neutral-50: rgba(251, 251, 252, 1);
    --primitives-color-neutral-100: rgba(247, 247, 248, 1);
    --primitives-color-neutral-200: rgba(241, 241, 242, 1);
    --primitives-color-neutral-300: rgba(229, 229, 230, 1);
    --primitives-color-neutral-400: rgba(194, 194, 195, 1);
    --primitives-color-neutral-500: rgba(164, 164, 165, 1);
    --primitives-color-neutral-600: rgba(122, 122, 123, 1);
    --primitives-color-neutral-700: rgba(102, 102, 103, 1);
    --primitives-color-neutral-800: rgba(71, 71, 72, 1);
    --primitives-color-neutral-900: rgba(37, 37, 38, 1);
    --primitives-color-semantic-green-50: rgba(168, 240, 234, 1);
    --primitives-color-semantic-green-500: rgba(28, 160, 149, 1);
    --primitives-color-semantic-green-700: rgba(16, 88, 82, 1);
    --primitives-color-semantic-yellow-50: rgba(255, 237, 219, 1);
    --primitives-color-semantic-yellow-500: rgba(255, 123, 0, 1);
    --primitives-color-semantic-yellow-700: rgba(145, 74, 8, 1);
    --primitives-color-semantic-red-50: rgba(250, 225, 231, 1);
    --primitives-color-semantic-red-500: rgba(255, 35, 90, 1);
    --primitives-color-semantic-red-700: rgba(117, 21, 45, 1);
    --primitives-color-variants-chart-red-50: rgba(254, 240, 240, 0.5);
    --primitives-color-variants-chart-red-100: rgba(253, 206, 206, 1);
    --primitives-color-variants-chart-red-200: rgba(251, 131, 133, 1);
    --primitives-color-variants-chart-red-300: rgba(249, 65, 68, 1);
    --primitives-color-variants-chart-red-600: rgba(198, 6, 9, 1);
    --primitives-color-variants-chart-red-800: rgba(133, 4, 6, 1);
    --primitives-color-variants-chart-green-50: rgba(244, 251, 250, 0.5);
    --primitives-color-variants-chart-green-100: rgba(196, 235, 231, 1);
    --primitives-color-variants-chart-green-200: rgba(128, 220, 209, 1);
    --primitives-color-variants-chart-green-300: rgba(13, 179, 158, 1);
    --primitives-color-variants-chart-green-600: rgba(9, 119, 105, 1);
    --primitives-color-variants-chart-green-800: rgba(6, 81, 71, 1);
    --primitives-color-variants-chart-purple-50: rgba(244, 242, 253, 0.5);
    --primitives-color-variants-chart-purple-100: rgba(219, 213, 248, 1);
    --primitives-color-variants-chart-purple-200: rgba(143, 124, 233, 1);
    --primitives-color-variants-chart-purple-300: rgba(98, 71, 224, 1);
    --primitives-color-variants-chart-purple-600: rgba(54, 29, 175, 1);
    --primitives-color-variants-chart-purple-800: rgba(34, 18, 109, 1);
    --primitives-color-variants-chart-yellow-50: rgba(254, 250, 241, 0.5);
    --primitives-color-variants-chart-yellow-100: rgba(248, 227, 175, 1);
    --primitives-color-variants-chart-yellow-200: rgba(243, 205, 114, 1);
    --primitives-color-variants-chart-yellow-300: rgba(247, 177, 8, 1);
    --primitives-color-variants-chart-yellow-600: rgba(197, 141, 7, 1);
    --primitives-color-variants-chart-yellow-800: rgba(113, 81, 4, 1);
}

[data-primitives-mode="wireframe"] {
    --primitives-color-primary-50: rgba(247, 249, 255, 1);
    --primitives-color-primary-100: rgba(241, 243, 250, 1);
    --primitives-color-primary-200: rgba(233, 235, 241, 1);
    --primitives-color-primary-300: rgba(218, 220, 226, 1);
    --primitives-color-primary-400: rgba(182, 185, 191, 1);
    --primitives-color-primary-500: rgba(151, 153, 159, 1);
    --primitives-color-primary-600: rgba(110, 112, 118, 1);
    --primitives-color-primary-700: rgba(60, 62, 67, 1);
    --primitives-color-primary-800: rgba(41, 42, 46, 1);
    --primitives-color-primary-900: rgba(28, 29, 34, 1);
    --primitives-color-secondary-50: rgba(247, 249, 255, 1);
    --primitives-color-secondary-100: rgba(241, 243, 250, 1);
    --primitives-color-secondary-200: rgba(233, 235, 241, 1);
    --primitives-color-secondary-300: rgba(218, 220, 226, 1);
    --primitives-color-secondary-400: rgba(182, 185, 191, 1);
    --primitives-color-secondary-500: rgba(151, 153, 159, 1);
    --primitives-color-secondary-600: rgba(110, 112, 118, 1);
    --primitives-color-secondary-700: rgba(60, 62, 67, 1);
    --primitives-color-secondary-800: rgba(41, 42, 46, 1);
    --primitives-color-secondary-900: rgba(28, 29, 34, 1);
    --primitives-color-neutral-50: rgba(247, 249, 255, 1);
    --primitives-color-neutral-100: rgba(241, 243, 250, 1);
    --primitives-color-neutral-200: rgba(233, 235, 241, 1);
    --primitives-color-neutral-300: rgba(218, 220, 226, 1);
    --primitives-color-neutral-400: rgba(182, 185, 191, 1);
    --primitives-color-neutral-500: rgba(151, 153, 159, 1);
    --primitives-color-neutral-600: rgba(110, 112, 118, 1);
    --primitives-color-neutral-700: rgba(60, 62, 67, 1);
    --primitives-color-neutral-800: rgba(41, 42, 46, 1);
    --primitives-color-neutral-900: rgba(28, 29, 34, 1);
    --primitives-color-semantic-green-50: rgba(247, 249, 255, 1);
    --primitives-color-semantic-green-500: rgba(151, 153, 159, 1);
    --primitives-color-semantic-green-700: rgba(60, 62, 67, 1);
    --primitives-color-semantic-yellow-50: rgba(247, 249, 255, 1);
    --primitives-color-semantic-yellow-500: rgba(151, 153, 159, 1);
    --primitives-color-semantic-yellow-700: rgba(60, 62, 67, 1);
    --primitives-color-semantic-red-50: rgba(247, 249, 255, 1);
    --primitives-color-semantic-red-500: rgba(151, 153, 159, 1);
    --primitives-color-semantic-red-700: rgba(60, 62, 67, 1);
    --primitives-color-variants-chart-red-50: rgba(255, 255, 255, 1);
    --primitives-color-variants-chart-red-100: rgba(247, 249, 255, 1);
    --primitives-color-variants-chart-red-200: rgba(241, 243, 250, 1);
    --primitives-color-variants-chart-red-300: rgba(233, 235, 241, 1);
    --primitives-color-variants-chart-red-600: rgba(218, 220, 226, 1);
    --primitives-color-variants-chart-red-800: rgba(182, 185, 191, 1);
    --primitives-color-variants-chart-green-50: rgba(247, 249, 255, 1);
    --primitives-color-variants-chart-green-100: rgba(247, 249, 255, 1);
    --primitives-color-variants-chart-green-200: rgba(241, 243, 250, 1);
    --primitives-color-variants-chart-green-300: rgba(233, 235, 241, 1);
    --primitives-color-variants-chart-green-600: rgba(218, 220, 226, 1);
    --primitives-color-variants-chart-green-800: rgba(182, 185, 191, 1);
    --primitives-color-variants-chart-purple-50: rgba(247, 249, 255, 1);
    --primitives-color-variants-chart-purple-100: rgba(247, 249, 255, 1);
    --primitives-color-variants-chart-purple-200: rgba(241, 243, 250, 1);
    --primitives-color-variants-chart-purple-300: rgba(233, 235, 241, 1);
    --primitives-color-variants-chart-purple-600: rgba(218, 220, 226, 1);
    --primitives-color-variants-chart-purple-800: rgba(182, 185, 191, 1);
    --primitives-color-variants-chart-yellow-50: rgba(247, 249, 255, 1);
    --primitives-color-variants-chart-yellow-100: rgba(247, 249, 255, 1);
    --primitives-color-variants-chart-yellow-200: rgba(241, 243, 250, 1);
    --primitives-color-variants-chart-yellow-300: rgba(233, 235, 241, 1);
    --primitives-color-variants-chart-yellow-600: rgba(218, 220, 226, 1);
    --primitives-color-variants-chart-yellow-800: rgba(182, 185, 191, 1);
}

[data-tokens-mode="light"] {
    --tokens-background-primary: var(--primitives-color-primary-50);
    --tokens-container-primary-default: var(--primitives-color-primary-700);
    --tokens-container-primary-hover: var(--primitives-color-primary-800);
    --tokens-container-primary-pressed: var(--primitives-color-primary-900);
    --tokens-container-secondary-default: var(--primitives-color-secondary-50);
    --tokens-container-secondary-hover: var(--primitives-color-secondary-100);
    --tokens-container-secondary-pressed: var(--primitives-color-secondary-200);
    --tokens-on-container-primary-default: var(--primitives-color-primary-700);
    --tokens-on-container-primary-support: var(--primitives-color-primary-400);
    --tokens-on-container-secondary-default: var(--primitives-color-secondary-700);
    --tokens-on-container-secondary-support: var(--primitives-color-secondary-600);
    --tokens-on-container-selected-default: var(--primitives-color-primary-800);
    --tokens-on-container-selected-support: var(--tokens-on-container-grayscale-grayscale-support);
    --tokens-border-primary: var(--primitives-color-primary-700);
    --tokens-border-selected: var(--primitives-color-primary-300);
    --tokens-border-secondary: var(--primitives-color-secondary-500);
    --tokens-border-success: var(--primitives-color-semantic-green-500);
    --tokens-border-warning: var(--primitives-color-semantic-yellow-500);
    --tokens-border-error: var(--primitives-color-semantic-red-500);
    --tokens-on-container-success-secondary: var(--primitives-color-secondary-700);
    --tokens-on-container-success-success: var(--primitives-color-semantic-green-700);
    --tokens-on-container-success-warning: var(--primitives-color-semantic-yellow-700);
    --tokens-on-container-success-error: var(--primitives-color-semantic-red-700);
    --tokens-container-selected-default: var(--primitives-color-primary-50);
    --tokens-container-selected-hover: var(--primitives-color-primary-100);
    --tokens-container-selected-pressed: var(--primitives-color-primary-200);
    --tokens-container-semantic-secondary: var(--primitives-color-secondary-100);
    --tokens-container-semantic-success: var(--primitives-color-semantic-green-50);
    --tokens-container-semantic-warning: var(--primitives-color-semantic-yellow-50);
    --tokens-container-semantic-error: var(--primitives-color-semantic-red-50);
}

[data-tokens-mode="wireframe"] {
    --tokens-background-primary: var(--primitives-color-neutral-50);
    --tokens-container-primary-default: var(--primitives-color-neutral-700);
    --tokens-container-primary-hover: var(--primitives-color-neutral-800);
    --tokens-container-primary-pressed: var(--primitives-color-neutral-900);
    --tokens-container-secondary-default: var(--primitives-color-neutral-50);
    --tokens-container-secondary-hover: var(--primitives-color-neutral-100);
    --tokens-container-secondary-pressed: var(--primitives-color-neutral-200);
    --tokens-on-container-primary-default: var(--primitives-color-neutral-700);
    --tokens-on-container-primary-support: var(--primitives-color-neutral-400);
    --tokens-on-container-secondary-default: var(--primitives-color-neutral-700);
    --tokens-on-container-secondary-support: var(--primitives-color-neutral-600);
    --tokens-on-container-selected-default: var(--primitives-color-neutral-900);
    --tokens-on-container-selected-support: var(--primitives-color-neutral-700);
    --tokens-border-primary: var(--primitives-color-neutral-700);
    --tokens-border-selected: var(--primitives-color-neutral-300);
    --tokens-border-secondary: var(--primitives-color-neutral-500);
    --tokens-border-success: var(--primitives-color-neutral-500);
    --tokens-border-warning: var(--primitives-color-neutral-500);
    --tokens-border-error: var(--primitives-color-neutral-500);
    --tokens-on-container-success-secondary: var(--primitives-color-neutral-700);
    --tokens-on-container-success-success: var(--primitives-color-neutral-700);
    --tokens-on-container-success-warning: var(--primitives-color-neutral-700);
    --tokens-on-container-success-error: var(--primitives-color-neutral-700);
    --tokens-container-selected-default: var(--primitives-color-neutral-50);
    --tokens-container-selected-hover: var(--primitives-color-neutral-100);
    --tokens-container-selected-pressed: var(--primitives-color-neutral-200);
    --tokens-container-semantic-secondary: var(--primitives-color-neutral-100);
    --tokens-container-semantic-success: var(--primitives-color-neutral-50);
    --tokens-container-semantic-warning: var(--primitives-color-neutral-50);
    --tokens-container-semantic-error: var(--primitives-color-neutral-50);
}