/**
 * Do not edit directly, this file was auto-generated.
 */

:root.gl-dark, .gl-dark-scope {
  --gl-border-radius-full: 9999px;
  --gl-color-alpha-0: transparent;
  --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
  --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
  --gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
  --gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
  --gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
  --gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
  --gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
  --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
  --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
  --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
  --gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
  --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
  --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
  --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
  --gl-color-blue-50: #e9f3fc;
  --gl-color-blue-100: #cbe2f9;
  --gl-color-blue-200: #9dc7f1;
  --gl-color-blue-300: #63a6e9;
  --gl-color-blue-400: #428fdc;
  --gl-color-blue-500: #1f75cb;
  --gl-color-blue-600: #2f68b4;
  --gl-color-blue-700: #2f5ca0;
  --gl-color-blue-800: #284779;
  --gl-color-blue-900: #213454;
  --gl-color-blue-950: #1d283e;
  --gl-color-neutral-0: #fff;
  --gl-color-neutral-10: #fbfafd;
  --gl-color-neutral-50: #ececef;
  --gl-color-neutral-100: #dcdcde;
  --gl-color-neutral-200: #bfbfc3;
  --gl-color-neutral-300: #a4a3a8;
  --gl-color-neutral-400: #89888d;
  --gl-color-neutral-500: #737278;
  --gl-color-neutral-600: #626168;
  --gl-color-neutral-700: #4c4b51;
  --gl-color-neutral-800: #3a383f;
  --gl-color-neutral-900: #28272d;
  --gl-color-neutral-950: #18171d;
  --gl-color-neutral-1000: #050506;
  --gl-color-green-50: #ecf4ee;
  --gl-color-green-100: #c3e6cd;
  --gl-color-green-200: #91d4a8;
  --gl-color-green-300: #52b87a;
  --gl-color-green-400: #2da160;
  --gl-color-green-500: #108548;
  --gl-color-green-600: #2f7549;
  --gl-color-green-700: #306440;
  --gl-color-green-800: #225131;
  --gl-color-green-900: #1e3e28;
  --gl-color-green-950: #17291c;
  --gl-color-orange-50: #fdf1dd;
  --gl-color-orange-100: #f5d9a8;
  --gl-color-orange-200: #e9be74;
  --gl-color-orange-300: #d99530;
  --gl-color-orange-400: #c17d10;
  --gl-color-orange-500: #ab6100;
  --gl-color-orange-600: #995715;
  --gl-color-orange-700: #894b16;
  --gl-color-orange-800: #693c14;
  --gl-color-orange-900: #532e16;
  --gl-color-orange-950: #382315;
  --gl-color-purple-50: #f4f0ff;
  --gl-color-purple-100: #e1d8f9;
  --gl-color-purple-200: #cbbbf2;
  --gl-color-purple-300: #ac93e6;
  --gl-color-purple-400: #9475db;
  --gl-color-purple-500: #7b58cf;
  --gl-color-purple-600: #6a4fb4;
  --gl-color-purple-700: #5c47a6;
  --gl-color-purple-800: #493c83;
  --gl-color-purple-900: #342d59;
  --gl-color-purple-950: #27243e;
  --gl-color-red-50: #fcf1ef;
  --gl-color-red-100: #fdd4cd;
  --gl-color-red-200: #fcb5aa;
  --gl-color-red-300: #f6806d;
  --gl-color-red-400: #ec5941;
  --gl-color-red-500: #dd2b0e;
  --gl-color-red-600: #c02f12;
  --gl-color-red-700: #a32c12;
  --gl-color-red-800: #812713;
  --gl-color-red-900: #582014;
  --gl-color-red-950: #3e1a14;
  --gl-color-data-green-50: #ddfab7;
  --gl-color-data-green-100: #c6ed94;
  --gl-color-data-green-200: #b0d97b;
  --gl-color-data-green-300: #94c25e;
  --gl-color-data-green-400: #81ac41;
  --gl-color-data-green-500: #619025;
  --gl-color-data-green-600: #4e7f0e;
  --gl-color-data-green-700: #366800;
  --gl-color-data-green-800: #275600;
  --gl-color-data-green-900: #1a4500;
  --gl-color-data-green-950: #133a03;
  --gl-color-data-aqua-50: #b5fefd;
  --gl-color-data-aqua-100: #93f2ef;
  --gl-color-data-aqua-200: #5edee3;
  --gl-color-data-aqua-300: #32c5d2;
  --gl-color-data-aqua-400: #00acc4;
  --gl-color-data-aqua-500: #0090b1;
  --gl-color-data-aqua-600: #007b9b;
  --gl-color-data-aqua-700: #006381;
  --gl-color-data-aqua-800: #00516c;
  --gl-color-data-aqua-900: #004059;
  --gl-color-data-aqua-950: #00344b;
  --gl-color-data-blue-50: #e9ebff;
  --gl-color-data-blue-100: #d2dcff;
  --gl-color-data-blue-200: #b7c6ff;
  --gl-color-data-blue-300: #97acff;
  --gl-color-data-blue-400: #7992f5;
  --gl-color-data-blue-500: #617ae2;
  --gl-color-data-blue-600: #4e65cd;
  --gl-color-data-blue-700: #3f51ae;
  --gl-color-data-blue-800: #374291;
  --gl-color-data-blue-900: #303470;
  --gl-color-data-blue-950: #2a2b59;
  --gl-color-data-magenta-50: #ffe3eb;
  --gl-color-data-magenta-100: #ffccdb;
  --gl-color-data-magenta-200: #fcacc5;
  --gl-color-data-magenta-300: #f88aaf;
  --gl-color-data-magenta-400: #e86e9a;
  --gl-color-data-magenta-500: #cf4d81;
  --gl-color-data-magenta-600: #b93d71;
  --gl-color-data-magenta-700: #9a2e5d;
  --gl-color-data-magenta-800: #7c214f;
  --gl-color-data-magenta-900: #661e3a;
  --gl-color-data-magenta-950: #541d31;
  --gl-color-data-orange-50: #fae8d1;
  --gl-color-data-orange-100: #f5d6b3;
  --gl-color-data-orange-200: #eebd8c;
  --gl-color-data-orange-300: #e99b60;
  --gl-color-data-orange-400: #e07e41;
  --gl-color-data-orange-500: #c95d2e;
  --gl-color-data-orange-600: #b14f18;
  --gl-color-data-orange-700: #92430a;
  --gl-color-data-orange-800: #6f3500;
  --gl-color-data-orange-900: #5e2f05;
  --gl-color-data-orange-950: #4b2707;
  --gl-color-theme-indigo-10: #f8f8ff;
  --gl-color-theme-indigo-50: #f1f1ff;
  --gl-color-theme-indigo-100: #dbdbf8;
  --gl-color-theme-indigo-200: #c7c7f2;
  --gl-color-theme-indigo-300: #a2a2e6;
  --gl-color-theme-indigo-400: #8181d7;
  --gl-color-theme-indigo-500: #6666c4;
  --gl-color-theme-indigo-600: #5252b5;
  --gl-color-theme-indigo-700: #41419f;
  --gl-color-theme-indigo-800: #303083;
  --gl-color-theme-indigo-900: #222261;
  --gl-color-theme-indigo-950: #14143d;
  --gl-color-theme-blue-10: #e6ecf0;
  --gl-color-theme-blue-50: #cdd8e3;
  --gl-color-theme-blue-100: #b9cadc;
  --gl-color-theme-blue-200: #a6bdd5;
  --gl-color-theme-blue-300: #81a5c9;
  --gl-color-theme-blue-400: #628eb9;
  --gl-color-theme-blue-500: #4977a5;
  --gl-color-theme-blue-600: #346596;
  --gl-color-theme-blue-700: #235180;
  --gl-color-theme-blue-800: #153c63;
  --gl-color-theme-blue-900: #0b2640;
  --gl-color-theme-blue-950: #04101c;
  --gl-color-theme-light-blue-10: #eef3f7;
  --gl-color-theme-light-blue-50: #dde6ee;
  --gl-color-theme-light-blue-100: #c1d4e6;
  --gl-color-theme-light-blue-200: #a0bedc;
  --gl-color-theme-light-blue-300: #74a3d3;
  --gl-color-theme-light-blue-400: #4f8bc7;
  --gl-color-theme-light-blue-500: #3476b9;
  --gl-color-theme-light-blue-600: #2268ae;
  --gl-color-theme-light-blue-700: #145aa1;
  --gl-color-theme-light-blue-800: #0e4d8d;
  --gl-color-theme-light-blue-900: #0c4277;
  --gl-color-theme-light-blue-950: #0a3764;
  --gl-color-theme-green-10: #eef4ef;
  --gl-color-theme-green-50: #dde9de;
  --gl-color-theme-green-100: #b1d6b5;
  --gl-color-theme-green-200: #8cc497;
  --gl-color-theme-green-300: #69af7d;
  --gl-color-theme-green-400: #499767;
  --gl-color-theme-green-500: #308258;
  --gl-color-theme-green-600: #25744c;
  --gl-color-theme-green-700: #1b653f;
  --gl-color-theme-green-800: #155635;
  --gl-color-theme-green-900: #0e4328;
  --gl-color-theme-green-950: #052e19;
  --gl-color-theme-red-10: #faf4f3;
  --gl-color-theme-red-50: #f4e9e7;
  --gl-color-theme-red-100: #ecd3d0;
  --gl-color-theme-red-200: #e3bab5;
  --gl-color-theme-red-300: #d59086;
  --gl-color-theme-red-400: #c66e60;
  --gl-color-theme-red-500: #ad4a3b;
  --gl-color-theme-red-600: #a13322;
  --gl-color-theme-red-700: #8f2110;
  --gl-color-theme-red-800: #761405;
  --gl-color-theme-red-900: #580d02;
  --gl-color-theme-red-950: #380700;
  --gl-color-theme-light-red-10: #fdf9f8;
  --gl-color-theme-light-red-50: #faf2f1;
  --gl-color-theme-light-red-100: #f6d9d5;
  --gl-color-theme-light-red-200: #ebada2;
  --gl-color-theme-light-red-300: #e07f6f;
  --gl-color-theme-light-red-400: #d36250;
  --gl-color-theme-light-red-500: #c24b38;
  --gl-color-theme-light-red-600: #b53a26;
  --gl-color-theme-light-red-700: #a02e1c;
  --gl-color-theme-light-red-800: #8b2212;
  --gl-color-theme-light-red-900: #751709;
  --gl-color-theme-light-red-950: #5c1105;
  --gl-color-brand-white: #fff;
  --gl-color-brand-charcoal: #171321;
  --gl-color-brand-orange-01g: #ffd1bf;
  --gl-color-brand-orange-01p: #fca326;
  --gl-color-brand-orange-02p: #fc6d26;
  --gl-color-brand-orange-03p: #e24329;
  --gl-color-brand-purple-01g: #ceb3ef;
  --gl-color-brand-purple-01p: #a989f5;
  --gl-color-brand-purple-02p: #7759c2;
  --gl-color-brand-gray-01: #d1d0d3;
  --gl-color-brand-gray-02: #a2a1a6;
  --gl-color-brand-gray-03: #74717a;
  --gl-color-brand-gray-04: #45424d;
  --gl-color-brand-gray-05: #2b2838;
  --gl-color-brand-pink-01g: #ffb9c9;
  --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
  --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
  --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */
  --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
  --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */
  --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */
  --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */
  --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */
  --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */
  --gl-font-size-xs: 0.625rem;
  --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */
  --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */
  --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
  --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */
  --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */
  --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */
  --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */
  --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */
  --gl-font-weight-100: 100;
  --gl-font-weight-300: 300;
  --gl-font-weight-normal: 400;
  --gl-font-weight-semibold: 500;
  --gl-font-weight-bold: 600;
  --gl-heading-default-margin-top: 0;
  --gl-line-height-12: 0.75rem;
  --gl-line-height-16: 1rem;
  --gl-line-height-20: 1.25rem;
  --gl-line-height-24: 1.5rem;
  --gl-line-height-28: 1.75rem;
  --gl-line-height-32: 2rem;
  --gl-line-height-36: 2.25rem;
  --gl-line-height-42: 2.625rem;
  --gl-line-height-44: 2.75rem;
  --gl-line-height-52: 3.25rem;
  --gl-line-height-heading: 1.25;
  --gl-opacity-0: 0;
  --gl-opacity-1: .1;
  --gl-opacity-2: .2;
  --gl-opacity-3: .3;
  --gl-opacity-4: .4;
  --gl-opacity-5: .5;
  --gl-opacity-6: .6;
  --gl-opacity-7: .7;
  --gl-opacity-8: .8;
  --gl-opacity-9: .9;
  --gl-opacity-10: 1;
  --gl-spacing-scale-0: 0;
  --gl-spacing-scale-1: 0.125rem;
  --gl-spacing-scale-2: 0.25rem;
  --gl-spacing-scale-3: 0.5rem;
  --gl-spacing-scale-4: 0.75rem;
  --gl-spacing-scale-5: 1rem;
  --gl-spacing-scale-6: 1.5rem;
  --gl-spacing-scale-7: 2rem;
  --gl-spacing-scale-8: 2.5rem;
  --gl-spacing-scale-9: 3rem;
  --gl-spacing-scale-10: 3.5rem;
  --gl-spacing-scale-11: 4rem;
  --gl-spacing-scale-12: 5rem;
  --gl-spacing-scale-13: 6rem;
  --gl-spacing-scale-15: 7.5rem;
  --gl-spacing-scale-18: 9rem;
  --gl-spacing-scale-20: 10rem;
  --gl-spacing-scale-26: 13rem;
  --gl-spacing-scale-28: 14rem;
  --gl-spacing-scale-30: 15rem;
  --gl-spacing-scale-31: 15.5rem;
  --gl-spacing-scale-33: 16.5rem;
  --gl-spacing-scale-34: 17rem;
  --gl-spacing-scale-37: 18.5rem;
  --gl-spacing-scale-48: 24rem;
  --gl-spacing-scale-62: 31rem;
  --gl-spacing-scale-75: 37.5rem;
  --gl-spacing-scale-80: 40rem;
  --gl-spacing-scale-88: 44rem;
  --gl-spacing-scale-px: 1px;
  --gl-spacing-scale-2-5: 0.375rem;
  --gl-spacing-scale-11-5: 4.5rem;
  --gl-zindex-0: 0;
  --gl-zindex-1: 1;
  --gl-zindex-2: 2;
  --gl-zindex-3: 3;
  --gl-zindex-4: 4;
  --gl-zindex-200: 200;
  --gl-zindex-9999: 9999;
  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-background-color-green: #91d4a83d; /** Green background for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-background-color-orange: #e9be743d; /** Orange background for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /** Neutral background for avatar fallback with no particular meaning. */
  --gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /** Used for the background of an default primary button in the default state. */
  --gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /** Used for the background of an default primary button in the hover state. */
  --gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */
  --gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); /** Used for the background of an outlined confirm (positive) button in the default state. */
  --gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); /** Used for the background of an outlined confirm (positive) button in the hover state. */
  --gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); /** Used for the background of an outlined confirm (positive) button in the active state. */
  --gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); /** Used for the background of an outlined danger (destructive) button in the default state. */
  --gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); /** Used for the background of an outlined danger (destructive) button in the hover state. */
  --gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); /** Used for the background of an outlined danger (destructive) button in the active state. */
  --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /** Used for the background of a disabled button. */
  --gl-chart-threshold-area-color: rgba(221,43,14,0.1); /** Used in charts to delineate a threshold area in a chart. */
  --gl-illustration-stroke-color-default: #e3e3e8; /** Default stroke color to define shape and provide essential detail. */
  --gl-illustration-stroke-width-default: 1.5; /** Default stroke width to define shape and provide essential detail. */
  --gl-illustration-fill-color-default: #423f4f; /** Default fill color for an element where specific meaning or emphasis is not required. */
  --gl-illustration-status-fill-color-neutral: #6f6796; /** Used as a fill to convey a concept which is neither positive or negative. */
  --gl-illustration-status-fill-color-success: #3b8581; /** Used as a fill to convey a success or active concept, has a positive connotation. */
  --gl-illustration-status-fill-color-warning: #ab752f; /** Used as a fill to convey a caution or warning concept, has a slightly negative connotation. */
  --gl-illustration-status-fill-color-danger: #aa563a; /** Used as a fill to convey a critical or danger concept, has a negative connotation. */
  --gl-illustration-accent-stroke-color-orange: #e3865f; /** Used for orange accent stroke detail on an object or attention-drawing element. */
  --gl-illustration-accent-stroke-color-teal: #6baea3; /** Used for teal accent stroke detail on an object or attention-drawing element. */
  --gl-illustration-accent-stroke-color-strong: #aea5d6; /** Used for dark accent stroke detail on an object or attention-drawing element. */
  --gl-illustration-accent-fill-color-subtle: #5c5371; /** Used to add depth to a secondary element and supporting surface. */
  --gl-illustration-accent-fill-color-strong: #6f6796; /** Used for an element requiring visual emphasis without competing with primary content or status indicators. */
  --gl-illustration-accent-fill-color-orange: #aa563a; /** Used to add orange to a secondary element and supporting surface. */
  --gl-illustration-accent-fill-color-teal: #3b8581; /** Used to add teal to a secondary element and supporting surface. */
  --gl-illustration-base-fill-color: #32303c; /** Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion. */
  --gl-illustration-isometric-stroke-color-default: #e3e3e8; /** Default stroke color to define shape and provide essential detail in isometric illustration. */
  --gl-illustration-isometric-stroke-width-default: 1.5; /** Default stroke width to define shape and provide essential detail in isometric illustration. */
  --gl-illustration-isometric-glyph-top-fill-color: #5a566c; /** Used for the top face of isometric text and number elements. */
  --gl-illustration-isometric-glyph-front-fill-color: #423f4f; /** Used for the front face of isometric text and number elements. */
  --gl-illustration-isometric-glyph-side-fill-color: #373441; /** Used for the side face of isometric text and number elements. */
  --gl-illustration-isometric-glyph-shadow-fill-color: #292730; /** Used for the shadow of isometric text and number elements. */
  --gl-illustration-isometric-object-top-fill-color: #aa563a; /** Used for the top face of an isometric object or symbol. */
  --gl-illustration-isometric-object-front-fill-color: #a54623; /** Used for the front face of an isometric object or symbol. */
  --gl-illustration-isometric-object-side-fill-color: #8f4424; /** Used for the side face of an isometric object or symbol. */
  --gl-illustration-isometric-object-highlight-fill-color: #423f4f; /** Used for the face of an isometric object or symbol that requires maximum distinction from other elements. */
  --gl-illustration-isometric-object-shadow-fill-color: #3d2b2a; /** Used for the shadow of an isometric object or symbol. */
  --gl-illustration-isometric-accent-top-fill-color: #6d6972; /** Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
  --gl-illustration-isometric-accent-front-fill-color: #49474d; /** Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
  --gl-illustration-isometric-accent-side-fill-color: #212023; /** Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content. */
  --gl-illustration-isometric-base-top-fill-color: #32303c; /** Used for the top surface of an isometric base platform. */
  --gl-illustration-isometric-base-front-fill-color: #2b2932; /** Used for the front face of an isometric base platform. */
  --gl-illustration-isometric-base-side-fill-color: #23222b; /** Used for the side face of an isometric base platform. */
  --data-viz-green-50: #133a03;
  --data-viz-green-100: #1a4500;
  --data-viz-green-200: #275600;
  --data-viz-green-300: #366800;
  --data-viz-green-400: #4e7f0e;
  --data-viz-green-500: #619025;
  --data-viz-green-600: #81ac41;
  --data-viz-green-700: #94c25e;
  --data-viz-green-800: #b0d97b;
  --data-viz-green-900: #c6ed94;
  --data-viz-green-950: #ddfab7;
  --data-viz-aqua-50: #00344b;
  --data-viz-aqua-100: #004059;
  --data-viz-aqua-200: #00516c;
  --data-viz-aqua-300: #006381;
  --data-viz-aqua-400: #007b9b;
  --data-viz-aqua-500: #0090b1;
  --data-viz-aqua-600: #00acc4;
  --data-viz-aqua-700: #32c5d2;
  --data-viz-aqua-800: #5edee3;
  --data-viz-aqua-900: #93f2ef;
  --data-viz-aqua-950: #b5fefd;
  --data-viz-blue-50: #2a2b59;
  --data-viz-blue-100: #303470;
  --data-viz-blue-200: #374291;
  --data-viz-blue-300: #3f51ae;
  --data-viz-blue-400: #4e65cd;
  --data-viz-blue-500: #617ae2;
  --data-viz-blue-600: #7992f5;
  --data-viz-blue-700: #97acff;
  --data-viz-blue-800: #b7c6ff;
  --data-viz-blue-900: #d2dcff;
  --data-viz-blue-950: #e9ebff;
  --data-viz-magenta-50: #541d31;
  --data-viz-magenta-100: #661e3a;
  --data-viz-magenta-200: #7c214f;
  --data-viz-magenta-300: #9a2e5d;
  --data-viz-magenta-400: #b93d71;
  --data-viz-magenta-500: #cf4d81;
  --data-viz-magenta-600: #e86e9a;
  --data-viz-magenta-700: #f88aaf;
  --data-viz-magenta-800: #fcacc5;
  --data-viz-magenta-900: #ffccdb;
  --data-viz-magenta-950: #ffe3eb;
  --data-viz-orange-50: #4b2707;
  --data-viz-orange-100: #5e2f05;
  --data-viz-orange-200: #6f3500;
  --data-viz-orange-300: #92430a;
  --data-viz-orange-400: #b14f18;
  --data-viz-orange-500: #c95d2e;
  --data-viz-orange-600: #e07e41;
  --data-viz-orange-700: #e99b60;
  --data-viz-orange-800: #eebd8c;
  --data-viz-orange-900: #f5d6b3;
  --data-viz-orange-950: #fae8d1;
  --theme-indigo-10: #14143d;
  --theme-indigo-50: #222261;
  --theme-indigo-100: #303083;
  --theme-indigo-200: #41419f;
  --theme-indigo-300: #5252b5;
  --theme-indigo-400: #6666c4;
  --theme-indigo-500: #8181d7;
  --theme-indigo-600: #a2a2e6;
  --theme-indigo-700: #c7c7f2;
  --theme-indigo-800: #dbdbf8;
  --theme-indigo-900: #f1f1ff;
  --theme-indigo-950: #f8f8ff;
  --theme-blue-10: #04101c;
  --theme-blue-50: #0b2640;
  --theme-blue-100: #153c63;
  --theme-blue-200: #235180;
  --theme-blue-300: #346596;
  --theme-blue-400: #4977a5;
  --theme-blue-500: #628eb9;
  --theme-blue-600: #81a5c9;
  --theme-blue-700: #a6bdd5;
  --theme-blue-800: #b9cadc;
  --theme-blue-900: #cdd8e3;
  --theme-blue-950: #e6ecf0;
  --theme-light-blue-10: #0a3764;
  --theme-light-blue-50: #0c4277;
  --theme-light-blue-100: #0e4d8d;
  --theme-light-blue-200: #145aa1;
  --theme-light-blue-300: #2268ae;
  --theme-light-blue-400: #3476b9;
  --theme-light-blue-500: #4f8bc7;
  --theme-light-blue-600: #74a3d3;
  --theme-light-blue-700: #a0bedc;
  --theme-light-blue-800: #c1d4e6;
  --theme-light-blue-900: #dde6ee;
  --theme-light-blue-950: #eef3f7;
  --theme-green-10: #052e19;
  --theme-green-50: #0e4328;
  --theme-green-100: #155635;
  --theme-green-200: #1b653f;
  --theme-green-300: #25744c;
  --theme-green-400: #308258;
  --theme-green-500: #499767;
  --theme-green-600: #69af7d;
  --theme-green-700: #8cc497;
  --theme-green-800: #b1d6b5;
  --theme-green-900: #dde9de;
  --theme-green-950: #eef4ef;
  --theme-red-10: #380700;
  --theme-red-50: #580d02;
  --theme-red-100: #761405;
  --theme-red-200: #8f2110;
  --theme-red-300: #a13322;
  --theme-red-400: #ad4a3b;
  --theme-red-500: #c66e60;
  --theme-red-600: #d59086;
  --theme-red-700: #e3bab5;
  --theme-red-800: #ecd3d0;
  --theme-red-900: #f4e9e7;
  --theme-red-950: #faf4f3;
  --theme-light-red-10: #5c1105;
  --theme-light-red-50: #751709;
  --theme-light-red-100: #8b2212;
  --theme-light-red-200: #a02e1c;
  --theme-light-red-300: #b53a26;
  --theme-light-red-400: #c24b38;
  --theme-light-red-500: #d36250;
  --theme-light-red-600: #e07f6f;
  --theme-light-red-700: #ebada2;
  --theme-light-red-800: #f6d9d5;
  --theme-light-red-900: #faf2f1;
  --theme-light-red-950: #fdf9f8;
  --black: #fff;
  --white: #28272d;
  --blue-50: #033464;
  --blue-100: #064787;
  --blue-200: #0b5cad;
  --blue-300: #1068bf;
  --blue-400: #1f75cb;
  --blue-500: #428fdc;
  --blue-600: #63a6e9;
  --blue-700: #9dc7f1;
  --blue-800: #cbe2f9;
  --blue-900: #e9f3fc;
  --blue-950: #f2f9ff;
  --gray-10: #18171d;
  --gray-50: #28272d;
  --gray-100: #3a383f;
  --gray-200: #4c4b51;
  --gray-300: #626168;
  --gray-400: #737278;
  --gray-500: #89888d;
  --gray-600: #a4a3a8;
  --gray-700: #bfbfc3;
  --gray-800: #dcdcde;
  --gray-900: #ececef;
  --gray-950: #fbfafd;
  --green-50: #0a4020;
  --green-100: #0d532a;
  --green-200: #24663b;
  --green-300: #217645;
  --green-400: #108548;
  --green-500: #2da160;
  --green-600: #52b87a;
  --green-700: #91d4a8;
  --green-800: #c3e6cd;
  --green-900: #ecf4ee;
  --green-950: #f1fdf6;
  --orange-50: #5c2900;
  --orange-100: #703800;
  --orange-200: #8f4700;
  --orange-300: #9e5400;
  --orange-400: #ab6100;
  --orange-500: #c17d10;
  --orange-600: #d99530;
  --orange-700: #e9be74;
  --orange-800: #f5d9a8;
  --orange-900: #fdf1dd;
  --orange-950: #fff4e1;
  --purple-50: #232150;
  --purple-100: #2f2a6b;
  --purple-200: #453894;
  --purple-300: #5943b6;
  --purple-400: #694cc0;
  --purple-500: #7b58cf;
  --purple-600: #9475db;
  --purple-700: #ac93e6;
  --purple-800: #cbbbf2;
  --purple-900: #e1d8f9;
  --purple-950: #f4f0ff;
  --red-50: #660e00;
  --red-100: #8d1300;
  --red-200: #ae1800;
  --red-300: #c91c00;
  --red-400: #dd2b0e;
  --red-500: #ec5941;
  --red-600: #f57f6c;
  --red-700: #fcb5aa;
  --red-800: #fdd4cd;
  --red-900: #fcf1ef;
  --red-950: #fff4f3;
  --brand-charcoal: #171321; /** Use color.brand-charcoal instead. */
  --brand-orange-01: #fca326; /** Use color.brand-orange.01p instead. */
  --brand-orange-02: #fc6d26; /** Use color.brand-orange.02p instead. */
  --brand-orange-03: #e24329; /** Use color.brand-orange.03p instead. */
  --brand-purple-01: #a989f5; /** Use color.purple.01p instead. */
  --brand-purple-02: #7759c2; /** Use color.purple.02p instead. */
  --brand-gray-01: #d1d0d3; /** Use color.brand-gray.01 instead. */
  --brand-gray-02: #a2a1a6; /** Use color.brand-gray.02 instead. */
  --brand-gray-03: #74717a; /** Use color.brand-gray.03 instead. */
  --brand-gray-04: #45424d; /** Use color.brand-gray.04 instead. */
  --brand-gray-05: #2b2838; /** Use color.brand-gray.05 instead. */
  --t-gray-a-16: rgba(05, 05, 06, 0.16); /** Use color.alpha.dark.16 instead. */
  --t-gray-a-24: rgba(05, 05, 06, 0.24); /** Use color.alpha.dark.24 instead. */
  --t-gray-a-02: rgba(05, 05, 06, 0.02); /** Use color.alpha.dark.2 instead. */
  --t-gray-a-04: rgba(05, 05, 06, 0.04); /** Use color.alpha.dark.4 instead. */
  --t-gray-a-06: rgba(05, 05, 06, 0.06); /** Use color.alpha.dark.6 instead. */
  --t-gray-a-08: rgba(05, 05, 06, 0.08); /** Use color.alpha.dark.8 instead. */
  --t-white-a-16: rgba(255, 255, 255, 0.16); /** Use color.alpha.light.16 instead. */
  --t-white-a-24: rgba(255, 255, 255, 0.24); /** Use color.alpha.light.24 instead. */
  --t-white-a-36: rgba(255, 255, 255, 0.36); /** Use color.alpha.light.36 instead. */
  --t-white-a-02: rgba(255, 255, 255, 0.02); /** Use color.alpha.light.2 instead. */
  --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
  --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
  --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */
  --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /** Used for the background of a neutral action in the default state. */
  --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /** Used for the background of a neutral action in the hover state. */
  --gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); /** Used for the background of a neutral action in the active state. */
  --gl-action-confirm-background-color-default: rgba(66, 143, 220, 0.0); /** Used for the background of a confirm (positive) action in the default state. */
  --gl-action-confirm-background-color-hover: rgba(66, 143, 220, 0.4); /** Used for the background of a confirm (positive) action in the hover state. */
  --gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); /** Used for the background of a confirm (positive) action in the active state. */
  --gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
  --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /** Used for the background of a danger (destructive) action in the hover state. */
  --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /** Used for the background of a danger (destructive) action in the active state. */
  --gl-background-color-overlay: rgba(0,0,0,0.64); /** Used for an overlay that covers other content. */
  --gl-letter-spacing-heading: -0.01em;
  --gl-heading-3-letter-spacing: inherit;
  --gl-heading-4-letter-spacing: inherit;
  --gl-heading-5-letter-spacing: inherit;
  --gl-heading-6-letter-spacing: inherit;
  --gl-heading-scale-100-letter-spacing: inherit;
  --gl-heading-scale-200-letter-spacing: inherit;
  --gl-heading-scale-300-letter-spacing: inherit;
  --gl-heading-scale-400-letter-spacing: inherit;
  --gl-heading-scale-500-letter-spacing: inherit;
  --gl-heading-scale-800-line-height: 1.125;
  --gl-heading-scale-100-fixed-letter-spacing: inherit;
  --gl-heading-scale-200-fixed-letter-spacing: inherit;
  --gl-heading-scale-300-fixed-letter-spacing: inherit;
  --gl-heading-scale-400-fixed-letter-spacing: inherit;
  --gl-heading-scale-500-fixed-letter-spacing: inherit;
  --gl-heading-scale-800-fixed-line-height: 1.125;
  --gl-heading-display-line-height: 1.125;
  --gl-heading-3-fixed-letter-spacing: inherit;
  --gl-heading-4-fixed-letter-spacing: inherit;
  --gl-heading-5-fixed-letter-spacing: inherit;
  --gl-heading-6-fixed-letter-spacing: inherit;
  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
  --gl-border-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */
  --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
  --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
  --gl-border-radius-none: var(--gl-spacing-scale-0);
  --gl-border-radius-xs: var(--gl-spacing-scale-px);
  --gl-border-radius-sm: var(--gl-spacing-scale-1);
  --gl-border-radius-md: var(--gl-spacing-scale-2);
  --gl-border-radius-lg: var(--gl-spacing-scale-3);
  --gl-border-radius-xl: var(--gl-spacing-scale-4);
  --gl-border-radius-2xl: var(--gl-spacing-scale-5);
  --gl-border-radius-3xl: var(--gl-spacing-scale-6);
  --gl-font-size-sm: var(--gl-font-size-100);
  --gl-font-size-md: var(--gl-font-size-300);
  --gl-font-size-lg: var(--gl-font-size-400);
  --gl-font-weight-heading: var(--gl-font-weight-bold);
  --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5);
  --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
  --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
  --gl-alert-info-title-color: var(--gl-color-blue-300); /** Used for the title color of an info alert. */
  --gl-alert-info-border-top-color: var(--gl-color-blue-400); /** Used for the border color of an info alert. */
  --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */
  --gl-alert-success-title-color: var(--gl-color-green-300); /** Used for the title color of a success alert. */
  --gl-alert-success-border-top-color: var(--gl-color-green-400); /** Used for the border color of a success alert. */
  --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a success alert. */
  --gl-alert-warning-title-color: var(--gl-color-orange-300); /** Used for the title color of a warning alert. */
  --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /** Used for the border color of a warning alert. */
  --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */
  --gl-alert-danger-title-color: var(--gl-color-red-300); /** Used for the title color of a danger alert. */
  --gl-alert-danger-border-top-color: var(--gl-color-red-400); /** Used for the border color of a danger alert. */
  --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
  --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /** Used to define the edge of an avatar. */
  --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /** Used to increase the edge definition of an avatar in the hover state. */
  --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /** Red text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-200); /** Purple text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-200); /** Blue text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-green: var(--gl-color-green-200); /** Green text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-200); /** Orange text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-200); /** Neutral text color for avatar fallback with no particular meaning. */
  --gl-badge-muted-background-color-default: var(--gl-color-neutral-400); /** Used for the background of a muted badge when static or the default state when linked. */
  --gl-badge-muted-background-color-active: var(--gl-color-neutral-300); /** Used for the background of a muted badge in the active state. */
  --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a muted badge when static or the default state when linked. */
  --gl-badge-muted-border-color-hover: var(--gl-color-neutral-300); /** Used for the border of a muted badge in the hover state. */
  --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the focus state. */
  --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the active state. */
  --gl-badge-muted-text-color-default: var(--gl-color-neutral-950); /** Used for the text of a muted badge when static or the default state when linked. */
  --gl-badge-muted-text-color-hover: var(--gl-color-neutral-950); /** Used for the text of a muted badge in the hover state. */
  --gl-badge-muted-text-color-active: var(--gl-color-neutral-950); /** Used for the text of a muted badge in the active state. */
  --gl-badge-muted-icon-color-default: var(--gl-color-neutral-950); /** Used for the icon of a muted badge when static or the default state when linked. */
  --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-950); /** Used for the icon of a muted badge in the hover state. */
  --gl-badge-muted-icon-color-active: var(--gl-color-neutral-950); /** Used for the icon of a muted badge in the active state. */
  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-300); /** Used for the background of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-200); /** Used for the background of a neutral badge in the active state. */
  --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-200); /** Used for the border of a neutral badge in the hover state. */
  --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the focus state. */
  --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the active state. */
  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-950); /** Used for the text of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-950); /** Used for the text of a neutral badge in the hover state. */
  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-950); /** Used for the text of a neutral badge in the active state. */
  --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-950); /** Used for the icon of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-950); /** Used for the icon of a neutral badge in the hover state. */
  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-950); /** Used for the icon of a neutral badge in the active state. */
  --gl-badge-info-background-color-default: var(--gl-color-blue-300); /** Used for the background of an informational badge when static or the default state when linked. */
  --gl-badge-info-background-color-active: var(--gl-color-blue-200); /** Used for the background of an informational badge in the active state. */
  --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an informational badge when static or the default state when linked. */
  --gl-badge-info-border-color-hover: var(--gl-color-blue-200); /** Used for the border of an informational badge in the hover state. */
  --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the focus state. */
  --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the active state. */
  --gl-badge-info-text-color-default: var(--gl-color-blue-950); /** Used for the text of an informational badge when static or the default state when linked. */
  --gl-badge-info-text-color-hover: var(--gl-color-blue-950); /** Used for the text of an informational badge in the hover state. */
  --gl-badge-info-text-color-active: var(--gl-color-blue-950); /** Used for the text of an informational badge in the active state. */
  --gl-badge-info-icon-color-default: var(--gl-color-blue-950); /** Used for the icon of an informational badge when static or the default state when linked. */
  --gl-badge-info-icon-color-hover: var(--gl-color-blue-950); /** Used for the icon of an informational badge in the hover state. */
  --gl-badge-info-icon-color-active: var(--gl-color-blue-950); /** Used for the icon of an informational badge in the active state. */
  --gl-badge-success-background-color-default: var(--gl-color-green-300); /** Used for the background of a success badge when static or the default state when linked. */
  --gl-badge-success-background-color-active: var(--gl-color-green-200); /** Used for the background of a success badge in the active state. */
  --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a success badge when static or the default state when linked. */
  --gl-badge-success-border-color-hover: var(--gl-color-green-200); /** Used for the border of a success badge in the hover state. */
  --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a success badge in the focus state. */
  --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a success badge in the active state. */
  --gl-badge-success-text-color-default: var(--gl-color-green-950); /** Used for the text of a success badge when static or the default state when linked. */
  --gl-badge-success-text-color-hover: var(--gl-color-green-950); /** Used for the text of a success badge in the hover state. */
  --gl-badge-success-text-color-active: var(--gl-color-green-950); /** Used for the text of a success badge in the active state. */
  --gl-badge-success-icon-color-default: var(--gl-color-green-950); /** Used for the icon of a success badge when static or the default state when linked. */
  --gl-badge-success-icon-color-hover: var(--gl-color-green-950); /** Used for the icon of a success badge in the hover state. */
  --gl-badge-success-icon-color-active: var(--gl-color-green-950); /** Used for the icon of a success badge in the active state. */
  --gl-badge-warning-background-color-default: var(--gl-color-orange-300); /** Used for the background of a warning badge when static or the default state when linked. */
  --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /** Used for the background of a warning badge in the active state. */
  --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a warning badge when static or the default state when linked. */
  --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /** Used for the border of a warning badge in the hover state. */
  --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the focus state. */
  --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the active state. */
  --gl-badge-warning-text-color-default: var(--gl-color-orange-950); /** Used for the text of a warning badge when static or the default state when linked. */
  --gl-badge-warning-text-color-hover: var(--gl-color-orange-950); /** Used for the text of a warning badge in the hover state. */
  --gl-badge-warning-text-color-active: var(--gl-color-orange-950); /** Used for the text of a warning badge in the active state. */
  --gl-badge-warning-icon-color-default: var(--gl-color-orange-950); /** Used for the icon of a warning badge when static or the default state when linked. */
  --gl-badge-warning-icon-color-hover: var(--gl-color-orange-950); /** Used for the icon of a warning badge in the hover state. */
  --gl-badge-warning-icon-color-active: var(--gl-color-orange-950); /** Used for the icon of a warning badge in the active state. */
  --gl-badge-danger-background-color-default: var(--gl-color-red-300); /** Used for the background of a danger badge when static or the default state when linked. */
  --gl-badge-danger-background-color-active: var(--gl-color-red-200); /** Used for the background of a danger badge in the active state. */
  --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger badge when static or the default state when linked. */
  --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /** Used for the border of a danger badge in the hover state. */
  --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the focus state. */
  --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the active state. */
  --gl-badge-danger-text-color-default: var(--gl-color-red-950); /** Used for the text of a danger badge when static or the default state when linked. */
  --gl-badge-danger-text-color-hover: var(--gl-color-red-950); /** Used for the text of a danger badge in the hover state. */
  --gl-badge-danger-text-color-active: var(--gl-color-red-950); /** Used for the text of a danger badge in the active state. */
  --gl-badge-danger-icon-color-default: var(--gl-color-red-950); /** Used for the icon of a danger badge when static or the default state when linked. */
  --gl-badge-danger-icon-color-hover: var(--gl-color-red-950); /** Used for the icon of a danger badge in the hover state. */
  --gl-badge-danger-icon-color-active: var(--gl-color-red-950); /** Used for the icon of a danger badge in the active state. */
  --gl-badge-tier-background-color-default: var(--gl-color-purple-300); /** Used for the background of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /** Used for the background of a tier related badge in the active state. */
  --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-border-color-hover: var(--gl-color-purple-200); /** Used for the border of a tier related badge in the hover state. */
  --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the focus state. */
  --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the active state. */
  --gl-badge-tier-text-color-default: var(--gl-color-purple-950); /** Used for the text of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-text-color-hover: var(--gl-color-purple-950); /** Used for the text of a tier related badge in the hover state. */
  --gl-badge-tier-text-color-active: var(--gl-color-purple-950); /** Used for the text of a tier related badge in the active state. */
  --gl-badge-tier-icon-color-default: var(--gl-color-purple-950); /** Used for the icon of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-950); /** Used for the icon of a tier related badge in the hover state. */
  --gl-badge-tier-icon-color-active: var(--gl-color-purple-950); /** Used for the icon of a tier related badge in the active state. */
  --gl-banner-intro-border-color: var(--gl-color-blue-700); /** Used for the border of an info banner. */
  --gl-banner-promo-background-color: var(--gl-color-purple-950); /** Used for the background of a promo banner. */
  --gl-banner-promo-border-color: var(--gl-color-purple-700); /** Used for the border of a promo banner. */
  --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /** Used for the breadcrumb level separator. */
  --gl-broadcast-banner-background-color-blue: var(--gl-color-theme-blue-700); /** Used for the background for the blue banner type. */
  --gl-broadcast-banner-background-color-dark: var(--gl-color-neutral-500); /** Used for the background for the dark banner type. */
  --gl-broadcast-banner-background-color-green: var(--gl-color-theme-green-700); /** Used for the background for the green banner type. */
  --gl-broadcast-banner-background-color-indigo: var(--gl-color-theme-indigo-700); /** Used for the background for the indigo banner type. */
  --gl-broadcast-banner-background-color-light: var(--gl-color-neutral-50); /** Used for the background for the light banner type. */
  --gl-broadcast-banner-background-color-lightblue: var(--gl-color-theme-blue-500); /** Used for the background for the lightblue banner type. */
  --gl-broadcast-banner-background-color-lightgreen: var(--gl-color-theme-green-500); /** Used for the background for the lightgreen banner type. */
  --gl-broadcast-banner-background-color-lightindigo: var(--gl-color-theme-indigo-500); /** Used for the background for the lightindigo banner type. */
  --gl-broadcast-banner-background-color-lightred: var(--gl-color-theme-red-500); /** Used for the background for the lightred banner type. */
  --gl-broadcast-banner-background-color-red: var(--gl-color-theme-red-700); /** Used for the background for the red banner type. */
  --gl-broadcast-banner-border-color-blue: var(--gl-color-theme-blue-900); /** Used for the border for the blue banner type. */
  --gl-broadcast-banner-border-color-dark: var(--gl-color-neutral-700); /** Used for the border for the dark banner type. */
  --gl-broadcast-banner-border-color-green: var(--gl-color-theme-green-900); /** Used for the border for the green banner type. */
  --gl-broadcast-banner-border-color-indigo: var(--gl-color-theme-indigo-900); /** Used for the border for the indigo banner type. */
  --gl-broadcast-banner-border-color-light: var(--gl-color-neutral-100); /** Used for the border for the light banner type. */
  --gl-broadcast-banner-border-color-lightblue: var(--gl-color-theme-blue-700); /** Used for the border for the lightblue banner type. */
  --gl-broadcast-banner-border-color-lightgreen: var(--gl-color-theme-green-700); /** Used for the border for the lightgreen banner type. */
  --gl-broadcast-banner-border-color-lightindigo: var(--gl-color-theme-indigo-700); /** Used for the border for the lightindigo banner type. */
  --gl-broadcast-banner-border-color-lightred: var(--gl-color-theme-red-700); /** Used for the border for the lightred banner type. */
  --gl-broadcast-banner-border-color-red: var(--gl-color-theme-red-900); /** Used for the border for the red banner type. */
  --gl-broadcast-banner-icon-color-blue: var(--gl-color-neutral-0); /** Used for the icon for the blue banner type. */
  --gl-broadcast-banner-icon-color-dark: var(--gl-color-neutral-0); /** Used for the icon for the dark banner type. */
  --gl-broadcast-banner-icon-color-green: var(--gl-color-neutral-0); /** Used for the icon for the green banner type. */
  --gl-broadcast-banner-icon-color-indigo: var(--gl-color-neutral-0); /** Used for the icon for the indigo banner type. */
  --gl-broadcast-banner-icon-color-light: var(--gl-color-neutral-900); /** Used for the icon for the light banner type. */
  --gl-broadcast-banner-icon-color-lightblue: var(--gl-color-neutral-0); /** Used for the icon for the lightblue banner type. */
  --gl-broadcast-banner-icon-color-lightgreen: var(--gl-color-neutral-0); /** Used for the icon for the lightgreen banner type. */
  --gl-broadcast-banner-icon-color-lightindigo: var(--gl-color-neutral-0); /** Used for the icon for the lightindigo banner type. */
  --gl-broadcast-banner-icon-color-lightred: var(--gl-color-neutral-0); /** Used for the icon for the lightred banner type. */
  --gl-broadcast-banner-icon-color-red: var(--gl-color-neutral-0); /** Used for the icon for the red banner type. */
  --gl-broadcast-banner-text-color-blue: var(--gl-color-neutral-0); /** Used for the text for the blue banner type. */
  --gl-broadcast-banner-text-color-dark: var(--gl-color-neutral-0); /** Used for the text for the dark banner type. */
  --gl-broadcast-banner-text-color-green: var(--gl-color-neutral-0); /** Used for the text for the green banner type. */
  --gl-broadcast-banner-text-color-indigo: var(--gl-color-neutral-0); /** Used for the text for the indigo banner type. */
  --gl-broadcast-banner-text-color-light: var(--gl-color-neutral-900); /** Used for the text for the light banner type. */
  --gl-broadcast-banner-text-color-lightblue: var(--gl-color-neutral-0); /** Used for the text for the lightblue banner type. */
  --gl-broadcast-banner-text-color-lightgreen: var(--gl-color-neutral-0); /** Used for the text for the lightgreen banner type. */
  --gl-broadcast-banner-text-color-lightindigo: var(--gl-color-neutral-0); /** Used for the text for the lightindigo banner type. */
  --gl-broadcast-banner-text-color-lightred: var(--gl-color-neutral-0); /** Used for the text for the lightred banner type. */
  --gl-broadcast-banner-text-color-red: var(--gl-color-neutral-0); /** Used for the text for the red banner type. */
  --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a default primary button in the default state. */
  --gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-hover); /** Used for the background of an default primary button in the focus state. */
  --gl-button-default-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the default state. */
  --gl-button-default-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the hover state. */
  --gl-button-default-primary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an default primary button in the active state. */
  --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /** Used for the background of a default borderless, tertiary button in the default state. */
  --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of a default borderless, tertiary button in the hover state. */
  --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /** Used for the background of a default borderless, tertiary button in the active state. */
  --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a confirm (positive) primary button in the default state. */
  --gl-button-confirm-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm (positive) primary button in the default state. */
  --gl-button-confirm-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of a confirm (positive) primary button in the hover state. */
  --gl-button-confirm-primary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a confirm (positive) primary button in the active state. */
  --gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the default state. */
  --gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the hover state. */
  --gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) button in the active state. */
  --gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-hover); /** Used for the background of an outlined confirm (positive) button in the focus state. */
  --gl-button-confirm-secondary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the default state. */
  --gl-button-confirm-secondary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the hover state. */
  --gl-button-confirm-secondary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an outlined confirm (positive) button in the active state. */
  --gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /** Used for the background of a borderless, tertiary confirm (positive) button in the default state. */
  --gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /** Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */
  --gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /** Used for the background of a borderless, tertiary confirm (positive) button in the active state. */
  --gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a danger (destructive) primary button in the default state. */
  --gl-button-danger-primary-background-color-default: var(--gl-color-red-300); /** Used for the background of a danger (destructive) primary button in the default state. */
  --gl-button-danger-primary-background-color-hover: var(--gl-color-red-200); /** Used for the background of a danger (destructive) primary button in the hover state. */
  --gl-button-danger-primary-background-color-active: var(--gl-color-red-400); /** Used for the background of a danger (destructive) primary button in the active state. */
  --gl-button-danger-primary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the default state. */
  --gl-button-danger-primary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the hover state. */
  --gl-button-danger-primary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the active state. */
  --gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) button in the default state. */
  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-50); /** Used for the foreground of a danger (destructive) button in the hover state. */
  --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-50); /** Used for the foreground of a danger (destructive) button in the active state. */
  --gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-hover); /** Used for the background of an outlined danger (destructive) button in the focus state. */
  --gl-button-danger-secondary-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the default state. */
  --gl-button-danger-secondary-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the hover state. */
  --gl-button-danger-secondary-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an outlined danger (destructive) button in the active state. */
  --gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /** Used for the background of a borderless, tertiary danger (destructive) button in the default state. */
  --gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /** Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */
  --gl-button-danger-tertiary-background-color-active: var(--gl-action-danger-background-color-active); /** Used for the background of a borderless, tertiary danger (destructive) button in the active state. */
  --gl-button-dashed-border-color-default: var(--gl-color-neutral-400); /** Used for the border of a dashed button in the default state. */
  --gl-button-dashed-border-color-active: var(--gl-color-neutral-300); /** Used for the border of a dashed button in the active state. */
  --gl-button-selected-foreground-color-default: var(--gl-color-neutral-900); /** Used for the foreground of a selected button in the default state. */
  --gl-button-selected-foreground-color-hover: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the hover state. */
  --gl-button-selected-foreground-color-focus: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the focus state. */
  --gl-button-selected-foreground-color-active: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the active state. */
  --gl-button-selected-background-color-default: var(--gl-color-neutral-300); /** Used for the background of a selected button in the default state. */
  --gl-button-selected-background-color-hover: var(--gl-color-neutral-200); /** Used for the background of a selected button in the hover state. */
  --gl-button-selected-background-color-focus: var(--gl-color-neutral-200); /** Used for the background of a selected button in the focus state. */
  --gl-button-selected-background-color-active: var(--gl-color-neutral-400); /** Used for the background of a selected button in the active state. */
  --gl-button-selected-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a selected button in the default state. */
  --gl-button-selected-border-color-hover: var(--gl-color-alpha-0); /** Used for the border of a selected button in the hover state. */
  --gl-button-selected-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a selected button in the active state. */
  --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /** Used for the foreground of a disabled button. */
  --gl-button-disabled-border-color: var(--gl-color-alpha-0); /** Used for the border of a disabled button. */
  --gl-button-count-background-color: var(--gl-color-alpha-light-16); /** Used for the background of a button count element. */
  --gl-chart-axis-line-color: var(--gl-color-neutral-700); /** Used in charts for axis line color. */
  --gl-chart-threshold-line-color: var(--gl-color-red-600); /** Used in charts to divide a threshold area in a chart from other data. */
  --gl-chart-zoom-filler-color: var(--gl-color-alpha-light-16); /** Used in charts for the overlay color when zooming in on a specific area of data. */
  --gl-datepicker-background-color: var(--gl-color-neutral-900); /** Used for the background color of datepicker. */
  --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /** Used for the background of an unselected dropdown option in the default state. */
  --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /** Used for the background of an unselected dropdown option in the hover state. */
  --gl-dropdown-option-background-color-unselected-active: var(--gl-action-neutral-background-color-active); /** Used for the background of an unselected dropdown option in the active state. */
  --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /** Used for the background of a selected dropdown option in the default state. */
  --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */
  --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */
  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-16); /** Used for the background of a search input in a dropdown listbox. */
  --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search type token background color in the default state. */
  --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search type token background color in the hover state. */
  --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /** Used for the filtered search data background color in the default state. */
  --gl-filtered-search-token-data-background-color-hover: var(--gl-color-neutral-700); /** Used for the filtered search data token background color in the hover state. */
  --gl-filtered-search-token-operator-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search operator background color in the default state. */
  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search operator token background color in the hover state. */
  --gl-label-light-text-color: var(--gl-color-neutral-950); /** Used for the label text color on a light background color. */
  --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /** Used for the label remove button background on a light background color in the default state. */
  --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /** Used for the label remove button background on a light background color in the hover state. */
  --gl-label-light-button-icon-color-default: var(--gl-color-neutral-950); /** Used for the label remove button icon on a light background color in the default state. */
  --gl-label-dark-text-color: var(--gl-color-neutral-0); /** Used for the label text color on a dark background color. */
  --gl-label-dark-button-background-color-default: var(--gl-color-alpha-0); /** Used for the label remove button background on a dark background color in the default state. */
  --gl-label-dark-button-background-color-hover: var(--gl-color-neutral-0); /** Used for the label remove button background on a dark background color in the hover state. */
  --gl-label-dark-button-icon-color-default: var(--gl-color-neutral-0); /** Used for the label remove button icon on a dark background color in the default state. */
  --gl-label-scoped-text-color: var(--gl-color-neutral-0); /** Used for the scoped label text color. */
  --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-0); /** Used for the scoped label remove button background in the hover state. */
  --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-0); /** Used for the scoped label remove button icon in the default state. */
  --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-950); /** Used for the scoped label remove button icon in the hover state. */
  --gl-link-mention-text-color-default: var(--gl-color-blue-100); /** Used for the mention link text color. */
  --gl-link-mention-text-color-current: var(--gl-color-orange-100); /** Used for the mention link text color when referencing the current user. */
  --gl-link-mention-background-color-default: var(--gl-color-blue-800); /** Used for the mention link default background. */
  --gl-link-mention-background-color-current: var(--gl-color-orange-800); /** Used for the mention link background when referencing the current user. */
  --gl-progress-bar-track-color: var(--gl-color-neutral-700); /** Used for the track color for all progress-bar variants. */
  --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /** Used for the skeleton loader background color. */
  --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /** Used for the animated shimmer effect in a skeleton loader. */
  --gl-spinner-track-color-default: var(--gl-color-neutral-600); /** Used for the static track (background) of a loading spinner. */
  --gl-spinner-track-color-light: var(--gl-color-neutral-800); /** Used for the static track (background) of a loading spinner on a dark background. */
  --gl-spinner-segment-color-default: var(--gl-color-neutral-100); /** Used for the animated segment of a loading spinner. */
  --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /** Used for the animated segment of a loading spinner on a dark background. */
  --gl-tab-selected-indicator-color-default: var(--gl-color-blue-400); /** Used for the selected indicator of a tab. */
  --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-600); /** Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
  --gl-token-background-color: var(--gl-color-neutral-800); /** Used for the token background color. */
  --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /** Used for the foreground of a disabled action. */
  --gl-action-disabled-background-color: var(--gl-color-neutral-900); /** Used for the background of a disabled action. */
  --gl-action-disabled-border-color: var(--gl-color-neutral-800); /** Used for the border of a disabled action. */
  --gl-action-selected-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a selected action in the default state. */
  --gl-action-selected-background-color-default: var(--gl-color-blue-300); /** Used for the background of a selected action in the default state. */
  --gl-action-selected-background-color-hover: var(--gl-color-blue-200); /** Used for the background of a selected action in the hover state. */
  --gl-action-selected-background-color-active: var(--gl-color-blue-100); /** Used for the background of a selected action in the active state. */
  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a neutral action in the default state. */
  --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /** Used for the background of a neutral action in the focus state. */
  --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral action in the default state. */
  --gl-action-confirm-foreground-color-default: var(--gl-color-blue-200); /** Used for the foreground of a confirm (positive) action in the default state. */
  --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) action in the hover state. */
  --gl-action-confirm-foreground-color-active: var(--gl-color-blue-100); /** Used for the foreground of a confirm (positive) action in the active state. */
  --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /** Used for the background of a confirm (positive) action in the focus state. */
  --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm action in the default state. */
  --gl-action-danger-foreground-color-default: var(--gl-color-red-200); /** Used for the foreground of a danger (destructive) action in the default state. */
  --gl-action-danger-foreground-color-hover: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) action in the hover state. */
  --gl-action-danger-foreground-color-active: var(--gl-color-red-100); /** Used for the foreground of a danger (destructive) action in the active state. */
  --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /** Used for the background of a danger (destructive) action in the focus state. */
  --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger action in the default state. */
  --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-300); /** Used for the background of a strong confirm action in the default state. */
  --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-200); /** Used for the background of a strong confirm action in the hover state. */
  --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-400); /** Used for the background of a strong confirm action in the active state. */
  --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a strong confirm action in the default state. */
  --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a strong confirm action in the default state. */
  --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-700); /** Used for the background of a strong neutral action in the default state. */
  --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-600); /** Used for the background of a strong neutral action in the hover state. */
  --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-500); /** Used for the background of a strong neutral action in the active state. */
  --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-50); /** Used for the foreground of a strong neutral action in the default state. */
  --gl-action-strong-neutral-foreground-color-hover: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the hover state. */
  --gl-action-strong-neutral-foreground-color-focus: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the focus state. */
  --gl-action-strong-neutral-foreground-color-active: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the active state. */
  --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a strong neutral action in the default state. */
  --gl-background-color-default: var(--gl-color-neutral-950); /** Used for the default background color. */
  --gl-background-color-subtle: var(--gl-color-neutral-900); /** Used to slightly differentiate the background from the default. */
  --gl-background-color-strong: var(--gl-color-neutral-800); /** Used to make the background easily stand out from the default. */
  --gl-background-color-disabled: var(--gl-color-neutral-900); /** Used to identify a disabled section. */
  --gl-background-color-overlap: var(--gl-color-neutral-900); /** Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
  --gl-background-color-section: var(--gl-color-neutral-800); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
  --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /** Used for form control (input, radio button, checkbox, textarea) default background. */
  --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
  --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /** Used for the background of static content that prepends or appends a text input. */
  --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /** Used for the background of static content that prepends or appends a text input. */
  --gl-control-background-color-selected-default: var(--gl-color-blue-300); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
  --gl-control-background-color-selected-hover: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
  --gl-control-background-color-selected-focus: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
  --gl-control-border-color-default: var(--gl-color-neutral-500); /** Used for form control (input, radio button, checkbox, textarea) default border. */
  --gl-control-border-color-hover: var(--gl-color-neutral-300); /** Used for form control (input, radio button, checkbox, textarea) border on hover. */
  --gl-control-border-color-focus: var(--gl-color-neutral-50); /** Used for form control (input, radio button, checkbox, textarea) border on focus. */
  --gl-control-border-color-disabled: var(--gl-color-neutral-800); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */
  --gl-control-border-color-selected-default: var(--gl-color-blue-400); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
  --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
  --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
  --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /** Used for checkbox and radio button state indicators. */
  --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /** Used for disabled checkbox and radio button state indicators. */
  --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
  --gl-feedback-strong-border-color: var(--gl-color-neutral-300); /** Used for the border associated with strong feedback. */
  --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /** Used for text on a strong feedback background. */
  --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /** Used for an icon on a strong feedback background. */
  --gl-feedback-strong-link-color: var(--gl-color-blue-300); /** Used for a link on a strong feedback background. */
  --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /** Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
  --gl-feedback-neutral-border-color: var(--gl-color-neutral-600); /** Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. */
  --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /** Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /** Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
  --gl-feedback-info-background-color: var(--gl-color-blue-950); /** Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
  --gl-feedback-info-border-color: var(--gl-color-blue-600); /** Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
  --gl-feedback-info-text-color: var(--gl-color-blue-200); /** Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
  --gl-feedback-info-icon-color: var(--gl-color-blue-300); /** Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
  --gl-feedback-success-background-color: var(--gl-color-green-900); /** Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
  --gl-feedback-success-border-color: var(--gl-color-green-600); /** Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. */
  --gl-feedback-success-text-color: var(--gl-color-green-200); /** Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */
  --gl-feedback-success-icon-color: var(--gl-color-green-300); /** Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
  --gl-feedback-warning-background-color: var(--gl-color-orange-900); /** Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */
  --gl-feedback-warning-border-color: var(--gl-color-orange-600); /** Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. */
  --gl-feedback-warning-text-color: var(--gl-color-orange-200); /** Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */
  --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /** Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
  --gl-feedback-danger-background-color: var(--gl-color-red-900); /** Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
  --gl-feedback-danger-border-color: var(--gl-color-red-300); /** Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
  --gl-feedback-danger-text-color: var(--gl-color-red-200); /** Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
  --gl-feedback-danger-icon-color: var(--gl-color-red-300); /** Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
  --gl-feedback-brand-background-color: var(--gl-color-purple-950); /** Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab. */
  --gl-feedback-brand-border-color: var(--gl-color-purple-600); /** Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab. */
  --gl-feedback-brand-text-color: var(--gl-color-purple-200); /** Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab. */
  --gl-feedback-brand-icon-color: var(--gl-color-purple-300); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */
  --gl-focus-ring-outer-color: var(--gl-color-blue-400); /** Used for the outer color portion of the focus ring. */
  --gl-highlight-match-background-color: var(--gl-color-orange-200); /** Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */
  --gl-highlight-match-text-color: var(--gl-color-neutral-950); /** Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */
  --gl-highlight-target-background-color: var(--gl-color-blue-950); /** Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action. */
  --gl-highlight-target-border-color: var(--gl-color-blue-700); /** Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states. */
  --gl-icon-color-info: var(--gl-color-blue-200); /** Used for an icon associated with information or help. */
  --gl-status-neutral-background-color: var(--gl-color-neutral-800); /** Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
  --gl-status-neutral-text-color: var(--gl-color-neutral-200); /** Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
  --gl-status-neutral-icon-color: var(--gl-color-neutral-300); /** Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
  --gl-status-info-background-color: var(--gl-color-blue-800); /** Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
  --gl-status-info-text-color: var(--gl-color-blue-200); /** Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
  --gl-status-info-icon-color: var(--gl-color-blue-300); /** Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
  --gl-status-success-background-color: var(--gl-color-green-800); /** Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
  --gl-status-success-text-color: var(--gl-color-green-200); /** Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
  --gl-status-success-icon-color: var(--gl-color-green-300); /** Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
  --gl-status-warning-background-color: var(--gl-color-orange-800); /** Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
  --gl-status-warning-text-color: var(--gl-color-orange-200); /** Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
  --gl-status-warning-icon-color: var(--gl-color-orange-300); /** Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
  --gl-status-danger-background-color: var(--gl-color-red-800); /** Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
  --gl-status-danger-text-color: var(--gl-color-red-200); /** Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
  --gl-status-danger-icon-color: var(--gl-color-red-300); /** Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
  --gl-status-brand-background-color: var(--gl-color-purple-900); /** Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
  --gl-status-brand-text-color: var(--gl-color-purple-300); /** Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
  --gl-status-brand-icon-color: var(--gl-color-purple-500); /** Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
  --gl-text-color-default: var(--gl-color-neutral-50); /** Used for the default text color. */
  --gl-text-color-subtle: var(--gl-color-neutral-200); /** Used for supplemental text that doesn't need to be as prominent as other text. */
  --gl-text-color-strong: var(--gl-color-neutral-0); /** Used for text with the highest contrast. */
  --gl-text-color-heading: var(--gl-color-neutral-0); /** Used for headings level 1-6. */
  --gl-text-color-link: var(--gl-color-blue-200); /** Used for default text links. */
  --gl-text-color-warning: var(--gl-color-orange-300); /** Used for text that requires caution or careful attention. */
  --gl-text-color-danger: var(--gl-color-red-300); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
  --gl-text-color-success: var(--gl-color-green-300); /** Used for text indicating success, completion, approval, addition, or validity. */
  --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
  --gl-heading-1-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-1-font-size: var(--gl-font-size-700);
  --gl-heading-1-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-1-line-height: var(--gl-line-height-heading);
  --gl-heading-2-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-2-font-size: var(--gl-font-size-600);
  --gl-heading-2-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-2-line-height: var(--gl-line-height-heading);
  --gl-heading-3-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-3-font-size: var(--gl-font-size-500);
  --gl-heading-3-line-height: var(--gl-line-height-heading);
  --gl-heading-4-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-4-font-size: var(--gl-font-size-400);
  --gl-heading-4-line-height: var(--gl-line-height-heading);
  --gl-heading-5-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-5-font-size: var(--gl-font-size-300);
  --gl-heading-5-line-height: var(--gl-line-height-heading);
  --gl-heading-6-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-6-font-size: var(--gl-font-size-200);
  --gl-heading-6-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-100-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-100-font-size: var(--gl-font-size-100);
  --gl-heading-scale-100-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-200-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-200-font-size: var(--gl-font-size-200);
  --gl-heading-scale-200-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-300-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-300-font-size: var(--gl-font-size-300);
  --gl-heading-scale-300-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-400-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-400-font-size: var(--gl-font-size-400);
  --gl-heading-scale-400-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-500-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-500-font-size: var(--gl-font-size-500);
  --gl-heading-scale-500-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-600-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-600-font-size: var(--gl-font-size-600);
  --gl-heading-scale-600-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-scale-600-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-700-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-700-font-size: var(--gl-font-size-700);
  --gl-heading-scale-700-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-scale-700-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-800-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-800-font-size: var(--gl-font-size-800);
  --gl-heading-scale-800-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-scale-100-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-100-fixed-font-size: var(--gl-font-size-100-fixed);
  --gl-heading-scale-100-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-200-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-200-fixed-font-size: var(--gl-font-size-200-fixed);
  --gl-heading-scale-200-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-300-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-300-fixed-font-size: var(--gl-font-size-300-fixed);
  --gl-heading-scale-300-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-400-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-400-fixed-font-size: var(--gl-font-size-400-fixed);
  --gl-heading-scale-400-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-500-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-500-fixed-font-size: var(--gl-font-size-500-fixed);
  --gl-heading-scale-500-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-600-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-600-fixed-font-size: var(--gl-font-size-600-fixed);
  --gl-heading-scale-600-fixed-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-scale-600-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-700-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-700-fixed-font-size: var(--gl-font-size-700-fixed);
  --gl-heading-scale-700-fixed-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-scale-700-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-scale-800-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-scale-800-fixed-font-size: var(--gl-font-size-800-fixed);
  --gl-heading-scale-800-fixed-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-display-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-display-font-size: var(--gl-font-size-800);
  --gl-heading-display-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-display-margin-bottom: var(--gl-spacing-scale-6);
  --gl-heading-1-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-1-fixed-font-size: var(--gl-font-size-700-fixed);
  --gl-heading-1-fixed-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-1-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-2-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-2-fixed-font-size: var(--gl-font-size-600-fixed);
  --gl-heading-2-fixed-letter-spacing: var(--gl-letter-spacing-heading);
  --gl-heading-2-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-3-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-3-fixed-font-size: var(--gl-font-size-500-fixed);
  --gl-heading-3-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-4-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-4-fixed-font-size: var(--gl-font-size-400-fixed);
  --gl-heading-4-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-5-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-5-fixed-font-size: var(--gl-font-size-300-fixed);
  --gl-heading-5-fixed-line-height: var(--gl-line-height-heading);
  --gl-heading-6-fixed-margin-top: var(--gl-heading-default-margin-top);
  --gl-heading-6-fixed-font-size: var(--gl-font-size-200-fixed);
  --gl-heading-6-fixed-line-height: var(--gl-line-height-heading);
  --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
  --gl-border-radius-default: var(--gl-border-radius-md);
  --gl-font-size-base: var(--gl-font-size-md);
  --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
  --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
  --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
  --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
  --gl-alert-neutral-background-color: var(--gl-background-color-subtle); /** Used for the background color of a neutral alert. */
  --gl-alert-info-background-color: var(--gl-background-color-subtle); /** Used for the background color of an info alert. */
  --gl-alert-success-background-color: var(--gl-background-color-subtle); /** Used for the background color of a success alert. */
  --gl-alert-warning-background-color: var(--gl-background-color-subtle); /** Used for the background color of a warning alert. */
  --gl-alert-danger-background-color: var(--gl-background-color-subtle); /** Used for the background color of a danger alert. */
  --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
  --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */
  --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /** Used for the icon of a muted badge in the focus state. */
  --gl-badge-neutral-background-color-hover: var(--gl-badge-neutral-background-color-default); /** Used for the background of a neutral badge in the hover state. */
  --gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /** Used for the text of a neutral badge in the focus state. */
  --gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /** Used for the icon of a neutral badge in the focus state. */
  --gl-badge-info-background-color-hover: var(--gl-badge-info-background-color-default); /** Used for the background of an informational badge in the hover state. */
  --gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /** Used for the text of an informational badge in the focus state. */
  --gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /** Used for the icon of an informational badge in the focus state. */
  --gl-badge-success-background-color-hover: var(--gl-badge-success-background-color-default); /** Used for the background of a success badge in the hover state. */
  --gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /** Used for the text of a success badge in the focus state. */
  --gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /** Used for the icon of a success badge in the focus state. */
  --gl-badge-warning-background-color-hover: var(--gl-badge-warning-background-color-default); /** Used for the background of a warning badge in the hover state. */
  --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /** Used for the text of a warning badge in the focus state. */
  --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /** Used for the icon of a warning badge in the focus state. */
  --gl-badge-danger-background-color-hover: var(--gl-badge-danger-background-color-default); /** Used for the background of a danger badge in the hover state. */
  --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /** Used for the text of a danger badge in the focus state. */
  --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /** Used for the icon of a danger badge in the focus state. */
  --gl-badge-tier-background-color-hover: var(--gl-badge-tier-background-color-default); /** Used for the background of a tier related badge in the hover state. */
  --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /** Used for the text of a tier related badge in the focus state. */
  --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /** Used for the icon of a tier related badge in the focus state. */
  --gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the hover state. */
  --gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the focus state. */
  --gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a default primary button in the active state. */
  --gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-hover); /** Used for the border of an default primary button in the focus state. */
  --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a default borderless, tertiary button in the default state. */
  --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of a default borderless, tertiary button in the focus state. */
  --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /** Used for the border of a default borderless, tertiary button in the default state. */
  --gl-button-confirm-primary-background-color-default: var(--gl-action-strong-confirm-background-color-default); /** Used for the background of a confirm (positive) primary button in the default state. */
  --gl-button-confirm-primary-background-color-hover: var(--gl-action-strong-confirm-background-color-hover); /** Used for the background of a confirm (positive) primary button in the hover state. */
  --gl-button-confirm-primary-background-color-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the background of a confirm (positive) primary button in the active state. */
  --gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-hover); /** Used for the border of a confirm (positive) primary button in the focus state. */
  --gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-hover); /** Used for the foreground of a confirm (positive) button in the focus state. */
  --gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-hover); /** Used for the border of an outlined confirm (positive) button in the focus state. */
  --gl-button-confirm-tertiary-foreground-color-default: var(--gl-action-confirm-foreground-color-default); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the default state. */
  --gl-button-confirm-tertiary-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state. */
  --gl-button-confirm-tertiary-foreground-color-active: var(--gl-action-confirm-foreground-color-active); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the active state. */
  --gl-button-confirm-tertiary-background-color-focus: var(--gl-action-confirm-background-color-focus); /** Used for the background of a borderless, tertiary confirm (positive) button in the focus state. */
  --gl-button-confirm-tertiary-border-color-default: var(--gl-action-confirm-border-color-default); /** Used for the border of a borderless, tertiary confirm (positive) button in the default state. */
  --gl-button-danger-primary-foreground-color-hover: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the hover state. */
  --gl-button-danger-primary-foreground-color-focus: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the focus state. */
  --gl-button-danger-primary-foreground-color-active: var(--gl-button-danger-primary-foreground-color-default); /** Used for the foreground of a danger (destructive) primary button in the active state. */
  --gl-button-danger-primary-background-color-focus: var(--gl-button-danger-primary-background-color-hover); /** Used for the background of a danger (destructive) primary button in the focus state. */
  --gl-button-danger-primary-border-color-focus: var(--gl-button-danger-primary-border-color-hover); /** Used for the border of a danger (destructive) primary button in the focus state. */
  --gl-button-danger-secondary-foreground-color-focus: var(--gl-button-danger-secondary-foreground-color-hover); /** Used for the foreground of a danger (destructive) button in the focus state. */
  --gl-button-danger-secondary-border-color-focus: var(--gl-button-danger-secondary-border-color-hover); /** Used for the border of an outlined danger (destructive) button in the focus state. */
  --gl-button-danger-tertiary-foreground-color-default: var(--gl-action-danger-foreground-color-default); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the default state. */
  --gl-button-danger-tertiary-foreground-color-hover: var(--gl-action-danger-foreground-color-hover); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state. */
  --gl-button-danger-tertiary-foreground-color-active: var(--gl-action-danger-foreground-color-active); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the active state. */
  --gl-button-danger-tertiary-background-color-focus: var(--gl-action-danger-background-color-focus); /** Used for the background of a borderless, tertiary danger (destructive) button in the focus state. */
  --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /** Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
  --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the hover state. */
  --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the focus state. */
  --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */
  --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */
  --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */
  --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
  --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
  --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
  --gl-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */
  --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
  --gl-dropdown-border-color: var(--gl-border-color-default); /** Used for the border of a dropdown. */
  --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */
  --gl-dropdown-divider-color: var(--gl-border-color-subtle); /** Used for the divider of a dropdown. */
  --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the text of a dropdown option in the default state. */
  --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /** Used for the text of a dropdown option in the disabled state. */
  --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for the dropdown selected option indicator in the default state. */
  --gl-dropdown-option-indicator-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for the dropdown selected option indicator in the hover state. */
  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the focus state. */
  --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
  --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
  --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
  --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */
  --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
  --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
  --gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-strong-neutral-background-color-default); /** Used for the icon color of an unchecked toggle switch in the default state. */
  --gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-strong-neutral-background-color-hover); /** Used for the icon color of an unchecked toggle switch in the hover state. */
  --gl-toggle-switch-icon-color-unchecked-active: var(--gl-action-strong-neutral-background-color-active); /** Used for the icon color of an unchecked toggle switch in the active state. */
  --gl-toggle-switch-icon-color-checked-default: var(--gl-action-strong-confirm-background-color-default); /** Used for the icon color of a checked toggle switch in the default state. */
  --gl-toggle-switch-icon-color-checked-hover: var(--gl-action-strong-confirm-background-color-hover); /** Used for the icon color of a checked toggle switch in the hover state. */
  --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the icon color of a checked toggle switch in the active state. */
  --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */
  --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */
  --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */
  --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected action in the hover state. */
  --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected action in the focus state. */
  --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /** Used for the border of a selected action in the default state. */
  --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /** Used for the border of a selected action in the hover state. */
  --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /** Used for the border of a selected action in the active state. */
  --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the hover state. */
  --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the focus state. */
  --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /** Used for the foreground of a neutral action in the active state. */
  --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the hover state. */
  --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the focus state. */
  --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /** Used for the border of a neutral action in the active state. */
  --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /** Used for the foreground of a confirm (positive) action in the focus state. */
  --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the hover state. */
  --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the focus state. */
  --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /** Used for the border of a confirm action in the active state. */
  --gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-hover); /** Used for the foreground of a danger (destructive) action in the focus state. */
  --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the hover state. */
  --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the focus state. */
  --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /** Used for the border of a danger action in the active state. */
  --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /** Used for the background of a strong confirm action in the focus state. */
  --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /** Used for the foreground of a strong confirm action in the hover state. */
  --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /** Used for the border of a strong confirm action in the hover state. */
  --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
  --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
  --gl-control-border-color-error: var(--gl-feedback-danger-border-color); /** Used for invalid form control (input, textarea) border. */
  --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
  --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
  --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
  --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
  --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
  --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
  --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */
  --gl-icon-color-subtle: var(--gl-text-color-subtle); /** Used for a static or decorational icon. Can be paired with subtle text. */
  --gl-icon-color-strong: var(--gl-text-color-strong); /** Used for an icon with the highest contrast. */
  --gl-icon-color-disabled: var(--gl-text-color-disabled); /** Used for an icon within a disabled section. */
  --gl-icon-color-link: var(--gl-text-color-link); /** Used for an icon within a link. */
  --gl-icon-color-warning: var(--gl-text-color-warning); /** Used for an icon associated with a warning. */
  --gl-icon-color-danger: var(--gl-text-color-danger); /** Used for an icon associated with an error or danger. */
  --gl-icon-color-success: var(--gl-text-color-success); /** Used for an icon associated with success or validity. */
  --gl-text-primary: var(--gl-text-color-default); /** Use text.color.default instead. */
  --gl-text-secondary: var(--gl-text-color-subtle); /** Use text.color.subtle instead. */
  --gl-text-tertiary: var(--gl-text-color-disabled); /** Use text.color.disabled instead. */
  --gl-heading-1-font-weight: var(--gl-font-weight-heading);
  --gl-heading-1-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-1-color: var(--gl-text-color-heading);
  --gl-heading-2-font-weight: var(--gl-font-weight-heading);
  --gl-heading-2-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-2-color: var(--gl-text-color-heading);
  --gl-heading-3-font-weight: var(--gl-font-weight-heading);
  --gl-heading-3-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-3-color: var(--gl-text-color-heading);
  --gl-heading-4-font-weight: var(--gl-font-weight-heading);
  --gl-heading-4-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-4-color: var(--gl-text-color-heading);
  --gl-heading-5-font-weight: var(--gl-font-weight-heading);
  --gl-heading-5-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-5-color: var(--gl-text-color-heading);
  --gl-heading-6-font-weight: var(--gl-font-weight-heading);
  --gl-heading-6-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-6-color: var(--gl-text-color-heading);
  --gl-heading-scale-100-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-100-color: var(--gl-text-color-heading);
  --gl-heading-scale-200-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-200-color: var(--gl-text-color-heading);
  --gl-heading-scale-300-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-300-color: var(--gl-text-color-heading);
  --gl-heading-scale-400-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-400-color: var(--gl-text-color-heading);
  --gl-heading-scale-500-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-500-color: var(--gl-text-color-heading);
  --gl-heading-scale-600-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-600-color: var(--gl-text-color-heading);
  --gl-heading-scale-700-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-700-color: var(--gl-text-color-heading);
  --gl-heading-scale-800-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-800-color: var(--gl-text-color-heading);
  --gl-heading-scale-100-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-100-fixed-color: var(--gl-text-color-heading);
  --gl-heading-scale-200-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-200-fixed-color: var(--gl-text-color-heading);
  --gl-heading-scale-300-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-300-fixed-color: var(--gl-text-color-heading);
  --gl-heading-scale-400-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-400-fixed-color: var(--gl-text-color-heading);
  --gl-heading-scale-500-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-500-fixed-color: var(--gl-text-color-heading);
  --gl-heading-scale-600-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-600-fixed-color: var(--gl-text-color-heading);
  --gl-heading-scale-700-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-700-fixed-color: var(--gl-text-color-heading);
  --gl-heading-scale-800-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-scale-800-fixed-color: var(--gl-text-color-heading);
  --gl-heading-display-font-weight: var(--gl-font-weight-heading);
  --gl-heading-display-color: var(--gl-text-color-heading);
  --gl-heading-1-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-1-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-1-fixed-color: var(--gl-text-color-heading);
  --gl-heading-2-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-2-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-2-fixed-color: var(--gl-text-color-heading);
  --gl-heading-3-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-3-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-3-fixed-color: var(--gl-text-color-heading);
  --gl-heading-4-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-4-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-4-fixed-color: var(--gl-text-color-heading);
  --gl-heading-5-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-5-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-5-fixed-color: var(--gl-text-color-heading);
  --gl-heading-6-fixed-font-weight: var(--gl-font-weight-heading);
  --gl-heading-6-fixed-margin-bottom: var(--gl-heading-default-margin-bottom);
  --gl-heading-6-fixed-color: var(--gl-text-color-heading);
  --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /** Used for the background of a muted badge in the focus state. */
  --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /** Used for the background of a neutral badge in the focus state. */
  --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /** Used for the background of an informational badge in the focus state. */
  --gl-badge-success-background-color-focus: var(--gl-badge-success-background-color-hover); /** Used for the background of a success badge in the focus state. */
  --gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /** Used for the background of a warning badge in the focus state. */
  --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /** Used for the background of a danger badge in the focus state. */
  --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /** Used for the background of a tier related badge in the focus state. */
  --gl-broadcast-banner-border-radius: var(--gl-border-radius-default); /** Used for broadcast banner border radius. */
  --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
  --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */
  --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */
  --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */
  --gl-button-default-tertiary-border-color-hover: var(--gl-action-neutral-border-color-hover); /** Used for the border of a default borderless, tertiary button in the hover state. */
  --gl-button-default-tertiary-border-color-focus: var(--gl-action-neutral-border-color-focus); /** Used for the border of a default borderless, tertiary button in the focus state. */
  --gl-button-default-tertiary-border-color-active: var(--gl-action-neutral-border-color-active); /** Used for the border of a default borderless, tertiary button in the active state. */
  --gl-button-confirm-primary-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a confirm (positive) primary button in the hover state. */
  --gl-button-confirm-primary-background-color-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the background of a confirm (positive) primary button in the focus state. */
  --gl-button-confirm-tertiary-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus); /** Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state. */
  --gl-button-confirm-tertiary-border-color-hover: var(--gl-action-confirm-border-color-hover); /** Used for the border of a borderless, tertiary confirm (positive) button in the hover state. */
  --gl-button-confirm-tertiary-border-color-focus: var(--gl-action-confirm-border-color-focus); /** Used for the border of a borderless, tertiary confirm (positive) button in the focus state. */
  --gl-button-confirm-tertiary-border-color-active: var(--gl-action-confirm-border-color-active); /** Used for the border of a borderless, tertiary confirm (positive) button in the active state. */
  --gl-button-danger-tertiary-foreground-color-focus: var(--gl-action-danger-foreground-color-focus); /** Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state. */
  --gl-button-danger-tertiary-border-color-hover: var(--gl-action-danger-border-color-hover); /** Used for the border of a borderless, tertiary danger (destructive) button in the hover state. */
  --gl-button-danger-tertiary-border-color-focus: var(--gl-action-danger-border-color-focus); /** Used for the border of a borderless, tertiary danger (destructive) button in the focus state. */
  --gl-button-danger-tertiary-border-color-active: var(--gl-action-danger-border-color-active); /** Used for the border of a borderless, tertiary danger (destructive) button in the active state. */
  --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the hover state. */
  --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the focus state. */
  --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the active state. */
  --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */
  --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */
  --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
  --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
  --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
  --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
  --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
  --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
  --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
  --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
  --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */
  --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
  --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
  --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
  --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
  --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */
  --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /** Used for the border of a strong confirm action in the active state. */
  --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /** Used for the border of a strong neutral action in the active state. */
  --gl-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /** Used for the foreground of a confirm (positive) primary button in the active state. */
}