/** * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved */ :root { --global-borderwidth-none: 0; --global-borderwidth-xs: 1px; --global-borderwidth-s: 2px; --global-borderwidth-m: 3px; --global-borderwidth-l: 4px; --global-borderwidth-xl: 6px; --global-borderwidth-xxl: 8px; --global-breakpoint-xs: 320px; --global-breakpoint-s: 600px; --global-breakpoint-m: 960px; --global-breakpoint-l: 1260px; --global-breakpoint-xl: 1600px; --global-breakpoint-xxl: 1920px; --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI; --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI; --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI; --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI; --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI; --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI; --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI; --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI; --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI; --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI; --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI; --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; --global-font-fluid-comp-icon-s: 20px sage-icons; --global-font-fluid-comp-icon-m: 20px sage-icons; --global-font-fluid-comp-icon-l: 20px sage-icons; --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI; --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI; --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI; --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI; --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI; --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI; --global-font-static-heading-s: 500 21px/1.25 Sage UI; --global-font-static-heading-m: 700 24px/1.25 Sage UI; --global-font-static-heading-l: 700 30px/1.25 Sage UI; --global-font-static-subheading-m: 500 16px/1.25 Sage UI; --global-font-static-subheading-l: 500 18px/1.25 Sage UI; --global-font-static-section-heading-s: 700 16px/1.25 Sage UI; --global-font-static-section-heading-m: 700 21px/1.25 Sage UI; --global-font-static-body-regular-s: 400 14px/1.5 Sage UI; --global-font-static-body-regular-m: 400 14px/1.5 Sage UI; --global-font-static-body-regular-l: 400 16px/1.5 Sage UI; --global-font-static-body-medium-s: 500 14px/1.5 Sage UI; --global-font-static-body-medium-m: 500 14px/1.5 Sage UI; --global-font-static-body-medium-l: 500 16px/1.5 Sage UI; --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI; --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI; --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI; --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI; --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI; --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI; --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI; --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI; --global-font-static-comp-icon-s: 20px sage-icons; --global-font-static-comp-icon-m: 20px sage-icons; --global-font-static-comp-icon-l: 20px sage-icons; --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI; --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI; --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI; --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI; --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI; --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI; --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI; --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI; --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI; --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI; --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI; --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI; --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI; --global-modifier-button-active: 0.30; --global-modifier-button-active-alt: 0.15; --global-modifier-button-hover: 0.15; --global-modifier-button-hover-alt: 0.10; --global-modifier-input-disabled-fg: 0.3; --global-modifier-input-disabled-bg: 0.05; --global-radius-none: 0; --global-radius-container-3-xs: 1px; --global-radius-container-2-xs: 2px; --global-radius-container-xs: 4px; --global-radius-container-s: 6px; --global-radius-container-m: 8px; --global-radius-container-l: 16px; --global-radius-container-xl: 24px; --global-radius-container-2-xl: 32px; --global-radius-container-3-xl: 40px; --global-radius-container-4-xl: 80px; --global-radius-container-circle: 999px; --global-radius-action-2-xs: 1px; --global-radius-action-xs: 2px; --global-radius-action-s: 4px; --global-radius-action-m: 8px; --global-radius-action-l: 16px; --global-radius-action-xl: 20px; --global-radius-action-2-xl: 24px; --global-radius-action-circle: 999px; --global-depth-none: 0 0 0 0 rgba(0,0,0,0); --global-depth-lvl0: 0 0 1px 1px #0000001A, 1px 2px 2px 0 #00000033; --global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033; --global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026; --global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A; --global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033; --global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A; --global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A; --global-size-none: 0px; --global-size-6-xs: 2px; --global-size-5-xs: 4px; --global-size-4-xs: 8px; --global-size-3-xs: 16px; --global-size-2-xs: 20px; --global-size-xs: 24px; --global-size-s: 32px; --global-size-m: 40px; --global-size-l: 48px; --global-size-xl: 56px; --global-size-2-xl: 64px; --global-size-3-xl: 72px; --global-size-4-xl: 80px; --global-space-none: 0px; --global-space-layout-3-xs: 8px; --global-space-layout-2-xs: 16px; --global-space-layout-xs: 24px; --global-space-layout-s: 32px; --global-space-layout-m: 40px; --global-space-layout-l: 48px; --global-space-layout-xl: 56px; --global-space-layout-2-xl: 64px; --global-space-layout-3-xl: 72px; --global-space-layout-4-xl: 80px; --global-space-comp-2-xs: 2px; --global-space-comp-xs: 4px; --global-space-comp-s: 8px; --global-space-comp-m: 12px; --global-space-comp-l: 16px; --global-space-comp-xl: 24px; --global-space-comp-2-xl: 32px; --mode-color-none: #fff0; --mode-color-ai-stop-1: #13a038; --mode-color-ai-stop-2: #149197; --mode-color-ai-stop-3: #a87cfb; --mode-color-ai-alt-stop-1: #00d639; --mode-color-ai-alt-stop-2: #00d6de; --mode-color-ai-alt-stop-3: #9d60ff; --mode-color-brand-default: #000000; --mode-color-brand-default-alt: #000000; --mode-color-brand-with-default-alt: #FFFFFF; --mode-color-brand-inverse-default: #00d639; --mode-color-brand-inverse-default-alt: #FFFFFF; --mode-color-brand-inverse-with-default-alt: #000000; --mode-color-brand-copilot-default: #000000; --mode-color-brand-copilot-monochrome: #000000; --mode-color-brand-copilot-with-default: #00d639; --mode-color-brand-copilot-inverse-default: #FFFFFF; --mode-color-brand-copilot-inverse-monochrome: #FFFFFF; --mode-color-brand-copilot-inverse-with-default: #00d639; --mode-color-colorcode-blue-intense: #00528f; --mode-color-colorcode-blue-harsh: #0071c3; --mode-color-colorcode-blue-soft: #008ef4; --mode-color-colorcode-blue-faint: #e4eeff; --mode-color-colorcode-teal-intense: #005A59; --mode-color-colorcode-teal-harsh: #007C7B; --mode-color-colorcode-teal-soft: #009B99; --mode-color-colorcode-teal-faint: #C8F5F5; --mode-color-colorcode-green-intense: #005e14; --mode-color-colorcode-green-harsh: #00811F; --mode-color-colorcode-green-soft: #1BA12B; --mode-color-colorcode-green-faint: #D1F6D6; --mode-color-colorcode-lime-intense: #475600; --mode-color-colorcode-lime-harsh: #627600; --mode-color-colorcode-lime-soft: #7d9428; --mode-color-colorcode-lime-faint: #e8f1d4; --mode-color-colorcode-orange-intense: #952a00; --mode-color-colorcode-orange-harsh: #d64309; --mode-color-colorcode-orange-soft: #e5631c; --mode-color-colorcode-orange-faint: #ffeaca; --mode-color-colorcode-red-intense: #a30037; --mode-color-colorcode-red-harsh: #db004e; --mode-color-colorcode-red-soft: #ff3e6a; --mode-color-colorcode-red-faint: #ffe8ea; --mode-color-colorcode-pink-intense: #921a6e; --mode-color-colorcode-pink-harsh: #c72699; --mode-color-colorcode-pink-soft: #E84DB5; --mode-color-colorcode-pink-faint: #fee8f5; --mode-color-colorcode-purple-intense: #6a32a6; --mode-color-colorcode-purple-harsh: #8f4bd7; --mode-color-colorcode-purple-soft: #a375dd; --mode-color-colorcode-purple-faint: #F3EBFE; --mode-color-colorcode-slate-intense: #304658; --mode-color-colorcode-slate-harsh: #5e6f7d; --mode-color-colorcode-slate-soft: #8c98a2; --mode-color-colorcode-slate-faint: #e4eff5; --mode-color-colorcode-gray-intense: #505050; --mode-color-colorcode-gray-harsh: #6f6f6f; --mode-color-colorcode-gray-soft: #8b8b8b; --mode-color-colorcode-gray-faint: #eeeeee; --mode-color-colorcode-yellow-intense: #885e00; --mode-color-colorcode-yellow-harsh: #9f7000; --mode-color-colorcode-yellow-soft: #ffca35; --mode-color-colorcode-yellow-faint: #ffedb8; --mode-color-generic-bg-nought: #FFFFFF; --mode-color-generic-bg-faint: #f4f5f6; --mode-color-generic-bg-delicate: #e8eaec; --mode-color-generic-bg-soft: #dde0e3; --mode-color-generic-bg-inverse-nought: #000000; --mode-color-generic-bg-inverse-faint: #ffffff0d; --mode-color-generic-bg-inverse-delicate: #ffffff1a; --mode-color-generic-bg-inverse-soft: #ffffff26; --mode-color-generic-txt-extreme: #000000; --mode-color-generic-txt-severe: #000000f2; --mode-color-generic-txt-moderate: #000000a6; --mode-color-generic-txt-soft: #0000008c; --mode-color-generic-txt-delicate: #0000006b; --mode-color-generic-txt-inverse-extreme: #FFFFFF; --mode-color-generic-txt-inverse-severe: #fffffff2; --mode-color-generic-txt-inverse-moderate: #ffffffab; --mode-color-generic-txt-inverse-soft: #ffffff8c; --mode-color-generic-txt-inverse-delicate: #ffffff6b; --mode-color-generic-fg-nought: #FFFFFF; --mode-color-generic-fg-soft: #a3adb5; --mode-color-generic-fg-moderate: #8c98a2; --mode-color-generic-fg-firm: #75838f; --mode-color-generic-fg-inverse-nought: #000000; --mode-color-generic-fg-inverse-soft: #505050; --mode-color-generic-fg-inverse-moderate: #616161; --mode-color-generic-fg-inverse-firm: #6f6f6f; --mode-color-generic-surface-nought: #FFFFFF; --mode-color-generic-surface-trace: #f4f5f6; --mode-color-generic-surface-faint: #e8eaec; --mode-color-generic-surface-harsh: #475a6a; --mode-color-generic-surface-severe: #304658; --mode-color-generic-surface-acute: #253b4e; --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%); --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%); --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%); --mode-color-action-ai-active-stop-1: #13a03826; --mode-color-action-ai-active-stop-2: #14919726; --mode-color-action-ai-active-stop-3: #a87cfb26; --mode-color-action-ai-hover-stop-1: #13a03814; --mode-color-action-ai-hover-stop-2: #14919714; --mode-color-action-ai-hover-stop-3: #a87cfb14; --mode-color-action-danger-active: #a30037; --mode-color-action-danger-default: #db004e; --mode-color-action-danger-default-alt: #c40044; --mode-color-action-danger-hover: #c40044; --mode-color-action-danger-hover-alt: #db004e26; --mode-color-action-danger-hover-alt2: #a30037; --mode-color-action-danger-with-active: #FFFFFF; --mode-color-action-danger-with-default: #FFFFFF; --mode-color-action-danger-inverse-active: #ff728d; --mode-color-action-danger-inverse-default: #f50059; --mode-color-action-danger-inverse-default-alt: #ff3e6a; --mode-color-action-danger-inverse-hover: #ff3e6a; --mode-color-action-danger-inverse-hover-alt: #f5005926; --mode-color-action-danger-inverse-hover-alt2: #ff728d; --mode-color-action-danger-inverse-with-active: #000000; --mode-color-action-danger-inverse-with-default: #000000; --mode-color-action-data-entry-default: #FFFFFF; --mode-color-action-data-entry-with-active: #000000; --mode-color-action-data-entry-with-active-alt: #FFFFFF; --mode-color-action-data-entry-with-hover: #000000; --mode-color-action-data-entry-hover-alt: #f4f5f6; --mode-color-action-data-entry-with-default: #75838f; --mode-color-action-data-entry-default-alt: #e8eaec; --mode-color-action-data-entry-txt: #000000f2; --mode-color-action-data-entry-txt-alt: #0000008c; --mode-color-action-data-entry-inverse-default: #000000; --mode-color-action-data-entry-inverse-with-default: #a3adb5; --mode-color-action-data-entry-inverse-txt: #fffffff2; --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c; --mode-color-action-focus-default: #000000; --mode-color-action-focus-txt: #000000; --mode-color-action-focus-with-default: #FFB500; --mode-color-action-focus-with-default-alt: #ffd274; --mode-color-action-focus-inverse-default: #FFB500; --mode-color-action-focus-inverse-txt: #FFFFFF; --mode-color-action-focus-inverse-with-default: #000000; --mode-color-action-focus-inverse-with-default-alt: #885e00; --mode-color-action-inactive-default: #0000004d; --mode-color-action-inactive-mask: #0006; --mode-color-action-inactive-default-alt: #eeeeee; --mode-color-action-inactive-txt: #0000006b; --mode-color-action-inactive-txt-alt: #FFFFFF; --mode-color-action-inactive-icon: #0000006b; --mode-color-action-inactive-icon-alt: #0000008c; --mode-color-action-inactive-inverse-default: #ffffff4d; --mode-color-action-inactive-inverse-txt: #ffffff6b; --mode-color-action-inactive-inverse-txt-alt: #000000; --mode-color-action-grayscale-active: #000000; --mode-color-action-grayscale-active-alt: #00000026; --mode-color-action-grayscale-default: #000000eb; --mode-color-action-grayscale-default-alt: #000000ab; --mode-color-action-grayscale-hover-alt: #0000001a; --mode-color-action-grayscale-hover: #00000026; --mode-color-action-grayscale-with-active: #FFFFFF; --mode-color-action-grayscale-with-active-alt: #000000; --mode-color-action-grayscale-with-default: #FFFFFF; --mode-color-action-grayscale-with-hover: #000000; --mode-color-action-grayscale-inverse-active: #FFFFFF; --mode-color-action-grayscale-inverse-active-alt: #ffffff26; --mode-color-action-grayscale-inverse-default: #ffffffeb; --mode-color-action-grayscale-inverse-default-alt: #ffffffab; --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a; --mode-color-action-grayscale-inverse-hover: #ffffff26; --mode-color-action-grayscale-inverse-with-active: #000000; --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF; --mode-color-action-grayscale-inverse-with-default: #000000; --mode-color-action-grayscale-inverse-with-hover: #FFFFFF; --mode-color-action-nav-active: #005e14; --mode-color-action-nav-default: #FFFFFF; --mode-color-action-nav-default-alt: #f4f5f6; --mode-color-action-nav-child: #FFFFFF; --mode-color-action-nav-child-alt: #e8eaec; --mode-color-action-nav-hover: #007219; --mode-color-action-nav-with-active: #FFFFFF; --mode-color-action-nav-with-default: #000000f2; --mode-color-action-nav-with-hover: #FFFFFF; --mode-color-action-nav-inverse-active: #005e14; --mode-color-action-nav-inverse-default: #000000; --mode-color-action-nav-inverse-default-alt: #181818; --mode-color-action-nav-inverse-child: #505050; --mode-color-action-nav-inverse-child-alt: #616161; --mode-color-action-nav-inverse-hover: #007219; --mode-color-action-nav-inverse-with-active: #FFFFFF; --mode-color-action-nav-inverse-with-default: #fffffff2; --mode-color-action-nav-inverse-with-hover: #FFFFFF; --mode-color-action-main-active: #005e14; --mode-color-action-main-active-alt: #00811f4d; --mode-color-action-main-default: #00811f; --mode-color-action-main-default-alt: #00811fcc; --mode-color-action-main-default-alt2: #007219; --mode-color-action-main-default-alt3: #00811f08; --mode-color-action-main-hover: #007219; --mode-color-action-main-hover-alt: #00811f26; --mode-color-action-main-hover-alt2: #005e14; --mode-color-action-main-with-active: #FFFFFF; --mode-color-action-main-with-default: #FFFFFF; --mode-color-action-main-with-hover: #FFFFFF; --mode-color-action-main-inverse-active: #8fff98; --mode-color-action-main-inverse-active-alt: #00f1424d; --mode-color-action-main-inverse-default: #00f142; --mode-color-action-main-inverse-default-alt: #00f142cc; --mode-color-action-main-inverse-default-alt2: #46fb5e; --mode-color-action-main-inverse-default-alt3: #00f14208; --mode-color-action-main-inverse-hover: #46fb5e; --mode-color-action-main-inverse-hover-alt: #00f14226; --mode-color-action-main-inverse-hover-alt2: #8fff98; --mode-color-action-main-inverse-with-active: #000000; --mode-color-action-main-inverse-with-default: #000000; --mode-color-action-main-inverse-with-hover: #000000; --mode-color-status-ai-default: #FFFFFF; --mode-color-status-ai-default-alt: #000000; --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%); --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%); --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%); --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%); --mode-color-status-callout-default-alt: #e0ffe2; --mode-color-status-callout-hover-alt: #b7ffbd; --mode-color-status-skeleton-stop-1: #75838f; --mode-color-status-skeleton-stop-2: #d1d6da; --mode-color-status-warning-default: #d64309; --mode-color-status-warning-default-alt: #fff7eb; --mode-color-status-warning-hover: #b33400; --mode-color-status-warning-hover-alt: #ffeaca; --mode-color-status-warning-txt: #b33400; --mode-color-status-warning-inverse-default: #e24300; --mode-color-status-warning-inverse-default-alt: #1d0300; --mode-color-status-warning-inverse-hover: #e5631c; --mode-color-status-warning-inverse-hover-alt: #360900; --mode-color-status-warning-inverse-txt: #e5631c; --mode-color-status-txt-with-default: #FFFFFF; --mode-color-status-txt-with-default-alt: #000000f2; --mode-color-status-txt-with-hover: #FFFFFF; --mode-color-status-txt-with-hover-alt: #000000; --mode-color-status-txt-loading: #747474; --mode-color-status-txt-inverse-with-default: #000000; --mode-color-status-txt-inverse-with-default-alt: #FFFFFF; --mode-color-status-txt-inverse-with-hover: #000000; --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF; --mode-color-status-custom-blue-default: #0071c3; --mode-color-status-custom-blue-default-alt: #f5f8ff; --mode-color-status-custom-blue-hover: #0063ad; --mode-color-status-custom-blue-hover-alt: #e4eeff; --mode-color-status-custom-teal-default: #007C7B; --mode-color-status-custom-teal-default-alt: #E8FCFC; --mode-color-status-custom-teal-hover: #006D6C; --mode-color-status-custom-teal-hover-alt: #C8F5F5; --mode-color-status-custom-green-default: #00811F; --mode-color-status-custom-green-default-alt: #EEFCEF; --mode-color-status-custom-green-hover: #007219; --mode-color-status-custom-green-hover-alt: #D1F6D6; --mode-color-status-custom-lime-default: #627600; --mode-color-status-custom-lime-default-alt: #f6f9f0; --mode-color-status-custom-lime-hover: #576900; --mode-color-status-custom-lime-hover-alt: #e8f1d4; --mode-color-status-custom-orange-default: #d64309; --mode-color-status-custom-orange-default-alt: #fff7eb; --mode-color-status-custom-orange-hover: #b33400; --mode-color-status-custom-orange-hover-alt: #ffeaca; --mode-color-status-custom-orange-txt: #b33400; --mode-color-status-custom-red-default: #db004e; --mode-color-status-custom-red-default-alt: #fff5f6; --mode-color-status-custom-red-hover: #c40044; --mode-color-status-custom-red-hover-alt: #ffe8ea; --mode-color-status-custom-pink-default: #c72699; --mode-color-status-custom-pink-default-alt: #fff5fa; --mode-color-status-custom-pink-hover: #b02086; --mode-color-status-custom-pink-hover-alt: #fee8f5; --mode-color-status-custom-purple-default: #8f4bd7; --mode-color-status-custom-purple-default-alt: #f9f6ff; --mode-color-status-custom-purple-hover: #803ec5; --mode-color-status-custom-purple-hover-alt: #F3EBFE; --mode-color-status-custom-gray-default: #6f6f6f; --mode-color-status-custom-gray-default-alt: #f8f8f8; --mode-color-status-custom-gray-hover: #616161; --mode-color-status-custom-gray-hover-alt: #eeeeee; --mode-color-status-custom-slate-default: #536574; --mode-color-status-custom-slate-default-alt: #f4f5f6; --mode-color-status-custom-slate-hover: #475a6a; --mode-color-status-custom-slate-hover-alt: #e8eaec; --mode-color-status-priority-default: #8f4bd7; --mode-color-status-priority-default-alt: #f9f6ff; --mode-color-status-priority-hover: #803ec5; --mode-color-status-priority-hover-alt: #F3EBFE; --mode-color-status-priority-inverse-default: #9463d7; --mode-color-status-priority-inverse-default-alt: #10041f; --mode-color-status-priority-inverse-hover: #a375dd; --mode-color-status-priority-inverse-hover-alt: #220c3a; --mode-color-status-inactive-default: #75838f; --mode-color-status-inactive-with-default: #0000008c; --mode-color-status-inactive-inverse-default: #6f6f6f; --mode-color-status-inactive-inverse-with-default: #ffffff8c; --mode-color-status-info-default: #0071c3; --mode-color-status-info-default-alt: #f5f8ff; --mode-color-status-info-hover: #0063ad; --mode-color-status-info-hover-alt: #e4eeff; --mode-color-status-info-inverse-default: #007fd9; --mode-color-status-info-inverse-default-alt: #000b1c; --mode-color-status-info-inverse-hover: #008ef4; --mode-color-status-info-inverse-hover-alt: #001932; --mode-color-status-negative-default: #db004e; --mode-color-status-negative-default-alt: #fff5f6; --mode-color-status-negative-hover: #c40044; --mode-color-status-negative-hover-alt: #ffe8ea; --mode-color-status-negative-inverse-default: #f50059; --mode-color-status-negative-inverse-default-alt: #1e0005; --mode-color-status-negative-inverse-hover: #ff3e6a; --mode-color-status-negative-inverse-hover-alt: #3c000f; --mode-color-status-neutral-default: #6f6f6f; --mode-color-status-neutral-default-alt: #f8f8f8; --mode-color-status-neutral-hover: #616161; --mode-color-status-neutral-hover-alt: #eeeeee; --mode-color-status-neutral-inverse-default: #7c7c7c; --mode-color-status-neutral-inverse-default-alt: #0b0b0b; --mode-color-status-neutral-inverse-hover: #8b8b8b; --mode-color-status-neutral-inverse-hover-alt: #181818; --mode-color-status-positive-default: #00811F; --mode-color-status-positive-default-alt: #EEFCEF; --mode-color-status-positive-hover: #007219; --mode-color-status-positive-hover-alt: #D1F6D6; --mode-color-status-positive-inverse-default: #019127; --mode-color-status-positive-inverse-default-alt: #001001; --mode-color-status-positive-inverse-hover: #007219; --mode-color-status-positive-inverse-hover-alt: #001f03; --table-header-subtle-bg-alt: var(--mode-color-generic-surface-trace); --table-header-subtle-bg-default: var(--mode-color-none); --table-header-subtle-bg-hover: var(--mode-color-generic-surface-faint); --table-header-subtle-border-default: var(--mode-color-generic-fg-soft); --table-header-subtle-label-hover: var(--mode-color-generic-txt-extreme); --table-header-harsh-bg-alt: var(--mode-color-generic-surface-severe); --table-header-harsh-bg-default: var(--mode-color-generic-surface-harsh); --table-header-harsh-bg-hover: var(--mode-color-generic-surface-acute); --table-header-harsh-border-default: var(--mode-color-generic-fg-soft); --table-header-harsh-label-hover: var(--mode-color-generic-txt-inverse-extreme); --table-row-bg-default: var(--mode-color-generic-bg-nought); --table-row-bg-alt: var(--mode-color-generic-bg-delicate); --table-row-bg-alt2: var(--mode-color-generic-bg-faint); --table-row-bg-selected: var(--mode-color-generic-bg-soft); --table-row-border-default: var(--mode-color-generic-fg-soft); --table-row-label-selected: var(--mode-color-generic-txt-extreme); --table-footer-bg-default: var(--mode-color-generic-bg-soft); --table-footer-border-default: var(--mode-color-generic-fg-soft); --table-header-subtle-label-default: var(--mode-color-generic-txt-severe); --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe); --table-row-label-default: var(--mode-color-generic-txt-severe); --table-footer-label-default: var(--mode-color-generic-txt-severe); --tab-bg-active: var(--mode-color-action-grayscale-with-active); --tab-bg-default: var(--mode-color-none); --tab-bg-hover: var(--mode-color-generic-bg-delicate); --tab-border-active-alt: var(--mode-color-generic-fg-moderate); --tab-border-active: var(--mode-color-action-grayscale-active); --tab-border-default: var(--mode-color-generic-fg-moderate); --tab-border-hover: var(--mode-color-generic-fg-firm); --tab-icon-hover: var(--mode-color-action-grayscale-with-hover); --tab-label-active: var(--mode-color-action-grayscale-active); --tab-icon-active: var(--mode-color-action-grayscale-active); --tab-label-hover: var(--mode-color-action-grayscale-with-hover); --tab-nav-bg-default: var(--mode-color-generic-bg-nought); --tab-validation-border-warning: var(--mode-color-status-warning-default); --tab-validation-border-error: var(--mode-color-status-negative-default); --tab-validation-icon-error: var(--mode-color-status-negative-default); --tab-validation-icon-warning: var(--mode-color-status-warning-default); --tab-validation-label-error: var(--mode-color-status-negative-default); --tab-validation-label-warning: var(--mode-color-status-warning-txt); --tab-icon-default: var(--mode-color-action-grayscale-default-alt); --tab-label-default: var(--mode-color-action-grayscale-default); --progress-none: var(--mode-color-none); --progress-bg-default: var(--mode-color-generic-bg-delicate); --progress-border-default: var(--mode-color-generic-fg-firm); --progress-fg-alt: var(--mode-color-status-positive-default); --progress-fg-caution: var(--mode-color-status-warning-default); --progress-fg-default: var(--mode-color-action-grayscale-active); --progress-fg-error: var(--mode-color-status-negative-default); --progress-fg-info: var(--mode-color-status-info-default); --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default); --progress-loader-bg-default: var(--mode-color-generic-bg-delicate); --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%); --progress-loader-fg-default: var(--mode-color-generic-fg-inverse-nought); --progress-loader-fg-error: var(--mode-color-status-negative-default); --progress-loader-fg-complete: var(--mode-color-status-positive-default); --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate); --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-nought); --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active); --progress-stepflow-bg-complete: var(--mode-color-status-positive-default); --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought); --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought); --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active); --progress-stepflow-border-default: var(--mode-color-generic-fg-firm); --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active); --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default); --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active); --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm); --progress-stepindicator-border-success: var(--mode-color-status-positive-default); --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active); --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active); --progress-fg-alt2: var(--mode-color-generic-txt-soft); --progress-label-alt: var(--mode-color-generic-txt-moderate); --progress-label-default: var(--mode-color-generic-txt-severe); --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft); --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft); --progress-stepflow-label-default: var(--mode-color-generic-txt-severe); --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe); --profile-size-outside-ml: 56px; --profile-size-outside-xl: 104px; --profile-size-outside-xxl: 128px; --profile-bg-def: var(--mode-color-generic-bg-nought); --profile-border-default: var(--mode-color-generic-fg-moderate); --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt); --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default); --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt); --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default); --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt); --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default); --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt); --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default); --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt); --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt); --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt); --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default); --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt); --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default); --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt); --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default); --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt); --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default); --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt); --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default); --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs); --profile-font-initials-s: var(--global-font-static-comp-placeholder-s); --profile-font-initials-m: var(--global-font-static-comp-placeholder-m); --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml); --profile-font-initials-l: var(--global-font-static-comp-placeholder-l); --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl); --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl); --profile-font-heading-xs: var(--global-font-static-comp-medium-s); --profile-font-heading-s: var(--global-font-static-comp-medium-m); --profile-font-heading-m: var(--global-font-static-subheading-l); --profile-font-heading-ml: var(--global-font-static-subheading-l); --profile-font-heading-l: var(--global-font-static-subheading-l); --profile-font-heading-xl: var(--global-font-static-heading-m); --profile-font-heading-xxl: var(--global-font-static-heading-l); --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs); --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s); --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m); --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml); --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l); --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl); --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl); --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s); --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m); --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l); --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l); --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l); --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m); --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l); --profile-bg-alt: var(--mode-color-generic-txt-severe); --profile-label-default: var(--mode-color-generic-txt-severe); --profile-size-outside-xs: var(--global-size-xs); --profile-size-outside-s: var(--global-size-s); --profile-size-outside-m: var(--global-size-m); --profile-size-outside-l: var(--global-size-4-xl); --profile-size-inside-xs: var(--global-size-3-xs); --profile-size-inside-s: var(--global-size-2-xs); --profile-size-inside-m: var(--global-size-xs); --profile-size-inside-ml: var(--global-size-s); --profile-size-inside-l: var(--global-size-l); --profile-size-inside-xl: var(--global-size-2-xl); --profile-size-inside-xxl: var(--global-size-4-xl); --popover-bg-active: var(--mode-color-action-grayscale-active); --popover-bg-default: var(--mode-color-generic-bg-nought); --popover-bg-hover: var(--mode-color-action-data-entry-hover-alt); --popover-label-active: var(--mode-color-action-grayscale-with-active); --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover); --popover-label-hover: var(--mode-color-action-grayscale-with-hover); --popover-submenu-bg-default: var(--mode-color-generic-bg-faint); --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt); --popover-label-default: var(--mode-color-action-grayscale-default-alt); --popover-label-disabled: var(--mode-color-action-inactive-txt); --pill-generic-none: var(--mode-color-none); --pill-blue-bg-default: var(--mode-color-status-info-default); --pill-blue-bg-alt-default: var(--mode-color-status-info-default-alt); --pill-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt); --pill-blue-bg-hover: var(--mode-color-status-info-hover); --pill-blue-border-default: var(--mode-color-status-info-default); --pill-blue-inverse-bg-default: var(--mode-color-status-info-inverse-default); --pill-blue-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt); --pill-blue-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt); --pill-blue-inverse-bg-hover: var(--mode-color-status-info-inverse-hover); --pill-blue-inverse-border-default: var(--mode-color-status-info-inverse-default); --pill-green-bg-default: var(--mode-color-status-positive-default); --pill-green-bg-alt-default: var(--mode-color-status-positive-default-alt); --pill-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt); --pill-green-bg-hover: var(--mode-color-status-positive-hover); --pill-green-border-default: var(--mode-color-status-positive-default); --pill-green-inverse-bg-default: var(--mode-color-status-positive-inverse-default); --pill-green-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt); --pill-green-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt); --pill-green-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover); --pill-green-inverse-border-default: var(--mode-color-status-positive-inverse-default); --pill-gray-bg-default: var(--mode-color-status-neutral-default); --pill-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt); --pill-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt); --pill-gray-bg-hover: var(--mode-color-status-neutral-hover); --pill-gray-border-default: var(--mode-color-status-neutral-default); --pill-gray-inverse-bg-default: var(--mode-color-status-neutral-inverse-default); --pill-gray-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt); --pill-gray-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt); --pill-gray-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover); --pill-gray-inverse-border-default: var(--mode-color-status-neutral-inverse-default); --pill-lime-bg-default: var(--mode-color-status-custom-lime-default); --pill-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt); --pill-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt); --pill-lime-bg-hover: var(--mode-color-status-custom-lime-hover); --pill-lime-border-default: var(--mode-color-status-custom-lime-default); --pill-orange-bg-default: var(--mode-color-status-warning-default); --pill-orange-bg-alt-default: var(--mode-color-status-warning-default-alt); --pill-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt); --pill-orange-bg-hover: var(--mode-color-status-warning-hover); --pill-orange-border-default: var(--mode-color-status-warning-default); --pill-orange-inverse-bg-default: var(--mode-color-status-warning-inverse-default); --pill-orange-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt); --pill-orange-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt); --pill-orange-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover); --pill-orange-inverse-border-default: var(--mode-color-status-warning-inverse-default); --pill-pink-bg-default: var(--mode-color-status-custom-pink-default); --pill-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt); --pill-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt); --pill-pink-bg-hover: var(--mode-color-status-custom-pink-hover); --pill-pink-border-default: var(--mode-color-status-custom-pink-default); --pill-purple-bg-default: var(--mode-color-status-priority-default); --pill-purple-bg-alt-default: var(--mode-color-status-priority-default-alt); --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt); --pill-purple-bg-hover: var(--mode-color-status-priority-hover); --pill-purple-border-default: var(--mode-color-status-priority-default); --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default); --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt); --pill-purple-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt); --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-hover); --pill-purple-inverse-border-default: var(--mode-color-status-priority-default); --pill-red-bg-default: var(--mode-color-status-negative-default); --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt); --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt); --pill-red-bg-hover: var(--mode-color-status-negative-hover); --pill-red-border-default: var(--mode-color-status-negative-default); --pill-red-inverse-bg-default: var(--mode-color-status-negative-inverse-default); --pill-red-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt); --pill-red-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt); --pill-red-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover); --pill-red-inverse-border-default: var(--mode-color-status-negative-inverse-default); --pill-slate-bg-default: var(--mode-color-status-custom-slate-default); --pill-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt); --pill-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt); --pill-slate-bg-hover: var(--mode-color-status-custom-slate-hover); --pill-slate-border-default: var(--mode-color-status-custom-slate-default); --pill-teal-bg-default: var(--mode-color-status-custom-teal-default); --pill-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt); --pill-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt); --pill-teal-bg-hover: var(--mode-color-status-custom-teal-hover); --pill-teal-border-default: var(--mode-color-status-custom-teal-default); --pill-generic-label-default: var(--mode-color-status-txt-with-default); --pill-generic-label-hover: var(--mode-color-status-txt-with-hover); --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default); --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover); --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt); --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt); --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt); --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt); --page-bg-default: var(--mode-color-generic-surface-nought); --page-bg-alt: var(--mode-color-generic-surface-trace); --page-txt-alt: var(--mode-color-generic-txt-moderate); --page-txt-default: var(--mode-color-generic-txt-severe); --nav-primary-bg-active: var(--mode-color-action-nav-active); --nav-primary-bg-default: var(--mode-color-generic-bg-inverse-nought); --nav-primary-bg-hover: var(--mode-color-action-nav-hover); --nav-primary-bg-child: var(--mode-color-action-nav-inverse-child); --nav-primary-bg-child-alt: var(--mode-color-action-nav-inverse-child-alt); --nav-primary-bg-selected: var(--mode-color-generic-fg-soft); --nav-primary-border-default: var(--mode-color-generic-fg-inverse-soft); --nav-primary-divider: var(--mode-color-generic-fg-inverse-firm); --nav-primary-label-active: var(--mode-color-action-nav-with-active); --nav-primary-label-hover: var(--mode-color-action-nav-with-hover); --nav-secondary-bg-active: var(--mode-color-action-nav-active); --nav-secondary-bg-default: var(--mode-color-action-nav-inverse-default-alt); --nav-secondary-bg-hover: var(--mode-color-action-nav-hover); --nav-secondary-bg-selected: var(--mode-color-generic-fg-soft); --nav-secondary-label-active: var(--mode-color-action-nav-with-active); --nav-secondary-label-hover: var(--mode-color-action-nav-with-hover); --nav-tertiary-bg-active: var(--mode-color-action-nav-active); --nav-tertiary-bg-default: var(--mode-color-generic-bg-nought); --nav-tertiary-bg-hover: var(--mode-color-action-nav-hover); --nav-tertiary-bg-child: var(--mode-color-action-nav-child); --nav-tertiary-bg-child-alt: var(--mode-color-action-nav-child-alt); --nav-tertiary-bg-selected: var(--mode-color-generic-fg-firm); --nav-tertiary-border-default: var(--mode-color-generic-fg-soft); --nav-tertiary-divider: var(--mode-color-generic-bg-soft); --nav-tertiary-label-active: var(--mode-color-action-nav-with-active); --nav-tertiary-label-hover: var(--mode-color-action-nav-with-hover); --nav-primary-label-default-alt: var(--mode-color-generic-txt-inverse-moderate); --nav-secondary-label-default-alt: var(--mode-color-generic-txt-inverse-moderate); --nav-tertiary-label-default-alt: var(--mode-color-generic-txt-moderate); --nav-primary-label-default: var(--mode-color-action-nav-inverse-with-default); --nav-secondary-label-default: var(--mode-color-action-nav-inverse-with-default); --nav-tertiary-label-default: var(--mode-color-action-nav-with-default); --message-none: var(--mode-color-none); --message-contextual-bg: var(--mode-color-generic-bg-nought); --message-contextual-icon: var(--mode-color-generic-bg-nought); --message-contextual-icon-alt: var(--mode-color-status-neutral-default); --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt); --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt); --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt); --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt); --message-contextual-error-bg-default: var(--mode-color-status-negative-default); --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt); --message-contextual-error-border-default: var(--mode-color-status-negative-default); --message-contextual-error-icon: var(--mode-color-status-negative-default); --message-contextual-info-bg-default: var(--mode-color-status-info-default); --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt); --message-contextual-info-border-default: var(--mode-color-status-info-default); --message-contextual-info-icon: var(--mode-color-status-info-default); --message-contextual-success-bg-default: var(--mode-color-status-positive-default); --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt); --message-contextual-success-border-default: var(--mode-color-status-positive-default); --message-contextual-success-icon: var(--mode-color-status-positive-default); --message-contextual-warning-bg-default: var(--mode-color-status-warning-default); --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt); --message-contextual-warning-border-default: var(--mode-color-status-warning-default); --message-contextual-warning-icon: var(--mode-color-status-warning-default); --message-global-label-hover: var(--mode-color-action-grayscale-with-hover); --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt); --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt); --message-global-info-bg-default: var(--mode-color-status-info-default-alt); --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt); --message-global-info-icon: var(--mode-color-status-info-default); --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt); --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt); --message-global-warning-icon: var(--mode-color-status-warning-default); --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt); --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt); --message-global-label-default: var(--mode-color-status-txt-with-default-alt); --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt); --logo-sage-bg-default: var(--mode-color-brand-default); --logo-sage-bg-alt: var(--mode-color-brand-default-alt); --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default); --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt); --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome); --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default); --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default); --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default); --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default); --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default); --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default); --link-destructive-label-default: var(--mode-color-action-danger-default-alt); --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2); --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt); --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2); --link-typical-label-default: var(--mode-color-action-main-default-alt2); --link-typical-label-hover: var(--mode-color-action-main-hover-alt2); --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2); --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2); --link-subtle-label-hover: var(--mode-color-action-grayscale-active); --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active); --link-subtle-label-default: var(--mode-color-action-grayscale-default); --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default); --input-switch-border-active: transparent; --input-switch-border-active-disabled: transparent; --input-calendar-bg-active: var(--mode-color-action-grayscale-active); --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt); --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt); --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt); --input-calendar-border-duration: var(--mode-color-action-grayscale-active); --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active); --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover); --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt); --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active); --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover); --input-labelset-label-required: var(--mode-color-action-danger-default); --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default); --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt); --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt); --input-typical-bg-default: var(--mode-color-action-data-entry-default); --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt); --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt); --input-typical-border-alt: var(--mode-color-action-inactive-default); --input-typical-border-default: var(--mode-color-action-data-entry-with-default); --input-typical-border-disabled: var(--mode-color-action-inactive-default); --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover); --input-typical-border-read-only: var(--mode-color-action-inactive-default); --input-typical-icon-active: var(--mode-color-action-data-entry-with-active); --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover); --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt); --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover); --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default); --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default); --input-switch-bg-active: var(--mode-color-action-grayscale-active); --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default); --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt); --input-switch-bg-default: var(--mode-color-action-data-entry-default); --input-switch-border-disabled: var(--mode-color-action-inactive-default); --input-switch-border-default: var(--mode-color-action-data-entry-with-default); --input-switch-fg-active: var(--mode-color-action-grayscale-with-active); --input-switch-fg-disabled: var(--mode-color-action-inactive-default); --input-switch-fg-default: var(--mode-color-action-data-entry-with-default); --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default); --input-switch-label-disabled: var(--mode-color-action-inactive-default); --input-validation-border-error: var(--mode-color-status-negative-default); --input-validation-bar-error: var(--mode-color-status-negative-default); --input-validation-bar-warn: var(--mode-color-status-warning-default); --input-validation-label-error: var(--mode-color-status-negative-default); --input-validation-label-success: var(--mode-color-status-positive-default); --input-validation-label-warn: var(--mode-color-status-warning-txt); --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default); --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default); --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default); --input-typical-txt-read-only: var(--mode-color-generic-txt-severe); --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt); --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt); --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt); --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt); --input-calendar-txt-default: var(--mode-color-action-data-entry-txt); --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt); --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt); --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt); --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt); --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt); --input-labelset-label-default: var(--mode-color-action-data-entry-txt); --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt); --input-labelset-label-disabled: var(--mode-color-action-inactive-txt); --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt); --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt); --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt); --input-typical-icon-default: var(--mode-color-action-data-entry-txt); --input-typical-icon-disabled: var(--mode-color-action-inactive-icon); --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt); --input-typical-txt-active: var(--mode-color-action-data-entry-txt); --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt); --input-typical-txt-default: var(--mode-color-action-data-entry-txt); --input-typical-txt-disabled: var(--mode-color-action-inactive-txt); --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt); --input-switch-label-active: var(--mode-color-action-data-entry-txt); --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt); --focus-bg: var(--mode-color-action-focus-with-default-alt); --focus-borderalt: var(--mode-color-action-focus-default); --focus-border: var(--mode-color-action-focus-with-default); --focus-label: var(--mode-color-action-focus-txt); --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt); --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default); --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default); --focus-inverse-label: var(--mode-color-action-focus-inverse-txt); --dataviz-chart-bar-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint); --dataviz-chart-bar-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense); --dataviz-chart-bar-fuchsia-border: var(--mode-color-colorcode-pink-intense); --dataviz-chart-bar-fuchsia-pattern: var(--mode-color-colorcode-pink-intense); --dataviz-chart-bar-red-bg-alt: var(--mode-color-colorcode-red-faint); --dataviz-chart-bar-red-bg-default: var(--mode-color-colorcode-red-intense); --dataviz-chart-bar-red-border: var(--mode-color-colorcode-red-intense); --dataviz-chart-bar-red-pattern: var(--mode-color-colorcode-red-intense); --dataviz-chart-bar-pink-bg-alt: var(--mode-color-colorcode-red-faint); --dataviz-chart-bar-pink-bg-default: var(--mode-color-colorcode-red-soft); --dataviz-chart-bar-pink-border: var(--mode-color-colorcode-red-soft); --dataviz-chart-bar-pink-pattern: var(--mode-color-colorcode-red-soft); --dataviz-chart-bar-orange-bg-alt: var(--mode-color-colorcode-orange-faint); --dataviz-chart-bar-orange-bg-default: var(--mode-color-colorcode-orange-harsh); --dataviz-chart-bar-orange-border: var(--mode-color-colorcode-orange-harsh); --dataviz-chart-bar-orange-pattern: var(--mode-color-colorcode-orange-harsh); --dataviz-chart-bar-gold-bg-alt: var(--mode-color-colorcode-yellow-faint); --dataviz-chart-bar-gold-bg-default: var(--mode-color-colorcode-yellow-soft); --dataviz-chart-bar-gold-border: var(--mode-color-colorcode-yellow-harsh); --dataviz-chart-bar-gold-pattern: var(--mode-color-colorcode-yellow-harsh); --dataviz-chart-bar-lime-bg-alt: var(--mode-color-colorcode-lime-faint); --dataviz-chart-bar-lime-bg-default: var(--mode-color-colorcode-lime-harsh); --dataviz-chart-bar-lime-border: var(--mode-color-colorcode-lime-harsh); --dataviz-chart-bar-lime-pattern: var(--mode-color-colorcode-lime-harsh); --dataviz-chart-bar-green-bg-alt: var(--mode-color-colorcode-green-faint); --dataviz-chart-bar-green-bg-default: var(--mode-color-colorcode-green-harsh); --dataviz-chart-bar-green-border: var(--mode-color-colorcode-green-harsh); --dataviz-chart-bar-green-pattern: var(--mode-color-colorcode-green-harsh); --dataviz-chart-bar-teal-bg-alt: var(--mode-color-colorcode-teal-faint); --dataviz-chart-bar-teal-bg-default: var(--mode-color-colorcode-teal-soft); --dataviz-chart-bar-teal-border: var(--mode-color-colorcode-teal-soft); --dataviz-chart-bar-teal-pattern: var(--mode-color-colorcode-teal-soft); --dataviz-chart-bar-blue-bg-alt: var(--mode-color-colorcode-blue-faint); --dataviz-chart-bar-blue-bg-default: var(--mode-color-colorcode-blue-soft); --dataviz-chart-bar-blue-border: var(--mode-color-colorcode-blue-soft); --dataviz-chart-bar-blue-pattern: var(--mode-color-colorcode-blue-soft); --dataviz-chart-bar-navy-bg-alt: var(--mode-color-colorcode-blue-faint); --dataviz-chart-bar-navy-bg-default: var(--mode-color-colorcode-blue-intense); --dataviz-chart-bar-navy-border: var(--mode-color-colorcode-blue-intense); --dataviz-chart-bar-navy-pattern: var(--mode-color-colorcode-blue-intense); --dataviz-chart-bar-purple-bg-alt: var(--mode-color-colorcode-purple-faint); --dataviz-chart-bar-purple-bg-default: var(--mode-color-colorcode-purple-intense); --dataviz-chart-bar-purple-border: var(--mode-color-colorcode-purple-intense); --dataviz-chart-bar-purple-pattern: var(--mode-color-colorcode-purple-intense); --dataviz-chart-bar-slate-bg-alt: var(--mode-color-colorcode-slate-faint); --dataviz-chart-bar-slate-bg-default: var(--mode-color-colorcode-slate-intense); --dataviz-chart-bar-slate-border: var(--mode-color-colorcode-slate-intense); --dataviz-chart-bar-slate-pattern: var(--mode-color-colorcode-slate-intense); --dataviz-chart-donut-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint); --dataviz-chart-donut-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense); --dataviz-chart-donut-fuchsia-border: var(--mode-color-colorcode-pink-intense); --dataviz-chart-donut-fuchsia-pattern: var(--mode-color-colorcode-pink-intense); --dataviz-chart-donut-red-bg-alt: var(--mode-color-colorcode-red-faint); --dataviz-chart-donut-red-bg-default: var(--mode-color-colorcode-red-intense); --dataviz-chart-donut-red-border: var(--mode-color-colorcode-red-intense); --dataviz-chart-donut-red-pattern: var(--mode-color-colorcode-red-intense); --dataviz-chart-donut-pink-bg-alt: var(--mode-color-colorcode-red-faint); --dataviz-chart-donut-pink-bg-default: var(--mode-color-colorcode-red-soft); --dataviz-chart-donut-pink-border: var(--mode-color-colorcode-red-soft); --dataviz-chart-donut-pink-pattern: var(--mode-color-colorcode-red-soft); --dataviz-chart-donut-orange-bg-alt: var(--mode-color-colorcode-orange-faint); --dataviz-chart-donut-orange-bg-default: var(--mode-color-colorcode-orange-harsh); --dataviz-chart-donut-orange-border: var(--mode-color-colorcode-orange-harsh); --dataviz-chart-donut-orange-pattern: var(--mode-color-colorcode-orange-harsh); --dataviz-chart-donut-gold-bg-alt: var(--mode-color-colorcode-yellow-faint); --dataviz-chart-donut-gold-bg-default: var(--mode-color-colorcode-yellow-soft); --dataviz-chart-donut-gold-border: var(--mode-color-colorcode-yellow-harsh); --dataviz-chart-donut-gold-pattern: var(--mode-color-colorcode-yellow-harsh); --dataviz-chart-donut-lime-bg-alt: var(--mode-color-colorcode-lime-faint); --dataviz-chart-donut-lime-bg-default: var(--mode-color-colorcode-lime-harsh); --dataviz-chart-donut-lime-border: var(--mode-color-colorcode-lime-harsh); --dataviz-chart-donut-lime-pattern: var(--mode-color-colorcode-lime-harsh); --dataviz-chart-donut-green-bg-alt: var(--mode-color-colorcode-green-faint); --dataviz-chart-donut-green-bg-default: var(--mode-color-colorcode-green-harsh); --dataviz-chart-donut-green-border: var(--mode-color-colorcode-green-harsh); --dataviz-chart-donut-green-pattern: var(--mode-color-colorcode-green-harsh); --dataviz-chart-donut-teal-bg-alt: var(--mode-color-colorcode-teal-faint); --dataviz-chart-donut-teal-bg-default: var(--mode-color-colorcode-teal-soft); --dataviz-chart-donut-teal-border: var(--mode-color-colorcode-teal-soft); --dataviz-chart-donut-teal-pattern: var(--mode-color-colorcode-teal-soft); --dataviz-chart-donut-blue-bg-alt: var(--mode-color-colorcode-blue-faint); --dataviz-chart-donut-blue-bg-default: var(--mode-color-colorcode-blue-soft); --dataviz-chart-donut-blue-border: var(--mode-color-colorcode-blue-soft); --dataviz-chart-donut-blue-pattern: var(--mode-color-colorcode-blue-soft); --dataviz-chart-donut-navy-bg-alt: var(--mode-color-colorcode-blue-faint); --dataviz-chart-donut-navy-bg-default: var(--mode-color-colorcode-blue-intense); --dataviz-chart-donut-navy-border: var(--mode-color-colorcode-blue-intense); --dataviz-chart-donut-navy-pattern: var(--mode-color-colorcode-blue-intense); --dataviz-chart-donut-purple-bg-alt: var(--mode-color-colorcode-purple-faint); --dataviz-chart-donut-purple-bg-default: var(--mode-color-colorcode-purple-intense); --dataviz-chart-donut-purple-border: var(--mode-color-colorcode-purple-intense); --dataviz-chart-donut-purple-pattern: var(--mode-color-colorcode-purple-intense); --dataviz-chart-donut-slate-bg-alt: var(--mode-color-colorcode-slate-faint); --dataviz-chart-donut-slate-bg-default: var(--mode-color-colorcode-slate-intense); --dataviz-chart-donut-slate-border: var(--mode-color-colorcode-slate-intense); --dataviz-chart-donut-slate-pattern: var(--mode-color-colorcode-slate-intense); --dataviz-chart-line-fuchsia: var(--mode-color-colorcode-pink-intense); --dataviz-chart-line-red: var(--mode-color-colorcode-red-intense); --dataviz-chart-line-pink: var(--mode-color-colorcode-red-soft); --dataviz-chart-line-orange: var(--mode-color-colorcode-orange-harsh); --dataviz-chart-line-gold: var(--mode-color-colorcode-yellow-harsh); --dataviz-chart-line-lime: var(--mode-color-colorcode-lime-harsh); --dataviz-chart-line-green: var(--mode-color-colorcode-green-harsh); --dataviz-chart-line-teal: var(--mode-color-colorcode-teal-soft); --dataviz-chart-line-blue: var(--mode-color-colorcode-blue-soft); --dataviz-chart-line-navy: var(--mode-color-colorcode-blue-intense); --dataviz-chart-line-purple: var(--mode-color-colorcode-purple-intense); --dataviz-chart-line-slate: var(--mode-color-colorcode-slate-intense); --dataviz-generic-label-alt: var(--mode-color-generic-txt-inverse-extreme); --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme); --dataviz-generic-pending-bg-default: var(--mode-color-generic-bg-nought); --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-harsh); --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-faint); --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-harsh); --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-harsh); --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-harsh); --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-faint); --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-harsh); --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-harsh); --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-harsh); --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-faint); --dataviz-generic-green-border: var(--mode-color-colorcode-green-harsh); --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-harsh); --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-harsh); --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-faint); --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-harsh); --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-harsh); --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-harsh); --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-faint); --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-harsh); --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-harsh); --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-harsh); --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-faint); --dataviz-generic-red-border: var(--mode-color-colorcode-red-harsh); --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-harsh); --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-harsh); --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-faint); --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-harsh); --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-harsh); --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-harsh); --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-faint); --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-harsh); --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-harsh); --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-harsh); --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-faint); --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-harsh); --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-harsh); --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-harsh); --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-faint); --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-harsh); --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-harsh); --container-size-fluid-items-2-xs: 80px; --container-size-fluid-items-xs: 128px; --container-size-fluid-items-s: 160px; --container-size-fluid-items-m: 200px; --container-size-fluid-items-l: 240px; --container-size-fluid-items-xl: 288px; --container-size-fluid-items-2-xl: 320px; --container-size-fluid-items-3-xl: 560px; --container-size-fluid-items-4-xl: 760px; --container-action-bg-footer-activated: var(--mode-color-status-positive-default); --container-action-bg-footer-active: var(--mode-color-action-grayscale-active); --container-action-border-activated: var(--mode-color-status-positive-default); --container-action-bg-footer-default: var(--mode-color-generic-bg-nought); --container-action-bg-default: var(--mode-color-generic-bg-nought); --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt); --container-action-border-active: var(--mode-color-action-grayscale-active); --container-action-border-alt: var(--mode-color-generic-fg-moderate); --container-action-border-inactive: var(--mode-color-generic-fg-firm); --container-action-border-default: var(--mode-color-generic-fg-firm); --container-action-icon-active: var(--mode-color-action-grayscale-active); --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active); --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active); --container-action-txt-active: var(--mode-color-action-grayscale-active); --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default); --container-action-target-bg-default: var(--mode-color-status-info-default); --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint); --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm); --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft); --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm); --container-standard-bg-alt: var(--mode-color-generic-bg-faint); --container-standard-bg-default: var(--mode-color-generic-bg-nought); --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint); --container-standard-border-active: var(--mode-color-action-grayscale-active); --container-standard-border-alt: var(--mode-color-generic-fg-firm); --container-standard-border-default: var(--mode-color-generic-fg-soft); --container-standard-dimmer: var(--mode-color-action-inactive-mask); --container-standard-icon: var(--mode-color-generic-fg-firm); --container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate); --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm); --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought); --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft); --container-standard-priority-bg-caution: var(--mode-color-status-warning-default); --container-standard-priority-bg-negative: var(--mode-color-status-negative-default); --container-standard-priority-bg-prio: var(--mode-color-status-priority-default); --container-standard-priority-bg-info: var(--mode-color-status-info-default); --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default); --container-standard-priority-bg-positive: var(--mode-color-status-positive-default); --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default); --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default); --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default); --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default); --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default); --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default); --container-quote-border: var(--mode-color-action-main-default); --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt); --container-action-borderalt-hover: var(--mode-color-action-grayscale-default); --container-action-icon-default: var(--mode-color-action-grayscale-default); --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt); --container-action-icon-hover: var(--mode-color-action-grayscale-default); --container-action-txt-default: var(--mode-color-generic-txt-severe); --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate); --container-action-txt-hover: var(--mode-color-action-grayscale-default); --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal); --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical); --container-standard-txt-alt: var(--mode-color-generic-txt-moderate); --container-standard-txt-default: var(--mode-color-generic-txt-severe); --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate); --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe); --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical); --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical); --container-action-txt-disabled: var(--mode-color-action-inactive-txt); --button-none: var(--mode-color-none); --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%); --button-ai-border-disabled: var(--mode-color-action-inactive-default); --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%); --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%); --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt); --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover); --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default); --button-destructive-primary-bg-default: var(--mode-color-action-danger-default); --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover); --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default); --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default); --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt); --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default); --button-destructive-secondary-border-default: var(--mode-color-action-danger-default); --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover); --button-destructive-secondary-label-default: var(--mode-color-action-danger-default); --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover); --button-typical-primary-bg-active: var(--mode-color-action-main-active); --button-typical-primary-border-default: var(--mode-color-action-main-with-default); --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default); --button-typical-primary-bg-default: var(--mode-color-action-main-default); --button-typical-primary-bg-hover: var(--mode-color-action-main-hover); --button-typical-primary-label-active: var(--mode-color-action-main-with-active); --button-typical-primary-label-default: var(--mode-color-action-main-with-default); --button-typical-primary-label-hover: var(--mode-color-action-main-with-default); --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active); --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default); --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default); --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default); --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover); --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active); --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default); --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default); --button-typical-secondary-border-active: var(--mode-color-action-main-active); --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default); --button-typical-secondary-border-hover: var(--mode-color-action-main-hover); --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt); --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover); --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active); --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default); --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover); --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt); --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default); --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover); --button-typical-tertiary-border-active: var(--mode-color-action-main-active); --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default); --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover); --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt); --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover); --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active); --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default); --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover); --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt); --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default); --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover); --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt); --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover); --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt); --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default); --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover); --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default); --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active); --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default); --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active); --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover); --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default); --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default); --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default); --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default); --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default); --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default); --button-ai-label-default: var(--mode-color-action-grayscale-default); --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt); --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt); --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt); --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt); --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3); --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt); --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt); --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default); --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt); --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3); --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt); --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt); --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt); --button-typical-tertiary-bg-default: var(--button-none); --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt); --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt); --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default); --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt); --button-typical-tertiary-inverse-bg-default: var(--button-none); --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt); --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt); --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt); --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt); --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default); --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt); --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt); --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt); --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt); --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default); --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt); --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt); --button-video-primary-label-default: var(--mode-color-action-grayscale-default); --button-video-primary-label-hover: var(--mode-color-action-grayscale-default); --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default); --button-ai-bg-active: var(--mode-color-action-ai-grad-active); --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover); --button-ai-label-disabled: var(--mode-color-action-inactive-txt); --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt); --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt); --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt); --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt); --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt); --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt); --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt); --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt); --badge-none: var(--mode-color-none); --badge-bg-default: var(--mode-color-status-negative-default); --badge-border-default: var(--mode-color-generic-bg-nought); --badge-bg-alt: var(--mode-color-status-info-default); --badge-label-default: var(--mode-color-generic-txt-inverse-extreme); --badge-label-alt: var(--mode-color-generic-txt-inverse-extreme); --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default); --badge-inverse-border-default: var(--mode-color-generic-bg-inverse-nought); --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default); --badge-inverse-label-default: var(--mode-color-generic-txt-extreme); --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme); }