genesys-spark 4.65.0 → 4.65.2

package/dist/css/flare/global.css

@@ -0,0 +1,1053 @@
+:root {
+  --gse-core-spacing-5xs: 2px;
+  --gse-core-spacing-6xs: 1px; /* Used mostly for the foucs offset. */
+  --gse-core-borderRadius-xs: 2px;
+  --gse-core-color-pepper-100: #f9d3da;
+  --gse-core-color-pepper-200: #f3a7b5;
+  --gse-core-color-pepper-300: #ee7a8f;
+  --gse-core-color-pepper-400: #e84e6a;
+  --gse-core-color-pepper-500: #e22245;
+  --gse-core-color-pepper-600: #b51b37;
+  --gse-core-color-pepper-700: #881429;
+  --gse-core-color-pepper-800: #5a0e1c;
+  --gse-core-color-pepper-900: #440a15;
+  --gse-core-color-pepper-1000: #2d070e;
+  --gse-core-color-honey-100: #fef4d8;
+  --gse-core-color-honey-200: #fce9b2;
+  --gse-core-color-honey-300: #fbdd8b;
+  --gse-core-color-honey-400: #f9d265;
+  --gse-core-color-honey-500: #f8c73e;
+  --gse-core-color-honey-600: #c9a132;
+  --gse-core-color-honey-700: #9a7b25;
+  --gse-core-color-honey-800: #6c5619;
+  --gse-core-color-honey-900: #3d300c;
+  --gse-core-color-honey-1000: #251d06;
+  --gse-core-color-emerald-100: #cef0e6;
+  --gse-core-color-emerald-200: #9de1cd;
+  --gse-core-color-emerald-300: #6bd3b3;
+  --gse-core-color-emerald-400: #3ac49a;
+  --gse-core-color-emerald-500: #09b581;
+  --gse-core-color-emerald-600: #079167;
+  --gse-core-color-emerald-700: #056d4d;
+  --gse-core-color-emerald-800: #044834;
+  --gse-core-color-emerald-900: #033627;
+  --gse-core-color-emerald-1000: #02241a;
+  --gse-core-color-violet-100: #e2dff8;
+  --gse-core-color-violet-200: #c5bef1;
+  --gse-core-color-violet-300: #a89ee9;
+  --gse-core-color-violet-400: #8b7de2;
+  --gse-core-color-violet-500: #6e5ddb;
+  --gse-core-color-violet-600: #594bb2;
+  --gse-core-color-violet-700: #443989;
+  --gse-core-color-violet-800: #2e275f;
+  --gse-core-color-violet-900: #241e4b;
+  --gse-core-color-violet-1000: #191536;
+  --gse-core-fontFamily-roboto: Roboto;
+  --gse-core-fontFamily-urbanist: Urbanist;
+  --gse-core-fontFamily-notoSans: "Noto Sans";
+  --gse-core-fontWeight-semiBold: 600;
+  --gse-core-size-2xs: 12px;
+  --gse-core-size-3xs: 8px;
+  --gse-core-size-4xs: 4px;
+  --gse-core-size-5xs: 2px;
+  --gse-core-size-6xs: 1px;
+  --gse-core-colorLegacy-blue-10: #172b52;
+  --gse-core-colorLegacy-blue-20: #1c3363;
+  --gse-core-colorLegacy-blue-30: #203b73;
+  --gse-core-colorLegacy-blue-40: #23478f;
+  --gse-core-colorLegacy-blue-50: #2754ac;
+  --gse-core-colorLegacy-blue-60: #2a60c8;
+  --gse-core-colorLegacy-blue-70: #5084e3;
+  --gse-core-colorLegacy-blue-80: #75a8ff;
+  --gse-core-colorLegacy-blue-90: #aac9ff;
+  --gse-core-colorLegacy-blue-100: #deeaff;
+  --gse-core-colorLegacy-black-10: #000000;
+  --gse-core-colorLegacy-black-20: #151d28;
+  --gse-core-colorLegacy-black-30: #202937;
+  --gse-core-colorLegacy-black-40: #283243;
+  --gse-core-colorLegacy-black-50: #2e394c;
+  --gse-core-colorLegacy-black-60: #364154;
+  --gse-core-colorLegacy-black-70: #3e4a5b;
+  --gse-core-colorLegacy-black-80: #4c5667;
+  --gse-core-colorLegacy-black-90: #596373;
+  --gse-core-colorLegacy-black-100: #6b7585;
+  --gse-core-colorLegacy-grey-10: #8a97ad;
+  --gse-core-colorLegacy-grey-20: #99a4b8;
+  --gse-core-colorLegacy-grey-30: #b4bccb;
+  --gse-core-colorLegacy-grey-40: #c8cfda;
+  --gse-core-colorLegacy-grey-50: #d7dce5;
+  --gse-core-colorLegacy-grey-60: #e2e6ee;
+  --gse-core-colorLegacy-grey-70: #e8ecf2;
+  --gse-core-colorLegacy-grey-80: #eff1f5;
+  --gse-core-colorLegacy-grey-90: #f6f7f9;
+  --gse-core-colorLegacy-grey-100: #fdfdfd;
+  --gse-core-colorLegacy-red-10: #520404;
+  --gse-core-colorLegacy-red-20: #700505;
+  --gse-core-colorLegacy-red-30: #8f0707;
+  --gse-core-colorLegacy-red-40: #ad0808;
+  --gse-core-colorLegacy-red-50: #cc0a0a;
+  --gse-core-colorLegacy-red-60: #ea0b0b;
+  --gse-core-colorLegacy-red-70: #ef4343;
+  --gse-core-colorLegacy-red-80: #f37a7a;
+  --gse-core-colorLegacy-red-90: #f8b2b2;
+  --gse-core-colorLegacy-red-100: #fceaea;
+  --gse-core-colorLegacy-green-10: #0d3d00;
+  --gse-core-colorLegacy-green-20: #164b08;
+  --gse-core-colorLegacy-green-30: #205a10;
+  --gse-core-colorLegacy-green-40: #296817;
+  --gse-core-colorLegacy-green-50: #33771f;
+  --gse-core-colorLegacy-green-60: #3c8527;
+  --gse-core-colorLegacy-green-70: #69a358;
+  --gse-core-colorLegacy-green-80: #95c189;
+  --gse-core-colorLegacy-green-90: #c2deb9;
+  --gse-core-colorLegacy-green-100: #eefcea;
+  --gse-core-colorLegacy-yellow-10: #523800;
+  --gse-core-colorLegacy-yellow-20: #755000;
+  --gse-core-colorLegacy-yellow-30: #976700;
+  --gse-core-colorLegacy-yellow-40: #ba7f00;
+  --gse-core-colorLegacy-yellow-50: #dc9600;
+  --gse-core-colorLegacy-yellow-60: #ffae00;
+  --gse-core-colorLegacy-yellow-70: #fbbe3b;
+  --gse-core-colorLegacy-yellow-80: #fcd276;
+  --gse-core-colorLegacy-yellow-90: #fce5b1;
+  --gse-core-colorLegacy-yellow-100: #fdf8ec;
+  --gse-core-colorLegacy-secondary-yellowGreen: #ddd933;
+  --gse-core-colorLegacy-secondary-oliveGreen: #868c1e;
+  --gse-core-colorLegacy-secondary-aquaGreen: #1da8b3;
+  --gse-core-colorLegacy-secondary-pink: #ff8fdd;
+  --gse-core-colorLegacy-secondary-fuchsia: #cc3ebe;
+  --gse-core-colorLegacy-secondary-lilac: #b5b5eb;
+  --gse-core-colorLegacy-secondary-plum: #5e5782;
+  --gse-core-colorLegacy-secondary-electricPurple: #8452cf;
+  --gse-core-colorLegacy-secondary-genesysBlue: #75a8ff;
+  --gse-core-colorLegacy-secondary-navy: #203b73;
+  --gse-core-colorLegacy-dataVisualization-yellowGreen: lch(95.5 22.7 98.8);
+  --gse-core-colorLegacy-dataVisualization-oliveGreen: lch(86.9 16.3 103);
+  --gse-core-colorLegacy-dataVisualization-aquaGreen: lch(88.8 11 206);
+  --gse-core-colorLegacy-dataVisualization-pink: lch(92.1 16.4 338);
+  --gse-core-colorLegacy-dataVisualization-fuchsia: lch(85.6 22.8 330);
+  --gse-core-colorLegacy-dataVisualization-lilac: lch(92.5 8.53 288);
+  --gse-core-colorLegacy-dataVisualization-plum: lch(81.7 7.69 295);
+  --gse-core-colorLegacy-dataVisualization-electricPurple: lch(83.7 21.4 305);
+  --gse-core-colorLegacy-dataVisualization-genesysBlue: lch(90.4 14.8 272);
+  --gse-core-colorLegacy-dataVisualization-navy: lch(77.6 10.9 279);
+  --gse-core-colorLegacy-brand-brandOrange: #ff4f1f;
+  --gse-core-colorLegacy-brand-brandTeal: #00ae9e;
+  --gse-core-colorLegacy-brand-brandNavy: #23395d;
+  --gse-core-colorLegacy-brand-brandLightBlue: #3b90aa;
+  --gse-core-colorLegacy-brand-brandYellow: #ff8f14;
+  --gse-core-borderWidth-1: 1px;
+  --gse-core-borderWidth-2: 2px;
+  --gse-core-borderWidth-3: 3px;
+  --gse-core-textCase-uppercase: uppercase;
+  --gse-core-opacity-0: 0;
+  --gse-core-opacity-50: 0.5;
+  --gse-core-opacity-80: 0.8;
+  --gse-core-letterSpacing-1: 1px;
+  --gse-semantic-borderRadius-interactive-large: 16px;
+  --gse-semantic-borderRadius-interactive-small: 4px;
+  --gse-semantic-borderRadius-container-large: 16px;
+  --gse-semantic-borderRadius-container-medium: 8px;
+  --gse-semantic-borderRadius-container-small: 4px;
+  --gse-semantic-borderRadius-formControl-input-large: 8px;
+  --gse-semantic-borderRadius-formControl-input-medium: 4px;
+  --gse-semantic-borderRadius-formControl-input-small: 2px;
+  --gse-semantic-borderRadius-focus-full: 100%;
+  --gse-semantic-borderRadius-focus-xlarge: 16px;
+  --gse-semantic-borderRadius-focus-large: 8px;
+  --gse-semantic-borderRadius-focus-medium: 8px;
+  --gse-semantic-borderRadius-focus-small: 4px;
+  --gse-semantic-borderRadius-focus-xsmall: 2px;
+  --gse-semantic-fontFamily-headings: Urbanist; /* The font family we use for headings and subheadings in this theme. */
+  --gse-semantic-opacity-disabled: 0.5; /* The opacity we apply when a component is disabled. */
+  --gse-semantic-background-container-primary-10: #ffffff;
+  --gse-semantic-background-container-primary-20: #fbfcfe;
+  --gse-semantic-background-container-primary-30: #f3f5fb;
+  --gse-semantic-background-container-primary-40: #eff0fe;
+  --gse-semantic-background-container-primary-50: #dee1fd;
+  --gse-semantic-background-container-primary-60: #ced2fc;
+  --gse-semantic-background-container-secondary-10: #4856cb;
+  --gse-semantic-background-container-secondary-20: #3742a2;
+  --gse-semantic-background-container-secondary-30: #252e78;
+  --gse-semantic-background-container-tertiary-10: rgba(0, 0, 0, 0);
+  --gse-semantic-background-container-tertiary-20: #c6c8ce;
+  --gse-semantic-background-container-highContrast-10: #1b2c48;
+  --gse-semantic-background-container-highContrast-20: #1c2463;
+  --gse-semantic-background-container-highContrast-30: #141a4f;
+  --gse-semantic-background-container-highContrast-40: #000000;
+  --gse-semantic-background-container-page-default: #ffffff; /* The default background color for a page. */
+  --gse-semantic-background-container-page-tonalSubtle: #fbfcfe; /* A more subtle background color for a page, ideal for highlight surfaces that are over the background, for example, a dashboard with different panels. */
+  --gse-semantic-background-container-page-tonalMedium: #f3f5fb; /* The background color to highlight elements in the background, for example, the row of a table. */
+  --gse-semantic-background-container-elevated-default: #ffffff; /* The background color for the default state of an elevated surface like modals, popovers, cards, etc. */
+  --gse-semantic-background-container-elevated-hover: #eff0fe; /* The background color for the hover state of an elevated surface like modals, popovers, cards, etc. */
+  --gse-semantic-background-container-elevated-active: #ced2fc; /* The background color for the active state of an elevated surface like modals, popovers, cards, etc. */
+  --gse-semantic-background-container-highConstrast-default: #1b2c48; /* The background color for the default state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
+  --gse-semantic-background-container-highConstrast-hover: #141a4f; /* The background color for the hover state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
+  --gse-semantic-background-container-highConstrast-active: #1c2463; /* The background color for the active state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
+  --gse-semantic-background-formControl-input-10: #ffffff;
+  --gse-semantic-background-formControl-input-20: #c6c8ce;
+  --gse-semantic-background-formControl-clickInput-track: #c6c8ce; /* The color used for the tracks of click-based components,like the container of the toggle or the track of the slider. */
+  --gse-semantic-background-formControl-textInput-track: #ffffff; /* The default background color for inputs. */
+  --gse-semantic-background-overlay-10: rgb(24.3% 32.5% 45.5% / 0.8);
+  --gse-semantic-background-overlay-shroud-default: rgb(24.3% 32.5% 45.5% / 0.8); /* The default color for modals overlays. */
+  --gse-semantic-background-system-primary: #dee1fd; /* The default background color for neutral feedback elements like alerts. */
+  --gse-semantic-background-system-info: #e2dff8; /* The default background color for info elements like alerts. */
+  --gse-semantic-background-system-success: #cef0e6; /* The default background color for success elements like alerts. */
+  --gse-semantic-background-system-warning: #fef4d8; /* The default background color for warning elements like alerts. */
+  --gse-semantic-background-system-error: #f9d3da; /* The default background color for error elements like alerts. */
+  --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_2: #626e84; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_5: #607732; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_6: #5798d9; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_7: #ac75ff; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_8: #89387b; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_11: #ffc650; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_4: #90d3dd; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_5: #c6dd98; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_6: #9ac1e8; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_7: #cdacff; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_8: #ef9ee1; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_10: #feb2ab;
+  --gse-semantic-background-system-customAccents-subtle-accent_11: #ffdd96; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-progressAndLoading-default: #dee1fd; /* The color to indicate that this progress has not been achieved. */
+  --gse-semantic-background-system-progressAndLoading-progressed: #4856cb; /* The color to indicate that this progress in a component. */
+  --gse-semantic-background-customAccents-bold-10: #3e5374;
+  --gse-semantic-background-customAccents-bold-20: #626e84;
+  --gse-semantic-background-customAccents-bold-30: #3ac49a;
+  --gse-semantic-background-customAccents-bold-40: #0c6d7e;
+  --gse-semantic-background-customAccents-bold-50: #607732;
+  --gse-semantic-background-customAccents-bold-60: #5798d9;
+  --gse-semantic-background-customAccents-bold-70: #ac75ff;
+  --gse-semantic-background-customAccents-bold-80: #89387b;
+  --gse-semantic-background-customAccents-bold-90: #ff5c77;
+  --gse-semantic-background-customAccents-bold-100: #c44b3b;
+  --gse-semantic-background-customAccents-bold-110: #ffc650;
+  --gse-semantic-background-customAccents-subtle-10: #c6c8ce;
+  --gse-semantic-background-customAccents-subtle-20: #d1d7ef;
+  --gse-semantic-background-customAccents-subtle-30: #9de1cd;
+  --gse-semantic-background-customAccents-subtle-40: #90d3dd;
+  --gse-semantic-background-customAccents-subtle-50: #c6dd98;
+  --gse-semantic-background-customAccents-subtle-60: #9ac1e8;
+  --gse-semantic-background-customAccents-subtle-70: #cdacff;
+  --gse-semantic-background-customAccents-subtle-80: #ef9ee1;
+  --gse-semantic-background-customAccents-subtle-90: #ff9dad;
+  --gse-semantic-background-customAccents-subtle-100: #feb2ab;
+  --gse-semantic-background-customAccents-subtle-110: #ffdd96;
+  --gse-semantic-background-interactive-primary-default: #4856cb; /* The background color of primary actions in the default state. */
+  --gse-semantic-background-interactive-primary-hover: #3742a2; /* The background color of primary actions in the hover state. */
+  --gse-semantic-background-interactive-primary-active: #252e78; /* The background color of primary actions in the active state. */
+  --gse-semantic-background-interactive-secondary-default: #eff0fe; /* The background color of secondary actions in the default state. */
+  --gse-semantic-background-interactive-secondary-hover: #dee1fd; /* The background color of secondary actions in the hover state. */
+  --gse-semantic-background-interactive-secondary-active: #ced2fc; /* The background color of secondary actions in the active state. */
+  --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
+  --gse-semantic-background-interactive-tertiary-hover: #3742a2; /* The background color of tertiary actions in the hover state. */
+  --gse-semantic-background-interactive-tertiary-active: #252e78; /* The background color of tertiary actions in the active state. */
+  --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
+  --gse-semantic-background-interactive-ghost-hover: #dee1fd; /* The background color of dismissal actions in the hover state. */
+  --gse-semantic-background-interactive-ghost-active: #ced2fc; /* The background color of dismissal actions in the active state. */
+  --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
+  --gse-semantic-background-interactive-subtle-hover: #dee1fd; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
+  --gse-semantic-background-interactive-subtle-active: #ced2fc; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
+  --gse-semantic-background-interactive-danger-default: #e22245; /* The background color of danger actions in the default state. */
+  --gse-semantic-background-interactive-danger-hover: #881429; /* The background color of danger actions in the hover state. */
+  --gse-semantic-background-interactive-danger-active: #440a15; /* The background color of danger actions in the active state. */
+  --gse-semantic-foreground-primary-10: #3e5374;
+  --gse-semantic-foreground-primary-20: #23395d;
+  --gse-semantic-foreground-primary-30: #1b2c48;
+  --gse-semantic-foreground-secondary-10: #ffffff;
+  --gse-semantic-foreground-secondary-20: #767c8d;
+  --gse-semantic-foreground-secondary-30: #626e84;
+  --gse-semantic-foreground-tertiary-10: #4856cb;
+  --gse-semantic-foreground-tertiary-20: #3742a2;
+  --gse-semantic-foreground-tertiary-30: #252e78;
+  --gse-semantic-foreground-highContrast-10: #ffffff;
+  --gse-semantic-foreground-highContrast-20: #e8ebf7;
+  --gse-semantic-foreground-highContrast-30: #c6ceec;
+  --gse-semantic-foreground-system-primary-10: #5a6af5;
+  --gse-semantic-foreground-system-info-10: #6e5ddb;
+  --gse-semantic-foreground-system-info-highEmphasis: #1b2c48; /* The default color for high emphasis content on info backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-info-accent: #6e5ddb; /* The color for content on info backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-success-10: #09b581;
+  --gse-semantic-foreground-system-success-highEmphasis: #1b2c48; /* The default color for high emphasis content on success backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-success-accent: #09b581; /* The color for content on success backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-warning-10: #f8c73e;
+  --gse-semantic-foreground-system-warning-highEmphasis: #1b2c48; /* The default color for high emphasis content on warning backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-warning-accent: #f8c73e; /* The color for content on warning backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-error-10: #e22245;
+  --gse-semantic-foreground-system-error-highEmphasis: #1b2c48; /* The default color for high emphasis content on error backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-error-accent: #e22245; /* The color for content on error backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-customAccents-light: #ffffff; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the dark color. */
+  --gse-semantic-foreground-system-customAccents-dark: #1b2c48; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color. */
+  --gse-semantic-foreground-system-progressAndLoading-default: #23395d; /* The color for foreground content on progress_and_loading/default backgrounds. */
+  --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
+  --gse-semantic-foreground-system-icon-default: #3e5374; /* The color for foreground content on progress_and_loading/default backgrounds. */
+  --gse-semantic-foreground-specialAccents-brand-10: #ff4f1f;
+  --gse-semantic-foreground-specialAccents-ai-10: #8a5ecc;
+  --gse-semantic-foreground-link-10: #4856cb;
+  --gse-semantic-foreground-link-20: #3742a2;
+  --gse-semantic-foreground-link-30: #252e78;
+  --gse-semantic-foreground-link-40: #8a5ecc;
+  --gse-semantic-foreground-icon-10: #3e5374;
+  --gse-semantic-foreground-formControl-clickInput-10: #4856cb;
+  --gse-semantic-foreground-formControl-clickInput-20: #3742a2;
+  --gse-semantic-foreground-formControl-clickInput-30: #252e78;
+  --gse-semantic-foreground-formControl-clickInput-50: #767c8d;
+  --gse-semantic-foreground-formControl-clickInput-enabled: #767c8d; /* The color we use for foreground elements on click-based inputs when they are enabled but not selected. */
+  --gse-semantic-foreground-formControl-clickInput-selected: #4856cb; /* The color we use for foreground elements on click-based inputs when they are selected. */
+  --gse-semantic-foreground-formControl-clickInput-hover: #3742a2; /* The color we use for foreground elements on click-based inputs when they are on the hover state. */
+  --gse-semantic-foreground-formControl-clickInput-active: #252e78; /* The color we use for foreground elements on click-based inputs when they are on the active state. */
+  --gse-semantic-foreground-formControl-clickInput-error: #e22245;
+  --gse-semantic-foreground-formControl-helpText-default: #626e84; /* The color we used for the default helper text. */
+  --gse-semantic-foreground-formControl-helpText-error: #e22245; /* The color we used for the error helper text. */
+  --gse-semantic-foreground-formControl-textInput-placeholder: #626e84; /* The default color of placeholder content on an input. */
+  --gse-semantic-foreground-formControl-textInput-populated: #1b2c48; /* The default color of populated content on an input. */
+  --gse-semantic-foreground-formControl-textInput-icon: #626e84; /* The default color of icons on an input. */
+  --gse-semantic-foreground-formControl-label-default: #1b2c48; /* The color for the content of input labels. */
+  --gse-semantic-foreground-formControl-label-requiredAccent: #e22245; /* The color we used for the required indicator. */
+  --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374; /* The color we used for the optional indicator. */
+  --gse-semantic-foreground-interactive-primary-default: #ffffff; /* The color for foreground elements that are over a primary/default background. */
+  --gse-semantic-foreground-interactive-primary-active: #ffffff; /* The color for foreground elements that are over a primary/hover background. */
+  --gse-semantic-foreground-interactive-primary-hover: #ffffff; /* The color for foreground elements that are over a primary/active background. */
+  --gse-semantic-foreground-interactive-secondary-default: #4856cb; /* The color for foreground elements that are over a secondary/default background. */
+  --gse-semantic-foreground-interactive-secondary-active: #252e78; /* The color for foreground elements that are over a secondary/active background. */
+  --gse-semantic-foreground-interactive-secondary-hover: #3742a2; /* The color for foreground elements that are over a secondary/hover background. */
+  --gse-semantic-foreground-interactive-tertiary-default: #4856cb; /* The color for foreground elements that are over a tertiary/default background. */
+  --gse-semantic-foreground-interactive-tertiary-active: #ffffff; /* The color for foreground elements that are over a tertiary/active background. */
+  --gse-semantic-foreground-interactive-tertiary-hover: #ffffff; /* The color for foreground elements that are over a tertiary/hover background. */
+  --gse-semantic-foreground-interactive-ghost-default: #4856cb; /* The color for foreground elements that are over a ghost/default background. */
+  --gse-semantic-foreground-interactive-ghost-active: #252e78; /* The color for foreground elements that are over a ghost/active background. */
+  --gse-semantic-foreground-interactive-ghost-hover: #3742a2; /* The color for foreground elements that are over a ghost/hover background. */
+  --gse-semantic-foreground-interactive-subtle-default: #3e5374; /* The color for foreground elements that are over a subtle/default background. */
+  --gse-semantic-foreground-interactive-subtle-active: #1b2c48; /* The color for foreground elements that are over a subtle/active background. */
+  --gse-semantic-foreground-interactive-subtle-hover: #23395d; /* The color for foreground elements that are over a subtle/hover background. */
+  --gse-semantic-foreground-interactive-danger-default: #ffffff; /* The color for foreground elements that are over a danger/default background. */
+  --gse-semantic-foreground-interactive-danger-active: #ffffff; /* The color for foreground elements that are over a danger/active background. */
+  --gse-semantic-foreground-interactive-danger-hover: #ffffff; /* The color for foreground elements that are over a danger/hover background. */
+  --gse-semantic-foreground-interactive-link-default: #4856cb; /* The default color of links. */
+  --gse-semantic-foreground-interactive-link-active: #252e78; /* The active color of links. */
+  --gse-semantic-foreground-interactive-link-hover: #3742a2; /* The hover color of links. */
+  --gse-semantic-foreground-interactive-link-visited: #8a5ecc; /* The  color of links when  they were already visited. */
+  --gse-semantic-foreground-container-highEmphasis: #1b2c48; /* The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text. */
+  --gse-semantic-foreground-container-midEmphasis: #3e5374; /* The default color for medium emphasis content on surfaces, like normal paragraphs. */
+  --gse-semantic-foreground-container-lowEmphasis: #626e84; /* The default color for low emphasis content on surfaces, like captions or fine print. */
+  --gse-semantic-foreground-container-highContrast-highEmphasis: #ffffff; /* The default color for high emphasis content on high contrast surfaces, like headings, subheadings, quotes or bold text. */
+  --gse-semantic-foreground-container-highContrast-midEmphasis: #e8ebf7; /* The default color for medium emphasis content on high contrast surfaces, like normal paragraphs. */
+  --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec; /* The default color for low emphasis content on high contrast surfaces, like captions or fine print. */
+  --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc; /* The color for foreground content used to highlight an AI feature on a surface. */
+  --gse-semantic-foreground-container-specialAccents-brand: #ff4f1f; /* The brand color, mostly used for logos on surfaces. */
+  --gse-semantic-border-focus: #7b88f7; /* The color we use for focus outlines. */
+  --gse-semantic-border-divider-10: #ffffff;
+  --gse-semantic-border-divider-20: #c6c8ce;
+  --gse-semantic-border-divider-30: #4856cb;
+  --gse-semantic-border-edges-default-10: #c6c8ce;
+  --gse-semantic-border-edges-default-20: #3e5374;
+  --gse-semantic-border-edges-default-30: #1b2c48;
+  --gse-semantic-border-edges-enabled-10: #4856cb;
+  --gse-semantic-border-edges-hover-10: #7b88f7;
+  --gse-semantic-border-edges-hover-20: #252e78;
+  --gse-semantic-border-edges-active-10: #4856cb;
+  --gse-semantic-border-system-primary: #9ca6f9; /* The default borders for elements that have a feedback/primary background. */
+  --gse-semantic-border-system-info: #c5bef1; /* The default borders for elements that have a feedback/info background. */
+  --gse-semantic-border-system-success: #cef0e6; /* The default borders for elements that have a feedback/success background. */
+  --gse-semantic-border-system-warning: #fce9b2; /* The default borders for elements that have a feedback/warning background. */
+  --gse-semantic-border-system-error: #f3a7b5; /* The default borders for elements that have a feedback/error background. */
+  --gse-semantic-border-inputs-default-10: #a3a7b0;
+  --gse-semantic-border-inputs-hover-10: #3742a2;
+  --gse-semantic-border-inputs-active-10: #252e78;
+  --gse-semantic-border-container-divider: #c6c8ce; /* The default color for dividers inside surfaces. */
+  --gse-semantic-border-container-edges-default: #c6c8ce; /* The default color for the edge borders of surfaces, we mostly use it to add some elevation for cards. */
+  --gse-semantic-border-container-edges-hover: #7b88f7; /* The color for the edge borders of surfaces that are on the hover state, like the bottom border of a tab. */
+  --gse-semantic-border-container-edges-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled, like the bottom border of a selected tab. */
+  --gse-semantic-border-container-edges-active: #4856cb; /* The color for the edge borders of surfaces that are on the active state, like the bottom border of a tab. */
+  --gse-semantic-border-container-edges-highEmphasis: #1b2c48; /* The default color for the edge borders of high-emphasis surfaces e.g dark tooltip */
+  --gse-semantic-border-container-highConstrast-default: #3e5374; /* The default color for the edge borders of high contrast surfaces. */
+  --gse-semantic-border-container-highConstrast-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled. */
+  --gse-semantic-border-container-highConstrast-hover: #252e78; /* The color for the edge borders of high contrast surfaces that are on the hover state. */
+  --gse-semantic-border-container-highConstrast-active: #4856cb; /* The color for the edge borders of high contrast surfaces that are on the active state. */
+  --gse-semantic-border-interactive-primary-divider: #ffffff; /* The color for dividers inside interactive/primary  elements. */
+  --gse-semantic-border-interactive-secondary-divider: #ffffff; /* The color for dividers inside interactive/secondary elements. */
+  --gse-semantic-border-interactive-tertiary-divider: #4856cb; /* The color for dividers inside interactive/tertiary elements. */
+  --gse-semantic-border-interactive-danger-divider: #ffffff; /* The color for dividers inside interactive/danger elements. */
+  --gse-semantic-border-formControl-textInput-default: #a3a7b0; /* The border for inputs edges in the default state. */
+  --gse-semantic-border-formControl-textInput-hover: #3742a2; /* The border for inputs edges in the hover state. */
+  --gse-semantic-border-formControl-textInput-active: #252e78; /* The border for inputs edges in the active state. */
+  --gse-semantic-border-formControl-textInput-error: #e22245; /* The border for inputs edges in the error state. */
+  --gse-semantic-body-sm-regular: 400 12px/16px "Noto Sans"; /* This is the typography style we use in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or low emphasis colors. */
+  --gse-semantic-body-sm-link: 600 12px/18px "Noto Sans"; /* This is the typography style we use for hyperlinks in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with link colors. */
+  --gse-semantic-body-sm-bold: 700 12px/18px "Noto Sans"; /* This is the typography style we use to add great emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with high emphasis colors. */
+  --gse-semantic-body-sm-semiBold: 600 12px/18px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or high emphasis colors. */
+  --gse-semantic-body-md-regular: 400 14px/20px "Noto Sans"; /* This is the typography style we use in most of our bodies of text like paragraphs; we usually pair it with medium emphasis colors. */
+  --gse-semantic-body-md-link: 600 14px/20px "Noto Sans"; /* This is the typography style we use for hyperlinks in bodies of text, like paragraphs; we usually pair it with link colors. */
+  --gse-semantic-body-md-bold: 700 14px/20px "Noto Sans"; /* This is the typography style we use to add great emphasis in bodies of text, like paragraphs; we usually pair it with high emphasis colors. */
+  --gse-semantic-body-md-semiBold: 600 14px/20px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in bodies of text, like paragraphs, we usually pair it with medium or high emphasis colors. */
+  --gse-semantic-body-lg-regular: 400 16px/24px "Noto Sans"; /* This is the typography style we use in most of our high emphasis bodies of text like introductory paragraphs after a heading; we usually pair it with medium emphasis colors. */
+  --gse-semantic-body-lg-link: 600 16px/24px "Noto Sans"; /* This is the typography style we use for hyperlinks in bodies of text, like introductory paragraphs after a heading; we usually pair it with link colors. */
+  --gse-semantic-body-lg-bold: 700 16px/24px "Noto Sans"; /* This is the typography style we use to add great emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with high emphasis colors. */
+  --gse-semantic-body-lg-semiBold: 600 16px/24px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with medium or high emphasis colors. */
+  /**
+   * We use this typography style for high emphasis headers nested on a 5th-6th level, h5's or h6's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xs-bold: 700 14px/24px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers nested on a 5th-6th level, h5's or h6's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xs-semiBold: 600 14px/24px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers nested on a 4th level, h4's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-sm-bold: 700 16px/24px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers nested on a 4th level, h4's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-sm-semiBold: 600 16px/24px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers nested on a 3rd level, h3's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-md-bold: 700 18px/27px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers nested on a 3rd level, h3's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-md-semiBold: 600 18px/27px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-lg-bold: 700 24px/32px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-lg-semiBold: 600 24px/32px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xl-bold: 700 36px/44px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xl-semiBold: 600 36px/44px Urbanist;
+  /**
+   * We use this typography style for header's eyebrows, meaning a little text that go just above the header that can give more context on the header below.Eyebrows a re meant to be concise and not full sentences, if you need to give more context try using an subheading.
+   * 
+   * We usually pair it with low emphasis colors.
+   */
+  --gse-semantic-heading-overline: 600 12px/16px Urbanist;
+  /**
+   * We use this typography style for high emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
+   * We usually pair it with medium emphasis colors.
+   */
+  --gse-semantic-subheading-bold: 700 14px/20px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
+   * We usually pair it with medium emphasis colors.
+   */
+  --gse-semantic-subheading-semiBold: 600 14px/20px Urbanist;
+  /**
+   * We use this typography style for low emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
+   * We usually pair it with medium emphasis colors.
+   */
+  --gse-semantic-subheading-regular: 400 14px/20px Urbanist;
+  --gse-semantic-interactive-medium-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
+  --gse-semantic-interactive-medium-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
+  --gse-semantic-interactive-medium-padding-horizontal: 8px; /* The recommended horizontal padding for medium-sized components. */
+  --gse-semantic-interactive-small-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
+  --gse-semantic-interactive-small-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
+  --gse-semantic-interactive-small-padding-horizontal: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
+  --gse-semantic-interactive-small-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
+  --gse-semantic-interactive-large-borderRadius: 16px; /* The recommended large border-radius for interactive component. Eg Tags */
+  --gse-semantic-interactive-large-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
+  --gse-semantic-interactive-large-padding-horizontal: 12px; /* The recommended horizontal padding for large-sized components. */
+  --gse-semantic-interactive-edges-borderWidth: 1px; /* The default border width for the edges of interactive components, like the ones on a tertiary(or outlined) button. */
+  --gse-semantic-interactive-divider-small-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
+  --gse-semantic-interactive-divider-large-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
+  --gse-semantic-interactive-xlarge-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
+  --gse-semantic-interactive-xlarge-padding-horizontal: 16px; /* The recommended horizontal padding for xlarge-sized components. */
+  --gse-semantic-focusOutline-full-borderRadius: 100%; /* The recommended full border-radius for focus. Eg avatar */
+  --gse-semantic-focusOutline-xlarge-borderRadius: 16px; /* The recommended xlarge border-radius for focus. Eg toggle */
+  --gse-semantic-focusOutline-large-borderRadius: 8px; /* The recommended large border-radius for focus. Eg segmented control */
+  --gse-semantic-focusOutline-medium-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
+  --gse-semantic-focusOutline-small-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
+  --gse-semantic-focusOutline-small-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
+  --gse-semantic-focusOutline-xsmall-borderRadius: 2px; /* The recommended xsmall border-radius for focus. Eg icons */
+  --gse-semantic-container-large-borderRadius: 16px; /* The recommended large border-radius for large containers, like modals. */
+  --gse-semantic-container-large-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
+  --gse-semantic-container-large-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
+  --gse-semantic-container-small-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
+  --gse-semantic-container-small-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
+  --gse-semantic-container-small-horizontalPadding: 12px; /* The default padding of a small-sized container, like a tooltip. */
+  --gse-semantic-container-small-verticalPadding: 8px; /* The default vertical padding of a small-sized container, like a tooltip. */
+  --gse-semantic-container-small-minHeight: 20px; /* The minimum height recommended for a small container, like a tag. */
+  --gse-semantic-container-small-height: 32px; /* The average recommended height for a small container, like a tag. */
+  --gse-semantic-container-medium-borderRadius: 8px; /* The recommended medium border-radius for containers. Eg cards */
+  --gse-semantic-container-medium-horizontalPadding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
+  --gse-semantic-container-medium-verticalPadding: 24px; /* The default vertical padding of a medium-sized container, like a tooltip. */
+  --gse-semantic-container-medium-minHeight: 32px; /* The minimmum recommended height for a medium container, like a tag. */
+  --gse-semantic-container-edges-borderWidth: 1px; /* The recommended border width for the edges of containers, like cards or menus or popovers. */
+  --gse-semantic-container-divider-borderWidth: 1px; /* The recommended border width for the dividers within containers, like cards or menus or popovers. */
+  --gse-semantic-container-xsmall-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
+  --gse-semantic-container-xsmall-horizontalPadding: 8px; /* The default padding of a  extra small-sized container, like the container of an eyebrow title. */
+  --gse-semantic-container-xsmall-verticalPadding: 4px; /* The default padding of a  extra small-sized container, like the container of an eyebrow title. */
+  --gse-semantic-formControl-textInput-large-borderRadius: 8px; /* The recommended large border-radius for inputs */
+  --gse-semantic-formControl-textInput-small-borderRadius: 2px; /* The recommended small border-radius for inputs */
+  --gse-semantic-formControl-textInput-medium-borderRadius: 4px; /* The recommended medium border-radius for inputs */
+  --gse-semantic-formControl-textInput-padding: 8px 12px; /* The default padding for inputs inside a form control. */
+  --gse-semantic-formControl-textInput-gap: 12px; /* The default gap for between elements inside an input. For example, the space between a placeholder and an icon inside and input. */
+  --gse-semantic-formControl-textInput-edges-borderWidth: 1px; /* The recommended border width for the edges of text-based inputs, like textfields or text areas. */
+  --gse-semantic-formControl-textInput-divider-borderWidth: 1px; /* The recommended border width for the dividers within text-based inputs, like the textfields or textareas. */
+  --gse-semantic-formControl-formField-gap: 4px; /* The default gap for between elements inside a form field, like textfields, text areas. */
+  --gse-semantic-contanier-large-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15); /* The recommended box shadow for large containers, like modals or popovers. */
+  --gse-semantic-contanier-medium-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12); /* The shadow we used for medium-sized components like elevated cards. */
+  --gse-semantic-contanier-small-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1); /* The shadow we used for small-sized components like tooltips. */
+  --gse-semantic-assets-large-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
+  --gse-semantic-assets-medium-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
+  --gse-semantic-assets-small-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
+  --gse-semantic-divider-width: 1px; /* The default width of our divider, we usually represent dividers as rectangles on Figma instead of a single line layer. */
+  --gse-semantic-divider-xs-margin: 1px;
+  --gse-semantic-divider-sm-margin: 2px;
+  --gse-semantic-divider-md-margin: 4px;
+  --gse-semantic-divider-lg-margin: 8px;
+}
+
+[flare-mode=dark] {
+  --gse-core-spacing-5xs: 2px;
+  --gse-core-spacing-6xs: 1px; /* Used mostly for the foucs offset. */
+  --gse-core-borderRadius-xs: 2px;
+  --gse-core-color-pepper-100: #f9d3da;
+  --gse-core-color-pepper-200: #f3a7b5;
+  --gse-core-color-pepper-300: #ee7a8f;
+  --gse-core-color-pepper-400: #e84e6a;
+  --gse-core-color-pepper-500: #e22245;
+  --gse-core-color-pepper-600: #b51b37;
+  --gse-core-color-pepper-700: #881429;
+  --gse-core-color-pepper-800: #5a0e1c;
+  --gse-core-color-pepper-900: #440a15;
+  --gse-core-color-pepper-1000: #2d070e;
+  --gse-core-color-honey-100: #fef4d8;
+  --gse-core-color-honey-200: #fce9b2;
+  --gse-core-color-honey-300: #fbdd8b;
+  --gse-core-color-honey-400: #f9d265;
+  --gse-core-color-honey-500: #f8c73e;
+  --gse-core-color-honey-600: #c9a132;
+  --gse-core-color-honey-700: #9a7b25;
+  --gse-core-color-honey-800: #6c5619;
+  --gse-core-color-honey-900: #3d300c;
+  --gse-core-color-honey-1000: #251d06;
+  --gse-core-color-emerald-100: #cef0e6;
+  --gse-core-color-emerald-200: #9de1cd;
+  --gse-core-color-emerald-300: #6bd3b3;
+  --gse-core-color-emerald-400: #3ac49a;
+  --gse-core-color-emerald-500: #09b581;
+  --gse-core-color-emerald-600: #079167;
+  --gse-core-color-emerald-700: #056d4d;
+  --gse-core-color-emerald-800: #044834;
+  --gse-core-color-emerald-900: #033627;
+  --gse-core-color-emerald-1000: #02241a;
+  --gse-core-color-violet-100: #e2dff8;
+  --gse-core-color-violet-200: #c5bef1;
+  --gse-core-color-violet-300: #a89ee9;
+  --gse-core-color-violet-400: #8b7de2;
+  --gse-core-color-violet-500: #6e5ddb;
+  --gse-core-color-violet-600: #594bb2;
+  --gse-core-color-violet-700: #443989;
+  --gse-core-color-violet-800: #2e275f;
+  --gse-core-color-violet-900: #241e4b;
+  --gse-core-color-violet-1000: #191536;
+  --gse-core-fontFamily-roboto: Roboto;
+  --gse-core-fontFamily-urbanist: Urbanist;
+  --gse-core-fontFamily-notoSans: "Noto Sans";
+  --gse-core-fontWeight-semiBold: 600;
+  --gse-core-size-2xs: 12px;
+  --gse-core-size-3xs: 8px;
+  --gse-core-size-4xs: 4px;
+  --gse-core-size-5xs: 2px;
+  --gse-core-size-6xs: 1px;
+  --gse-core-colorLegacy-blue-10: #172b52;
+  --gse-core-colorLegacy-blue-20: #1c3363;
+  --gse-core-colorLegacy-blue-30: #203b73;
+  --gse-core-colorLegacy-blue-40: #23478f;
+  --gse-core-colorLegacy-blue-50: #2754ac;
+  --gse-core-colorLegacy-blue-60: #2a60c8;
+  --gse-core-colorLegacy-blue-70: #5084e3;
+  --gse-core-colorLegacy-blue-80: #75a8ff;
+  --gse-core-colorLegacy-blue-90: #aac9ff;
+  --gse-core-colorLegacy-blue-100: #deeaff;
+  --gse-core-colorLegacy-black-10: #000000;
+  --gse-core-colorLegacy-black-20: #151d28;
+  --gse-core-colorLegacy-black-30: #202937;
+  --gse-core-colorLegacy-black-40: #283243;
+  --gse-core-colorLegacy-black-50: #2e394c;
+  --gse-core-colorLegacy-black-60: #364154;
+  --gse-core-colorLegacy-black-70: #3e4a5b;
+  --gse-core-colorLegacy-black-80: #4c5667;
+  --gse-core-colorLegacy-black-90: #596373;
+  --gse-core-colorLegacy-black-100: #6b7585;
+  --gse-core-colorLegacy-grey-10: #8a97ad;
+  --gse-core-colorLegacy-grey-20: #99a4b8;
+  --gse-core-colorLegacy-grey-30: #b4bccb;
+  --gse-core-colorLegacy-grey-40: #c8cfda;
+  --gse-core-colorLegacy-grey-50: #d7dce5;
+  --gse-core-colorLegacy-grey-60: #e2e6ee;
+  --gse-core-colorLegacy-grey-70: #e8ecf2;
+  --gse-core-colorLegacy-grey-80: #eff1f5;
+  --gse-core-colorLegacy-grey-90: #f6f7f9;
+  --gse-core-colorLegacy-grey-100: #fdfdfd;
+  --gse-core-colorLegacy-red-10: #520404;
+  --gse-core-colorLegacy-red-20: #700505;
+  --gse-core-colorLegacy-red-30: #8f0707;
+  --gse-core-colorLegacy-red-40: #ad0808;
+  --gse-core-colorLegacy-red-50: #cc0a0a;
+  --gse-core-colorLegacy-red-60: #ea0b0b;
+  --gse-core-colorLegacy-red-70: #ef4343;
+  --gse-core-colorLegacy-red-80: #f37a7a;
+  --gse-core-colorLegacy-red-90: #f8b2b2;
+  --gse-core-colorLegacy-red-100: #fceaea;
+  --gse-core-colorLegacy-green-10: #0d3d00;
+  --gse-core-colorLegacy-green-20: #164b08;
+  --gse-core-colorLegacy-green-30: #205a10;
+  --gse-core-colorLegacy-green-40: #296817;
+  --gse-core-colorLegacy-green-50: #33771f;
+  --gse-core-colorLegacy-green-60: #3c8527;
+  --gse-core-colorLegacy-green-70: #69a358;
+  --gse-core-colorLegacy-green-80: #95c189;
+  --gse-core-colorLegacy-green-90: #c2deb9;
+  --gse-core-colorLegacy-green-100: #eefcea;
+  --gse-core-colorLegacy-yellow-10: #523800;
+  --gse-core-colorLegacy-yellow-20: #755000;
+  --gse-core-colorLegacy-yellow-30: #976700;
+  --gse-core-colorLegacy-yellow-40: #ba7f00;
+  --gse-core-colorLegacy-yellow-50: #dc9600;
+  --gse-core-colorLegacy-yellow-60: #ffae00;
+  --gse-core-colorLegacy-yellow-70: #fbbe3b;
+  --gse-core-colorLegacy-yellow-80: #fcd276;
+  --gse-core-colorLegacy-yellow-90: #fce5b1;
+  --gse-core-colorLegacy-yellow-100: #fdf8ec;
+  --gse-core-colorLegacy-secondary-yellowGreen: #ddd933;
+  --gse-core-colorLegacy-secondary-oliveGreen: #868c1e;
+  --gse-core-colorLegacy-secondary-aquaGreen: #1da8b3;
+  --gse-core-colorLegacy-secondary-pink: #ff8fdd;
+  --gse-core-colorLegacy-secondary-fuchsia: #cc3ebe;
+  --gse-core-colorLegacy-secondary-lilac: #b5b5eb;
+  --gse-core-colorLegacy-secondary-plum: #5e5782;
+  --gse-core-colorLegacy-secondary-electricPurple: #8452cf;
+  --gse-core-colorLegacy-secondary-genesysBlue: #75a8ff;
+  --gse-core-colorLegacy-secondary-navy: #203b73;
+  --gse-core-colorLegacy-dataVisualization-yellowGreen: lch(95.5 22.7 98.8);
+  --gse-core-colorLegacy-dataVisualization-oliveGreen: lch(86.9 16.3 103);
+  --gse-core-colorLegacy-dataVisualization-aquaGreen: lch(88.8 11 206);
+  --gse-core-colorLegacy-dataVisualization-pink: lch(92.1 16.4 338);
+  --gse-core-colorLegacy-dataVisualization-fuchsia: lch(85.6 22.8 330);
+  --gse-core-colorLegacy-dataVisualization-lilac: lch(92.5 8.53 288);
+  --gse-core-colorLegacy-dataVisualization-plum: lch(81.7 7.69 295);
+  --gse-core-colorLegacy-dataVisualization-electricPurple: lch(83.7 21.4 305);
+  --gse-core-colorLegacy-dataVisualization-genesysBlue: lch(90.4 14.8 272);
+  --gse-core-colorLegacy-dataVisualization-navy: lch(77.6 10.9 279);
+  --gse-core-colorLegacy-brand-brandOrange: #ff4f1f;
+  --gse-core-colorLegacy-brand-brandTeal: #00ae9e;
+  --gse-core-colorLegacy-brand-brandNavy: #23395d;
+  --gse-core-colorLegacy-brand-brandLightBlue: #3b90aa;
+  --gse-core-colorLegacy-brand-brandYellow: #ff8f14;
+  --gse-core-borderWidth-1: 1px;
+  --gse-core-borderWidth-2: 2px;
+  --gse-core-borderWidth-3: 3px;
+  --gse-core-textCase-uppercase: uppercase;
+  --gse-core-opacity-0: 0;
+  --gse-core-opacity-50: 0.5;
+  --gse-core-opacity-80: 0.8;
+  --gse-core-letterSpacing-1: 1px;
+  --gse-semantic-borderRadius-interactive-large: 16px;
+  --gse-semantic-borderRadius-interactive-small: 4px;
+  --gse-semantic-borderRadius-container-large: 16px;
+  --gse-semantic-borderRadius-container-medium: 8px;
+  --gse-semantic-borderRadius-container-small: 4px;
+  --gse-semantic-borderRadius-formControl-input-large: 8px;
+  --gse-semantic-borderRadius-formControl-input-medium: 4px;
+  --gse-semantic-borderRadius-formControl-input-small: 2px;
+  --gse-semantic-borderRadius-focus-full: 100%;
+  --gse-semantic-borderRadius-focus-xlarge: 16px;
+  --gse-semantic-borderRadius-focus-large: 8px;
+  --gse-semantic-borderRadius-focus-medium: 8px;
+  --gse-semantic-borderRadius-focus-small: 4px;
+  --gse-semantic-borderRadius-focus-xsmall: 2px;
+  --gse-semantic-fontFamily-headings: Urbanist; /* The font family we use for headings and subheadings in this theme. */
+  --gse-semantic-opacity-disabled: 0.5; /* The opacity we apply when a component is disabled. */
+  --gse-semantic-background-container-primary-10: #ffffff;
+  --gse-semantic-background-container-primary-20: #fbfcfe;
+  --gse-semantic-background-container-primary-30: #f3f5fb;
+  --gse-semantic-background-container-primary-40: #eff0fe;
+  --gse-semantic-background-container-primary-50: #dee1fd;
+  --gse-semantic-background-container-primary-60: #ced2fc;
+  --gse-semantic-background-container-secondary-10: #4856cb;
+  --gse-semantic-background-container-secondary-20: #3742a2;
+  --gse-semantic-background-container-secondary-30: #252e78;
+  --gse-semantic-background-container-tertiary-10: rgba(0, 0, 0, 0);
+  --gse-semantic-background-container-tertiary-20: #c6c8ce;
+  --gse-semantic-background-container-highContrast-10: #1b2c48;
+  --gse-semantic-background-container-highContrast-20: #1c2463;
+  --gse-semantic-background-container-highContrast-30: #141a4f;
+  --gse-semantic-background-container-highContrast-40: #000000;
+  --gse-semantic-background-container-page-default: #ffffff; /* The default background color for a page. */
+  --gse-semantic-background-container-page-tonalSubtle: #fbfcfe; /* A more subtle background color for a page, ideal for highlight surfaces that are over the background, for example, a dashboard with different panels. */
+  --gse-semantic-background-container-page-tonalMedium: #f3f5fb; /* The background color to highlight elements in the background, for example, the row of a table. */
+  --gse-semantic-background-container-elevated-default: #ffffff; /* The background color for the default state of an elevated surface like modals, popovers, cards, etc. */
+  --gse-semantic-background-container-elevated-hover: #eff0fe; /* The background color for the hover state of an elevated surface like modals, popovers, cards, etc. */
+  --gse-semantic-background-container-elevated-active: #ced2fc; /* The background color for the active state of an elevated surface like modals, popovers, cards, etc. */
+  --gse-semantic-background-container-highConstrast-default: #1b2c48; /* The background color for the default state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
+  --gse-semantic-background-container-highConstrast-hover: #141a4f; /* The background color for the hover state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
+  --gse-semantic-background-container-highConstrast-active: #1c2463; /* The background color for the active state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards. */
+  --gse-semantic-background-formControl-input-10: #ffffff;
+  --gse-semantic-background-formControl-input-20: #c6c8ce;
+  --gse-semantic-background-formControl-clickInput-track: #c6c8ce; /* The color used for the tracks of click-based components,like the container of the toggle or the track of the slider. */
+  --gse-semantic-background-formControl-textInput-track: #ffffff; /* The default background color for inputs. */
+  --gse-semantic-background-overlay-10: rgb(24.3% 32.5% 45.5% / 0.8);
+  --gse-semantic-background-overlay-shroud-default: rgb(24.3% 32.5% 45.5% / 0.8); /* The default color for modals overlays. */
+  --gse-semantic-background-system-primary: #dee1fd; /* The default background color for neutral feedback elements like alerts. */
+  --gse-semantic-background-system-info: #e2dff8; /* The default background color for info elements like alerts. */
+  --gse-semantic-background-system-success: #cef0e6; /* The default background color for success elements like alerts. */
+  --gse-semantic-background-system-warning: #fef4d8; /* The default background color for warning elements like alerts. */
+  --gse-semantic-background-system-error: #f9d3da; /* The default background color for error elements like alerts. */
+  --gse-semantic-background-system-customAccents-bold-accent_1: #3e5374; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_2: #626e84; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_3: #3ac49a; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_4: #0c6d7e; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_5: #607732; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_6: #5798d9; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_7: #ac75ff; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_8: #89387b; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_9: #ff5c77; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_10: #c44b3b; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-bold-accent_11: #ffc650; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_1: #c6c8ce; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_2: #d1d7ef; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_3: #9de1cd; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_4: #90d3dd; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_5: #c6dd98; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_6: #9ac1e8; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_7: #cdacff; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_8: #ef9ee1; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_9: #ff9dad; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-customAccents-subtle-accent_10: #feb2ab;
+  --gse-semantic-background-system-customAccents-subtle-accent_11: #ffdd96; /* A custom accent used mostly for tags. */
+  --gse-semantic-background-system-progressAndLoading-default: #dee1fd; /* The color to indicate that this progress has not been achieved. */
+  --gse-semantic-background-system-progressAndLoading-progressed: #4856cb; /* The color to indicate that this progress in a component. */
+  --gse-semantic-background-customAccents-bold-10: #3e5374;
+  --gse-semantic-background-customAccents-bold-20: #626e84;
+  --gse-semantic-background-customAccents-bold-30: #3ac49a;
+  --gse-semantic-background-customAccents-bold-40: #0c6d7e;
+  --gse-semantic-background-customAccents-bold-50: #607732;
+  --gse-semantic-background-customAccents-bold-60: #5798d9;
+  --gse-semantic-background-customAccents-bold-70: #ac75ff;
+  --gse-semantic-background-customAccents-bold-80: #89387b;
+  --gse-semantic-background-customAccents-bold-90: #ff5c77;
+  --gse-semantic-background-customAccents-bold-100: #c44b3b;
+  --gse-semantic-background-customAccents-bold-110: #ffc650;
+  --gse-semantic-background-customAccents-subtle-10: #c6c8ce;
+  --gse-semantic-background-customAccents-subtle-20: #d1d7ef;
+  --gse-semantic-background-customAccents-subtle-30: #9de1cd;
+  --gse-semantic-background-customAccents-subtle-40: #90d3dd;
+  --gse-semantic-background-customAccents-subtle-50: #c6dd98;
+  --gse-semantic-background-customAccents-subtle-60: #9ac1e8;
+  --gse-semantic-background-customAccents-subtle-70: #cdacff;
+  --gse-semantic-background-customAccents-subtle-80: #ef9ee1;
+  --gse-semantic-background-customAccents-subtle-90: #ff9dad;
+  --gse-semantic-background-customAccents-subtle-100: #feb2ab;
+  --gse-semantic-background-customAccents-subtle-110: #ffdd96;
+  --gse-semantic-background-interactive-primary-default: #4856cb; /* The background color of primary actions in the default state. */
+  --gse-semantic-background-interactive-primary-hover: #3742a2; /* The background color of primary actions in the hover state. */
+  --gse-semantic-background-interactive-primary-active: #252e78; /* The background color of primary actions in the active state. */
+  --gse-semantic-background-interactive-secondary-default: #eff0fe; /* The background color of secondary actions in the default state. */
+  --gse-semantic-background-interactive-secondary-hover: #dee1fd; /* The background color of secondary actions in the hover state. */
+  --gse-semantic-background-interactive-secondary-active: #ced2fc; /* The background color of secondary actions in the active state. */
+  --gse-semantic-background-interactive-tertiary-default: rgba(0, 0, 0, 0); /* The background color of tertiary actions in the default state. */
+  --gse-semantic-background-interactive-tertiary-hover: #3742a2; /* The background color of tertiary actions in the hover state. */
+  --gse-semantic-background-interactive-tertiary-active: #252e78; /* The background color of tertiary actions in the active state. */
+  --gse-semantic-background-interactive-ghost-default: rgba(0, 0, 0, 0); /* The background color of dismissal actions in the default state. */
+  --gse-semantic-background-interactive-ghost-hover: #dee1fd; /* The background color of dismissal actions in the hover state. */
+  --gse-semantic-background-interactive-ghost-active: #ced2fc; /* The background color of dismissal actions in the active state. */
+  --gse-semantic-background-interactive-subtle-default: #ffffff; /* The background color of subtle dismissal actions, like close buttons on modals; in the default state. */
+  --gse-semantic-background-interactive-subtle-hover: #dee1fd; /* The background color of subtle dismissal actions, like close buttons on modals; in the hover state. */
+  --gse-semantic-background-interactive-subtle-active: #ced2fc; /* The background color of subtle dismissal actions, like close buttons on modals; in the active state. */
+  --gse-semantic-background-interactive-danger-default: #e22245; /* The background color of danger actions in the default state. */
+  --gse-semantic-background-interactive-danger-hover: #881429; /* The background color of danger actions in the hover state. */
+  --gse-semantic-background-interactive-danger-active: #440a15; /* The background color of danger actions in the active state. */
+  --gse-semantic-foreground-primary-10: #3e5374;
+  --gse-semantic-foreground-primary-20: #23395d;
+  --gse-semantic-foreground-primary-30: #1b2c48;
+  --gse-semantic-foreground-secondary-10: #ffffff;
+  --gse-semantic-foreground-secondary-20: #767c8d;
+  --gse-semantic-foreground-secondary-30: #626e84;
+  --gse-semantic-foreground-tertiary-10: #4856cb;
+  --gse-semantic-foreground-tertiary-20: #3742a2;
+  --gse-semantic-foreground-tertiary-30: #252e78;
+  --gse-semantic-foreground-highContrast-10: #ffffff;
+  --gse-semantic-foreground-highContrast-20: #e8ebf7;
+  --gse-semantic-foreground-highContrast-30: #c6ceec;
+  --gse-semantic-foreground-system-primary-10: #5a6af5;
+  --gse-semantic-foreground-system-info-10: #6e5ddb;
+  --gse-semantic-foreground-system-info-highEmphasis: #1b2c48; /* The default color for high emphasis content on info backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-info-accent: #6e5ddb; /* The color for content on info backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-success-10: #09b581;
+  --gse-semantic-foreground-system-success-highEmphasis: #1b2c48; /* The default color for high emphasis content on success backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-success-accent: #09b581; /* The color for content on success backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-warning-10: #f8c73e;
+  --gse-semantic-foreground-system-warning-highEmphasis: #1b2c48; /* The default color for high emphasis content on warning backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-warning-accent: #f8c73e; /* The color for content on warning backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-error-10: #e22245;
+  --gse-semantic-foreground-system-error-highEmphasis: #1b2c48; /* The default color for high emphasis content on error backgrounds, like headings, subheadings, quotes or bold text or links. */
+  --gse-semantic-foreground-system-error-accent: #e22245; /* The color for content on error backgrounds that we want to highlight, like the info icon on an alert. */
+  --gse-semantic-foreground-system-customAccents-light: #ffffff; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the dark color. */
+  --gse-semantic-foreground-system-customAccents-dark: #1b2c48; /* The recommended color for contetn that is on a custom accent background that doesn't pass the contrast check with the light color. */
+  --gse-semantic-foreground-system-progressAndLoading-default: #23395d; /* The color for foreground content on progress_and_loading/default backgrounds. */
+  --gse-semantic-foreground-system-progressAndLoading-progressed: #ffffff; /* The color for foreground content on progress_and_loading/progressed backgrounds. */
+  --gse-semantic-foreground-system-icon-default: #3e5374; /* The color for foreground content on progress_and_loading/default backgrounds. */
+  --gse-semantic-foreground-specialAccents-brand-10: #ff4f1f;
+  --gse-semantic-foreground-specialAccents-ai-10: #8a5ecc;
+  --gse-semantic-foreground-link-10: #4856cb;
+  --gse-semantic-foreground-link-20: #3742a2;
+  --gse-semantic-foreground-link-30: #252e78;
+  --gse-semantic-foreground-link-40: #8a5ecc;
+  --gse-semantic-foreground-icon-10: #3e5374;
+  --gse-semantic-foreground-formControl-clickInput-10: #4856cb;
+  --gse-semantic-foreground-formControl-clickInput-20: #3742a2;
+  --gse-semantic-foreground-formControl-clickInput-30: #252e78;
+  --gse-semantic-foreground-formControl-clickInput-50: #767c8d;
+  --gse-semantic-foreground-formControl-clickInput-enabled: #767c8d; /* The color we use for foreground elements on click-based inputs when they are enabled but not selected. */
+  --gse-semantic-foreground-formControl-clickInput-selected: #4856cb; /* The color we use for foreground elements on click-based inputs when they are selected. */
+  --gse-semantic-foreground-formControl-clickInput-hover: #3742a2; /* The color we use for foreground elements on click-based inputs when they are on the hover state. */
+  --gse-semantic-foreground-formControl-clickInput-active: #252e78; /* The color we use for foreground elements on click-based inputs when they are on the active state. */
+  --gse-semantic-foreground-formControl-clickInput-error: #e22245;
+  --gse-semantic-foreground-formControl-helpText-default: #626e84; /* The color we used for the default helper text. */
+  --gse-semantic-foreground-formControl-helpText-error: #e22245; /* The color we used for the error helper text. */
+  --gse-semantic-foreground-formControl-textInput-placeholder: #626e84; /* The default color of placeholder content on an input. */
+  --gse-semantic-foreground-formControl-textInput-populated: #1b2c48; /* The default color of populated content on an input. */
+  --gse-semantic-foreground-formControl-textInput-icon: #626e84; /* The default color of icons on an input. */
+  --gse-semantic-foreground-formControl-label-default: #1b2c48; /* The color for the content of input labels. */
+  --gse-semantic-foreground-formControl-label-requiredAccent: #e22245; /* The color we used for the required indicator. */
+  --gse-semantic-foreground-formControl-label-optionalAccent: #3e5374; /* The color we used for the optional indicator. */
+  --gse-semantic-foreground-interactive-primary-default: #ffffff; /* The color for foreground elements that are over a primary/default background. */
+  --gse-semantic-foreground-interactive-primary-active: #ffffff; /* The color for foreground elements that are over a primary/hover background. */
+  --gse-semantic-foreground-interactive-primary-hover: #ffffff; /* The color for foreground elements that are over a primary/active background. */
+  --gse-semantic-foreground-interactive-secondary-default: #4856cb; /* The color for foreground elements that are over a secondary/default background. */
+  --gse-semantic-foreground-interactive-secondary-active: #252e78; /* The color for foreground elements that are over a secondary/active background. */
+  --gse-semantic-foreground-interactive-secondary-hover: #3742a2; /* The color for foreground elements that are over a secondary/hover background. */
+  --gse-semantic-foreground-interactive-tertiary-default: #4856cb; /* The color for foreground elements that are over a tertiary/default background. */
+  --gse-semantic-foreground-interactive-tertiary-active: #ffffff; /* The color for foreground elements that are over a tertiary/active background. */
+  --gse-semantic-foreground-interactive-tertiary-hover: #ffffff; /* The color for foreground elements that are over a tertiary/hover background. */
+  --gse-semantic-foreground-interactive-ghost-default: #4856cb; /* The color for foreground elements that are over a ghost/default background. */
+  --gse-semantic-foreground-interactive-ghost-active: #252e78; /* The color for foreground elements that are over a ghost/active background. */
+  --gse-semantic-foreground-interactive-ghost-hover: #3742a2; /* The color for foreground elements that are over a ghost/hover background. */
+  --gse-semantic-foreground-interactive-subtle-default: #3e5374; /* The color for foreground elements that are over a subtle/default background. */
+  --gse-semantic-foreground-interactive-subtle-active: #1b2c48; /* The color for foreground elements that are over a subtle/active background. */
+  --gse-semantic-foreground-interactive-subtle-hover: #23395d; /* The color for foreground elements that are over a subtle/hover background. */
+  --gse-semantic-foreground-interactive-danger-default: #ffffff; /* The color for foreground elements that are over a danger/default background. */
+  --gse-semantic-foreground-interactive-danger-active: #ffffff; /* The color for foreground elements that are over a danger/active background. */
+  --gse-semantic-foreground-interactive-danger-hover: #ffffff; /* The color for foreground elements that are over a danger/hover background. */
+  --gse-semantic-foreground-interactive-link-default: #4856cb; /* The default color of links. */
+  --gse-semantic-foreground-interactive-link-active: #252e78; /* The active color of links. */
+  --gse-semantic-foreground-interactive-link-hover: #3742a2; /* The hover color of links. */
+  --gse-semantic-foreground-interactive-link-visited: #8a5ecc; /* The  color of links when  they were already visited. */
+  --gse-semantic-foreground-container-highEmphasis: #1b2c48; /* The default color for high emphasis content on surfaces, like headings, subheadings, quotes or bold text. */
+  --gse-semantic-foreground-container-midEmphasis: #3e5374; /* The default color for medium emphasis content on surfaces, like normal paragraphs. */
+  --gse-semantic-foreground-container-lowEmphasis: #626e84; /* The default color for low emphasis content on surfaces, like captions or fine print. */
+  --gse-semantic-foreground-container-highContrast-highEmphasis: #ffffff; /* The default color for high emphasis content on high contrast surfaces, like headings, subheadings, quotes or bold text. */
+  --gse-semantic-foreground-container-highContrast-midEmphasis: #e8ebf7; /* The default color for medium emphasis content on high contrast surfaces, like normal paragraphs. */
+  --gse-semantic-foreground-container-highContrast-lowEmphasis: #c6ceec; /* The default color for low emphasis content on high contrast surfaces, like captions or fine print. */
+  --gse-semantic-foreground-container-specialAccents-ai: #8a5ecc; /* The color for foreground content used to highlight an AI feature on a surface. */
+  --gse-semantic-foreground-container-specialAccents-brand: #ff4f1f; /* The brand color, mostly used for logos on surfaces. */
+  --gse-semantic-border-focus: #7b88f7; /* The color we use for focus outlines. */
+  --gse-semantic-border-divider-10: #ffffff;
+  --gse-semantic-border-divider-20: #c6c8ce;
+  --gse-semantic-border-divider-30: #4856cb;
+  --gse-semantic-border-edges-default-10: #c6c8ce;
+  --gse-semantic-border-edges-default-20: #3e5374;
+  --gse-semantic-border-edges-default-30: #1b2c48;
+  --gse-semantic-border-edges-enabled-10: #4856cb;
+  --gse-semantic-border-edges-hover-10: #7b88f7;
+  --gse-semantic-border-edges-hover-20: #252e78;
+  --gse-semantic-border-edges-active-10: #4856cb;
+  --gse-semantic-border-system-primary: #9ca6f9; /* The default borders for elements that have a feedback/primary background. */
+  --gse-semantic-border-system-info: #c5bef1; /* The default borders for elements that have a feedback/info background. */
+  --gse-semantic-border-system-success: #cef0e6; /* The default borders for elements that have a feedback/success background. */
+  --gse-semantic-border-system-warning: #fce9b2; /* The default borders for elements that have a feedback/warning background. */
+  --gse-semantic-border-system-error: #f3a7b5; /* The default borders for elements that have a feedback/error background. */
+  --gse-semantic-border-inputs-default-10: #a3a7b0;
+  --gse-semantic-border-inputs-hover-10: #3742a2;
+  --gse-semantic-border-inputs-active-10: #252e78;
+  --gse-semantic-border-container-divider: #c6c8ce; /* The default color for dividers inside surfaces. */
+  --gse-semantic-border-container-edges-default: #c6c8ce; /* The default color for the edge borders of surfaces, we mostly use it to add some elevation for cards. */
+  --gse-semantic-border-container-edges-hover: #7b88f7; /* The color for the edge borders of surfaces that are on the hover state, like the bottom border of a tab. */
+  --gse-semantic-border-container-edges-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled, like the bottom border of a selected tab. */
+  --gse-semantic-border-container-edges-active: #4856cb; /* The color for the edge borders of surfaces that are on the active state, like the bottom border of a tab. */
+  --gse-semantic-border-container-edges-highEmphasis: #1b2c48; /* The default color for the edge borders of high-emphasis surfaces e.g dark tooltip */
+  --gse-semantic-border-container-highConstrast-default: #3e5374; /* The default color for the edge borders of high contrast surfaces. */
+  --gse-semantic-border-container-highConstrast-enabled: #4856cb; /* The color for the edge borders of high contrast surfaces that are enabled. */
+  --gse-semantic-border-container-highConstrast-hover: #252e78; /* The color for the edge borders of high contrast surfaces that are on the hover state. */
+  --gse-semantic-border-container-highConstrast-active: #4856cb; /* The color for the edge borders of high contrast surfaces that are on the active state. */
+  --gse-semantic-border-interactive-primary-divider: #ffffff; /* The color for dividers inside interactive/primary  elements. */
+  --gse-semantic-border-interactive-secondary-divider: #ffffff; /* The color for dividers inside interactive/secondary elements. */
+  --gse-semantic-border-interactive-tertiary-divider: #4856cb; /* The color for dividers inside interactive/tertiary elements. */
+  --gse-semantic-border-interactive-danger-divider: #ffffff; /* The color for dividers inside interactive/danger elements. */
+  --gse-semantic-border-formControl-textInput-default: #a3a7b0; /* The border for inputs edges in the default state. */
+  --gse-semantic-border-formControl-textInput-hover: #3742a2; /* The border for inputs edges in the hover state. */
+  --gse-semantic-border-formControl-textInput-active: #252e78; /* The border for inputs edges in the active state. */
+  --gse-semantic-border-formControl-textInput-error: #e22245; /* The border for inputs edges in the error state. */
+  --gse-semantic-body-sm-regular: 400 12px/16px "Noto Sans"; /* This is the typography style we use in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or low emphasis colors. */
+  --gse-semantic-body-sm-link: 600 12px/18px "Noto Sans"; /* This is the typography style we use for hyperlinks in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with link colors. */
+  --gse-semantic-body-sm-bold: 700 12px/18px "Noto Sans"; /* This is the typography style we use to add great emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with high emphasis colors. */
+  --gse-semantic-body-sm-semiBold: 600 12px/18px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in small bodies of text, like caption, disclaimers, or small prints; we usually pair it with medium or high emphasis colors. */
+  --gse-semantic-body-md-regular: 400 14px/20px "Noto Sans"; /* This is the typography style we use in most of our bodies of text like paragraphs; we usually pair it with medium emphasis colors. */
+  --gse-semantic-body-md-link: 600 14px/20px "Noto Sans"; /* This is the typography style we use for hyperlinks in bodies of text, like paragraphs; we usually pair it with link colors. */
+  --gse-semantic-body-md-bold: 700 14px/20px "Noto Sans"; /* This is the typography style we use to add great emphasis in bodies of text, like paragraphs; we usually pair it with high emphasis colors. */
+  --gse-semantic-body-md-semiBold: 600 14px/20px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in bodies of text, like paragraphs, we usually pair it with medium or high emphasis colors. */
+  --gse-semantic-body-lg-regular: 400 16px/24px "Noto Sans"; /* This is the typography style we use in most of our high emphasis bodies of text like introductory paragraphs after a heading; we usually pair it with medium emphasis colors. */
+  --gse-semantic-body-lg-link: 600 16px/24px "Noto Sans"; /* This is the typography style we use for hyperlinks in bodies of text, like introductory paragraphs after a heading; we usually pair it with link colors. */
+  --gse-semantic-body-lg-bold: 700 16px/24px "Noto Sans"; /* This is the typography style we use to add great emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with high emphasis colors. */
+  --gse-semantic-body-lg-semiBold: 600 16px/24px "Noto Sans"; /* This is the typography style we use to add moderate emphasis in bodies of text, like introductory paragraphs after a heading; we usually pair it with medium or high emphasis colors. */
+  /**
+   * We use this typography style for high emphasis headers nested on a 5th-6th level, h5's or h6's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xs-bold: 700 14px/24px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers nested on a 5th-6th level, h5's or h6's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xs-semiBold: 600 14px/24px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers nested on a 4th level, h4's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-sm-bold: 700 16px/24px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers nested on a 4th level, h4's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-sm-semiBold: 600 16px/24px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers nested on a 3rd level, h3's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-md-bold: 700 18px/27px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers nested on a 3rd level, h3's.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-md-semiBold: 600 18px/27px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-lg-bold: 700 24px/32px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers that are usually the main header of a page at a 1st-2nd level, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-lg-semiBold: 600 24px/32px Urbanist;
+  /**
+   * We use this typography style for high emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xl-bold: 700 36px/44px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis headers that are usually display headers, like the main header of a landing page, at 1st-2nd levels, h1's or h2's, since you can have a smaller or hidden h1 for SEO reasons.
+   * We usually pair it with high emphasis colors.We usually pair it with high emphasis colors.
+   */
+  --gse-semantic-heading-xl-semiBold: 600 36px/44px Urbanist;
+  /**
+   * We use this typography style for header's eyebrows, meaning a little text that go just above the header that can give more context on the header below.Eyebrows a re meant to be concise and not full sentences, if you need to give more context try using an subheading.
+   * 
+   * We usually pair it with low emphasis colors.
+   */
+  --gse-semantic-heading-overline: 600 12px/16px Urbanist;
+  /**
+   * We use this typography style for high emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
+   * We usually pair it with medium emphasis colors.
+   */
+  --gse-semantic-subheading-bold: 700 14px/20px Urbanist;
+  /**
+   * We use this typography style for moderate emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
+   * We usually pair it with medium emphasis colors.
+   */
+  --gse-semantic-subheading-semiBold: 600 14px/20px Urbanist;
+  /**
+   * We use this typography style for low emphasis subheadings that go immediately below a heading, they usually there to give further context to the actual header.
+   * We usually pair it with medium emphasis colors.
+   */
+  --gse-semantic-subheading-regular: 400 14px/20px Urbanist;
+  --gse-semantic-interactive-medium-size: 32px; /* The recommended size of medium-sized interactive components, for example buttons height. */
+  --gse-semantic-interactive-medium-gap: 4px; /* The recommended gap between the content inside of a medium-sized interactive component. */
+  --gse-semantic-interactive-medium-padding-horizontal: 8px; /* The recommended horizontal padding for medium-sized components. */
+  --gse-semantic-interactive-small-size: 24px; /* The recommended size for small-sized interactive components. For example small button height. */
+  --gse-semantic-interactive-small-gap: 2px; /* The recommended gap between the content inside of a small-sized interactive component. */
+  --gse-semantic-interactive-small-padding-horizontal: 4px; /* The recommended horizontal padding for small-sized horizontal components. */
+  --gse-semantic-interactive-small-borderRadius: 4px; /* The recommended small border-radius for interactive component. Eg Buttons */
+  --gse-semantic-interactive-large-borderRadius: 16px; /* The recommended large border-radius for interactive component. Eg Tags */
+  --gse-semantic-interactive-large-gap: 8px; /* The recommended gap between the content inside of a medium-sized interactive component. */
+  --gse-semantic-interactive-large-padding-horizontal: 12px; /* The recommended horizontal padding for large-sized components. */
+  --gse-semantic-interactive-edges-borderWidth: 1px; /* The default border width for the edges of interactive components, like the ones on a tertiary(or outlined) button. */
+  --gse-semantic-interactive-divider-small-borderWidth: 1px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
+  --gse-semantic-interactive-divider-large-borderWidth: 2px; /* The default border width for the dividers within interactive components, like the ones on an action button. */
+  --gse-semantic-interactive-xlarge-gap: 12px; /* The recommended gap between the content inside of a xlarge-sized interactive component. */
+  --gse-semantic-interactive-xlarge-padding-horizontal: 16px; /* The recommended horizontal padding for xlarge-sized components. */
+  --gse-semantic-focusOutline-full-borderRadius: 100%; /* The recommended full border-radius for focus. Eg avatar */
+  --gse-semantic-focusOutline-xlarge-borderRadius: 16px; /* The recommended xlarge border-radius for focus. Eg toggle */
+  --gse-semantic-focusOutline-large-borderRadius: 8px; /* The recommended large border-radius for focus. Eg segmented control */
+  --gse-semantic-focusOutline-medium-borderRadius: 8px; /* The recommended medium border-radius for focus. Eg check box */
+  --gse-semantic-focusOutline-small-borderRadius: 4px; /* The recommended small border-radius for focus. Eg input control */
+  --gse-semantic-focusOutline-small-borderWidth: 1px; /* The recommended width of the focus outline fo small-sized components, like the stars on a rating component. */
+  --gse-semantic-focusOutline-xsmall-borderRadius: 2px; /* The recommended xsmall border-radius for focus. Eg icons */
+  --gse-semantic-container-large-borderRadius: 16px; /* The recommended large border-radius for large containers, like modals. */
+  --gse-semantic-container-large-padding: 32px; /* We uses this spacing as the default padding for large containers like modals. */
+  --gse-semantic-container-large-gap: 16px; /* The recommended gap between items inside a large container, like a modal. */
+  --gse-semantic-container-small-borderRadius: 4px; /* The recommended small border-radius for containers. Eg in-line alert */
+  --gse-semantic-container-small-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
+  --gse-semantic-container-small-horizontalPadding: 12px; /* The default padding of a small-sized container, like a tooltip. */
+  --gse-semantic-container-small-verticalPadding: 8px; /* The default vertical padding of a small-sized container, like a tooltip. */
+  --gse-semantic-container-small-minHeight: 20px; /* The minimum height recommended for a small container, like a tag. */
+  --gse-semantic-container-small-height: 32px; /* The average recommended height for a small container, like a tag. */
+  --gse-semantic-container-medium-borderRadius: 8px; /* The recommended medium border-radius for containers. Eg cards */
+  --gse-semantic-container-medium-horizontalPadding: 24px; /* The default horizontal padding of a medium-sized container, like a card. */
+  --gse-semantic-container-medium-verticalPadding: 24px; /* The default vertical padding of a medium-sized container, like a tooltip. */
+  --gse-semantic-container-medium-minHeight: 32px; /* The minimmum recommended height for a medium container, like a tag. */
+  --gse-semantic-container-edges-borderWidth: 1px; /* The recommended border width for the edges of containers, like cards or menus or popovers. */
+  --gse-semantic-container-divider-borderWidth: 1px; /* The recommended border width for the dividers within containers, like cards or menus or popovers. */
+  --gse-semantic-container-xsmall-gap: 8px; /* The recommended gap between items inside a container, like the gap between elements inisde a card. */
+  --gse-semantic-container-xsmall-horizontalPadding: 8px; /* The default padding of a  extra small-sized container, like the container of an eyebrow title. */
+  --gse-semantic-container-xsmall-verticalPadding: 4px; /* The default padding of a  extra small-sized container, like the container of an eyebrow title. */
+  --gse-semantic-formControl-textInput-large-borderRadius: 8px; /* The recommended large border-radius for inputs */
+  --gse-semantic-formControl-textInput-small-borderRadius: 2px; /* The recommended small border-radius for inputs */
+  --gse-semantic-formControl-textInput-medium-borderRadius: 4px; /* The recommended medium border-radius for inputs */
+  --gse-semantic-formControl-textInput-padding: 8px 12px; /* The default padding for inputs inside a form control. */
+  --gse-semantic-formControl-textInput-gap: 12px; /* The default gap for between elements inside an input. For example, the space between a placeholder and an icon inside and input. */
+  --gse-semantic-formControl-textInput-edges-borderWidth: 1px; /* The recommended border width for the edges of text-based inputs, like textfields or text areas. */
+  --gse-semantic-formControl-textInput-divider-borderWidth: 1px; /* The recommended border width for the dividers within text-based inputs, like the textfields or textareas. */
+  --gse-semantic-formControl-formField-gap: 4px; /* The default gap for between elements inside a form field, like textfields, text areas. */
+  --gse-semantic-contanier-large-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15); /* The recommended box shadow for large containers, like modals or popovers. */
+  --gse-semantic-contanier-medium-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12); /* The shadow we used for medium-sized components like elevated cards. */
+  --gse-semantic-contanier-small-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1); /* The shadow we used for small-sized components like tooltips. */
+  --gse-semantic-assets-large-size: 32px; /* The recommended size of large-sized for styles, for example icons. */
+  --gse-semantic-assets-medium-size: 24px; /* The recommended size of medium-sized for styles, for example medium icons. */
+  --gse-semantic-assets-small-size: 16px; /* The recommended size of small-sized for styles, for example small icons. */
+  --gse-semantic-divider-width: 1px; /* The default width of our divider, we usually represent dividers as rectangles on Figma instead of a single line layer. */
+  --gse-semantic-divider-xs-margin: 1px;
+  --gse-semantic-divider-sm-margin: 2px;
+  --gse-semantic-divider-md-margin: 4px;
+  --gse-semantic-divider-lg-margin: 8px;
+}
+
+/*# sourceMappingURL=global.css.map */