npm - @sage/design-tokens - Versions diffs - 14.9.1 → 15.0.0 - Mend

@sage/design-tokens 14.9.1 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (955) hide show

package/css/marketing/all.css DELETED Viewed

@@ -1,2595 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-:root {
-  /* Global tokens */
-  --global-borderwidth-scale: 1px;
-  --global-borderwidth-none: 0;
-  --global-borderwidth-xs: 1px; /* Buttons, Inputs. Dividing lines and container borders. */
-  --global-borderwidth-s: 2px; /* Buttons. Step flow, Validation bars */
-  --global-borderwidth-m: 3px; /* Focus  */
-  --global-borderwidth-l: 4px; /* Focus underline. Dividing lines.  */
-  --global-borderwidth-xl: 6px; /* Double Focus Border */
-  --global-borderwidth-xxl: 8px;
-  --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
-  --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
-  --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch,  */
-  --global-radius-container-xxs: 1px; /* Validation bar on input components */
-  --global-radius-container-xs: 2px; /* Pill */
-  --global-radius-container-s: 4px;
-  --global-radius-container-sm: 6px; /* L size loader and tracker corners */
-  --global-radius-container-m: 8px; /* Card select group (outer corners), Card select (single), Color picker advanced (inner swatch container), File input (file uploads & integrated progress bar (bottom corners),  File preview (File selector assets on left), Link preview, Message, Note, Popover (menu container in Action popover, Button-split, Button-multi-action, Calendar, Dropdown), Subscription tile (currently a pattern), Table (parent container), Tile & Tile flexbox (less rounded), Toast, Tooltip */
-  --global-radius-container-l: 16px; /* Card (less rounded), Carousel (slides), Color picker advanced (parent container), File preview (parent container), Medium Tile & Tile flexbox, Medium Card. */
-  --global-radius-container-xl: 24px; /* Card (more  rounded), Copilot Container, Carousel (parent container), Dialog (not full screen), Large Tile & Tile flexbox, Large cards */
-  --global-radius-container-xxl: 32px;
-  --global-radius-container-xxxl: 40px; /* marketing cards and tiles */
-  --global-radius-container-xxxxl: 80px; /* marketing images  */
-  --global-radius-interactive-xs: 2px; /* Link (focus background and underline) */
-  --global-radius-interactive-xxs: 1px; /* Tab baseline. */
-  --global-radius-interactive-s: 4px; /* S & M Checkboxes */
-  --global-radius-interactive-m: 8px; /* Button subtle, L Checkboxes, Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area),  Menu (bottom corners), Navigation: left (state bg shape), Skip focus, Tab, Text area, Text input, */
-  --global-radius-interactive-l: 16px; /* Buttons S (typical and destructive, and inc bar, split and multi), Navigation left (collapsible Assets/Menu select top-right and bottom-right corners),  */
-  --global-radius-interactive-xl: 20px; /* Buttons M (typical and destructive and inc bar split and multi), Button toggle M (parent container) */
-  --global-radius-interactive-xxl: 24px; /* Buttons L (typical and destructive and inc bar split and multi), Button toggle L (parent container) */
-  --global-boxshadow-none: dropShadow 0 0 0 0 rgba(0,0,0,0);
-  --global-boxshadow-cleanedge-near: dropShadow 0 2 2 0 #0000001A, dropShadow 2 5 5 0 #0000001A; /* Popovers used in navigation */
-  --global-boxshadow-cleanedge-near-left: dropShadow -2 0 2 0 #0000001A, dropShadow -5 0 5 0 #0000001A; /* Right sticky column in Table. */
-  --global-boxshadow-cleanedge-near-right: dropShadow 2 0 2 0 #0000001A, dropShadow 5 0 5 0 #0000001A; /* Left sticky column in Table. */
-  --global-boxshadow-container-near: dropShadow 0 1 2 0 #0000001A, dropShadow 2 2 10 0 #00000033; /* Popover menus used on split, multiaction, dropdown and action popovers */
-  --global-boxshadow-container-far: dropShadow 0 2 3 0 #0000001A, dropShadow 6 6 30 0 #00000026; /* Toasts */
-  --global-boxshadow-container-distant: dropShadow 0 3 4 0 #0000001A, dropShadow 10 10 60 0 #0000001A; /* Dialog, Menu, Sidebar  */
-  --global-boxshadow-container-sticky-footer: dropShadow 0 -1 2 0 #0000001A, dropShadow 2 -2 10 0 #00000033; /* Sticky footer on dialogs, drawer and sidebar */
-  --global-boxshadow-container-solid-border: innerShadow 0 -1 0 0 #0000004D; /* Solid border using box shadow tokens when using the border property is not possible.  */
-  --global-boxshadow-inner-near: innerShadow 0 8 4 -4 #0000001A; /* inner downward shadow, used in first child table cell */
-  --global-boxshadow-interactive-enabled: dropShadow 0 1 2 0 #0000001A, dropShadow 2 2 10 0 #00000033; /* Default card state */
-  --global-boxshadow-interactive-hover: dropShadow 0 2 3 0 #0000001A, dropShadow 6 6 30 0 #00000026; /* Card hover state */
-  --global-boxshadow-interactive-drag: dropShadow 0 3 4 0 #0000001A, dropShadow 10 10 60 0 #0000001A; /* Card drag state */
-  --global-size-scale: 1px;
-  --global-size-none: 0px;
-  --global-size-container-m: 288px; /* Inside page margins full width component in smallest mobile screen. */
-  --global-size-container-l: 320px; /* Full width component in smallest mobile screen. */
-  --global-size-icon-s: 16px;
-  --global-size-icon-m: 20px;
-  --global-size-icon-l: 24px;
-  --global-size-icon-xl: 32px;
-  --global-size-flex-xxs: 80px;
-  --global-size-flex-xs: 128px;
-  --global-size-flex-s: 160px;
-  --global-size-flex-m: 200px;
-  --global-size-flex-l: 240px;
-  --global-size-flex-xl: 288px;
-  --global-size-flex-xxl: 320px;
-  --global-size-flex-xxxl: 560px;
-  --global-size-flex-xxxxl: 760px;
-  --global-size-macro-xxs: 16px;
-  --global-size-macro-xs: 24px;
-  --global-size-macro-s: 32px;
-  --global-size-macro-m: 40px;
-  --global-size-macro-l: 48px;
-  --global-size-macro-xl: 56px;
-  --global-size-macro-xxl: 64px;
-  --global-size-macro-xxxl: 72px;
-  --global-size-macro-xxxxl: 120px;
-  --global-size-micro-xxs: 2px;
-  --global-size-micro-xs: 4px;
-  --global-size-micro-s: 6px;
-  --global-size-micro-m: 8px;
-  --global-size-micro-l: 10px;
-  --global-size-micro-xl: 12px;
-  --global-size-micro-xxl: 16px;
-  --global-space-none: 0px;
-  --global-space-macro-scale: 0.8px; /* Spacing scale for small screens. */
-  --global-space-micro-scale: 1px;
-  --global-space-micro-xxs: 1px;
-  --global-space-micro-xs: 2px;
-  --global-space-micro-s: 4px;
-  --global-space-micro-m: 6px;
-  --global-space-micro-l: 8px;
-  --global-space-micro-xl: 10px;
-  --global-space-micro-xxl: 12px;
-  --global-space-macro-xxxs: 6.4px;
-  --global-space-macro-xxs: 9.6px;
-  --global-space-macro-xs: 12.8px;
-  --global-space-macro-s: 16px;
-  --global-space-macro-m: 19.2px;
-  --global-space-macro-ml: 22.4px;
-  --global-space-macro-l: 25.6px;
-  --global-space-macro-xl: 32px;
-  --global-space-macro-xxl: 38.4px;
-  --global-typography-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
-  --global-typography-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
-  --global-typography-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
-  --global-typography-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
-  --global-typography-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;
-  --global-typography-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
-  --global-typography-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
-  --global-typography-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
-  --global-typography-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
-  --global-typography-component-firm-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89 */
-  --global-typography-component-firm-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
-  --global-typography-component-firm-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
-  --global-typography-component-firm-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; /* Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size. */
-  --global-typography-component-moderate-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89 */
-  --global-typography-component-moderate-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
-  --global-typography-component-moderate-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
-  --global-typography-component-moderate-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; /* Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size. */
-  --global-typography-component-icon-s: 20px sage-icons; /* Small Viewports: 20, Large Viewports: 20.  */
-  --global-typography-component-icon-m: 20px sage-icons; /* Small Viewports: 20, Large Viewports: 20.  */
-  --global-typography-component-icon-l: 20px sage-icons; /* Small Viewports: 20, Large Viewports: 20.  */
-  --global-typography-component-underlined-moderate-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-component-underlined-moderate-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-component-underlined-moderate-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-component-underlined-firm-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-component-underlined-firm-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-component-underlined-firm-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-component-placeholdertext-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;
-  --global-typography-component-placeholdertext-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-component-placeholdertext-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
-  --global-typography-component-placeholdertext-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;
-  --global-typography-component-placeholdertext-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;
-  --global-typography-component-placeholdertext-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;
-  --global-typography-component-placeholdertext-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;
-  --global-typography-component-notification-m: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
-  --global-font-size-adaptive-step-minus2: 12px;
-  --global-font-size-adaptive-step-minus1: 13px;
-  --global-font-size-adaptive-step0: 14px;
-  --global-font-size-adaptive-step1: 16px;
-  --global-font-size-adaptive-step2: 17px;
-  --global-font-size-adaptive-step3: 19px;
-  --global-font-size-adaptive-step4: 21px;
-  --global-font-size-adaptive-step5: 23px;
-  --global-font-size-adaptive-step6: 25px;
-  --global-font-size-adaptive-step7: 27px;
-  --global-font-size-adaptive-step8: 30px;
-  --global-font-size-adaptive-step9: 33px;
-  --global-font-size-adaptive-step10: 36px;
-  --global-font-families-sage-icons: sage-icons;
-  --global-font-families-heading: Sage UI;
-  --global-font-families-subheading: Sage UI;
-  --global-font-families-body: Sage UI;
-  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
-  /* Light mode tokens */
-  --modes-color-none-light: #fff0;
-  --modes-color-brand-default-light: #000000;
-  --modes-color-brand-default-alt-light: #000000;
-  --modes-color-brand-with-default-alt-light: #FFFFFF;
-  --modes-color-brand-copilot-ai-identifier-default-light: #000000;
-  --modes-color-brand-copilot-ai-identifier-with-default-light: #00D639;
-  --modes-color-brand-copilot-no-bg-monochrome-light: #000000;
-  --modes-color-custom-default-light: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
-  --modes-color-custom-default-alt-light: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
-  --modes-color-custom-frozen-light: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
-  --modes-color-colorcode-blue-deep-light: #0071C3;
-  --modes-color-colorcode-blue-muted-light: #CDE5FF;
-  --modes-color-colorcode-teal-deep-light: #007C7B;
-  --modes-color-colorcode-teal-muted-light: #C1FBFB;
-  --modes-color-colorcode-green-deep-light: #00811F;
-  --modes-color-colorcode-green-muted-light: #C5FFC9;
-  --modes-color-colorcode-lime-deep-light: #637700;
-  --modes-color-colorcode-lime-muted-light: #FFFF9C;
-  --modes-color-colorcode-orange-deep-light: #C54300;
-  --modes-color-colorcode-orange-muted-light: #FEEAB0;
-  --modes-color-colorcode-red-deep-light: #DC004E;
-  --modes-color-colorcode-red-muted-light: #FFDBCF;
-  --modes-color-colorcode-pink-deep-light: #C8269A;
-  --modes-color-colorcode-pink-muted-light: #FFD7EE;
-  --modes-color-colorcode-purple-deep-light: #8F4CD7;
-  --modes-color-colorcode-purple-muted-light: #E7DEF8;
-  --modes-color-colorcode-slate-deep-light: #527386;
-  --modes-color-colorcode-slate-muted-light: #D4E5F1;
-  --modes-color-colorcode-gray-deep-light: #6F6F6F;
-  --modes-color-colorcode-gray-muted-light: #E2E2E2;
-  --modes-color-generic-bg-nought-light: #FFFFFF;
-  --modes-color-generic-bg-faint-light: #f3f3f3;
-  --modes-color-generic-bg-delicate-light: #e8e8e8;
-  --modes-color-generic-bg-soft-light: #dedede;
-  --modes-color-generic-bg-moderate-light: #d1d1d1;
-  --modes-color-generic-bg-firm-light: #bbb;
-  --modes-color-generic-bg-harsh-light: #a6a6a6;
-  --modes-color-generic-bg-severe-light: #919191;
-  --modes-color-generic-bg-extreme-light: #000000; /* Consumed within generic monochrome, progress */
-  --modes-color-generic-bg-frozen-soft-light: #f2f4f6; /* Consumed within frozen table */
-  --modes-color-generic-bg-frozen-delicate-light: #fbfbfc; /* Consumed within frozen table */
-  --modes-color-generic-content-harsh-light: #000000f2;
-  --modes-color-generic-content-extreme-light: #000000;
-  --modes-color-generic-content-firm-light: #000000ab;
-  --modes-color-generic-content-moderate-light: #0000008c; /* was 0.5. Increased to 0.55 so that we can use this for hint text etc too, and still be accessible. */
-  --modes-color-generic-content-muted-light: #0000006b; /* accessible OBJECT against white. */
-  --modes-color-generic-content-soft-light: #00000052; /* Used for disabled text */
-  --modes-color-generic-content-nought-light: #FFFFFF; /* pill hover X */
-  --modes-color-generic-fg-nought-light: #FFFFFF;
-  --modes-color-generic-fg-faint-light: #e8e8e8; /* used for dividers */
-  --modes-color-generic-fg-delicate-light: #d1d1d1; /* table dividers and borders */
-  --modes-color-generic-fg-soft-light: #a6a6a6;
-  --modes-color-generic-fg-moderate-light: #777;
-  --modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
-  --modes-color-generic-fg-ai-default-light: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
-  --modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
-  --modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
-  --modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
-  --modes-color-interactive-ai-hover-light: linear-gradient(90deg, #13A03814 0%, #14919714 40%, #a87cfb14 90%);
-  --modes-color-interactive-ai-default-light: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-  --modes-color-interactive-danger-active-light: #8c2c35; /* used on pill hover states */
-  --modes-color-interactive-danger-default-light: #CD384B;
-  --modes-color-interactive-danger-default-alt-light: #b23342; /* For links in datatables */
-  --modes-color-interactive-danger-hover-light: #ac3240; /* used on solid-pill and primary-button hover states */
-  --modes-color-interactive-danger-hover-alt-light: #cd384b1a; /* used on secondary-button hover states */
-  --modes-color-interactive-danger-hover-alt2-light: #9f303c; /* used on link hover state */
-  --modes-color-interactive-danger-with-active-light: #FFFFFF;
-  --modes-color-interactive-danger-with-default-light: #FFFFFF;
-  --modes-color-interactive-danger-inverse-active-light: #f28083; /* used on pill hover states */
-  --modes-color-interactive-danger-inverse-default-light: #E13E53;
-  --modes-color-interactive-danger-inverse-default-alt-light: #e85b66; /* For links in datatables */
-  --modes-color-interactive-danger-inverse-hover-light: #ea626a; /* used on solid-pill and primary-button hover states */
-  --modes-color-interactive-danger-inverse-hover-alt-light: #e13e531a; /* used on secondary-button hover states */
-  --modes-color-interactive-danger-inverse-hover-alt2-light: #ed6e74; /* used on link hover state */
-  --modes-color-interactive-danger-inverse-with-active-light: #000000;
-  --modes-color-interactive-danger-inverse-with-default-light: #000000;
-  --modes-color-interactive-data-entry-default-light: #FFFFFF; /* Input backgrounds. */
-  --modes-color-interactive-data-entry-with-active-light: #000000; /* checkbox tick icon or radio handle */
-  --modes-color-interactive-data-entry-with-active-alt-light: #FFFFFF;
-  --modes-color-interactive-data-entry-with-hover-light: #000000; /* text for draggable area on file input */
-  --modes-color-interactive-data-entry-hover-alt-light: #e2e2e2; /* bg hover for draggable area on file input */
-  --modes-color-interactive-data-entry-with-default-light: #777; /* Input borders. */
-  --modes-color-interactive-data-entry-default-alt-light: #f3f3f3; /* Input footer bgs (e.g text editor). */
-  --modes-color-interactive-data-entry-content-light: #000000f2; /* Input Text */
-  --modes-color-interactive-data-entry-content-alt-light: #0000008c; /* Hint text, placeholder text, character count etc */
-  --modes-color-interactive-data-entry-frozen-with-default-light: #698495; /* Input borders. */
-  --modes-color-interactive-focus-default-light: #000000;
-  --modes-color-interactive-focus-content-light: #000000;
-  --modes-color-interactive-focus-with-default-light: #FFB500;
-  --modes-color-interactive-focus-with-default-alt-light: #ffd27e;
-  --modes-color-interactive-focus-inverse-default-light: #FFB500;
-  --modes-color-interactive-focus-inverse-content-light: #FFFFFF;
-  --modes-color-interactive-focus-inverse-with-default-light: #000000;
-  --modes-color-interactive-focus-inverse-with-default-alt-light: #926916;
-  --modes-color-interactive-inactive-default-light: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
-  --modes-color-interactive-inactive-mask-light: #000000; /* full screen takeover token for modal dimmer */
-  --modes-color-interactive-inactive-default-alt-light: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
-  --modes-color-interactive-inactive-content-light: #0000006b; /* Disabled text inside buttons and form inputs. */
-  --modes-color-interactive-inactive-content-alt-light: #FFFFFF; /*  Disabled labels inside buttons and Switch. */
-  --modes-color-interactive-inactive-icon-light: #00000052; /* Disabled icon inside buttons and form inputs. */
-  --modes-color-interactive-inactive-icon-alt-light: #0000008c; /* Readonly icon inside form inputs. */
-  --modes-color-interactive-inactive-frozen-default-alt-light: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
-  --modes-color-interactive-inactive-inverse-default-light: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
-  --modes-color-interactive-inactive-inverse-content-light: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
-  --modes-color-interactive-inactive-inverse-content-alt-light: #000000; /*  Disabled labels inside buttons and Switch. */
-  --modes-color-interactive-monochrome-active-light: #000000;
-  --modes-color-interactive-monochrome-active-alt-light: #00000026;
-  --modes-color-interactive-monochrome-default-light: #000000e6;
-  --modes-color-interactive-monochrome-default-alt-light: #000000ab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2-light: #0000006b; /* Tertiary border color */
-  --modes-color-interactive-monochrome-hover-alt-light: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
-  --modes-color-interactive-monochrome-hover-light: #00000026; /* subtle table header hover */
-  --modes-color-interactive-monochrome-with-active-light: #FFFFFF;
-  --modes-color-interactive-monochrome-with-active-alt-light: #000000;
-  --modes-color-interactive-monochrome-with-default-light: #FFFFFF;
-  --modes-color-interactive-monochrome-with-hover-light: #000000; /* maybe should be white to align with primary group logic */
-  --modes-color-interactive-monochrome-frozen-active-light: #223743;
-  --modes-color-interactive-monochrome-frozen-active-alt-light: #22374326;
-  --modes-color-interactive-monochrome-frozen-default-light: #335B70;
-  --modes-color-interactive-monochrome-frozen-default-alt-light: #476a7d;
-  --modes-color-interactive-monochrome-frozen-hover-alt-light: #2237431a;
-  --modes-color-interactive-monochrome-frozen-with-active-light: #FFFFFF;
-  --modes-color-interactive-monochrome-frozen-with-hover-light: #223743;
-  --modes-color-interactive-monochrome-frozen-with-hover-alt-light: #FFFFFF;
-  --modes-color-interactive-monochrome-inverse-active-light: #FFFFFF;
-  --modes-color-interactive-monochrome-inverse-active-alt-light: #ffffff26;
-  --modes-color-interactive-monochrome-inverse-default-light: #ffffffe6;
-  --modes-color-interactive-monochrome-inverse-default-alt-light: #ffffffab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-inverse-default-alt2-light: #ffffff6b; /* Tertiary border color */
-  --modes-color-interactive-monochrome-inverse-hover-alt-light: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
-  --modes-color-interactive-monochrome-inverse-hover-light: #ffffff26; /* subtle table header hover */
-  --modes-color-interactive-monochrome-inverse-with-active-light: #000000;
-  --modes-color-interactive-monochrome-inverse-with-active-alt-light: #FFFFFF;
-  --modes-color-interactive-monochrome-inverse-with-default-light: #000000;
-  --modes-color-interactive-monochrome-inverse-with-hover-light: #FFFFFF;
-  --modes-color-interactive-monochrome-marketing-active-light: #000000; /* needed for specific marketing usecase on light bg */
-  --modes-color-interactive-monochrome-marketing-with-active-light: #00D639; /* needed for specific marketing usecase on light bg */
-  --modes-color-interactive-monochrome-subtle-default-alt-light: #00000080; /* border color for off switches */
-  --modes-color-interactive-monochrome-subtle-default-light: #0000000a; /* bg color for tertiary buttons and table headers */
-  --modes-color-interactive-nav-active-light: #00000029; /* active bg for nav items */
-  --modes-color-interactive-nav-default-light: #FFFFFF;
-  --modes-color-interactive-nav-default-alt-light: #f3f3f3; /* default bg for left nav container */
-  --modes-color-interactive-nav-hover-light: #0000001a; /* hover bg for nav items */
-  --modes-color-interactive-nav-with-active-light: #000000; /* text and icons on top of active bgs in nav contexts */
-  --modes-color-interactive-nav-with-default-light: #000000f2; /* hover bg for nav items */
-  --modes-color-interactive-nav-with-hover-light: #000000; /* hover bg for nav items */
-  --modes-color-interactive-primary-active-light: #13591a;
-  --modes-color-interactive-primary-active-alt-light: #00811f4d; /* Active color for secondary and tertiary buttons */
-  --modes-color-interactive-primary-default-light: #00811F;
-  --modes-color-interactive-primary-default-alt-light: #00811fcc; /* border color for secondary and tertiary buttons */
-  --modes-color-interactive-primary-default-alt2-light: #0c711d; /* default value for links */
-  --modes-color-interactive-primary-default-alt3-light: #00811f08; /* Default background color of secondary button */
-  --modes-color-interactive-primary-hover-light: #0e6d1d;
-  --modes-color-interactive-primary-hover-alt-light: #00811f1a; /* hover for secondary and tertiary buttons */
-  --modes-color-interactive-primary-hover-alt2-light: #12601b; /* hover for links */
-  --modes-color-interactive-primary-with-active-light: #FFFFFF;
-  --modes-color-interactive-primary-with-default-light: #FFFFFF;
-  --modes-color-interactive-primary-with-hover-light: #FFFFFF;
-  --modes-color-interactive-primary-frozen-active-light: #135932;
-  --modes-color-interactive-primary-frozen-default-light: #008046;
-  --modes-color-interactive-primary-frozen-default-alt-light: #0b703e; /* for links */
-  --modes-color-interactive-primary-frozen-hover-light: #0d6c3c;
-  --modes-color-interactive-primary-frozen-hover-alt-light: #106237; /* for link hover */
-  --modes-color-interactive-primary-frozen-nav-hover-light: #008046;
-  --modes-color-interactive-primary-frozen-nav-label-hover-light: #FFFFFF;
-  --modes-color-interactive-primary-frozen-table-default-light: #9badb8;
-  --modes-color-interactive-primary-inverse-active-light: #7ce47a;
-  --modes-color-interactive-primary-inverse-active-alt-light: #00d6394d; /* Active color for inverse secondary and tertiary buttons */
-  --modes-color-interactive-primary-inverse-default-light: #00D639;
-  --modes-color-interactive-primary-inverse-default-alt-light: #00d639cc; /* border color for secondary and tertiary inverse buttons */
-  --modes-color-interactive-primary-inverse-default-alt2-light: #4cdc55; /* Default color for links */
-  --modes-color-interactive-primary-inverse-default-alt3-light: #00d63908; /* Default background color of inverse secondary buttons */
-  --modes-color-interactive-primary-inverse-hover-light: #55dd5b;
-  --modes-color-interactive-primary-inverse-hover-alt-light: #00d6391a; /* Hover for inverse secondary and tertiary buttons */
-  --modes-color-interactive-primary-inverse-hover-alt2-light: #71e270; /* hover for links */
-  --modes-color-interactive-primary-inverse-with-active-light: #000000;
-  --modes-color-interactive-primary-inverse-with-default-light: #000000;
-  --modes-color-interactive-primary-inverse-with-hover-light: #000000;
-  --modes-color-interactive-progress-bg-light: #00000014;
-  --modes-color-interactive-progress-bg-alt-light: #ffffff14;
-  --modes-color-interactive-progress-frozen-bg-light: #00804614;
-  --modes-color-interactive-progress-frozen-bg-alt-light: #cad3d9; /* progress tracker bg */
-  --modes-color-status-ai-default-light: #FFFFFF;
-  --modes-color-status-ai-default-alt-light: #000000; /* bg for contextual message comp */
-  --modes-color-status-ai-default-horizontal-light: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-  --modes-color-status-ai-default-vertical-light: linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-  --modes-color-status-callout-default-alt-light: #e5fae2; /* used for marketing banners */
-  --modes-color-status-callout-hover-alt-light: #d8ecd5; /* used for marketing banners */
-  --modes-color-status-caution-default-light: #D64309; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-caution-default-alt-light: #ffede5; /* Subtle message bg */
-  --modes-color-status-caution-hover-light: #b33b0d; /* used on pill hover states */
-  --modes-color-status-caution-hover-alt-light: #fed5c3; /* used on pill hover states and message bg */
-  --modes-color-status-caution-text-light: #bf3e0c;
-  --modes-color-status-caution-frozenglobal-default-light: #ff8629; /* used on global message bg */
-  --modes-color-status-caution-frozenglobal-hover-light: #ff994c; /* used on global message bg */
-  --modes-color-status-caution-inverse-default-light: #E04500;
-  --modes-color-status-caution-inverse-default-alt-light: #251206; /* Subtle message bg */
-  --modes-color-status-caution-inverse-hover-light: #eb6530; /* used on pill hover states */
-  --modes-color-status-caution-inverse-hover-alt-light: #3e1a0b; /* used on pill hover states and message bg */
-  --modes-color-status-caution-inverse-text-light: #e75b23;
-  --modes-color-status-content-with-default-light: #FFFFFF;
-  --modes-color-status-content-with-default-alt-light: #000000f2;
-  --modes-color-status-content-with-hover-light: #FFFFFF; /* for pill hover X */
-  --modes-color-status-content-with-hover-alt-light: #000000; /* for message text */
-  --modes-color-status-content-loading-light: linear-gradient(135deg, #6F6F6F5c 0%, #6F6F6F0A 100%); /* used on skeleton text */
-  --modes-color-status-content-inverse-with-default-light: #000000;
-  --modes-color-status-content-inverse-with-default-alt-light: #fffffff2;
-  --modes-color-status-content-inverse-with-hover-light: #000000; /* for pill hover X */
-  --modes-color-status-content-inverse-with-hover-alt-light: #FFFFFF; /* for message text */
-  --modes-color-status-custom-blue-default-light: #0071C3; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-blue-default-alt-light: #ebf0f9; /* Pill bg */
-  --modes-color-status-custom-blue-hover-light: #135fa3; /* used on pill hover states */
-  --modes-color-status-custom-blue-hover-alt-light: #ced9ed; /* used on pill hover states */
-  --modes-color-status-custom-teal-default-light: #007C7B; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-teal-default-alt-light: #e9f1f1; /* Pill bg */
-  --modes-color-status-custom-teal-hover-light: #0e6968; /* used on pill hover states */
-  --modes-color-status-custom-teal-hover-alt-light: #c4dde0; /* used on pill hover states */
-  --modes-color-status-custom-green-default-light: #00811F; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-green-default-alt-light: #e9f2e8; /* Pill bg */
-  --modes-color-status-custom-green-hover-light: #0e6d1d; /* used on pill hover states */
-  --modes-color-status-custom-green-hover-alt-light: #c4decf; /* used on pill hover states */
-  --modes-color-status-custom-lime-default-light: #637700; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-lime-default-alt-light: #eff1e6; /* Pill bg */
-  --modes-color-status-custom-lime-hover-light: #546408; /* used on pill hover states */
-  --modes-color-status-custom-lime-hover-alt-light: #cdddc9; /* used on pill hover states */
-  --modes-color-status-custom-orange-default-light: #C54300; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-orange-default-alt-light: #feece5; /* Pill bg */
-  --modes-color-status-custom-orange-hover-light: #a53a06; /* used on pill hover states */
-  --modes-color-status-custom-orange-hover-alt-light: #f2d0ce; /* used on pill hover states */
-  --modes-color-status-custom-red-default-light: #DC004E; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-red-default-alt-light: #ffebec; /* Pill bg */
-  --modes-color-status-custom-red-hover-light: #b81242; /* used on pill hover states */
-  --modes-color-status-custom-red-hover-alt-light: #f1cfd9; /* used on pill hover states */
-  --modes-color-status-custom-pink-default-light: #C8269A; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-pink-default-alt-light: #fcecf5; /* Pill bg */
-  --modes-color-status-custom-pink-hover-light: #a82581; /* used on pill hover states */
-  --modes-color-status-custom-pink-hover-alt-light: #ead2e5; /* used on pill hover states */
-  --modes-color-status-custom-purple-default-light: #8F4CD7; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-purple-default-alt-light: #f5edfc; /* Pill bg */
-  --modes-color-status-custom-purple-hover-light: #7941b4; /* used on pill hover states */
-  --modes-color-status-custom-purple-hover-alt-light: #ded4ee; /* used on pill hover states */
-  --modes-color-status-custom-gray-default-light: #6F6F6F; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-gray-default-alt-light: #f0f0f0; /* Pill bg */
-  --modes-color-status-custom-gray-hover-light: #5e5e5e; /* used on pill hover states */
-  --modes-color-status-custom-gray-hover-alt-light: #d3d9e5; /* used on pill hover states */
-  --modes-color-status-custom-slate-default-light: #527386; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-slate-default-alt-light: #edf0f2; /* Pill bg */
-  --modes-color-status-custom-slate-hover-light: #466171; /* used on pill hover states */
-  --modes-color-status-custom-slate-hover-alt-light: #cbdae6; /* used on pill hover states */
-  --modes-color-status-generic-default-light: #F0F; /* TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour. */
-  --modes-color-status-important-default-light: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
-  --modes-color-status-important-default-alt-light: #f5edfc; /* Subtle message bg */
-  --modes-color-status-important-hover-light: #7941b4; /* used on pill hover states */
-  --modes-color-status-important-hover-alt-light: #ded4ee; /* used on pill hover states and message bg */
-  --modes-color-status-important-inverse-default-light: #985FDC;
-  --modes-color-status-important-inverse-default-alt-light: #1b1422; /* Subtle message bg */
-  --modes-color-status-important-inverse-hover-light: #a977e2; /* used on pill hover states */
-  --modes-color-status-important-inverse-hover-alt-light: #282039; /* used on pill hover states and message bg */
-  --modes-color-status-inactive-default-light: #a6a6a6; /* For readonly pill bg and border */
-  --modes-color-status-inactive-with-default-light: #000000ab; /* For readonly filled pill text */
-  --modes-color-status-inactive-inverse-default-light: #4b4b4b; /* For readonly pill bg and border */
-  --modes-color-status-inactive-inverse-with-default-light: #ffffffab; /* For readonly filled pill text */
-  --modes-color-status-info-default-light: #0060A7; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-info-default-alt-light: #eaeef6; /* Subtle message bg */
-  --modes-color-status-info-hover-light: #10518c; /* used on pill hover states */
-  --modes-color-status-info-hover-alt-light: #cdd7ea; /* used on pill hover states and message bg */
-  --modes-color-status-info-frozenglobal-default-light: #65a9ff; /* used on global message bg */
-  --modes-color-status-info-frozenglobal-hover-light: #82b5ff; /* used on global message bg */
-  --modes-color-status-info-inverse-default-light: #007ED9;
-  --modes-color-status-info-inverse-default-alt-light: #111722; /* Subtle message bg */
-  --modes-color-status-info-inverse-hover-light: #4f90df; /* used on pill hover states */
-  --modes-color-status-info-inverse-hover-alt-light: #17253a; /* used on pill hover states and message bg */
-  --modes-color-status-negative-default-light: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-negative-default-alt-light: #fdeceb; /* Subtle message bg */
-  --modes-color-status-negative-hover-light: #ac3240; /* used on pill hover states */
-  --modes-color-status-negative-hover-alt-light: #f9d3d1; /* used on pill hover states and message bg */
-  --modes-color-status-negative-text-light: #CD384B;
-  --modes-color-status-negative-inverse-default-light: #E13E53;
-  --modes-color-status-negative-inverse-default-alt-light: #241212; /* Subtle message bg */
-  --modes-color-status-negative-inverse-hover-light: #ea626a; /* used on pill hover states */
-  --modes-color-status-negative-inverse-hover-alt-light: #3d1a1c; /* used on pill hover states and message bg */
-  --modes-color-status-negative-inverse-text-light: #E13E53;
-  --modes-color-status-neutral-default-light: #656565;
-  --modes-color-status-neutral-default-alt-light: #efefef; /* Subtle message bg */
-  --modes-color-status-neutral-hover-light: #565656; /* used on pill hover states */
-  --modes-color-status-neutral-hover-alt-light: #d9d9d9; /* used on pill hover states and message bg */
-  --modes-color-status-neutral-frozen-default-light: #335B70;
-  --modes-color-status-neutral-frozen-default-alt-light: #eaedf0; /* Subtle message bg */
-  --modes-color-status-neutral-frozen-hover-light: #20313b;
-  --modes-color-status-neutral-frozen-hover-alt-light: #dde0e2; /* used on pill hover states and message bg */
-  --modes-color-status-neutral-inverse-default-light: #7C7C7C;
-  --modes-color-status-neutral-inverse-default-alt-light: #171717; /* Subtle message bg */
-  --modes-color-status-neutral-inverse-hover-light: #8e8e8e; /* used on pill hover states */
-  --modes-color-status-neutral-inverse-hover-alt-light: #242424; /* used on pill hover states and message bg */
-  --modes-color-status-positive-default-light: #00811F; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-positive-default-alt-light: #e9f2e8; /* Subtle message bg */
-  --modes-color-status-positive-hover-light: #0e6d1d; /* used on pill hover states  */
-  --modes-color-status-positive-hover-alt-light: #cbe1c9; /* used on pill hover states and message bg */
-  --modes-color-status-positive-inverse-default-light: #009023;
-  --modes-color-status-positive-inverse-default-alt-light: #0e1a0b; /* Subtle message bg */
-  --modes-color-status-positive-inverse-hover-light: #328e37; /* used on pill hover states */
-  --modes-color-status-positive-inverse-hover-alt-light: #132912; /* used on pill hover states and message bg */
-  --modes-color-status-reviews-default-light: #00811F;
-  --modes-color-status-reviews-default-alt-light: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); /* half fill */
-  --modes-color-status-reviews-hover-light: #0e6d1d;
-  --modes-color-status-reviews-frozen-default-light: #008046;
-  --modes-color-status-reviews-frozen-default-alt-light: linear-gradient(90deg, #008046 0%, #008046 50%, #d1d1d1 50%, #d1d1d1 100%); /* half fill */
-  --modes-color-status-reviews-frozen-hover-light: #0d6c3c;
-  --modes-color-modifier-contrast-less-light: #FFFFFF;
-  --modes-color-modifier-contrast-more-light: #000000;
-  /* Dark mode tokens */
-  --modes-color-none-dark: #fff0;
-  --modes-color-brand-default-dark: #00D639;
-  --modes-color-brand-default-alt-dark: #FFFFFF;
-  --modes-color-brand-with-default-alt-dark: #000000;
-  --modes-color-brand-copilot-ai-identifier-default-dark: #FFFFFF;
-  --modes-color-brand-copilot-ai-identifier-with-default-dark: #00D639;
-  --modes-color-brand-copilot-no-bg-monochrome-dark: #FFFFFF;
-  --modes-color-custom-default-dark: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
-  --modes-color-custom-default-alt-dark: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
-  --modes-color-custom-frozen-dark: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
-  --modes-color-colorcode-blue-deep-dark: #007FD9;
-  --modes-color-colorcode-blue-muted-dark: #00293F;
-  --modes-color-colorcode-teal-deep-dark: #008A89;
-  --modes-color-colorcode-teal-muted-dark: #002B2A;
-  --modes-color-colorcode-green-deep-dark: #009023;
-  --modes-color-colorcode-green-muted-dark: #002D05;
-  --modes-color-colorcode-lime-deep-dark: #6E8500;
-  --modes-color-colorcode-lime-muted-dark: #171e00;
-  --modes-color-colorcode-orange-deep-dark: #DB4B00;
-  --modes-color-colorcode-orange-muted-dark: #380D00;
-  --modes-color-colorcode-red-deep-dark: #F50058;
-  --modes-color-colorcode-red-muted-dark: #400011;
-  --modes-color-colorcode-pink-deep-dark: #DD2BAB;
-  --modes-color-colorcode-pink-muted-dark: #3C002C;
-  --modes-color-colorcode-purple-deep-dark: #985FDC;
-  --modes-color-colorcode-purple-muted-dark: #270E41;
-  --modes-color-colorcode-slate-deep-dark: #5C8196;
-  --modes-color-colorcode-slate-muted-dark: #121D23;
-  --modes-color-colorcode-gray-deep-dark: #7C7C7C;
-  --modes-color-colorcode-gray-muted-dark: #1b1b1b;
-  --modes-color-generic-bg-nought-dark: #000000;
-  --modes-color-generic-bg-faint-dark: #0e0e0e;
-  --modes-color-generic-bg-delicate-dark: #181818;
-  --modes-color-generic-bg-soft-dark: #1f1f1f;
-  --modes-color-generic-bg-moderate-dark: #282828;
-  --modes-color-generic-bg-firm-dark: #393939;
-  --modes-color-generic-bg-harsh-dark: #4b4b4b;
-  --modes-color-generic-bg-severe-dark: #5e5e5e;
-  --modes-color-generic-bg-extreme-dark: #FFFFFF; /* Consumed within generic monochrome, progress */
-  --modes-color-generic-bg-frozen-delicate-dark: #020303; /* Consumed within frozen table */
-  --modes-color-generic-bg-frozen-soft-dark: #040607; /* Consumed within frozen table */
-  --modes-color-generic-content-extreme-dark: #FFFFFF;
-  --modes-color-generic-content-harsh-dark: #fffffff2;
-  --modes-color-generic-content-firm-dark: #ffffffab;
-  --modes-color-generic-content-moderate-dark: #ffffff8c; /* was 0.5. Increased to 0.55 so that we can use this for hint text etc too, and still be accessible. */
-  --modes-color-generic-content-muted-dark: #ffffff6b; /* accessible OBJECT against white. */
-  --modes-color-generic-content-soft-dark: #ffffff4d; /* Used for disabled text */
-  --modes-color-generic-content-nought-dark: #000000;
-  --modes-color-generic-fg-nought-dark: #000000;
-  --modes-color-generic-fg-faint-dark: #181818; /* table dividers and borders */
-  --modes-color-generic-fg-delicate-dark: #282828; /* table dividers and borders */
-  --modes-color-generic-fg-soft-dark: #4b4b4b;
-  --modes-color-generic-fg-moderate-dark: #777;
-  --modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
-  --modes-color-generic-fg-ai-default-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment */
-  --modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
-  --modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
-  --modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
-  --modes-color-interactive-ai-hover-dark: linear-gradient(90deg, #00D63914 0%, #00d6de14 40%, #9d60ff14 90%);
-  --modes-color-interactive-ai-default-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-interactive-danger-active-dark: #f28083; /* active button on dark */
-  --modes-color-interactive-danger-default-dark: #E13E53;
-  --modes-color-interactive-danger-default-alt-dark: #e85b66; /* for links in datatables  */
-  --modes-color-interactive-danger-hover-dark: #ea626a;
-  --modes-color-interactive-danger-hover-alt-dark: #e13e531a; /* button hover on dark */
-  --modes-color-interactive-danger-hover-alt2-dark: #ed6e74; /* for links in datatables */
-  --modes-color-interactive-danger-with-active-dark: #000000;
-  --modes-color-interactive-danger-with-default-dark: #000000;
-  --modes-color-interactive-danger-inverse-active-dark: #8c2c35; /* used on pill hover states */
-  --modes-color-interactive-danger-inverse-default-dark: #CD384B;
-  --modes-color-interactive-danger-inverse-default-alt-dark: #b23342; /* For links in datatables */
-  --modes-color-interactive-danger-inverse-hover-dark: #ac3240; /* used on solid-pill and primary-button hover states */
-  --modes-color-interactive-danger-inverse-hover-alt-dark: #cd384b1a; /* used on secondary-button hover states */
-  --modes-color-interactive-danger-inverse-hover-alt2-dark: #9f303c; /* used on link hover state */
-  --modes-color-interactive-danger-inverse-with-active-dark: #FFFFFF;
-  --modes-color-interactive-danger-inverse-with-default-dark: #FFFFFF;
-  --modes-color-interactive-data-entry-default-dark: #000000; /* Input backgrounds. */
-  --modes-color-interactive-data-entry-with-active-dark: #FFFFFF; /* checkbox tick icon or radio handle */
-  --modes-color-interactive-data-entry-with-active-alt-dark: #000000;
-  --modes-color-interactive-data-entry-with-hover-dark: #FFFFFF; /* text for draggable area on file input */
-  --modes-color-interactive-data-entry-hover-alt-dark: #1b1b1b; /* bg hover for draggable area on file input */
-  --modes-color-interactive-data-entry-with-default-dark: #777; /* Input borders. */
-  --modes-color-interactive-data-entry-default-alt-dark: #0e0e0e; /* Input footer bgs (e.g text editor) */
-  --modes-color-interactive-data-entry-content-dark: #fffffff2; /* Input Text */
-  --modes-color-interactive-data-entry-content-alt-dark: #ffffff8c; /* Hint text, placeholder text, character count etc */
-  --modes-color-interactive-data-entry-frozen-with-default-dark: #777; /* Input borders. */
-  --modes-color-interactive-focus-default-dark: #FFB500;
-  --modes-color-interactive-focus-content-dark: #FFFFFF;
-  --modes-color-interactive-focus-with-default-dark: #000000;
-  --modes-color-interactive-focus-with-default-alt-dark: #926916;
-  --modes-color-interactive-focus-inverse-default-dark: #000000;
-  --modes-color-interactive-focus-inverse-content-dark: #000000;
-  --modes-color-interactive-focus-inverse-with-default-dark: #FFB500;
-  --modes-color-interactive-focus-inverse-with-default-alt-dark: #ffd27e;
-  --modes-color-interactive-inactive-default-dark: #4b4b4b; /* disabled buttons on dark */
-  --modes-color-interactive-inactive-mask-dark: #FFFFFF; /* full screen takeover token for modal dimmer */
-  --modes-color-interactive-inactive-default-alt-dark: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
-  --modes-color-interactive-inactive-content-dark: #ffffff4d; /* Disabled text inside buttons */
-  --modes-color-interactive-inactive-content-alt-dark: #000000;
-  --modes-color-interactive-inactive-icon-dark: #ffffff4d; /* Disabled icon inside buttons and form inputs. */
-  --modes-color-interactive-inactive-icon-alt-dark: #ffffff8c; /* Readonly icon inside form inputs.  */
-  --modes-color-interactive-inactive-frozen-default-alt-dark: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
-  --modes-color-interactive-inactive-inverse-default-dark: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
-  --modes-color-interactive-inactive-inverse-content-dark: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
-  --modes-color-interactive-inactive-inverse-content-alt-dark: #FFFFFF; /*  Disabled labels inside buttons and Switch. */
-  --modes-color-interactive-monochrome-active-dark: #FFFFFF;
-  --modes-color-interactive-monochrome-active-alt-dark: #ffffff26;
-  --modes-color-interactive-monochrome-default-dark: #ffffffe6;
-  --modes-color-interactive-monochrome-default-alt-dark: #ffffffab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2-dark: #ffffff6b; /* Tertiary border color */
-  --modes-color-interactive-monochrome-hover-alt-dark: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
-  --modes-color-interactive-monochrome-hover-dark: #ffffff26; /* subtle table header hover */
-  --modes-color-interactive-monochrome-with-active-dark: #000000;
-  --modes-color-interactive-monochrome-with-active-alt-dark: #FFFFFF;
-  --modes-color-interactive-monochrome-with-default-dark: #000000;
-  --modes-color-interactive-monochrome-with-hover-dark: #FFFFFF;
-  --modes-color-interactive-monochrome-frozen-active-dark: #FFFFFF;
-  --modes-color-interactive-monochrome-frozen-active-alt-dark: #ffffff26;
-  --modes-color-interactive-monochrome-frozen-default-dark: #ffffffe6;
-  --modes-color-interactive-monochrome-frozen-default-alt-dark: #ffffffab;
-  --modes-color-interactive-monochrome-frozen-hover-alt-dark: #ffffff1a;
-  --modes-color-interactive-monochrome-frozen-with-active-dark: #000000;
-  --modes-color-interactive-monochrome-frozen-with-hover-dark: #FFFFFF;
-  --modes-color-interactive-monochrome-frozen-with-hover-alt-dark: #000000;
-  --modes-color-interactive-monochrome-inverse-active-dark: #000000;
-  --modes-color-interactive-monochrome-inverse-active-alt-dark: #00000026;
-  --modes-color-interactive-monochrome-inverse-default-dark: #000000e6;
-  --modes-color-interactive-monochrome-inverse-default-alt-dark: #000000ab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-inverse-default-alt2-dark: #0000006b; /* Tertiary border color */
-  --modes-color-interactive-monochrome-inverse-hover-alt-dark: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
-  --modes-color-interactive-monochrome-inverse-hover-dark: #00000026; /* subtle table header hover */
-  --modes-color-interactive-monochrome-inverse-with-active-dark: #FFFFFF;
-  --modes-color-interactive-monochrome-inverse-with-active-alt-dark: #000000;
-  --modes-color-interactive-monochrome-inverse-with-default-dark: #FFFFFF;
-  --modes-color-interactive-monochrome-inverse-with-hover-dark: #000000;
-  --modes-color-interactive-monochrome-marketing-with-active-dark: #000000; /* use for marketing overrides for switch handle on standard */
-  --modes-color-interactive-monochrome-marketing-active-dark: #00D639; /* needed for specific marketing usecase on light bg */
-  --modes-color-interactive-monochrome-subtle-default-alt-dark: #ffffff80; /* border color for off switches */
-  --modes-color-interactive-monochrome-subtle-default-dark: #ffffff14; /* subtle table header hover */
-  --modes-color-interactive-nav-active-dark: #ffffff59; /* active bg for nav items */
-  --modes-color-interactive-nav-default-dark: #000000; /* default bg for global nav */
-  --modes-color-interactive-nav-default-alt-dark: #282828; /* default bg for left nav container */
-  --modes-color-interactive-nav-hover-dark: #ffffff26; /* hover bg for nav items */
-  --modes-color-interactive-nav-with-active-dark: #FFFFFF; /* text and icons on top of active bgs in nav contexts */
-  --modes-color-interactive-nav-with-default-dark: #fffffff2; /* hover bg for nav items */
-  --modes-color-interactive-nav-with-hover-dark: #FFFFFF; /* hover bg for nav items */
-  --modes-color-interactive-primary-active-dark: #7ce47a;
-  --modes-color-interactive-primary-active-alt-dark: #00d6394d; /* Active color for secondary and tertiary buttons */
-  --modes-color-interactive-primary-default-dark: #00D639;
-  --modes-color-interactive-primary-default-alt-dark: #00d639cc; /* Border color for secondary and tertiary buttons */
-  --modes-color-interactive-primary-default-alt2-dark: #4cdc55; /* default value for links */
-  --modes-color-interactive-primary-default-alt3-dark: #00d63908; /* Default background color of secondary buttons */
-  --modes-color-interactive-primary-hover-dark: #55dd5b;
-  --modes-color-interactive-primary-hover-alt-dark: #00d6391a; /* Secondary and tertiary button hover */
-  --modes-color-interactive-primary-hover-alt2-dark: #71e270; /* hover for links */
-  --modes-color-interactive-primary-with-active-dark: #000000;
-  --modes-color-interactive-primary-with-default-dark: #000000;
-  --modes-color-interactive-primary-with-hover-dark: #000000;
-  --modes-color-interactive-primary-frozen-active-dark: #7ce47a;
-  --modes-color-interactive-primary-frozen-default-dark: #00D639;
-  --modes-color-interactive-primary-frozen-default-alt-dark: #4cdc55;
-  --modes-color-interactive-primary-frozen-hover-dark: #55dd5b;
-  --modes-color-interactive-primary-frozen-hover-alt-dark: #71e270; /* for link hover */
-  --modes-color-interactive-primary-frozen-nav-hover-dark: #008046;
-  --modes-color-interactive-primary-frozen-nav-label-hover-dark: #FFFFFF;
-  --modes-color-interactive-primary-frozen-table-default-dark: #18232a;
-  --modes-color-interactive-primary-inverse-active-dark: #13591a;
-  --modes-color-interactive-primary-inverse-active-alt-dark: #00811f4d; /* Active color for inverse secondary and tertiary buttons */
-  --modes-color-interactive-primary-inverse-default-dark: #00811F;
-  --modes-color-interactive-primary-inverse-default-alt-dark: #00811fcc; /* Borders on secondary and tertiary inverse buttons */
-  --modes-color-interactive-primary-inverse-default-alt2-dark: #0c711d; /* Default color for links */
-  --modes-color-interactive-primary-inverse-default-alt3-dark: #00811f08; /* Default background color of inverse secondary buttons */
-  --modes-color-interactive-primary-inverse-hover-dark: #0e6d1d;
-  --modes-color-interactive-primary-inverse-hover-alt-dark: #0c711d1a; /* Secondary and tertiary inverse button hover */
-  --modes-color-interactive-primary-inverse-hover-alt2-dark: #11651c; /* hover for links */
-  --modes-color-interactive-primary-inverse-with-active-dark: #FFFFFF;
-  --modes-color-interactive-primary-inverse-with-default-dark: #FFFFFF;
-  --modes-color-interactive-primary-inverse-with-hover-dark: #FFFFFF;
-  --modes-color-interactive-progress-bg-dark: #ffffff14;
-  --modes-color-interactive-progress-bg-alt-dark: #00000014;
-  --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
-  --modes-color-interactive-progress-frozen-bg-alt-dark: #ffffff14;
-  --modes-color-status-ai-default-dark: #000000;
-  --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
-  --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-callout-default-alt-dark: #122211; /* used for marketing banners */
-  --modes-color-status-callout-hover-alt-dark: #263525; /* marketing banner hover */
-  --modes-color-status-caution-default-dark: #E04500;
-  --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
-  --modes-color-status-caution-hover-dark: #eb6530; /* used on pill hover states */
-  --modes-color-status-caution-hover-alt-dark: #3e1a0b; /* used on pill hover states and message bg */
-  --modes-color-status-caution-text-dark: #e75b23;
-  --modes-color-status-caution-frozenglobal-default-dark: #E04500; /* Global message bg */
-  --modes-color-status-caution-frozenglobal-hover-dark: #eb6530; /* used on global message bg */
-  --modes-color-status-caution-inverse-default-dark: #D64309; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-caution-inverse-default-alt-dark: #ffede5; /* Subtle message bg */
-  --modes-color-status-caution-inverse-hover-dark: #b33b0d; /* used on pill hover states */
-  --modes-color-status-caution-inverse-hover-alt-dark: #fed5c3; /* used on pill hover states and message bg */
-  --modes-color-status-caution-inverse-text-dark: #bf3e0c;
-  --modes-color-status-content-with-default-dark: #000000;
-  --modes-color-status-content-with-default-alt-dark: #fffffff2;
-  --modes-color-status-content-with-hover-dark: #000000;
-  --modes-color-status-content-with-hover-alt-dark: #FFFFFF;
-  --modes-color-status-content-loading-dark: linear-gradient(135deg, #FFFFFF5C 0%, #FFFFFF0A 100%); /* used on skeleton text */
-  --modes-color-status-content-inverse-with-default-dark: #FFFFFF;
-  --modes-color-status-content-inverse-with-default-alt-dark: #000000f2;
-  --modes-color-status-content-inverse-with-hover-dark: #FFFFFF;
-  --modes-color-status-content-inverse-with-hover-alt-dark: #000000;
-  --modes-color-status-custom-blue-default-dark: #007FD9; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-blue-default-alt-dark: #0d1219; /* Pill bg */
-  --modes-color-status-custom-blue-hover-dark: #4f91df; /* used on pill hover states */
-  --modes-color-status-custom-blue-hover-alt-dark: #142131; /* used on pill hover states */
-  --modes-color-status-custom-teal-default-dark: #008A89; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-teal-default-alt-dark: #0a1313; /* Pill bg */
-  --modes-color-status-custom-teal-hover-dark: #449b9a; /* used on pill hover states */
-  --modes-color-status-custom-teal-hover-alt-dark: #082427; /* used on pill hover states */
-  --modes-color-status-custom-green-default-dark: #009023; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-green-default-alt-dark: #0a1408; /* Pill bg */
-  --modes-color-status-custom-green-hover-dark: #44a146; /* used on pill hover states */
-  --modes-color-status-custom-green-hover-alt-dark: #0b2418; /* used on pill hover states */
-  --modes-color-status-custom-lime-default-dark: #6E8500; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-lime-default-alt-dark: #111205; /* Pill bg */
-  --modes-color-status-custom-lime-hover-dark: #859635; /* used on pill hover states */
-  --modes-color-status-custom-lime-hover-alt-dark: #162311; /* used on pill hover states */
-  --modes-color-status-custom-orange-default-dark: #DB4B00; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-orange-default-alt-dark: #1c0e04; /* Pill bg */
-  --modes-color-status-custom-orange-hover-dark: #e66930; /* used on pill hover states */
-  --modes-color-status-custom-orange-hover-alt-dark: #331816; /* used on pill hover states */
-  --modes-color-status-custom-red-default-dark: #F50058; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-red-default-alt-dark: #1e0d0d; /* Pill bg */
-  --modes-color-status-custom-red-hover-dark: #fc4e6e; /* used on pill hover states */
-  --modes-color-status-custom-red-hover-alt-dark: #331720; /* used on pill hover states */
-  --modes-color-status-custom-pink-default-dark: #DD2BAB; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-pink-default-alt-dark: #1b0d16; /* Pill bg */
-  --modes-color-status-custom-pink-hover-dark: #e558b7; /* used on pill hover states */
-  --modes-color-status-custom-pink-hover-alt-dark: #2d192b; /* used on pill hover states */
-  --modes-color-status-custom-purple-default-dark: #985FDC; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-purple-default-alt-dark: #150f19; /* Pill bg */
-  --modes-color-status-custom-purple-hover-dark: #a977e2; /* used on pill hover states */
-  --modes-color-status-custom-purple-hover-alt-dark: #231c30; /* used on pill hover states */
-  --modes-color-status-custom-gray-default-dark: #7C7C7C; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-gray-default-alt-dark: #111; /* Pill bg */
-  --modes-color-status-custom-gray-hover-dark: #8e8e8e; /* used on pill hover states */
-  --modes-color-status-custom-gray-hover-alt-dark: #1a202b; /* used on pill hover states */
-  --modes-color-status-custom-slate-default-dark: #5C8196; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-slate-default-alt-dark: #0f1214; /* Pill bg */
-  --modes-color-status-custom-slate-hover-dark: #7493a5; /* used on pill hover states */
-  --modes-color-status-custom-slate-hover-alt-dark: #13222c; /* used on pill hover states */
-  --modes-color-status-generic-default-dark: #F0F;
-  --modes-color-status-important-default-dark: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
-  --modes-color-status-important-default-alt-dark: #150d19; /* Subtle message bg */
-  --modes-color-status-important-hover-dark: #a267de; /* used on pill hover states */
-  --modes-color-status-important-hover-alt-dark: #231b30; /* used on pill hover states and message bg */
-  --modes-color-status-important-inverse-default-dark: #985FDC;
-  --modes-color-status-important-inverse-default-alt-dark: #f1e6fa; /* Subtle message bg */
-  --modes-color-status-important-inverse-hover-dark: #8051b8; /* used on pill hover states */
-  --modes-color-status-important-inverse-hover-alt-dark: #daceed; /* used on pill hover states and message bg */
-  --modes-color-status-inactive-default-dark: #4b4b4b; /* For readonly pill bg and border */
-  --modes-color-status-inactive-with-default-dark: #ffffffab; /* For readonly filled pill text */
-  --modes-color-status-inactive-inverse-default-dark: #a6a6a6; /* For readonly pill bg and border */
-  --modes-color-status-inactive-inverse-with-default-dark: #000000ab; /* For readonly filled pill text */
-  --modes-color-status-info-default-dark: #007ED9;
-  --modes-color-status-info-default-alt-dark: #111722; /* Subtle message bg */
-  --modes-color-status-info-hover-dark: #4f90df; /* used on pill hover states */
-  --modes-color-status-info-hover-alt-dark: #17253a; /* used on pill hover states and message bg */
-  --modes-color-status-info-frozenglobal-default-dark: #007ED9; /* Global message bg */
-  --modes-color-status-info-frozenglobal-hover-dark: #4f90df; /* used on global message bg */
-  --modes-color-status-info-inverse-default-dark: #0060A7; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-info-inverse-default-alt-dark: #eaeef6; /* Subtle message bg */
-  --modes-color-status-info-inverse-hover-dark: #10518c; /* used on pill hover states */
-  --modes-color-status-info-inverse-hover-alt-dark: #cdd7ea; /* used on pill hover states and message bg */
-  --modes-color-status-negative-default-dark: #E13E53;
-  --modes-color-status-negative-default-alt-dark: #241212; /* Subtle message bg */
-  --modes-color-status-negative-hover-dark: #ea626a; /* used on pill hover states */
-  --modes-color-status-negative-hover-alt-dark: #3d1a1c; /* used on pill hover states and message bg */
-  --modes-color-status-negative-text-dark: #E13E53;
-  --modes-color-status-negative-inverse-default-dark: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-negative-inverse-default-alt-dark: #fdeceb; /* Subtle message bg */
-  --modes-color-status-negative-inverse-hover-dark: #ac3240; /* used on pill hover states */
-  --modes-color-status-negative-inverse-hover-alt-dark: #f9d3d1; /* used on pill hover states and message bg */
-  --modes-color-status-negative-inverse-text-dark: #CD384B;
-  --modes-color-status-neutral-default-dark: #7C7C7C;
-  --modes-color-status-neutral-default-alt-dark: #171717; /* Subtle message bg */
-  --modes-color-status-neutral-hover-dark: #8e8e8e; /* used on pill hover states */
-  --modes-color-status-neutral-hover-alt-dark: #242424; /* used on pill hover states and message bg */
-  --modes-color-status-neutral-frozen-default-dark: #9e9e9e;
-  --modes-color-status-neutral-frozen-default-alt-dark: #171717; /* Subtle message bg */
-  --modes-color-status-neutral-frozen-hover-dark: #8e8e8e;
-  --modes-color-status-neutral-frozen-hover-alt-dark: #2a2a2a; /* used on pill hover states and message bg */
-  --modes-color-status-neutral-inverse-default-dark: #656565;
-  --modes-color-status-neutral-inverse-default-alt-dark: #efefef; /* Subtle message bg */
-  --modes-color-status-neutral-inverse-hover-dark: #696969; /* used on pill hover states */
-  --modes-color-status-neutral-inverse-hover-alt-dark: #d9d9d9; /* used on pill hover states and message bg */
-  --modes-color-status-positive-default-dark: #009023;
-  --modes-color-status-positive-default-alt-dark: #0e1a0b; /* Subtle message bg */
-  --modes-color-status-positive-hover-dark: #359b3b; /* used on pill hover states */
-  --modes-color-status-positive-hover-alt-dark: #132912; /* used on pill hover states and message bg */
-  --modes-color-status-positive-inverse-default-dark: #00811F; /* For pills and messages. Not accessible with white TEXT. */
-  --modes-color-status-positive-inverse-default-alt-dark: #e9f2e8; /* Subtle message bg */
-  --modes-color-status-positive-inverse-hover-dark: #0e6d1d; /* used on pill hover states  */
-  --modes-color-status-positive-inverse-hover-alt-dark: #cbe1c9; /* used on pill hover states and message bg */
-  --modes-color-status-reviews-default-dark: #00D639;
-  --modes-color-status-reviews-default-alt-dark: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
-  --modes-color-status-reviews-hover-dark: #17b333; /* used on pill hover states */
-  --modes-color-status-reviews-frozen-default-dark: #00D639;
-  --modes-color-status-reviews-frozen-default-alt-dark: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
-  --modes-color-status-reviews-frozen-hover-dark: #17b333; /* used on pill hover states */
-  --modes-color-modifier-contrast-less-dark: #000000;
-  --modes-color-modifier-contrast-more-dark: #FFFFFF;
-  /* badge component tokens */
-  --badge-radius-badge: var(--global-radius-circle); /* Badge */
-  --badge-color-notification-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Used in global nav notification badges */
-  --badge-color-notification-bg-alt: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --badge-color-notification-inverse-border-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
-  --badge-color-notification-inverse-bg-default: light-dark(var(--modes-color-status-negative-inverse-default-light), var(--modes-color-status-negative-inverse-default-dark)); /* Used in global nav notification badges */
-  --badge-color-notification-inverse-bg-alt: light-dark(var(--modes-color-status-info-inverse-default-light), var(--modes-color-status-info-inverse-default-dark));
-  --badge-color-notification-inverse-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
-  --badge-color-notification-inverse-label-alt: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
-  --badge-typography-m: var(--global-typography-component-notification-m);
-  --badge-color-notification-border-default: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark));
-  --badge-color-notification-label-default: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark));
-  --badge-color-notification-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark));
-  --badge-size-micro-dot: var(--global-size-micro-m); /* Micro dot badge size */
-  --badge-size-micro-numbered-min: var(--global-size-macro-xxs); /* Micro dot badge size with numbering */
-  --badge-size-micro-numbered-max: var(--global-size-macro-s); /* Micro dot badge size max width */
-  --badge-size-standard-min: var(--global-size-macro-xs); /* standard badge size */
-  --badge-size-standard-max: calc(var(--global-size-macro-s) + var(--global-size-micro-xs)); /* Standard badge max-width */
-  --badge-space-x-s: var(--global-space-micro-xs); /* horizontal padding on micro badges with numbering */
-  --badge-space-x-m: var(--global-space-micro-s); /* horizontal padding on typical badge */
-  --badge-space-y-s: var(--global-space-micro-xxs); /* bottom padding on micro badge with number */
-  --badge-space-y-m: var(--global-space-micro-xxs); /* bottom padding on typical badge */
-  --badge-borderwidth-badge: var(--global-borderwidth-s); /* Badge */
-  /* button component tokens */
-  --button-space-none: 0; /* top and bottom padding on small buttons */
-  --button-space-bar-iconbutton-x-inner-l: 14px; /* Inner sides of all buttons.  */
-  --button-space-bar-iconbutton-x-outer-m: 14px; /* Outer buttons, outer sides.  */
-  --button-dimension-video: 40px; /* background blur on video */
-  --button-color-ai-bg-active: light-dark(var(--modes-color-interactive-ai-active-light), var(--modes-color-interactive-ai-active-dark));
-  --button-color-ai-bg-hover: light-dark(var(--modes-color-interactive-ai-hover-light), var(--modes-color-interactive-ai-hover-dark));
-  --button-radius-none: var(--global-radius-none);
-  --button-radius-fab: var(--global-radius-circle); /* FAB Button radius */
-  --button-borderwidth-none: var(--global-borderwidth-none); /* Override on tertiary buttons within Button-toggle.  */
-  --button-borderwidth-primary: var(--global-borderwidth-none); /* primary button border  */
-  --button-borderwidth-tertiarymarketing: var(--global-borderwidth-none); /* tertiary button border used for a marketing override */
-  --button-color-none: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark)); /* transparent override used for hiding colors when needed. */
-  --button-color-ai-border-active: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
-  --button-color-ai-border-enabled: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
-  --button-color-ai-border-hover: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
-  --button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
-  --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
-  --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
-  --button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
-  --button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
-  --button-color-typical-primary-bg-default: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark)); /* For spacer in Split button */
-  --button-color-typical-primary-label-active: light-dark(var(--modes-color-interactive-primary-with-active-light), var(--modes-color-interactive-primary-with-active-dark));
-  --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
-  --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
-  --button-color-typical-primary-inverse-bg-default: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark)); /* For spacer in Split button */
-  --button-color-typical-primary-inverse-bg-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
-  --button-color-typical-primary-inverse-label-active: light-dark(var(--modes-color-interactive-primary-inverse-with-active-light), var(--modes-color-interactive-primary-inverse-with-active-dark));
-  --button-color-typical-primary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-alt-light), var(--modes-color-interactive-inactive-inverse-content-alt-dark));
-  --button-color-typical-primary-inverse-label-enabled: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
-  --button-color-typical-primary-inverse-label-hover: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
-  --button-color-typical-secondary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
-  --button-color-typical-secondary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
-  --button-color-typical-tertiary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
-  --button-color-typical-tertiary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
-  --button-color-typical-subtle-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
-  --button-typography-primary-s: var(--global-typography-component-firm-s);
-  --button-typography-primary-m: var(--global-typography-component-firm-m);
-  --button-typography-primary-l: var(--global-typography-component-firm-l);
-  --button-typography-secondary-xs: var(--global-typography-component-firm-s);
-  --button-typography-secondary-s: var(--global-typography-component-firm-s);
-  --button-typography-secondary-m: var(--global-typography-component-firm-m);
-  --button-typography-secondary-l: var(--global-typography-component-firm-l);
-  --button-typography-subtle-xs: var(--global-typography-component-firm-s);
-  --button-typography-subtle-s: var(--global-typography-component-firm-s);
-  --button-typography-subtle-m: var(--global-typography-component-firm-m);
-  --button-typography-subtle-l: var(--global-typography-component-firm-l);
-  --button-typography-tertiary-xs: var(--global-typography-component-firm-s);
-  --button-typography-tertiary-s: var(--global-typography-component-firm-s);
-  --button-typography-tertiary-m: var(--global-typography-component-firm-m);
-  --button-typography-tertiary-l: var(--global-typography-component-firm-l);
-  --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
-  --button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
-  --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
-  --button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
-  --button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
-  --button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
-  --button-color-typical-primary-inverse-bg-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-light), var(--modes-color-interactive-primary-inverse-default-dark));
-  --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
-  --button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
-  --button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
-  --button-color-typical-tertiary-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --button-color-typical-tertiary-inverse-bg-enabled: var(--button-color-none);
-  --button-color-typical-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
-  --button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
-  --button-color-typical-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --button-color-typical-toggle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
-  --button-color-typical-toggle-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --button-color-video-bg-blur: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
-  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
-  --button-size-xs: var(--global-size-macro-xs); /* min-height on XS Buttons */
-  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
-  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
-  --button-size-l: var(--global-size-macro-l); /* min-height on L Buttons */
-  --button-size-toggle-xs: var(--global-size-macro-xs); /* min-height on button within S toggle group */
-  --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
-  --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
-  --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
-  --button-size-icon-s: var(--global-size-icon-s);
-  --button-size-icon-m: var(--global-size-icon-m);
-  --button-size-video-s: var(--global-size-macro-m);
-  --button-size-video-m: var(--global-size-macro-xxl);
-  --button-size-video-l: calc(var(--global-size-macro-m) * 2);
-  --button-space-bar-iconbutton-x-inner-m: var(--global-space-micro-xl); /* Inner sides of all buttons.  */
-  --button-space-bar-iconbutton-x-outer-l: var(--global-space-macro-s); /* Outer buttons, outer sides.  */
-  --button-space-fab-child-x-m: var(--global-space-macro-xxxs); /* Left padding on FAB child container and text within FAB single  */
-  --button-space-fab-child-x-l: var(--global-space-macro-xs); /* Right padding on FAB child container  */
-  --button-space-fab-parent-x-m: var(--global-space-macro-xs); /* Left and right padding on FAB parent container  */
-  --button-space-fab-parent-xg-m: var(--global-space-micro-xxl); /* Item spacing inside buttons */
-  --button-space-fab-parent-y-m: var(--global-space-macro-xs); /* Top and bottom padding on FAB parent container  */
-  --button-space-layout-x-xs: var(--global-space-macro-xxxs); /* XS left and right padding */
-  --button-space-layout-x-s: var(--global-space-macro-xs); /* Small left and right padding */
-  --button-space-layout-x-m: var(--global-space-macro-m); /* Medium left and right padding */
-  --button-space-layout-x-l: var(--global-space-macro-l); /* Large left and right padding */
-  --button-space-layout-y-xs: var(--global-space-macro-xxxs); /* XS top and bottom padding */
-  --button-space-layout-y-s: var(--global-space-macro-xs); /* Small top bottom padding */
-  --button-space-layout-y-m: var(--global-space-macro-m); /* Medium top bottom padding */
-  --button-space-layout-y-l: var(--global-space-macro-l); /* Large top bottom padding */
-  --button-space-layout-xg-s: var(--global-space-macro-xxxs); /* Horizontal spacing between small buttons */
-  --button-space-layout-xg-m: var(--global-space-micro-xxl); /* Horizontal spacing between medium buttons */
-  --button-space-layout-xg-l: var(--global-space-macro-xs); /* Horizontal spacing between Large buttons */
-  --button-space-layout-yg-s: var(--global-space-macro-xxxs); /* Vertical spacing between small buttons */
-  --button-space-layout-yg-m: var(--global-space-micro-xxl); /* Vertical spacing between medium buttons */
-  --button-space-layout-yg-l: var(--global-space-macro-xs); /* Vertical spacing between Large buttons */
-  --button-space-primary-x-s: var(--global-space-macro-xxs); /* Left and right padding on small buttons */
-  --button-space-primary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
-  --button-space-primary-x-l: var(--global-space-macro-s); /* Left and right padding on large buttons */
-  --button-space-primary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-primary-xg-m: calc(var(--global-space-macro-xs) / 2); /* Item spacing inside buttons */
-  --button-space-primary-xg-l: calc(var(--global-space-macro-xs) / 2); /* Item spacing inside buttons */
-  --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
-  --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
-  --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
-  --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
-  --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
-  --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
-  --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
-  --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
-  --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
-  --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
-  --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
-  --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
-  --button-space-secondary-x-l: var(--global-space-macro-s); /* Left and right padding on large buttons */
-  --button-space-secondary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
-  --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
-  --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
-  --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
-  --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
-  --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
-  --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
-  --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
-  --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
-  --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
-  --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
-  --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
-  --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
-  --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
-  --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
-  --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
-  --button-space-tertiary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
-  --button-space-tertiary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
-  --button-space-tertiary-x-s: var(--global-space-macro-xxs); /* Left and right padding on small buttons */
-  --button-space-tertiary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
-  --button-space-tertiary-x-l: var(--global-space-macro-s); /* Left and right padding on large buttons */
-  --button-space-tertiary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
-  --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
-  --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
-  --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
-  --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
-  --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
-  --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
-  --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
-  --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
-  --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
-  --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
-  --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
-  --button-space-subtle-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
-  --button-space-subtle-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
-  --button-space-subtle-x-s: var(--global-space-macro-xxxs); /* left and right padding on subtle buttons */
-  --button-space-subtle-x-m: var(--global-space-macro-xxxs); /* left and right padding on subtle buttons */
-  --button-space-subtle-x-l: var(--global-space-macro-xxxs); /* left and right padding on subtle buttons */
-  --button-space-subtle-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
-  --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
-  --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
-  --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
-  --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
-  --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
-  --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
-  --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
-  --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
-  --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
-  --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
-  --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
-  --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
-  --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
-  --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
-  --button-space-toggle-button-x-l: var(--global-space-macro-s); /* Left and right padding on buttons */
-  --button-space-toggle-button-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
-  --button-space-toggle-button-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
-  --button-space-toggle-button-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside toggle buttons */
-  --button-space-toggle-button-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* Top and bottom padding on toggle buttons  */
-  --button-space-toggle-button-y-s: var(--global-space-micro-s); /* Top and bottom padding on toggle buttons  */
-  --button-space-toggle-button-y-m: var(--global-space-micro-l); /* Top and bottom padding on toggle buttons  */
-  --button-space-toggle-button-y-l: var(--global-space-micro-xl)-0.5; /* Top and bottom padding on toggle buttons  */
-  --button-space-toggle-container-x-s: var(--global-space-micro-s); /* Horizontal padding */
-  --button-space-toggle-container-x-m: var(--global-space-micro-s); /* Horizontal padding */
-  --button-space-toggle-container-x-l: var(--global-space-micro-s); /* Horizontal padding */
-  --button-space-toggle-container-xg-s: var(--global-space-micro-l); /* Spacing between buttons in Toggle.  */
-  --button-space-toggle-container-xg-m: var(--global-space-micro-l); /* Spacing between buttons in Toggle.  */
-  --button-space-toggle-container-xg-l: var(--global-space-micro-l); /* Spacing between buttons in Toggle.  */
-  --button-space-toggle-container-y-s: var(--global-space-micro-s); /* Vertical padding */
-  --button-space-toggle-container-y-m: var(--global-space-micro-s); /* Vertical padding */
-  --button-space-toggle-container-y-l: var(--global-space-micro-s); /* Vertical padding */
-  --button-space-toggle-container-yg-s: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group.  */
-  --button-space-toggle-container-yg-m: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group.  */
-  --button-space-toggle-container-yg-l: var(--global-space-micro-l); /* Row gap between buttons in wrapped toggle group.  */
-  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
-  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
-  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
-  --button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
-  --button-color-destructive-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-typical-primary-bg-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
-  --button-color-typical-primary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
-  --button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
-  --button-color-typical-primary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
-  --button-color-typical-primary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-light), var(--modes-color-interactive-primary-inverse-hover-dark));
-  --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-primary-active-alt-light), var(--modes-color-interactive-primary-active-alt-dark));
-  --button-color-typical-secondary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-alt3-light), var(--modes-color-interactive-primary-default-alt3-dark));
-  --button-color-typical-secondary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-alt-light), var(--modes-color-interactive-primary-hover-alt-dark));
-  --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
-  --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-primary-default-alt-light), var(--modes-color-interactive-primary-default-alt-dark));
-  --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
-  --button-color-typical-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-color-typical-secondary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-alt-light), var(--modes-color-interactive-primary-inverse-active-alt-dark));
-  --button-color-typical-secondary-inverse-bg-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-alt3-light), var(--modes-color-interactive-primary-inverse-default-alt3-dark));
-  --button-color-typical-secondary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-alt-light), var(--modes-color-interactive-primary-inverse-hover-alt-dark));
-  --button-color-typical-secondary-inverse-border-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
-  --button-color-typical-secondary-inverse-border-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-alt-light), var(--modes-color-interactive-primary-inverse-default-alt-dark));
-  --button-color-typical-secondary-inverse-border-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-light), var(--modes-color-interactive-primary-inverse-hover-dark));
-  --button-color-typical-secondary-inverse-label-active: light-dark(var(--modes-color-interactive-monochrome-inverse-with-active-alt-light), var(--modes-color-interactive-monochrome-inverse-with-active-alt-dark));
-  --button-color-typical-secondary-inverse-label-enabled: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
-  --button-color-typical-secondary-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-with-hover-light), var(--modes-color-interactive-monochrome-inverse-with-hover-dark));
-  --button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-primary-active-alt-light), var(--modes-color-interactive-primary-active-alt-dark));
-  --button-color-typical-tertiary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-alt-light), var(--modes-color-interactive-primary-hover-alt-dark));
-  --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
-  --button-color-typical-tertiary-border-enabled: light-dark(var(--modes-color-interactive-primary-default-alt-light), var(--modes-color-interactive-primary-default-alt-dark));
-  --button-color-typical-tertiary-border-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
-  --button-color-typical-tertiary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-color-typical-tertiary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-alt-light), var(--modes-color-interactive-primary-inverse-active-alt-dark));
-  --button-color-typical-tertiary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-alt-light), var(--modes-color-interactive-primary-inverse-hover-alt-dark));
-  --button-color-typical-tertiary-inverse-border-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
-  --button-color-typical-tertiary-inverse-border-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-alt-light), var(--modes-color-interactive-primary-inverse-default-alt-dark));
-  --button-color-typical-tertiary-inverse-border-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-light), var(--modes-color-interactive-primary-inverse-hover-dark));
-  --button-color-typical-tertiary-inverse-label-active: light-dark(var(--modes-color-interactive-monochrome-inverse-with-active-alt-light), var(--modes-color-interactive-monochrome-inverse-with-active-alt-dark));
-  --button-color-typical-tertiary-inverse-label-enabled: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
-  --button-color-typical-tertiary-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-with-hover-light), var(--modes-color-interactive-monochrome-inverse-with-hover-dark));
-  --button-color-typical-subtle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-color-typical-subtle-inverse-bg-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-hover-alt-light), var(--modes-color-interactive-monochrome-inverse-hover-alt-dark));
-  --button-color-typical-subtle-inverse-label-active: light-dark(var(--modes-color-interactive-monochrome-inverse-with-active-alt-light), var(--modes-color-interactive-monochrome-inverse-with-active-alt-dark));
-  --button-color-typical-subtle-inverse-label-enabled: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
-  --button-color-typical-subtle-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-with-hover-light), var(--modes-color-interactive-monochrome-inverse-with-hover-dark));
-  --button-color-typical-toggle-label-active-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
-  --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-color-typical-toggle-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --button-color-typical-toggle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --button-color-video-primary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --button-color-video-primary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-color-video-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --button-color-video-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --button-color-video-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --button-color-video-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container) */
-  --button-radius-m: var(--global-radius-interactive-xl); /* Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container) */
-  --button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
-  --button-radius-chip: var(--global-radius-interactive-m); /* Buttons chip */
-  --button-radius-primary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container) */
-  --button-radius-primary-m: var(--global-radius-interactive-xl); /* Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container) */
-  --button-radius-primary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
-  --button-radius-secondary-xs: calc(var(--global-radius-interactive-m) + var(--global-radius-interactive-s)); /* Consumed within XS buttons only in table context. */
-  --button-radius-secondary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container) */
-  --button-radius-secondary-m: var(--global-radius-interactive-xl); /* Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container) */
-  --button-radius-secondary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
-  --button-radius-tertiary-xs: calc(var(--global-radius-interactive-m) + var(--global-radius-interactive-s)); /* Consumed within XS buttons only in table context. */
-  --button-radius-tertiary-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container) */
-  --button-radius-tertiary-m: var(--global-radius-interactive-xl); /* Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container) */
-  --button-radius-tertiary-l: var(--global-radius-interactive-xxl); /* large tertiary button */
-  --button-radius-subtle-xs: calc(var(--global-radius-interactive-m) + var(--global-radius-interactive-s)); /* Consumed within XS buttons only in table context. */
-  --button-radius-subtle-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
-  --button-radius-subtle-m: var(--global-radius-interactive-xl); /* Buttons  M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
-  --button-radius-subtle-l: var(--global-radius-interactive-xxl); /* large subtle button */
-  --button-radius-toggle-button-xs: var(--global-radius-interactive-xxl)/2; /* XS single toggle button (used within S toggle group) */
-  --button-radius-toggle-button-s: var(--global-radius-interactive-l); /* S single toggle button (used within M toggle group) */
-  --button-radius-toggle-button-m: var(--global-radius-interactive-xl); /* M single toggle button (used within L toggle group) */
-  --button-radius-toggle-button-l: var(--global-radius-interactive-xxl); /* L single toggle button */
-  --button-radius-toggle-container-s: var(--global-radius-interactive-l); /* S toggle group */
-  --button-radius-toggle-container-m: var(--global-radius-interactive-xl); /* M toggle group */
-  --button-radius-toggle-container-l: var(--global-radius-interactive-xxl); /* L toggle group */
-  --button-borderwidth-chip: var(--global-borderwidth-xs); /* chip button border width */
-  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button.  */
-  --button-borderwidth-tertiary: var(--global-borderwidth-xs); /* tertiary button border  */
-  --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
-  --button-color-ai-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --button-color-destructive-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --button-color-destructive-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --button-color-typical-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --button-color-typical-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-alt-light), var(--modes-color-interactive-monochrome-active-alt-dark));
-  --button-color-typical-subtle-inverse-bg-active: light-dark(var(--modes-color-interactive-monochrome-inverse-active-alt-light), var(--modes-color-interactive-monochrome-inverse-active-alt-dark));
-  --button-color-typical-toggle-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --button-color-typical-toggle-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  /* container component tokens */
-  --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
-  --container-size-dialog-max-width-xxs: 300;
-  --container-size-dialog-max-width-xs: 380;
-  --container-size-dialog-max-width-s: 540;
-  --container-size-dialog-max-width-m: 850;
-  --container-size-dialog-max-width-l: 1080;
-  --container-size-dialog-max-width-xl: 960;
-  --container-size-dialog-max-width-xxl: 1080;
-  --container-size-dialog-min-width-s: 288;
-  --container-size-dialog-min-width-m: 288;
-  --container-size-dialog-min-width-l: 288;
-  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
-  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
-  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
-  --container-radius-none: var(--global-radius-none); /* Card select (inner adjacent corners), Subscription tile footer top corners */
-  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
-  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
-  --container-color-ai-dialog-borderhorizontal: light-dark(var(--modes-color-generic-fg-ai-default-light), var(--modes-color-generic-fg-ai-default-dark)); /* top border for AI dialog component */
-  --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
-  --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
-  --container-color-ai-tile-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left border for AI tiles and bubbles. */
-  --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /*   */
-  --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color  */
-  --container-color-interactive-bg-enabled: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-default-light), var(--modes-color-custom-default-dark)); /*   */
-  --container-color-interactive-droptarget-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* draggable drop target background color */
-  --container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --container-color-standard-statusborder-bg-caution: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --container-color-standard-statusborder-bg-negative: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --container-color-standard-statusborder-bg-important: light-dark(var(--modes-color-status-important-default-light), var(--modes-color-status-important-default-dark));
-  --container-color-standard-statusborder-bg-info: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --container-color-standard-statusborder-bg-neutral: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
-  --container-color-standard-statusborder-bg-positive: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --container-boxshadow-none: var(--global-boxshadow-none);
-  --container-typography-heading-m: var(--global-typography-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
-  --container-typography-heading-l: var(--global-typography-heading-m); /* Dialog, drawer and sidebar headings */
-  --container-typography-subheading-m: var(--global-typography-subheading-m); /* Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
-  --container-typography-label-s: var(--global-typography-component-firm-s);
-  --container-typography-label-m: var(--global-typography-component-firm-m);
-  --container-typography-label-l: var(--global-typography-component-firm-l);
-  --container-typography-paragraph-s: var(--global-typography-component-moderate-s);
-  --container-typography-paragraph-m: var(--global-typography-component-moderate-m);
-  --container-typography-paragraph-l: var(--global-typography-component-moderate-l);
-  --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
-  --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark)); /* Used for accordion hover backgrounds  */
-  --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --container-color-interactive-icon-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark)); /* Active chevron for any accordion. */
-  --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark)); /* Active label for any accordion. */
-  --container-color-interactive-text-enabled: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* Enabled label for standard accordion. */
-  --container-color-interactive-text-alt-enabled: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* Enabled label for subtle accordion. */
-  --container-color-scrollbar-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
-  --container-color-standard-bg-alt: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
-  --container-color-standard-bg-footer-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* tile footer bg color  */
-  --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
-  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
-  --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc  */
-  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
-  --container-boxshadow-carousel: var(--global-boxshadow-container-distant); /* Carousel  */
-  --container-boxshadow-colorpicker: var(--global-boxshadow-container-near); /* Color picker (advanced)  */
-  --container-boxshadow-dialog: var(--global-boxshadow-container-distant); /* Dialog  */
-  --container-boxshadow-filepreview: var(--global-boxshadow-container-distant); /* File preview */
-  --container-boxshadow-nudge: var(--global-boxshadow-container-far); /* nudge shadow */
-  --container-boxshadow-sidebar: var(--global-boxshadow-container-distant); /* Sidebar */
-  --container-boxshadow-stickyfooter: var(--global-boxshadow-container-sticky-footer); /* Sticky footer in Dialog, Drawer, Sidebar. */
-  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
-  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
-  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
-  --container-color-interactive-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
-  --container-color-interactive-border-alt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Link preview.  */
-  --container-color-interactive-borderalt-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* For hover border on Link preview. */
-  --container-color-interactive-border-inactive: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
-  --container-color-interactive-border-enabled: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
-  --container-color-interactive-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* Enabled chevron for any accordion. */
-  --container-color-interactive-icon-alt-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark)); /* Enabled label for subtle accordion. */
-  --container-color-interactive-icon-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* Hover chevron for any accordion. */
-  --container-color-interactive-label-footer-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --container-color-interactive-label-footer-activated: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --container-color-interactive-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* Hover label for any accordion. */
-  --container-color-scrollbar-fg-default: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
-  --container-color-standard-border-alt: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
-  --container-color-standard-border-default: light-dark(var(--modes-color-generic-fg-faint-light), var(--modes-color-generic-fg-faint-dark));
-  --container-color-standard-icon: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark)); /* Link preview image thumbnail */
-  --container-size-none: var(--global-size-none);
-  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
-  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
-  --container-size-chatbubble-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max width for chat bubbles */
-  --container-size-copilot-emptystate-illustration: calc(var(--global-size-macro-m) * 5); /* Illustration size */
-  --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
-  --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
-  --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
-  --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
-  --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
-  --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
-  --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-icon-s: var(--global-size-icon-m);
-  --container-size-icon-m: var(--global-size-icon-m);
-  --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */
-  --container-size-linkpreview-thumbnail-s: calc(var(--global-size-macro-xxxxl) - 3); /* Thumbnail height and width for small variant */
-  --container-size-linkpreview-thumbnail-m: calc(var(--global-size-macro-xxxxl) + var(--global-size-macro-xxs)); /* Thumbnail height and width for medium variant */
-  --container-size-linkpreview-thumbnail-l: calc(var(--global-size-macro-xxxxl) + var(--global-size-macro-l)); /* Thumbnail height and width for large variant */
-  --container-size-linkpreview-headertext-s: var(--global-size-macro-s); /* fixed text layer size for small header */
-  --container-size-linkpreview-headertext-m: var(--global-size-macro-s); /* fixed text layer size for large header */
-  --container-size-linkpreview-headertext-l: var(--global-size-macro-m); /* fixed text layer size for small header */
-  --container-size-linkpreview-descriptiontext-s: calc(var(--global-size-macro-m) + var(--global-size-micro-xs)); /* Fixed height for small note description text string */
-  --container-size-linkpreview-descriptiontext-m: var(--global-size-macro-l); /* Fixed height for medium note description text string */
-  --container-size-linkpreview-descriptiontext-l: var(--global-size-macro-xl); /* Fixed height for large note description text string */
-  --container-size-responsive-xxs: var(--global-size-flex-xxs); /* min and max widths for responsive tile items */
-  --container-size-responsive-xs: var(--global-size-flex-xs); /* min and max widths for responsive tile items */
-  --container-size-responsive-s: var(--global-size-flex-s); /* min and max widths for responsive tile items. Min width for Tile select content wrapper. */
-  --container-size-responsive-m: var(--global-size-flex-m); /* min and max widths for responsive tile items */
-  --container-size-responsive-l: var(--global-size-flex-l); /* min and max widths for responsive tile items */
-  --container-size-responsive-xl: var(--global-size-flex-xl); /* Small screen mid width inside page margins. */
-  --container-size-responsive-xxl: var(--global-size-flex-xxl); /* Small screen full page width. */
-  --container-size-responsive-xxxl: var(--global-size-flex-xxxl); /* min and max widths for responsive tile items */
-  --container-size-responsive-xxxxl: var(--global-size-flex-xxxxl); /* Max width for single line of text. */
-  --container-size-scrollbar-container: var(--global-size-micro-xl); /* Container that the scrollbar sits within  */
-  --container-size-sidebar-responsive-min: var(--global-size-flex-xl); /* min-width for sidebar */
-  --container-size-sidebar-responsive-max: var(--global-size-flex-xxxxl); /* max-width for sidebar */
-  --container-size-tile-statusborder: var(--global-size-micro-m); /* width of left status borders on tiles. */
-  --container-size-tileselect-footer: var(--global-size-macro-l); /* Product identifier  */
-  --container-size-tileselect-productidentifier-m: var(--global-size-macro-s); /* Product identifier  */
-  --container-size-tileselect-productidentifier-l: var(--global-size-macro-l); /* Product identifier  */
-  --container-size-tooltip-arrow-width: var(--global-size-micro-xxl); /* tooltip arrow width */
-  --container-size-tooltip-arrow-height: var(--global-size-micro-m); /* tooltip arrow height */
-  --container-size-uploadpreview-m: var(--global-size-macro-xxxl); /* Thumbnail container */
-  --container-radius-carouselslide: var(--global-radius-container-l); /* Carousel slides */
-  --container-radius-colorpicker: var(--global-radius-container-l); /* Color picker container radius */
-  --container-radius-contacttile: var(--global-radius-container-m);
-  --container-radius-dialog: var(--global-radius-container-xl); /* Dialog */
-  --container-radius-filepreview: var(--global-radius-container-m); /* File preview (parent container),  */
-  --container-radius-linkpreview: var(--global-radius-interactive-s); /* Link preview (outer corners) */
-  --container-radius-heroimage: var(--global-radius-container-xxxxl); /* hero image radius */
-  --container-radius-note: var(--global-radius-container-m); /* Note */
-  --container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
-  --container-radius-profileselector: var(--global-radius-container-m); /* Profile selector list container. */
-  --container-radius-texteditor: var(--global-radius-container-m); /* Text editor (footer bottom corners)  */
-  --container-radius-card-moderate: var(--global-radius-container-l); /* Card (less rounded) */
-  --container-radius-card-curved: var(--global-radius-container-xl); /* Card (more rounded) */
-  --container-radius-card-sweeping: var(--global-radius-container-xxl); /* Card largest rounded type */
-  --container-radius-tile-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
-  --container-radius-tile-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
-  --container-radius-tile-sweeping: var(--global-radius-container-xxl); /* Tile largest roundedness  */
-  --container-radius-tileselect-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
-  --container-radius-tileselect-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
-  --container-radius-tileselect-sweeping: var(--global-radius-container-xxl);
-  --container-space-none: var(--global-space-none);
-  --container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
-  --container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
-  --container-space-filepreview-preview-y-m: var(--global-space-micro-l); /* Vertical padding on large thumbnail image. */
-  --container-space-flex-xg-s: var(--global-space-macro-xs); /* Small horizontal item spacing */
-  --container-space-flex-xg-m: var(--global-space-macro-m); /* Medium horizontal item spacing */
-  --container-space-flex-xg-l: var(--global-space-macro-l); /* Large horizontal item spacing */
-  --container-space-flex-yg-s: var(--global-space-macro-xs); /* Small row gap */
-  --container-space-flex-yg-m: var(--global-space-macro-m); /* Medium row gap */
-  --container-space-flex-yg-l: var(--global-space-macro-l); /* Large row gap */
-  --container-space-flex-item-x-s: var(--global-space-macro-xs); /* Small left and right padding on flex items */
-  --container-space-flex-item-x-m: var(--global-space-macro-m); /* Medium left and right padding on flex items */
-  --container-space-flex-item-x-l: var(--global-space-macro-l); /* Large left and right padding on flex items */
-  --container-space-flex-item-y-s: var(--global-space-macro-xs); /* Small top bottom padding on flex items */
-  --container-space-flex-item-y-m: var(--global-space-macro-m); /* Medium top bottom padding on flex items */
-  --container-space-flex-item-y-l: var(--global-space-macro-l); /* Large top bottom padding on flex items */
-  --container-space-generic-content-x-xs: var(--global-space-micro-l);
-  --container-space-generic-content-x-s: var(--global-space-macro-xs); /* Left and right padding copilot chat history items, S accordions, S cards and S tiles */
-  --container-space-generic-content-x-m: var(--global-space-macro-m); /* Left and right padding on dialog, drawer, M cards, M tiles and sidebar */
-  --container-space-generic-content-x-l: var(--global-space-macro-l); /* Left and right padding on large card and tile  */
-  --container-space-generic-content-y-xs: var(--global-space-micro-l);
-  --container-space-generic-content-y-s: var(--global-space-macro-xs); /* Top and bottom padding S Accordions, S cards and S tiles */
-  --container-space-generic-content-y-m: var(--global-space-macro-m); /* Vertical padding on content in dialog, drawer, sidebar card and tile */
-  --container-space-generic-content-y-l: var(--global-space-macro-l);
-  --container-space-generic-content-xg-xs: var(--global-space-micro-s); /* Gap padding within timestamp in Note. */
-  --container-space-generic-content-xg-s: var(--global-space-macro-xs); /* gap padding between carousel tiles */
-  --container-space-generic-content-xg-m: var(--global-space-macro-m); /* gap padding between carousel tiles */
-  --container-space-generic-content-yg-s: var(--global-space-micro-l); /* Vertical gap between content items in Anchor nav quick links  */
-  --container-space-generic-content-yg-m: var(--global-space-macro-xs); /* Vertical gap between content items in copilot content, dialog, drawer, sidebar, M card and M tile.  */
-  --container-space-generic-content-yg-l: var(--global-space-macro-m); /* vertical gap between block quote text and avatar */
-  --container-space-generic-outer-x-m: var(--global-space-macro-m); /* Left and right margins on dialog and sidebar in small screen full width contexts */
-  --container-space-generic-outer-y-m: var(--global-space-macro-m); /* Top and Bottom margins on dialog and sidebar in small screen full width contexts */
-  --container-space-generic-header-x-s: var(--global-space-macro-xs); /* Left and right padding on accordion */
-  --container-space-generic-header-x-m: var(--global-space-macro-m); /* Left and right padding on copilot, dialog, drawer, M cards, M tiles and sidebar. */
-  --container-space-generic-header-y-xs: var(--global-space-micro-xxl); /* Top and bottom padding copilot header and subheader. */
-  --container-space-generic-header-y-s: var(--global-space-macro-xs); /* Top and bottom padding on small accordion. */
-  --container-space-generic-header-y-m: var(--global-space-macro-m); /* Vertical padding on accordion, dialog headers and on sub-page headers inside copilot (e.g insights and chat history). */
-  --container-space-generic-header-xg-m: var(--global-space-macro-xs); /* horizontal space between dialog heading and icon */
-  --container-space-generic-header-yg-m: var(--global-space-micro-s); /* vertical space between heading and subheading in dialog, accordion and sub-pages inside copilot. */
-  --container-space-generic-header-yg-l: var(--global-space-macro-xs); /* vertical space between heading and Powered By AI identifier in dialog header */
-  --container-space-generic-emptystate-y-m: var(--global-space-macro-m); /* Spacing between empty state heading and body copy below it. */
-  --container-space-generic-emptystate-y-l: var(--global-space-macro-xl); /* Spacing between empty state roundel and heading below it. */
-  --container-space-generic-footer-x-m: var(--global-space-macro-m); /* Left and right padding on copilot footer */
-  --container-space-generic-footer-y-m: var(--global-space-macro-xs); /* Top and bottom padding on copilot footer */
-  --container-space-note-x-m: var(--global-space-macro-m); /* Left and right padding on Note */
-  --container-space-note-xg-m: var(--global-space-macro-xs); /* Gap between columns in editor detail in Note. */
-  --container-space-note-timestamp-xg-m: var(--global-space-macro-m); /* Gap between created and updated editor columns */
-  --container-space-note-timestamp-yg-m: var(--global-space-micro-s); /* gap between create or updated title and timestamp */
-  --container-space-note-y-m: var(--global-space-macro-m); /* Top bottom padding on Note */
-  --container-space-note-yg-m: var(--global-space-macro-xs); /* Vertical gap on Note */
-  --container-space-linkpreview-x-s: var(--global-space-micro-l); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-x-m: var(--global-space-micro-xxl); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-x-l: var(--global-space-macro-xs); /* Content horizontal padding for large variant */
-  --container-space-linkpreview-xg-s: var(--global-space-micro-l); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-xg-m: var(--global-space-micro-xxl); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-xg-l: var(--global-space-macro-xs); /* Content horizontal padding for large variant */
-  --container-space-linkpreview-y-s: var(--global-space-micro-l); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-y-m: var(--global-space-micro-xxl); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-y-l: var(--global-space-macro-xs); /* Content horizontal padding for large variant */
-  --container-space-linkpreview-yg-s: var(--global-space-micro-s); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-yg-m: var(--global-space-micro-l); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-yg-l: var(--global-space-micro-xxl); /* Content horizontal padding for large variant */
-  --container-space-pagination-xg-m: var(--global-space-macro-xxxs); /* gap between elements in pagination */
-  --container-space-pagination-xg-l: var(--global-space-macro-m); /* gap between button group and advanced left area */
-  --container-space-pagination-y-m: var(--global-space-macro-xxxs); /* top and bottom padding inside pagination */
-  --container-space-pagination-y-l: var(--global-space-macro-xs); /* external margin on top of floating pagination variant */
-  --container-space-pagination-yg-m: var(--global-space-macro-xs); /* Vertical gap between elements on small screens */
-  --container-space-pagination-x-m: var(--global-space-macro-xs); /* left and right padding inside pagination */
-  --container-space-scrollbar-y-inner: var(--global-space-micro-xxs); /* top and bottom padding around scrollbar handle. */
-  --container-space-scrollbar-y-outer: var(--global-space-micro-xs); /* top and bottom padding inside scrollbar outer container */
-  --container-space-summarylist-item-xg-m: var(--global-space-micro-l); /* gap between summary list item content */
-  --container-space-summarylist-item-y-m: var(--global-space-micro-xxl); /* top and bottom padding for each item  */
-  --container-space-summarylist-title-xg-m: var(--global-space-macro-xs); /* gap between summary list title and edit link */
-  --container-space-summarylist-title-y-m: var(--global-space-micro-xxl); /* bottom padding for each section title */
-  --container-space-summarylist-title-y-l: var(--global-space-macro-l); /* top padding for each section title */
-  --container-space-tilecard-x-xs: var(--global-space-macro-xs); /* Left and right padding on Link preview */
-  --container-space-tilecard-x-s: var(--global-space-macro-xs); /* Right left padding on Tile or Card. */
-  --container-space-tilecard-x-m: var(--global-space-macro-m); /* Right left padding on drag wrapper */
-  --container-space-tilecard-x-l: var(--global-space-macro-l); /* Right left padding on Tile or Card. */
-  --container-space-tilecard-x-xxxl: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
-  --container-space-tilecard-xg-m: var(--global-space-micro-l); /* horizontal gap between icons and text */
-  --container-space-tilecard-y-xs: var(--global-space-micro-l); /* Top bottom padding on Link preview and on card drag wrapper */
-  --container-space-tilecard-y-s: var(--global-space-macro-xs); /* Top bottom padding on Tile or Card. */
-  --container-space-tilecard-y-m: var(--global-space-macro-m); /* Top bottom padding on Tile or Card. */
-  --container-space-tilecard-y-l: var(--global-space-macro-l); /* Top bottom padding on Tile or Card. */
-  --container-space-tilecard-yg-s: var(--global-space-micro-s);
-  --container-space-tileselect-x-s: var(--global-space-macro-xs); /* Left and right padding on tile select container */
-  --container-space-tileselect-x-m: var(--global-space-macro-m); /* Left and right padding on tile select container */
-  --container-space-tileselect-x-l: var(--global-space-macro-l); /* Left and right padding on tile select container */
-  --container-space-tileselect-y-s: var(--global-space-macro-xs); /* Top and bottom padding on tile select container */
-  --container-space-tileselect-y-m: var(--global-space-macro-m); /* Top bottom padding on tile select container */
-  --container-space-tileselect-y-l: var(--global-space-macro-l); /* Top and bottom padding on tile select container */
-  --container-space-tileselect-yg-s: var(--global-space-macro-xs); /* Vertical gap between content blocks in Subscription tile. */
-  --container-space-tileselect-yg-m: var(--global-space-macro-m); /* Vertical gap between content blocks in Subscription tile. */
-  --container-space-tileselect-yg-l: var(--global-space-macro-l); /* Vertical gap between content blocks in Subscription tile. */
-  --container-space-tileselect-content-yg-m: var(--global-space-micro-l); /* Vertical gap between strings of text */
-  --container-space-tileselect-header-xg-m: var(--global-space-macro-xs); /* gap between identifier and header content */
-  --container-space-tileselect-header-yg-s: var(--global-space-micro-l); /* Vertical gap between header content wrapper items */
-  --container-space-tileselect-footer-y-m: var(--global-space-micro-l); /* Top bottom padding in footer. */
-  --container-space-tileselect-footer-y-l: var(--global-space-macro-xs); /* Top bottom margins on carousel dots */
-  --container-space-tileselect-footer-xg-s: var(--global-space-micro-l); /* Gap between carousel dots */
-  --container-space-nudge-x-m: var(--global-space-macro-m); /* Left and right padding on medium nudge */
-  --container-space-nudge-x-l: var(--global-space-macro-l); /* left and right padding on large nudge  */
-  --container-space-nudge-y-m: var(--global-space-macro-m); /* Top and bottom padding on medium nudge */
-  --container-space-nudge-y-l: var(--global-space-macro-l); /* Top and bottom paddding on large nudge */
-  --container-space-nudge-yg-m: var(--global-space-micro-l); /* Gap between message elements */
-  --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
-  --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
-  --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
-  --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
-  --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
-  --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
-  --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
-  --container-borderwidth-footer: var(--global-borderwidth-xs); /* Footer (in Card, Dialog)  */
-  --container-borderwidth-header: var(--global-borderwidth-xs); /* Global header (next to logo)  */
-  --container-borderwidth-linkpreview: var(--global-borderwidth-xs); /* Link preview in Text editor and Note  */
-  --container-borderwidth-note: var(--global-borderwidth-xs); /* Note  */
-  --container-borderwidth-profileselector: var(--global-borderwidth-xs); /* Profile selector list container. */
-  --container-borderwidth-nudge: var(--global-borderwidth-xl); /* nudge AI message borders  */
-  --container-borderwidth-sidebar: var(--global-borderwidth-xs); /* Sidebar */
-  --container-borderwidth-summarylist: var(--global-borderwidth-xs); /* Summary list */
-  --container-borderwidth-tile: var(--global-borderwidth-xs); /* Tile */
-  --container-borderwidth-accordion-standard: var(--global-borderwidth-xs); /* Accordion standard (top and bottom borders) */
-  --container-borderwidth-accordion-subtle: var(--global-borderwidth-s); /* Accordion subtle (content vertical line) */
-  --container-borderwidth-filepreview-container: var(--global-borderwidth-xs); /* File preview (internal borders)  */
-  --container-borderwidth-filepreview-enabled: var(--global-borderwidth-xs); /* File preview (file selector)  */
-  --container-borderwidth-filepreview-active: var(--global-borderwidth-s); /* File preview (file selector)  */
-  --container-borderwidth-tileselect-active: var(--global-borderwidth-xs); /* Subscription tile (active product) */
-  --container-borderwidth-tileselect-inactive: var(--global-borderwidth-xs); /* Subscription tile (inactive product) */
-  --container-borderwidth-tileselect-selected: var(--global-borderwidth-s); /* Tile select (selected tile) */
-  --container-borderwidth-tileselect-unavailable: var(--global-borderwidth-xs); /* Subscription tile (unavailable product) */
-  --container-borderwidth-tileselect-enabled: var(--global-borderwidth-xs); /* Tile select (enabled tile) */
-  --container-size-drawer-minwidth: var(--container-size-responsive-xl); /* min-width for drawer component */
-  --container-size-drawer-maxwidth: var(--container-size-responsive-xxxxl); /* max-width for drawer component */
-  /* dataviz component tokens */
-  --dataviz-color-generic-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
-  --dataviz-color-generic-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --dataviz-color-generic-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
-  --dataviz-color-generic-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --dataviz-color-generic-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --dataviz-color-generic-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --dataviz-color-generic-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
-  --dataviz-color-generic-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --dataviz-color-generic-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --dataviz-color-generic-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --dataviz-color-generic-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
-  --dataviz-color-generic-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --dataviz-color-generic-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --dataviz-color-generic-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --dataviz-color-generic-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
-  --dataviz-color-generic-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --dataviz-color-generic-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --dataviz-color-generic-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --dataviz-color-generic-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
-  --dataviz-color-generic-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --dataviz-color-generic-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --dataviz-color-generic-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --dataviz-color-generic-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
-  --dataviz-color-generic-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --dataviz-color-generic-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --dataviz-color-generic-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --dataviz-color-generic-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
-  --dataviz-color-generic-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --dataviz-color-generic-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --dataviz-color-generic-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --dataviz-color-generic-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
-  --dataviz-color-generic-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --dataviz-color-generic-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --dataviz-color-generic-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
-  --dataviz-color-generic-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
-  --dataviz-color-generic-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
-  --dataviz-color-generic-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
-  --dataviz-color-generic-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --dataviz-color-generic-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
-  --dataviz-color-generic-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --dataviz-color-generic-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --dataviz-color-generic-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark)); /* Accessible on colorpicker bg-alt colors. */
-  /* focus component tokens */
-  --focus-color-bg: light-dark(var(--modes-color-interactive-focus-with-default-alt-light), var(--modes-color-interactive-focus-with-default-alt-dark));
-  --focus-color-borderalt: light-dark(var(--modes-color-interactive-focus-default-light), var(--modes-color-interactive-focus-default-dark));
-  --focus-color-border: light-dark(var(--modes-color-interactive-focus-with-default-light), var(--modes-color-interactive-focus-with-default-dark));
-  --focus-color-label: light-dark(var(--modes-color-interactive-focus-content-light), var(--modes-color-interactive-focus-content-dark));
-  --focus-color-inverse-bg: light-dark(var(--modes-color-interactive-focus-inverse-with-default-alt-light), var(--modes-color-interactive-focus-inverse-with-default-alt-dark));
-  --focus-color-inverse-borderalt: light-dark(var(--modes-color-interactive-focus-inverse-default-light), var(--modes-color-interactive-focus-inverse-default-dark));
-  --focus-color-inverse-border: light-dark(var(--modes-color-interactive-focus-inverse-with-default-light), var(--modes-color-interactive-focus-inverse-with-default-dark));
-  --focus-color-inverse-label: light-dark(var(--modes-color-interactive-focus-inverse-content-light), var(--modes-color-interactive-focus-inverse-content-dark));
-  --focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
-  --focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
-  --focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
-  --focus-borderwidth-outer: var(--global-borderwidth-l); /* Focus border (outer) */
-  /* form component tokens */
-  --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
-  --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
-  --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
-  --form-color-switch-border-active: transparent;
-  --form-color-switch-border-activedisabled: transparent;
-  --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
-  --form-radius-colorpicker: var(--global-radius-circle); /* Color picker (swatch container),   */
-  --form-radius-radio: var(--global-radius-circle); /* Radio button */
-  --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
-  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
-  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected),  */
-  --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
-  --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --form-color-validation-bar-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* error bar to left of inputs */
-  --form-color-validation-bar-warning: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* warning bar to left of inputs */
-  --form-color-validation-label-error: light-dark(var(--modes-color-status-negative-text-light), var(--modes-color-status-negative-text-dark));
-  --form-color-validation-label-success: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --form-color-validation-label-warning: light-dark(var(--modes-color-status-caution-text-light), var(--modes-color-status-caution-text-dark));
-  --form-typography-label-s: var(--global-typography-component-firm-s);
-  --form-typography-label-m: var(--global-typography-component-firm-m);
-  --form-typography-label-l: var(--global-typography-component-firm-l);
-  --form-typography-default-s: var(--global-typography-component-moderate-s);
-  --form-typography-default-m: var(--global-typography-component-moderate-m);
-  --form-typography-default-l: var(--global-typography-component-moderate-l);
-  --form-color-calendar-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --form-color-calendar-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
-  --form-color-calendar-border-duration: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --form-color-calendar-text-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --form-color-dropdown-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --form-color-typical-bg-default: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark));
-  --form-color-typical-bg-enabled: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark));
-  --form-color-typical-border-hover: light-dark(var(--modes-color-interactive-data-entry-with-hover-light), var(--modes-color-interactive-data-entry-with-hover-dark)); /* File input draggable border state */
-  --form-color-typical-icon-active: light-dark(var(--modes-color-interactive-data-entry-with-active-light), var(--modes-color-interactive-data-entry-with-active-dark)); /* used on tick in color picker and selected tick on dropdowns */
-  --form-color-typical-icon-hover: light-dark(var(--modes-color-interactive-data-entry-with-hover-light), var(--modes-color-interactive-data-entry-with-hover-dark));
-  --form-color-typical-text-hover: light-dark(var(--modes-color-interactive-data-entry-with-hover-light), var(--modes-color-interactive-data-entry-with-hover-dark)); /* text hover state when dragging a file over file input */
-  --form-color-typical-text-read-only: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
-  --form-color-switch-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --form-color-switch-bg-enabled: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark)); /* for switch */
-  --form-space-none: var(--global-space-none);
-  --form-space-calendar-x-m: var(--global-space-macro-m);
-  --form-space-calendar-y-m: var(--global-space-macro-m);
-  --form-space-calendar-yg-m: var(--global-space-micro-l); /* Space between date rows */
-  --form-space-chip-xg-m: var(--global-space-micro-l); /* gap between medium chip buttons */
-  --form-space-chip-xg-l: var(--global-space-micro-xxl); /* gap between large chip buttons */
-  --form-space-chip-yg-m: var(--global-space-micro-l); /* gap between medium chip buttons */
-  --form-space-chip-yg-l: var(--global-space-micro-xxl); /* gap between large chip buttons */
-  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
-  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
-  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
-  --form-space-dropdown-heading-pr-s: var(--global-space-micro-xxl); /* DD only, right padding. */
-  --form-space-dropdown-heading-pr-m: var(--global-space-micro-xxl); /* DD only, right padding. */
-  --form-space-dropdown-heading-pr-l: var(--global-space-micro-xxl); /* DD only, right padding. */
-  --form-space-dropdown-heading-pt-s: var(--global-space-micro-xxl); /* DD only, top padding. */
-  --form-space-dropdown-heading-pt-m: var(--global-space-micro-xxl); /* DD only, top padding. */
-  --form-space-dropdown-heading-pt-l: var(--global-space-micro-xxl); /* DD only, top padding. */
-  --form-space-dropdown-heading-pl-s: var(--global-space-macro-s); /* DD only, left padding. */
-  --form-space-dropdown-heading-pl-m: var(--global-space-macro-s); /* DD only, left padding. */
-  --form-space-dropdown-heading-pl-l: var(--global-space-macro-s); /* DD only, left padding. */
-  --form-space-dropdown-menu-x-s: var(--global-space-macro-s); /* left and right padding of menu parent container to make message content align with the option text */
-  --form-space-dropdown-menu-x-m: var(--global-space-macro-s); /* left and right padding of menu parent container to make message content align with the option text */
-  --form-space-dropdown-menu-x-l: var(--global-space-macro-s); /* left and right padding of menu parent container to make message content align with the option text */
-  --form-space-dropdown-option-xg-s: var(--global-space-micro-xs); /* DD only. Space between optional icon, prefix, and label. */
-  --form-space-dropdown-option-xg-m: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
-  --form-space-dropdown-option-xg-l: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
-  --form-space-dropdown-option-colorpicker-xg-s: var(--global-space-micro-s); /* space on right of swatch */
-  --form-space-dropdown-option-colorpicker-xg-m: var(--global-space-micro-l); /* space on right of swatch */
-  --form-space-dropdown-option-colorpicker-xg-l: var(--global-space-micro-xxl); /* space on right of swatch */
-  --form-space-dropdown-option-subtext-x-s: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
-  --form-space-dropdown-option-subtext-x-m: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
-  --form-space-dropdown-option-subtext-x-l: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
-  --form-space-dropdown-option-subtext-y-s: var(--global-space-micro-xs); /* top padding for the subtext text underneath standard option text */
-  --form-space-dropdown-option-subtext-y-m: var(--global-space-micro-s); /* top padding for the subtext text underneath standard option text */
-  --form-space-dropdown-option-subtext-y-l: var(--global-space-micro-s); /* top padding for the subtext text underneath standard option text */
-  --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
-  --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
-  --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
-  --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
-  --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
-  --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
-  --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
-  --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
-  --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */
-  --form-space-fileinput-preview-x-m: var(--global-space-micro-xxl); /* Right left padding in File input (preview container). */
-  --form-space-fileinput-preview-y-m: var(--global-space-micro-l); /* Top padding in file input (preview container). */
-  --form-space-fileinput-dropzone-x-m: var(--global-space-macro-m); /* Right left padding in File input (preview container). */
-  --form-space-fileinput-dropzone-y-m: var(--global-space-macro-m); /* Top padding in file input (preview container). */
-  --form-space-fileinput-dropzone-yg-m: var(--global-space-micro-xxl); /* Vertical gap in file input (input container). */
-  --form-space-input-button-x-s: var(--global-space-macro-xxxs); /* left and right padding used on small buttons inside small inputs */
-  --form-space-input-button-x-m: var(--global-space-macro-xxs); /* left and right padding used on medium buttons inside medium inputs */
-  --form-space-input-button-x-l: var(--global-space-macro-xs); /* left and right padding used on large buttons inside large inputs */
-  --form-space-input-stack-s: var(--global-space-macro-xs); /* Vertical gap on custom date range between the 2 inputs. */
-  --form-space-input-stack-m: var(--global-space-macro-s); /* Vertical gap on custom date range between the 2 inputs. Horizontal gap between start and end date inputs in Date range. */
-  --form-space-input-stack-l: var(--global-space-macro-m); /* Vertical gap on custom date range between the 2 inputs. */
-  --form-space-input-x-s: var(--global-space-micro-l); /* Left right padding on input. */
-  --form-space-input-x-m: var(--global-space-micro-xxl); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-input-x-l: var(--global-space-macro-xs); /* Left right padding on input. */
-  --form-space-input-xg-s: var(--global-space-macro-xs); /* Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group. */
-  --form-space-input-xg-m: var(--global-space-macro-s); /* Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group, and between elements in Pagination. */
-  --form-space-input-xg-l: var(--global-space-macro-m); /* Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group. */
-  --form-space-input-y-s: var(--global-space-micro-s); /* Top bottom padding on input. */
-  --form-space-input-y-m: var(--global-space-micro-l); /* Top bottom padding on input. */
-  --form-space-input-y-l: var(--global-space-micro-xl); /* Top bottom padding on input. */
-  --form-space-input-yg-s: var(--global-space-micro-l); /* Gap between rows of checkboxes or radios within a group. */
-  --form-space-input-yg-m: var(--global-space-micro-xxl); /* Gap between rows of checkboxes or radios within a group. Gap betwen input text and file preview in Text editor.  */
-  --form-space-input-yg-l: var(--global-space-macro-xs); /* Gap between rows of checkboxes or radios within a group. */
-  --form-space-integral-secondarylabel: var(--global-space-micro-s); /* Space between secondarylabel and input */
-  --form-space-integral-xg-s: var(--global-space-micro-m); /* Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button) */
-  --form-space-integral-xg-m: var(--global-space-micro-l); /* Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button, dropdown option icon and label), Switch and processing text. */
-  --form-space-integral-xg-l: var(--global-space-micro-xl); /* Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button) */
-  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
-  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
-  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
-  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
-  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
-  --form-space-layout-stack-m: var(--global-space-macro-s); /* Spacing between horizontal and vertical M form components */
-  --form-space-layout-stack-l: var(--global-space-macro-m); /* Spacing between horizontal and vertical L form components */
-  --form-space-switch-xg-m: var(--global-space-micro-s); /* Space between elements within switch asset */
-  --form-space-switch-xg-l: var(--global-space-micro-m); /* Space between elements within switch asset */
-  --form-space-switch-handleside-m: var(--global-space-micro-s); /* Padding on handle side. */
-  --form-space-switch-handleside-l: var(--global-space-micro-m); /* Padding on handle side. */
-  --form-space-switch-labelside-m: var(--global-space-micro-l); /* Padding on label side. */
-  --form-space-switch-labelside-l: var(--global-space-micro-xxl); /* Padding on label side. */
-  --form-space-texteditor-y-s: var(--global-space-micro-l); /* Left right padding on input. */
-  --form-space-texteditor-y-m: var(--global-space-micro-xxl); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-y-l: var(--global-space-macro-xs); /* Left right padding on input. */
-  --form-space-texteditor-yg-s: var(--global-space-micro-s); /* Top bottom padding on input. */
-  --form-space-texteditor-yg-m: var(--global-space-micro-l); /* Top bottom padding on input. */
-  --form-space-texteditor-yg-l: var(--global-space-micro-xl); /* Top bottom padding on input. */
-  --form-space-texteditor-x-s: var(--global-space-micro-l); /* Left right padding on input. */
-  --form-space-texteditor-x-m: var(--global-space-micro-xxl); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-x-l: var(--global-space-macro-xs); /* Left right padding on input. */
-  --form-space-texteditor-processing-y-s: var(--global-space-macro-m); /* Left right padding on input. */
-  --form-space-texteditor-processing-y-m: var(--global-space-macro-l); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-processing-y-l: var(--global-space-macro-xl); /* Left right padding on input. */
-  --form-space-texteditor-processing-yg-s: var(--global-space-micro-xxl); /* padding between cancel and loader */
-  --form-space-texteditor-processing-yg-m: var(--global-space-macro-xs); /* padding between cancel and loader */
-  --form-space-texteditor-processing-yg-l: var(--global-space-macro-m); /* padding between cancel and loader */
-  --form-space-texteditor-processing-x-s: var(--global-space-macro-m); /* Left right padding on input. */
-  --form-space-texteditor-processing-x-m: var(--global-space-macro-l); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-processing-x-l: var(--global-space-macro-xl); /* Left right padding on input. */
-  --form-space-password-requirement-xg-s: var(--global-space-micro-m);
-  --form-space-password-requirement-xg-m: var(--global-space-micro-l);
-  --form-space-password-requirement-xg-l: var(--global-space-micro-xl);
-  --form-space-password-requirement-x-s: var(--global-space-micro-xs);
-  --form-space-password-requirement-x-m: var(--global-space-micro-s);
-  --form-space-password-requirement-x-l: var(--global-space-micro-s);
-  --form-space-password-requirement-y-s: var(--global-space-micro-xs);
-  --form-space-password-requirement-y-m: var(--global-space-micro-s);
-  --form-space-password-requirement-y-l: var(--global-space-micro-s);
-  --form-size-none: var(--global-size-none);
-  --form-size-calendar-date: var(--global-size-macro-m); /* date buttons */
-  --form-size-calendar-day: var(--global-size-macro-m); /* day of the week HEIGHT */
-  --form-size-calendar-month: calc(var(--global-size-macro-xxxxl) + var(--global-size-macro-m)); /* Min width of month dropdown */
-  --form-size-calendar-year: var(--global-size-macro-xxxl); /* Min width of month dropdown */
-  --form-size-calendar-today-width: var(--global-size-macro-xxs); /* today indicator */
-  --form-size-calendar-today-height: var(--global-size-micro-xs); /* today indicator */
-  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
-  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
-  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
-  --form-size-dropdown-colorpicker-s: var(--global-size-macro-xs); /* Swatch size. */
-  --form-size-dropdown-colorpicker-m: var(--global-size-macro-xs); /* Swatch size. */
-  --form-size-dropdown-colorpicker-l: var(--global-size-macro-xs)+4; /* Swatch size. */
-  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
-  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
-  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
-  --form-size-fileinput-fileicon: var(--global-size-macro-s); /* File input thumbnail icon */
-  --form-size-fileinput-preview: var(--global-size-macro-xxxl); /* File input container for thumbnail, progress, or icon. */
-  --form-size-icon-s: var(--global-size-icon-s); /* Currently for checkbox S only. */
-  --form-size-icon-m: var(--global-size-icon-m); /* Used for all form icons except for checkbox S and L */
-  --form-size-icon-l: var(--global-size-icon-l); /* Currently for checkbox L only. */
-  --form-size-input-s: var(--global-size-macro-s); /* min-height on S inputs */
-  --form-size-input-m: var(--global-size-macro-m); /* Min height on M Inputs and M Dropdowns. Fixed height on Calendar days */
-  --form-size-input-l: var(--global-size-macro-l); /* L Inputs, Color picker square */
-  --form-size-input-timeinput-s: calc(var(--global-size-macro-xs) + var(--global-size-micro-l)); /* Min width for input field. */
-  --form-size-input-timeinput-m: calc(var(--global-size-macro-m) + var(--global-size-micro-xs)); /* Min width for input field. */
-  --form-size-input-timeinput-l: var(--global-size-macro-xl); /* Min width for input field. */
-  --form-size-radio-circle-s: var(--global-size-macro-xxs); /* S radios */
-  --form-size-radio-circle-m: var(--global-size-macro-xs); /* M radios */
-  --form-size-radio-circle-l: var(--global-size-macro-s); /* L radios */
-  --form-size-radio-dot-s: var(--global-size-micro-m); /* S radio dot */
-  --form-size-radio-dot-m: var(--global-size-micro-xl); /* M radio dot */
-  --form-size-radio-dot-l: var(--global-size-micro-xxl); /* L radio dot */
-  --form-size-switch-container-height-m: var(--global-size-macro-xs); /* Switch container height for medium */
-  --form-size-switch-container-height-l: var(--global-size-macro-m); /* Switch container height for large */
-  --form-size-switch-container-width-m: var(--global-size-macro-m); /* Switch container width for medium */
-  --form-size-switch-container-width-l: var(--global-size-macro-xxxl); /* Switch container width for large */
-  --form-size-switch-handle-m: var(--global-size-macro-xxs); /* S switch knob */
-  --form-size-switch-handle-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L switch knob */
-  --form-size-switch-handle-icon-m: calc(var(--global-size-icon-s) - var(--global-size-micro-xs)); /* S switch knob */
-  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
-  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
-  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
-  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
-  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
-  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
-  --form-color-calendar-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
-  --form-color-calendar-bg-duration: light-dark(var(--modes-color-interactive-data-entry-hover-alt-light), var(--modes-color-interactive-data-entry-hover-alt-dark));
-  --form-color-calendar-text-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --form-color-calendar-text-alt: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark)); /* Days of the week subheaders */
-  --form-color-calendar-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --form-color-calendar-text-duration: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-calendar-text-enabled: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-calendar-text-alt-enabled: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark));
-  --form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER  */
-  --form-color-dropdown-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --form-color-dropdown-label-alt: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --form-color-dropdown-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --form-color-dropdown-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --form-color-labelset-label-default: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-labelset-label-alt: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark)); /* used for '(optional)' text and hint text. */
-  --form-color-labelset-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --form-color-labelset-label-read-only: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-typical-bg-alt: light-dark(var(--modes-color-interactive-data-entry-default-alt-light), var(--modes-color-interactive-data-entry-default-alt-dark)); /* progress bar bg, text editor preview and text editor footer */
-  --form-color-typical-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
-  --form-color-typical-bg-hover: light-dark(var(--modes-color-interactive-data-entry-hover-alt-light), var(--modes-color-interactive-data-entry-hover-alt-dark));
-  --form-color-typical-bg-read-only: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
-  --form-color-typical-icon-default: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-typical-icon-disabled: light-dark(var(--modes-color-interactive-inactive-icon-light), var(--modes-color-interactive-inactive-icon-dark));
-  --form-color-typical-icon-enabled: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-typical-icon-read-only: light-dark(var(--modes-color-interactive-inactive-icon-alt-light), var(--modes-color-interactive-inactive-icon-alt-dark));
-  --form-color-typical-icon-alt-active: light-dark(var(--modes-color-interactive-data-entry-with-active-alt-light), var(--modes-color-interactive-data-entry-with-active-alt-dark)); /* used on tick in color picker */
-  --form-color-typical-text-active: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-typical-text-alt: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark));
-  --form-color-typical-text-default: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-typical-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --form-color-typical-text-enabled: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark)); /* Dropdown text (subtle dropdown). */
-  --form-color-switch-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark)); /* for switch */
-  --form-color-switch-border-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-alt-light), var(--modes-color-interactive-monochrome-subtle-default-alt-dark));
-  --form-color-switch-fg-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --form-color-switch-fg-activedisabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
-  --form-color-switch-fg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-alt-light), var(--modes-color-interactive-monochrome-subtle-default-alt-dark));
-  --form-color-switch-label-active: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
-  --form-color-switch-label-enabled: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark));
-  --form-color-switch-icon-enabled: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark));
-  --form-radius-checkbox: var(--global-radius-interactive-s); /* S and M checkbox */
-  --form-radius-texteditorfooter: var(--global-radius-interactive-s); /* AI text editor footer */
-  --form-radius-fileupload: var(--global-radius-container-m); /* File input (file uploads) */
-  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
-  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
-  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
-  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
-  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
-  --form-radius-texteditor-a-icontainer: var(--global-radius-interactive-s); /* container for draft with copilot form fields */
-  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
-  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
-  --form-borderwidth-dragover: var(--global-borderwidth-s); /* File upload (drag over state) */
-  --form-borderwidth-ratingstar: var(--global-borderwidth-s); /* empty rating star border width */
-  --form-borderwidth-error: var(--global-borderwidth-s); /* Error border */
-  --form-borderwidth-fileupload: var(--global-borderwidth-xs); /* File input (file uploads) */
-  --form-borderwidth-input: var(--global-borderwidth-xs); /* Input border */
-  --form-borderwidth-searchunderline: var(--global-borderwidth-s); /* Search (without button variant) */
-  --form-borderwidth-switch: var(--global-borderwidth-s); /* Switch */
-  --form-borderwidth-tile: var(--global-borderwidth-xs); /* Tile border */
-  --form-borderwidth-calendar-duration: var(--global-borderwidth-s); /* Calendar (duration date top and bottom borders) */
-  --form-borderwidth-divider-item: var(--global-borderwidth-xs); /* Dropdown menu (item divider) */
-  --form-boxshadow-dropdown: var(--popover-boxshadow-container); /* REF POPOVER. popover container */
-  --form-space-dropdown-menu-y-s: var(--popover-space-menu-y-s); /* REF POPOVER. Top and bottom padding on container */
-  --form-space-dropdown-menu-y-m: var(--popover-space-menu-y-m); /* REF POPOVER. Top and bottom padding on container */
-  --form-space-dropdown-menu-y-l: var(--popover-space-menu-y-l); /* REF POPOVER. Top and bottom padding on container */
-  --form-space-dropdown-option-x-s: var(--popover-space-option-x-s); /* REF POPOVER. Right padding on option. */
-  --form-space-dropdown-option-x-m: var(--popover-space-option-x-m); /* REF POPOVER. Right padding on option. */
-  --form-space-dropdown-option-x-l: var(--popover-space-option-x-l); /* REF POPOVER. Right padding on option. */
-  --form-space-dropdown-option-y-s: var(--popover-space-option-y-s); /* REF POPOVER. Vertical padding on option. */
-  --form-space-dropdown-option-y-m: var(--popover-space-option-y-m); /* REF POPOVER. Vertical padding on option. */
-  --form-space-dropdown-option-y-l: var(--popover-space-option-y-l); /* REF POPOVER. Vertical padding on option. */
-  --form-size-dropdown-colorpicker-input-minwidth: var(--container-size-responsive-m); /* Min width of dropdown and colorpicker inputs */
-  --form-size-dropdown-item-s: var(--popover-size-item-s); /* REF POPOVER. Menu item min height. */
-  --form-size-dropdown-item-m: var(--popover-size-item-m); /* REF POPOVER. Menu item min height. */
-  --form-size-dropdown-item-l: var(--popover-size-item-l); /* REF POPOVER. Menu item min height. */
-  --form-size-search-input-minwidth: var(--container-size-responsive-xl); /* minimum width for search input container */
-  --form-size-search-input-maxwidth: calc(var(--container-size-responsive-xxl) + var(--container-size-responsive-xxs)); /* maximum width for search input container */
-  --form-color-typical-border-alt: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-color-typical-border-enabled: light-dark(var(--modes-color-interactive-data-entry-with-default-light), var(--modes-color-interactive-data-entry-with-default-dark));
-  --form-color-typical-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-color-typical-border-read-only: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-color-switch-bg-activedisabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-color-switch-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-color-switch-fg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-color-switch-label-activedisabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-color-switch-label-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
-  --form-radius-dropdown: var(--popover-radius-container); /* REF POPOVER. Popover container. */
-  /* link component tokens */
-  --link-typography-default-s: var(--global-typography-component-underlined-moderate-s); /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
-  --link-typography-default-m: var(--global-typography-component-underlined-moderate-m); /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
-  --link-typography-default-l: var(--global-typography-component-underlined-moderate-l); /* Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size. */
-  --link-typography-heading-s: var(--global-typography-component-underlined-firm-s);
-  --link-typography-heading-m: var(--global-typography-component-underlined-firm-m);
-  --link-typography-heading-l: var(--global-typography-component-underlined-firm-l);
-  --link-color-destructive-label-default: light-dark(var(--modes-color-interactive-danger-default-alt-light), var(--modes-color-interactive-danger-default-alt-dark)); /* . */
-  --link-color-destructive-inverse-label-default: light-dark(var(--modes-color-interactive-danger-inverse-default-alt-light), var(--modes-color-interactive-danger-inverse-default-alt-dark)); /* . */
-  --link-color-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --link-color-subtle-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-active-light), var(--modes-color-interactive-monochrome-inverse-active-dark));
-  --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
-  --link-color-destructive-label-hover: light-dark(var(--modes-color-interactive-danger-hover-alt2-light), var(--modes-color-interactive-danger-hover-alt2-dark));
-  --link-color-destructive-inverse-label-hover: light-dark(var(--modes-color-interactive-danger-inverse-hover-alt2-light), var(--modes-color-interactive-danger-inverse-hover-alt2-dark));
-  --link-color-typical-label-default: light-dark(var(--modes-color-interactive-primary-default-alt2-light), var(--modes-color-interactive-primary-default-alt2-dark));
-  --link-color-typical-inverse-label-default: light-dark(var(--modes-color-interactive-primary-inverse-default-alt2-light), var(--modes-color-interactive-primary-inverse-default-alt2-dark));
-  --link-color-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --link-color-subtle-inverse-label-default: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
-  --link-size-skiplink-m: var(--global-size-macro-m);
-  --link-size-icon-m: var(--global-size-icon-m);
-  --link-radius-link: var(--global-radius-interactive-xs); /* Link (focus bg and bottom corners of focus underline) */
-  --link-radius-skiplink: var(--global-radius-interactive-m); /* Skiplink (right corners of focus bg and border) */
-  --link-space-integral-xg-m: var(--global-space-micro-l); /* Space between icon and link text. */
-  --link-space-integral-xg-l: var(--global-space-micro-l); /* Space between icon and link text. */
-  --link-space-skiplink-x: var(--global-space-macro-m); /* Skiplink container */
-  --link-space-skiplink-y: var(--global-space-micro-xxl); /* Skiplink container */
-  --link-color-typical-label-hover: light-dark(var(--modes-color-interactive-primary-hover-alt2-light), var(--modes-color-interactive-primary-hover-alt2-dark));
-  --link-color-typical-inverse-label-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-alt2-light), var(--modes-color-interactive-primary-inverse-hover-alt2-dark));
-  /* logo component tokens */
-  --logo-size-ai-m: 14px; /* AI star */
-  --logo-color-sage-bg-default: light-dark(var(--modes-color-brand-default-light), var(--modes-color-brand-default-dark)); /* sage logo */
-  --logo-color-sage-bg-alt: light-dark(var(--modes-color-brand-default-alt-light), var(--modes-color-brand-default-alt-dark));
-  --logo-color-copilot-no-bg-fg-default: light-dark(var(--modes-color-brand-copilot-no-bg-monochrome-light), var(--modes-color-brand-copilot-no-bg-monochrome-dark));
-  --logo-color-ai-identifier-bg-star: light-dark(var(--modes-color-brand-copilot-ai-identifier-default-light), var(--modes-color-brand-copilot-ai-identifier-default-dark)); /* star bg color */
-  --logo-color-ai-identifier-bg-dot: light-dark(var(--modes-color-brand-copilot-ai-identifier-with-default-light), var(--modes-color-brand-copilot-ai-identifier-with-default-dark));
-  --logo-color-ai-identifier-outline: light-dark(var(--modes-color-brand-copilot-ai-identifier-default-light), var(--modes-color-brand-copilot-ai-identifier-default-dark)); /* star outline variant */
-  --logo-space-ai-xg-m: var(--global-space-micro-l); /* Space between star icon and text */
-  /* nav component tokens */
-  --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
-  --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
-  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
-  --nav-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* nav bar bg */
-  --nav-color-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
-  --nav-color-leftnav-container-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* bg of horizontal nav variant that launches the left nav */
-  --nav-color-leftnav-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
-  --nav-color-leftnav-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
-  --nav-color-leftnav-item-bg-hover: light-dark(var(--modes-color-interactive-nav-hover-light), var(--modes-color-interactive-nav-hover-dark));
-  --nav-color-modal-container-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* bg of container holding stack of items in modal nav */
-  --nav-color-modal-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
-  --nav-color-modal-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
-  --nav-color-modal-item-bg-hover: light-dark(var(--modes-color-interactive-nav-hover-light), var(--modes-color-interactive-nav-hover-dark));
-  --nav-color-topnav-container-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* bg of of horizontal nav variant that launches the left nav */
-  --nav-color-topnav-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
-  --nav-color-topnav-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
-  --nav-color-topnav-item-bg-hover: light-dark(var(--modes-color-interactive-nav-hover-light), var(--modes-color-interactive-nav-hover-dark));
-  --nav-typography-label-s: var(--global-typography-component-firm-xs);
-  --nav-typography-label-m: var(--global-typography-component-firm-m);
-  --nav-typography-label-l: var(--global-typography-component-firm-l);
-  --nav-typography-default-s: var(--global-typography-component-moderate-xs);
-  --nav-typography-default-m: var(--global-typography-component-moderate-m);
-  --nav-typography-default-l: var(--global-typography-component-moderate-l);
-  --nav-color-item-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --nav-color-item-bg-activealt: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
-  --nav-color-item-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
-  --nav-color-item-label-activealt: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --nav-color-item-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --nav-color-menu-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* menu (level 1) nav bg */
-  --nav-color-menu-bg-alt: light-dark(var(--modes-color-generic-bg-delicate-light), var(--modes-color-generic-bg-delicate-dark)); /* level 2 nav bg */
-  --nav-color-menu-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* level 3 nav bg */
-  --nav-color-leftnav-container-bg-default-alt: light-dark(var(--modes-color-generic-backdrop-faint-light), var(--modes-color-generic-backdrop-faint-dark)); /* bg of the parent container */
-  --nav-color-leftnav-item-label-active: light-dark(var(--modes-color-interactive-nav-with-active-light), var(--modes-color-interactive-nav-with-active-dark));
-  --nav-color-leftnav-item-label-hover: light-dark(var(--modes-color-interactive-nav-with-hover-light), var(--modes-color-interactive-nav-with-hover-dark));
-  --nav-color-modal-container-bg-default-alt: light-dark(var(--modes-color-generic-backdrop-faint-light), var(--modes-color-generic-backdrop-faint-dark)); /* bg of the sticky header within modal */
-  --nav-color-modal-item-label-active: light-dark(var(--modes-color-interactive-nav-with-active-light), var(--modes-color-interactive-nav-with-active-dark));
-  --nav-color-modal-item-label-hover: light-dark(var(--modes-color-interactive-nav-with-hover-light), var(--modes-color-interactive-nav-with-hover-dark));
-  --nav-color-modal-headeritem-label-default: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark)); /* color for subheaders passed into modal nav */
-  --nav-color-topnav-item-label-active: light-dark(var(--modes-color-interactive-nav-with-active-light), var(--modes-color-interactive-nav-with-active-dark));
-  --nav-color-topnav-item-label-hover: light-dark(var(--modes-color-interactive-nav-with-hover-light), var(--modes-color-interactive-nav-with-hover-dark));
-  --nav-boxshadow-menu: var(--global-boxshadow-cleanedge-near); /* Menu */
-  --nav-boxshadow-leftnav-childcontainer: var(--global-boxshadow-container-near); /* box shadow on progressively shown child container */
-  --nav-color-item-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --nav-color-item-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --nav-color-item-label-alt: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --nav-color-menu-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* level 1 border */
-  --nav-color-leftnav-container-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark)); /* dividing lines within parent container */
-  --nav-color-leftnav-item-label-enabled: light-dark(var(--modes-color-interactive-nav-with-default-light), var(--modes-color-interactive-nav-with-default-dark));
-  --nav-color-modal-container-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark)); /* dividing lines within parent container */
-  --nav-color-modal-item-label-enabled: light-dark(var(--modes-color-interactive-nav-with-default-light), var(--modes-color-interactive-nav-with-default-dark));
-  --nav-color-topnav-container-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark)); /* dividing lines within parent container */
-  --nav-color-topnav-item-label-enabled: light-dark(var(--modes-color-interactive-nav-with-default-light), var(--modes-color-interactive-nav-with-default-dark));
-  --nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
-  --nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape),  */
-  --nav-radius-menumodal: var(--global-radius-interactive-l); /* Menu on mobile */
-  --nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
-  --nav-radius-modal-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
-  --nav-radius-topnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
-  --nav-borderwidth-divider-item: var(--global-borderwidth-xs); /* Menu (option divider) */
-  --nav-borderwidth-divider-menu: var(--global-borderwidth-xs); /* level 1 border */
-  --nav-borderwidth-divider-segment: var(--global-borderwidth-l); /* Menu (segment divider) */
-  --nav-borderwidth-leftnav-divider: var(--global-borderwidth-xs); /* Dividers between sticky header and between parent menu and child menu. */
-  --nav-borderwidth-modal-divider: var(--global-borderwidth-xs); /* Dividers between sticky header and between parent menu and child menu. */
-  --nav-borderwidth-topnav-divider: var(--global-borderwidth-xs); /* bottom border on secondary horizontal nav */
-  --nav-size-menu-content-y-m: var(--global-size-macro-s); /* Min height of menu content */
-  --nav-size-menu-content-icon-m: var(--global-size-icon-m); /* Icon size */
-  --nav-size-menu-content-icon-l: var(--global-size-icon-l); /* Icon size */
-  --nav-size-menu-option-x-m: var(--global-size-flex-m); /* Min width of options */
-  --nav-size-menu-option-y-m: var(--global-size-macro-m); /* Min height of menu option */
-  --nav-size-navbar-content-y-m: var(--global-size-macro-s); /* Min height of nav content */
-  --nav-size-navbar-content-icon-m: var(--global-size-icon-m); /* Chevron and caret icons */
-  --nav-size-navbar-content-icon-l: var(--global-size-icon-l); /* Icon size */
-  --nav-size-navbar-item-x-m: var(--global-size-flex-m); /* Max width of nav item */
-  --nav-size-navbar-item-y-m: var(--global-size-macro-m); /* Min height of nav item */
-  --nav-size-leftnav-parent-minheight: var(--global-size-macro-l); /* Min height of parent items */
-  --nav-size-leftnav-child-minheight: var(--global-size-macro-m); /* Min height of children items */
-  --nav-size-leftnav-grandchild-minheight: var(--global-size-macro-s); /* Min height of grandchildren */
-  --nav-size-modal-parentitem-minheight: var(--global-size-macro-m); /* Min height of parent items */
-  --nav-size-modal-childitem-minheight: var(--global-size-macro-s); /* Min height of children items */
-  --nav-size-modal-headeritem-identifier-m: var(--global-size-icon-l); /* Icon size */
-  --nav-size-modal-headeritem-icon-m: var(--global-size-icon-m); /* Icon size */
-  --nav-size-topnav-parent-minheight: var(--global-size-macro-s); /* Min height of parent items across items in secondary top nav  */
-  --nav-size-topnav-container-minheight: var(--global-size-macro-m); /* Min height of secondary nav containers */
-  --nav-space-menu-container-x-m: var(--global-space-micro-s); /* Horizontal space on menu complex and menu items wrapper in sidebar menu */
-  --nav-space-menu-container-y-m: var(--global-space-micro-l); /* Vertical space on mobile menu items */
-  --nav-space-menu-content-x-m: var(--global-space-micro-l); /* Horizontal space on content within menu item */
-  --nav-space-menu-content-x-l: var(--global-space-macro-xs); /* Left padding for indented content in options */
-  --nav-space-menu-content-xg-m: var(--global-space-micro-l); /* Space between content elements within menu item */
-  --nav-space-menu-content-y-m: var(--global-space-micro-s); /* Vertical space on content within menu item */
-  --nav-space-menu-item-x-s: var(--global-space-micro-s); /* Horizontal space on menu option complex, small screen option */
-  --nav-space-menu-item-x-m: var(--global-space-micro-l); /* Horizontal space on nav menu item */
-  --nav-space-menu-item-y-m: var(--global-space-micro-s); /* Vertical space on nav menu item */
-  --nav-space-menu-item-yg-m: var(--global-space-micro-s); /* Space between menu item and submenu */
-  --nav-space-navbar-x-m: var(--global-space-macro-m);
-  --nav-space-navbar-y-m: var(--global-space-micro-xs); /* Vertical padding on nav bar */
-  --nav-space-navbar-content-x-m: var(--global-space-micro-l); /* Horizontal space in content within nav item */
-  --nav-space-navbar-content-xg-m: var(--global-space-micro-l); /* Gap between content elements within nav item */
-  --nav-space-navbar-content-y-m: var(--global-space-micro-s); /* Vertical space in content within nav item */
-  --nav-space-navbar-item-x-m: var(--global-space-micro-l); /* Horizontal space in nav item */
-  --nav-space-navbar-item-y-m: var(--global-space-micro-s); /* Vertical space in nav item */
-  --nav-space-navbar-logo-x-m: var(--global-space-macro-xs); /* Horizontal space around logo */
-  --nav-space-navbar-logo-xg-m: var(--global-space-macro-xs); /* Gap between logo and divider */
-  --nav-space-navbar-logo-y-m: var(--global-space-micro-s); /* Top padding on logo */
-  --nav-space-leftnav-container-x-m: var(--global-space-macro-xxxs); /* horizontal padding on sticky quick actions header */
-  --nav-space-leftnav-container-y-s: var(--global-space-macro-xxs); /* sticky header top and bottom padding */
-  --nav-space-leftnav-container-y-m: var(--global-space-macro-xs); /* vertical padding inside parent and child containers */
-  --nav-space-leftnav-container-yg-s: var(--global-space-macro-xxxs); /* vertical gap betweenparent items */
-  --nav-space-leftnav-container-yg-m: var(--global-space-macro-xs); /* vertical gap between child and grandchild items */
-  --nav-space-leftnav-container-outer-y-m: calc(var(--global-space-macro-ml) * 2); /* margin outside of item containers to make items show underneath sticky headers */
-  --nav-space-leftnav-parentitem-vertical-x-m: var(--global-space-micro-s); /* horizontal padding on stacked parent items */
-  --nav-space-leftnav-parentitem-vertical-y-m: var(--global-space-micro-s); /* vertical padding on stacked parent items */
-  --nav-space-leftnav-parentitem-vertical-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-xg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-y-m: var(--global-space-macro-xxxs); /* vertical padding on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
-  --nav-space-leftnav-childitem-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical gap inside child items */
-  --nav-space-leftnav-childitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
-  --nav-space-leftnav-childitem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
-  --nav-space-leftnav-childitem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
-  --nav-space-leftnav-grandchilditem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
-  --nav-space-leftnav-grandchilditem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
-  --nav-space-leftnav-grandchilditem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
-  --nav-space-leftnav-grandchilditem-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical gap inside grandchild items */
-  --nav-space-modal-container-x-m: var(--global-space-macro-xxxs); /* left and right padding on modal small screen container across leftnav and horizontal */
-  --nav-space-modal-container-y-m: var(--global-space-macro-xs); /* top and bottom padding on modal small screen container across leftnav and horizontal */
-  --nav-space-modal-container-yg-m: calc(var(--global-space-macro-xxxs) - var(--global-space-micro-xs)); /* vertical gap between modal nav items */
-  --nav-space-modal-container-outer-y-m: calc(var(--global-space-macro-ml) * 2); /* margin outside of item containers to make items show underneath sticky headers */
-  --nav-space-modal-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-modal-parentitem-xg-m: var(--global-space-macro-xxxs); /* horizontal padding between parent label and chevron */
-  --nav-space-modal-parentitem-y-m: var(--global-space-macro-xxxs); /* vertical padding on stacked parent items */
-  --nav-space-modal-parentitem-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding between parent label and pill */
-  --nav-space-modal-childitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-modal-childitem-xg-m: calc(var(--global-space-macro-xxxs) / 2); /* horizontal padding between child label and pill */
-  --nav-space-modal-childitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked child items */
-  --nav-space-modal-headeritem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on header item */
-  --nav-space-modal-headeritem-xg-m: var(--global-space-macro-xxxs); /* horizontal gap between header label and idebntifiers or icons */
-  --nav-space-modal-headeritem-y-m: var(--global-space-macro-xxxs); /* bottom padding on header items */
-  --nav-space-modal-headeritem-y-l: var(--global-space-macro-xs); /* top padding on header items */
-  --nav-space-topnav-container-x-s: var(--global-space-macro-xxxs); /* horizontal padding on secondary horizontal nav on small screens */
-  --nav-space-topnav-container-x-m: var(--global-space-macro-l); /* horizontal padding on secondary horizontal nav on large screens */
-  --nav-space-topnav-container-xg-m: calc(var(--global-space-macro-xxxs) / 2); /* horizontal gap on secondary horizontal nav on large screens */
-  --nav-space-topnav-container-y-s: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on secondary horizontal nav on small screens */
-  --nav-space-topnav-container-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on secondary horizontal nav on large screens */
-  --nav-space-topnav-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-topnav-parentitem-xg-m: var(--global-space-micro-s); /* gap within horizontal parent items */
-  --nav-space-topnav-parentitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked parent items */
-  /* page component tokens */
-  --page-color-bg-default: light-dark(var(--modes-color-generic-backdrop-nought-light), var(--modes-color-generic-backdrop-nought-dark));
-  --page-typography-h1: var(--global-typography-heading-l);
-  --page-typography-h2: var(--global-typography-heading-m);
-  --page-typography-h3: var(--global-typography-heading-s);
-  --page-typography-h4: var(--global-typography-subheading-l);
-  --page-typography-h5: var(--global-typography-subheading-m);
-  --page-typography-section-heading-s: var(--global-typography-section-heading-s);
-  --page-typography-section-heading-m: var(--global-typography-section-heading-m);
-  --page-typography-p-regular-typical: var(--global-typography-body-regular-s);
-  --page-typography-p-regular-large: var(--global-typography-body-regular-l);
-  --page-typography-p-medium-typical: var(--global-typography-body-medium-s);
-  --page-typography-p-medium-large: var(--global-typography-body-medium-l);
-  --page-color-bg-alt: light-dark(var(--modes-color-generic-backdrop-faint-light), var(--modes-color-generic-backdrop-faint-dark));
-  --page-color-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
-  --page-color-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc  */
-  --page-space-x-l: var(--global-space-macro-xl);
-  --page-space-x-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-x-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-x-xs: var(--global-space-macro-xs);
-  --page-space-x-s: var(--global-space-macro-m);
-  --page-space-x-m: var(--global-space-macro-l);
-  --page-space-x-xl: calc(var(--global-space-macro-xl) * 2);
-  --page-space-y-l: var(--global-space-macro-xl);
-  --page-space-y-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-y-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-y-xs: var(--global-space-macro-xs);
-  --page-space-y-s: var(--global-space-macro-m);
-  --page-space-y-m: var(--global-space-macro-l);
-  --page-space-y-xl: calc(var(--global-space-macro-xl) * 2);
-  --page-space-none: var(--global-space-none);
-  --page-space-xg-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-xg-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-xg-xs: var(--global-space-macro-xs);
-  --page-space-xg-s: var(--global-space-macro-m);
-  --page-space-xg-m: var(--global-space-macro-l);
-  --page-space-xg-l: var(--global-space-macro-xl);
-  --page-space-xg-xl: calc(var(--global-space-macro-xl) * 2);
-  --page-space-yg-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-yg-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-yg-xs: var(--global-space-macro-xs);
-  --page-space-yg-s: var(--global-space-macro-m);
-  --page-space-yg-m: var(--global-space-macro-l);
-  --page-space-yg-l: var(--global-space-macro-xl);
-  --page-space-yg-xl: calc(var(--global-space-macro-xl) * 2);
-  /* popover component tokens */
-  --popover-radius-none: var(--global-radius-none); /* Navigation menu top corners */
-  --popover-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* REF'D IN FORM. Popover container bg */
-  --popover-typography-label-s: var(--global-typography-component-firm-s);
-  --popover-typography-label-m: var(--global-typography-component-firm-m);
-  --popover-typography-label-l: var(--global-typography-component-firm-l);
-  --popover-typography-default-s: var(--global-typography-component-moderate-s);
-  --popover-typography-default-m: var(--global-typography-component-moderate-m);
-  --popover-typography-default-l: var(--global-typography-component-moderate-l);
-  --popover-boxshadow-container: var(--global-boxshadow-container-near); /* REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown)  */
-  --popover-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark)); /* previously action minor 850 */
-  --popover-color-bg-activealt: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark)); /* REF'D IN FORM.  */
-  --popover-color-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark)); /* REF'D IN FORM.  */
-  --popover-color-label-activealt: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --popover-color-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --popover-color-submenu-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* popover small screen submenu container bg */
-  --popover-size-icon-m: var(--global-size-icon-m);
-  --popover-size-item-s: var(--global-size-macro-s); /* REF'D IN FORM. Menu item min height. */
-  --popover-size-item-m: var(--global-size-macro-m); /* REF'D IN FORM. Menu item min height. */
-  --popover-size-item-l: var(--global-size-macro-l); /* REF'D IN FORM. Menu item min height. */
-  --popover-radius-container: var(--global-radius-container-m); /* REF'D IN FORM. Menu container. */
-  --popover-radius-optionfocus: var(--global-radius-container-m); /* Popover menu option focus */
-  --popover-space-menu-x-s: calc(var(--global-space-macro-xxs) / 2); /* Left and right padding token used on small popover container consumed inside number input. */
-  --popover-space-menu-x-m: var(--global-space-macro-xxxs); /* Left and right padding token used on medium popover container consumed inside number input. */
-  --popover-space-menu-x-l: var(--global-space-macro-xxs); /* Left and right padding token used on large popover container consumed inside number input. */
-  --popover-space-menu-y-s: calc(var(--global-space-macro-xxs) / 2); /* Top and bottom padding inside S size popover menu container */
-  --popover-space-menu-y-m: var(--global-space-macro-xxxs); /* Top and bottom padding inside M size popover menu container */
-  --popover-space-menu-y-l: var(--global-space-macro-xxs); /* Top and bottom padding inside L size popover menu container */
-  --popover-space-menu-yg-s: calc(var(--global-space-macro-xxs) / 2); /* Gap spacing token used on small popover container consumed inside number input. */
-  --popover-space-menu-yg-m: var(--global-space-macro-xxxs); /* Gap spacing token used on medium popover container consumed inside number input. */
-  --popover-space-menu-yg-l: var(--global-space-macro-xxs); /* Gap spacing token used on large popover container consumed inside number input. */
-  --popover-space-option-x-s: var(--global-space-micro-xxl); /* REF'D in FORM. Right left padding on popover option. */
-  --popover-space-option-x-m: var(--global-space-micro-xxl); /* REF'D in FORM. Right left padding on popover option. */
-  --popover-space-option-x-l: var(--global-space-micro-xxl); /* REF'D in FORM. Right left padding on popover option. */
-  --popover-space-option-xg-s: var(--global-space-micro-l); /* Gap between left icon and menu button label */
-  --popover-space-option-xg-m: var(--global-space-micro-l); /* Gap between left icon and menu button label */
-  --popover-space-option-xg-l: var(--global-space-micro-l); /* Gap between left icon and menu button label */
-  --popover-space-option-y-s: var(--global-space-micro-s); /* REF'D in FORM. Vertical padding on popover option. */
-  --popover-space-option-y-m: var(--global-space-micro-l); /* REF'D in FORM. Vertical padding on popover option. */
-  --popover-space-option-y-l: var(--global-space-micro-xl); /* REF'D in FORM. Vertical padding on popover option. */
-  --popover-space-submenu-x-s: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
-  --popover-space-submenu-x-m: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
-  --popover-space-submenu-x-l: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
-  --popover-color-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --popover-color-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --popover-color-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --popover-size-menu-minwidth-s: calc(var(--container-size-responsive-m) / 2); /* minwidth of small size popover menu container */
-  --popover-size-menu-minwidth-m: var(--container-size-responsive-xs); /* minwidth of medium size popover menu container */
-  --popover-size-menu-minwidth-l: var(--container-size-responsive-s); /* minwidth of large size popover menu container */
-  --popover-size-menu-maxwidth-s: var(--container-size-responsive-m); /* maxwidth of small size popover menu container */
-  --popover-size-menu-maxwidth-m: var(--container-size-responsive-l); /* maxwidth of medium size popover menu container */
-  --popover-size-menu-maxwidth-l: var(--container-size-responsive-xl); /* maxwidth of large size popover menu container */
-  /* profile component tokens */
-  --profile-radius-portrait: var(--global-radius-circle); /* Portrait */
-  --profile-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --profile-typography-initials-xs: var(--global-typography-component-placeholdertext-xs);
-  --profile-typography-initials-s: var(--global-typography-component-placeholdertext-s); /* Small Viewports: 16, Large Viewports: 16 */
-  --profile-typography-initials-m: var(--global-typography-component-placeholdertext-m); /* Small Viewports: 18.66, Large Viewports: 21.53 */
-  --profile-typography-initials-ml: var(--global-typography-component-placeholdertext-ml); /* Small Viewports: 21.77, Large Viewports: 28.97 */
-  --profile-typography-initials-l: var(--global-typography-component-placeholdertext-l); /* Small Viewports: 25.39, Large Viewports: 38.98 */
-  --profile-typography-initials-xl: var(--global-typography-component-placeholdertext-xl); /* Small Viewports: 29.61, Large Viewports: 52.45 */
-  --profile-typography-initials-xxl: var(--global-typography-component-placeholdertext-xxl); /* Small Viewports: 34.54, Large Viewports: 70.58 */
-  --profile-typography-default-xs: var(--global-typography-component-moderate-s);
-  --profile-typography-default-s: var(--global-typography-component-moderate-m);
-  --profile-typography-default-m: var(--global-typography-component-moderate-m);
-  --profile-typography-default-ml: var(--global-typography-component-moderate-m);
-  --profile-typography-default-l: var(--global-typography-component-moderate-l);
-  --profile-typography-default-xl: var(--global-typography-component-moderate-l);
-  --profile-typography-default-xxl: var(--global-typography-component-moderate-l);
-  --profile-typography-heading-xs: var(--global-typography-component-firm-s);
-  --profile-typography-heading-s: var(--global-typography-component-firm-m);
-  --profile-typography-heading-m: var(--global-typography-subheading-l);
-  --profile-typography-heading-ml: var(--global-typography-subheading-l);
-  --profile-typography-heading-l: var(--global-typography-subheading-l);
-  --profile-typography-heading-xl: var(--global-typography-heading-m);
-  --profile-typography-heading-xxl: var(--global-typography-heading-l);
-  --profile-color-bg-alt: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* For portrait image */
-  --profile-color-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
-  --profile-size-profileeditor: calc(var(--global-size-macro-s) * 10); /* size of the circle inside the profile editor component */
-  --profile-size-outside-xs: var(--global-size-macro-xs); /* XS Portraits */
-  --profile-size-outside-s: var(--global-size-macro-s); /* S Portraits */
-  --profile-size-outside-m: var(--global-size-macro-m); /* M Portraits */
-  --profile-size-outside-ml: var(--global-size-macro-xl); /* L Portraits */
-  --profile-size-outside-l: calc(var(--global-size-macro-xs) * 3); /* XL Portraits */
-  --profile-size-outside-xl: calc(var(--global-size-micro-m) * 13); /* XL Portraits */
-  --profile-size-outside-xxl: calc(var(--global-size-macro-s) * 4); /* XXL Portraits */
-  --profile-size-inside-xs: var(--global-size-micro-xl); /* XS Portrait icons */
-  --profile-size-inside-s: var(--global-size-macro-xxs); /* S Portrait icons */
-  --profile-size-inside-m: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* M Portrait icons */
-  --profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
-  --profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
-  --profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
-  --profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
-  --profile-color-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
-  --profile-space-none: var(--global-space-none);
-  --profile-space-x-xs: var(--global-space-macro-xxxs); /* gap between avatar and name */
-  --profile-space-x-s: var(--global-space-macro-xxs); /* gap between avatar and name */
-  --profile-space-x-m: var(--global-space-macro-xs); /* gap between avatar and name */
-  --profile-space-x-ml: var(--global-space-macro-xs); /* gap between avatar and name */
-  --profile-space-x-l: var(--global-space-macro-s); /* gap between avatar and name */
-  --profile-space-x-xl: var(--global-space-macro-m); /* gap between avatar and name */
-  --profile-space-x-xxl: var(--global-space-macro-l); /* gap between avatar and name */
-  --profile-borderwidth-portrait: var(--global-borderwidth-xs); /* Border thickness on portrait. */
-  /* progress component tokens */
-  --progress-opacity-carousel-inactive: 0.3; /* Inactive slide IMAGE layer. */
-  --progress-size-skeleton-responsive-text-xs: var(--primitives-font-size-responsive-product-step0); /* Skeleton paragraph and H5 */
-  --progress-size-skeleton-responsive-text-s: var(--primitives-font-size-responsive-product-step2); /* H4 Skeletons */
-  --progress-size-skeleton-responsive-text-m: var(--primitives-font-size-responsive-product-step2); /* H3 Skeletons */
-  --progress-size-skeleton-responsive-text-l: var(--primitives-font-size-responsive-product-step3); /* H2 Skeletons */
-  --progress-size-skeleton-responsive-text-xl: var(--primitives-font-size-responsive-product-step5); /* H1 Skeletons */
-  --progress-size-skeleton-adaptive-text-xs: var(--global-font-size-adaptive-step0); /* Skeleton paragraph and H5 */
-  --progress-size-skeleton-adaptive-text-s: var(--global-font-size-adaptive-step2); /* H4 Skeletons */
-  --progress-size-skeleton-adaptive-text-m: var(--global-font-size-adaptive-step2); /* H3 Skeletons */
-  --progress-size-skeleton-adaptive-text-l: var(--global-font-size-adaptive-step3); /* H2 Skeletons */
-  --progress-size-skeleton-adaptive-text-xl: var(--global-font-size-adaptive-step5); /* H1 Skeletons */
-  --progress-color-bg-skeleton: light-dark(var(--modes-color-status-content-loading-light), var(--modes-color-status-content-loading-dark));
-  --progress-radius-none: var(--global-radius-none); /* File input (top corners of integrated progress bar), */
-  --progress-radius-stepflow: var(--global-radius-circle); /* Step flow (step indicators) */
-  --progress-radius-stepindicator: var(--global-radius-circle); /* step indicator circles */
-  --progress-radius-carouselselector: var(--global-radius-circle); /* Carousel (selector dot) */
-  --progress-radius-skeleton-circle: var(--global-radius-circle); /* Used to represent circular elements such as profiles, badges etc */
-  --progress-color-fg-ai: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark)); /* For progress ring in ai buttons */
-  --progress-color-fg-alt: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --progress-color-fg-caution: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --progress-color-fg-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --progress-color-fg-info: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --progress-color-datavis-fg-default: light-dark(var(--modes-color-status-custom-teal-default-light), var(--modes-color-status-custom-teal-default-dark));
-  --progress-color-loader-fg-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --progress-color-loader-fg-complete: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --progress-color-stepflow-bg-complete: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --progress-color-stepindicator-bg-complete: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --progress-color-stepindicator-border-success: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --progress-typography-label-s: var(--global-typography-component-firm-s);
-  --progress-typography-label-m: var(--global-typography-component-firm-m);
-  --progress-typography-label-l: var(--global-typography-component-firm-l);
-  --progress-typography-default-s: var(--global-typography-component-moderate-s);
-  --progress-typography-default-m: var(--global-typography-component-moderate-m);
-  --progress-typography-default-l: var(--global-typography-component-moderate-l);
-  --progress-color-bg-default: light-dark(var(--modes-color-interactive-progress-bg-light), var(--modes-color-interactive-progress-bg-dark));
-  --progress-color-fg-alt2: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark));
-  --progress-color-fg-default: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --progress-color-label-alt: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark));
-  --progress-color-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
-  --progress-color-loader-bg-default: light-dark(var(--modes-color-interactive-progress-bg-light), var(--modes-color-interactive-progress-bg-dark));
-  --progress-color-loader-fg-default: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark)); /* used for loader standard loader spinner */
-  --progress-color-loader-inverse-bg-default: light-dark(var(--modes-color-interactive-progress-bg-alt-light), var(--modes-color-interactive-progress-bg-alt-dark)); /* used for inverse loader bgs */
-  --progress-color-stepflow-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --progress-color-stepflow-bg-default: light-dark(var(--modes-color-generic-fg-nought-light), var(--modes-color-generic-fg-nought-dark));
-  --progress-color-stepflow-border-active-inner: light-dark(var(--modes-color-generic-fg-nought-light), var(--modes-color-generic-fg-nought-dark));
-  --progress-color-stepflow-border-active-outer: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --progress-color-stepflow-label-alt: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark));
-  --progress-color-stepflow-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
-  --progress-color-stepindicator-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --progress-color-stepindicator-border-active-outer: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --progress-color-stepindicator-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
-  --progress-size-bar-s: var(--global-size-micro-xs); /* S loader bar */
-  --progress-size-bar-m: var(--global-size-micro-m); /* M progress tracker bar, M loader bar */
-  --progress-size-bar-l: var(--global-size-micro-xl); /* L loader bar */
-  --progress-size-carouselselector-dot-m: var(--global-size-micro-l);
-  --progress-size-carouselselector-activedot-m: var(--global-size-macro-xxs);
-  --progress-size-carouselselector-hitarea-m: var(--global-size-macro-xs);
-  --progress-size-carouselslide-x-m: var(--global-size-macro-xl); /* Inactive slide */
-  --progress-size-spinner-xxs: var(--global-size-macro-xxs); /* Loader ring for XXS size loader spinners */
-  --progress-size-spinner-xs: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Loader ring for XS size loader spinners */
-  --progress-size-spinner-s: var(--global-size-macro-s); /* Loader ring */
-  --progress-size-spinner-m: calc(var(--global-size-macro-s) * 2); /* Loader ring */
-  --progress-size-spinner-l: calc(var(--global-size-macro-xs) * 4); /* Loader ring */
-  --progress-size-stepflow-m: var(--global-size-micro-m); /* Step height */
-  --progress-size-stepindicator-bar: var(--global-size-micro-xxs); /* step indicator bar */
-  --progress-size-stepindicator-stepcircle-s: var(--global-size-macro-xs); /* M size step indicator */
-  --progress-size-stepindicator-stepcircle-m: var(--global-size-macro-s); /* M size step indicator */
-  --progress-color-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
-  --progress-color-loader-inverse-fg-default: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark)); /* used on inverse loading spinner */
-  --progress-color-stepflow-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
-  --progress-color-stepindicator-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
-  --progress-color-stepindicator-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --progress-color-stepindicator-label-complete: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --progress-radius-integrated: var(--global-radius-container-s); /* File input (bottom corners of integrated status bar) */
-  --progress-radius-skeleton-moderate: var(--global-radius-container-m); /* used to represent headings, inputs and text */
-  --progress-radius-skeleton-curved: var(--global-radius-container-l); /* used to represent elements such as icons */
-  --progress-radius-skeleton-sweeping: var(--global-radius-container-xxl); /* used to represent buttons */
-  --progress-radius-bar-s: var(--global-radius-container-xs); /* Progress tracker S */
-  --progress-radius-bar-m: var(--global-radius-container-s); /* File input (bottom corners of integrated status bar), Progress tracker M,  */
-  --progress-radius-bar-l: var(--global-radius-container-sm); /* Progress tracker L */
-  --progress-borderwidth-bar: var(--global-borderwidth-xs); /* Progress bar (all sizes)  */
-  --progress-borderwidth-carouselector: var(--global-borderwidth-xs); /* Carousel slide selector dots  */
-  --progress-borderwidth-integrated: var(--global-borderwidth-xs); /* Progress bar in File upload  */
-  --progress-borderwidth-stepflow-inner: var(--global-borderwidth-xs); /* Step flow default (not started) */
-  --progress-borderwidth-stepflow-active-inner: var(--global-borderwidth-s); /* Step flow active step border outer */
-  --progress-borderwidth-stepflow-active-outer: var(--global-borderwidth-l); /* Step flow active step border outermost */
-  --progress-borderwidth-stepindicator-s-active: var(--global-borderwidth-s);
-  --progress-borderwidth-stepindicator-s-default: var(--global-borderwidth-s);
-  --progress-borderwidth-stepindicator-m-active: var(--global-borderwidth-m);
-  --progress-borderwidth-stepindicator-m-default: var(--global-borderwidth-m);
-  --progress-space-carouselselector-xg-m: var(--global-space-micro-l); /* Gap between selectors. */
-  --progress-space-carouselselector-y-m: var(--global-space-macro-xs); /* Vertical padding on selector group. */
-  --progress-space-integral-x: var(--global-space-micro-s); /* Little space between words in progress components */
-  --progress-space-loader-yg-s: var(--global-space-micro-m); /* gap between loader visual and loading text */
-  --progress-space-loader-yg-m: var(--global-space-micro-l); /* gap between loader visual and loading text */
-  --progress-space-loader-yg-l: var(--global-space-micro-xl); /* gap between loader visual and loading text */
-  --progress-space-loader-xg-s: var(--global-space-micro-l); /* Gap between loader graphic and label. */
-  --progress-space-loader-xg-m: var(--global-space-micro-xxl); /* Gap between loader graphic and label. */
-  --progress-space-loader-xg-l: var(--global-space-macro-xs); /* Gap between loader graphic and label. */
-  --progress-space-skeleton-multiline-yg-xs: var(--global-space-micro-l); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-s: var(--global-space-micro-xl); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-m: var(--global-space-micro-m); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-l: var(--global-space-micro-l); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-xl: var(--global-space-micro-xl); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-y-xs: var(--global-space-micro-s); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-s: var(--global-space-micro-s); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-m: var(--global-space-micro-xs); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-l: var(--global-space-micro-xs); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-xl: var(--global-space-micro-s); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-singleline-xg-xs: var(--global-space-micro-l); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-s: var(--global-space-micro-l); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-m: var(--global-space-micro-xxl); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-l: var(--global-space-micro-xxl); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-xl: var(--global-space-macro-xs); /* horizontal gap between elements */
-  --progress-space-stepflow-y-m: var(--global-space-micro-s); /* Vertical padding around step indicators */
-  --progress-space-stepflow-yg-m: var(--global-space-micro-l); /* Gap between step heading and back link. */
-  --progress-space-stepflow-steps-xg-m: var(--global-space-macro-xs); /* Gap between step indicators */
-  --progress-space-stepflow-steps-yg-m: var(--global-space-micro-s); /* Gap between glow heading, step label and step indicators */
-  --progress-space-tracker-yg-s: var(--global-space-micro-m); /* Space between bar and label */
-  --progress-space-tracker-yg-m: var(--global-space-micro-l); /* Space between bar and label */
-  --progress-space-tracker-yg-l: var(--global-space-micro-xxl); /* Space between bar and label */
-  --progress-space-tracker-xg-m: var(--global-space-micro-l); /* Gap between tracker value text and description */
-  --progress-space-stepindicator-generic-g-s: var(--global-space-micro-xxl); /* gap between timeline visual and text */
-  --progress-space-stepindicator-generic-g-m: var(--global-space-macro-xs); /* gap between timeline visual and text */
-  --progress-space-stepindicator-generic-text-yg-s: var(--global-space-micro-s); /* gap between label and subtext */
-  --progress-space-stepindicator-generic-text-yg-m: var(--global-space-micro-s); /* gap between label and subtext */
-  --progress-space-stepindicator-generic-visual-g-s: var(--global-space-micro-l); /* gap between step number and line */
-  --progress-space-stepindicator-generic-visual-g-m: var(--global-space-micro-l); /* gap between step number and line */
-  --progress-space-stepindicator-vertical-y-s: var(--global-space-micro-l); /* Vertical variant top padding on parent container */
-  --progress-space-stepindicator-vertical-y-m: var(--global-space-micro-l); /* Vertical variant top padding on parent container */
-  --progress-space-stepindicator-vertical-text-y-s: var(--global-space-micro-xs); /* space above text and parent container on vertical variant */
-  --progress-space-stepindicator-horizontal-text-x-s: var(--global-space-micro-s); /* horizontal variant left and right padding on text container */
-  --progress-space-stepindicator-horizontal-text-x-m: var(--global-space-micro-l); /* horizontal variant left and right padding on text container */
-  /* status component tokens */
-  --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
-  --status-color-none: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark)); /* transparent override used for hiding colors when needed. */
-  --status-color-message-contextual-bg: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --status-color-message-contextual-icon: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* decorative icon on standard contextual messages */
-  --status-color-message-contextual-icon-alt: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark)); /* icon on neutral status dialogs */
-  --status-color-message-contextual-ai-bg-alt: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark));
-  --status-color-message-contextual-callout-bg-alt: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Subtle message bg */
-  --status-color-message-contextual-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --status-color-message-contextual-error-bg-alt: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* Subtle message bg */
-  --status-color-message-contextual-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --status-color-message-contextual-error-icon: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Icon on tinted bgs */
-  --status-color-message-contextual-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --status-color-message-contextual-info-bg-alt: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Subtle message bg */
-  --status-color-message-contextual-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --status-color-message-contextual-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
-  --status-color-message-contextual-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --status-color-message-contextual-success-bg-alt: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* Subtle message bg */
-  --status-color-message-contextual-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --status-color-message-contextual-success-icon: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* Icon on tinted bgs */
-  --status-color-message-contextual-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --status-color-message-contextual-warning-bg-alt: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Subtle message bg */
-  --status-color-message-contextual-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --status-color-message-contextual-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
-  --status-color-message-global-callout-bg-default: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Global message bg */
-  --status-color-message-global-info-bg-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Global message bg */
-  --status-color-message-global-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
-  --status-color-message-global-warning-bg-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
-  --status-color-message-global-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
-  --status-color-pill-custom-blue-bg-default: light-dark(var(--modes-color-status-custom-blue-default-light), var(--modes-color-status-custom-blue-default-dark));
-  --status-color-pill-custom-blue-bg-alt-default: light-dark(var(--modes-color-status-custom-blue-default-alt-light), var(--modes-color-status-custom-blue-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-blue-border-default: light-dark(var(--modes-color-status-custom-blue-default-light), var(--modes-color-status-custom-blue-default-dark));
-  --status-color-pill-custom-teal-bg-default: light-dark(var(--modes-color-status-custom-teal-default-light), var(--modes-color-status-custom-teal-default-dark));
-  --status-color-pill-custom-teal-bg-alt-default: light-dark(var(--modes-color-status-custom-teal-default-alt-light), var(--modes-color-status-custom-teal-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-teal-border-default: light-dark(var(--modes-color-status-custom-teal-default-light), var(--modes-color-status-custom-teal-default-dark));
-  --status-color-pill-custom-green-bg-default: light-dark(var(--modes-color-status-custom-green-default-light), var(--modes-color-status-custom-green-default-dark));
-  --status-color-pill-custom-green-bg-alt-default: light-dark(var(--modes-color-status-custom-green-default-alt-light), var(--modes-color-status-custom-green-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-green-border-default: light-dark(var(--modes-color-status-custom-green-default-light), var(--modes-color-status-custom-green-default-dark));
-  --status-color-pill-custom-lime-bg-default: light-dark(var(--modes-color-status-custom-lime-default-light), var(--modes-color-status-custom-lime-default-dark));
-  --status-color-pill-custom-lime-bg-alt-default: light-dark(var(--modes-color-status-custom-lime-default-alt-light), var(--modes-color-status-custom-lime-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-lime-border-default: light-dark(var(--modes-color-status-custom-lime-default-light), var(--modes-color-status-custom-lime-default-dark));
-  --status-color-pill-custom-orange-bg-default: light-dark(var(--modes-color-status-custom-orange-default-light), var(--modes-color-status-custom-orange-default-dark));
-  --status-color-pill-custom-orange-bg-alt-default: light-dark(var(--modes-color-status-custom-orange-default-alt-light), var(--modes-color-status-custom-orange-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-orange-border-default: light-dark(var(--modes-color-status-custom-orange-default-light), var(--modes-color-status-custom-orange-default-dark));
-  --status-color-pill-custom-red-bg-default: light-dark(var(--modes-color-status-custom-red-default-light), var(--modes-color-status-custom-red-default-dark));
-  --status-color-pill-custom-red-bg-alt-default: light-dark(var(--modes-color-status-custom-red-default-alt-light), var(--modes-color-status-custom-red-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-red-border-default: light-dark(var(--modes-color-status-custom-red-default-light), var(--modes-color-status-custom-red-default-dark));
-  --status-color-pill-custom-pink-bg-default: light-dark(var(--modes-color-status-custom-pink-default-light), var(--modes-color-status-custom-pink-default-dark));
-  --status-color-pill-custom-pink-bg-alt-default: light-dark(var(--modes-color-status-custom-pink-default-alt-light), var(--modes-color-status-custom-pink-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-pink-border-default: light-dark(var(--modes-color-status-custom-pink-default-light), var(--modes-color-status-custom-pink-default-dark));
-  --status-color-pill-custom-purple-bg-default: light-dark(var(--modes-color-status-custom-purple-default-light), var(--modes-color-status-custom-purple-default-dark));
-  --status-color-pill-custom-purple-bg-alt-default: light-dark(var(--modes-color-status-custom-purple-default-alt-light), var(--modes-color-status-custom-purple-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-purple-border-default: light-dark(var(--modes-color-status-custom-purple-default-light), var(--modes-color-status-custom-purple-default-dark));
-  --status-color-pill-custom-gray-bg-default: light-dark(var(--modes-color-status-custom-gray-default-light), var(--modes-color-status-custom-gray-default-dark));
-  --status-color-pill-custom-gray-bg-alt-default: light-dark(var(--modes-color-status-custom-gray-default-alt-light), var(--modes-color-status-custom-gray-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-gray-border-default: light-dark(var(--modes-color-status-custom-gray-default-light), var(--modes-color-status-custom-gray-default-dark));
-  --status-color-pill-custom-slate-bg-default: light-dark(var(--modes-color-status-custom-slate-default-light), var(--modes-color-status-custom-slate-default-dark));
-  --status-color-pill-custom-slate-bg-alt-default: light-dark(var(--modes-color-status-custom-slate-default-alt-light), var(--modes-color-status-custom-slate-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-custom-slate-border-default: light-dark(var(--modes-color-status-custom-slate-default-light), var(--modes-color-status-custom-slate-default-dark));
-  --status-color-pill-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --status-color-pill-error-bg-alt-default: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --status-color-pill-error-inverse-bg-default: light-dark(var(--modes-color-status-negative-inverse-default-light), var(--modes-color-status-negative-inverse-default-dark));
-  --status-color-pill-error-inverse-bg-alt-default: light-dark(var(--modes-color-status-negative-inverse-default-alt-light), var(--modes-color-status-negative-inverse-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-error-inverse-border-default: light-dark(var(--modes-color-status-negative-inverse-default-light), var(--modes-color-status-negative-inverse-default-dark));
-  --status-color-pill-important-bg-default: light-dark(var(--modes-color-status-important-default-light), var(--modes-color-status-important-default-dark));
-  --status-color-pill-important-bg-alt-default: light-dark(var(--modes-color-status-important-default-alt-light), var(--modes-color-status-important-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-important-border-default: light-dark(var(--modes-color-status-important-default-light), var(--modes-color-status-important-default-dark));
-  --status-color-pill-important-inverse-bg-default: light-dark(var(--modes-color-status-important-inverse-default-light), var(--modes-color-status-important-inverse-default-dark));
-  --status-color-pill-important-inverse-bg-alt-default: light-dark(var(--modes-color-status-important-inverse-default-alt-light), var(--modes-color-status-important-inverse-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-important-inverse-border-default: light-dark(var(--modes-color-status-important-inverse-default-light), var(--modes-color-status-important-inverse-default-dark));
-  --status-color-pill-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --status-color-pill-info-bg-alt-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --status-color-pill-info-inverse-bg-default: light-dark(var(--modes-color-status-info-inverse-default-light), var(--modes-color-status-info-inverse-default-dark));
-  --status-color-pill-info-inverse-bg-alt-default: light-dark(var(--modes-color-status-info-inverse-default-alt-light), var(--modes-color-status-info-inverse-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-info-inverse-border-default: light-dark(var(--modes-color-status-info-inverse-default-light), var(--modes-color-status-info-inverse-default-dark));
-  --status-color-pill-neutral-bg-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
-  --status-color-pill-neutral-bg-alt-default: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-neutral-border-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
-  --status-color-pill-neutral-inverse-bg-default: light-dark(var(--modes-color-status-neutral-inverse-default-light), var(--modes-color-status-neutral-inverse-default-dark));
-  --status-color-pill-neutral-inverse-bg-alt-default: light-dark(var(--modes-color-status-neutral-inverse-default-alt-light), var(--modes-color-status-neutral-inverse-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-neutral-inverse-border-default: light-dark(var(--modes-color-status-neutral-inverse-default-light), var(--modes-color-status-neutral-inverse-default-dark));
-  --status-color-pill-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --status-color-pill-success-bg-alt-default: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --status-color-pill-success-inverse-bg-default: light-dark(var(--modes-color-status-positive-inverse-default-light), var(--modes-color-status-positive-inverse-default-dark));
-  --status-color-pill-success-inverse-bg-alt-default: light-dark(var(--modes-color-status-positive-inverse-default-alt-light), var(--modes-color-status-positive-inverse-default-alt-dark)); /* outline pill bg */
-  --status-color-pill-success-inverse-border-default: light-dark(var(--modes-color-status-positive-inverse-default-light), var(--modes-color-status-positive-inverse-default-dark));
-  --status-color-pill-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --status-color-pill-warning-bg-alt-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
-  --status-color-pill-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --status-color-pill-warning-inverse-bg-default: light-dark(var(--modes-color-status-caution-inverse-default-light), var(--modes-color-status-caution-inverse-default-dark));
-  --status-color-pill-warning-inverse-bg-alt-default: light-dark(var(--modes-color-status-caution-inverse-default-alt-light), var(--modes-color-status-caution-inverse-default-alt-dark)); /* Global message bg */
-  --status-color-pill-warning-inverse-border-default: light-dark(var(--modes-color-status-caution-inverse-default-light), var(--modes-color-status-caution-inverse-default-dark));
-  --status-typography-label-s: var(--global-typography-component-firm-s);
-  --status-typography-label-m: var(--global-typography-component-firm-m);
-  --status-typography-label-l: var(--global-typography-component-firm-l);
-  --status-typography-default-s: var(--global-typography-component-moderate-s);
-  --status-typography-default-m: var(--global-typography-component-moderate-m);
-  --status-typography-default-l: var(--global-typography-component-moderate-l);
-  --status-typography-heading-s: var(--global-typography-component-firm-s);
-  --status-typography-heading-m: var(--global-typography-component-firm-m);
-  --status-typography-heading-l: var(--global-typography-component-firm-l);
-  --status-color-message-contextual-text: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark)); /* Message text. */
-  --status-color-message-contextual-ai-bg-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
-  --status-color-message-contextual-ai-border-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
-  --status-color-message-global-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --status-color-message-global-callout-bg-hover: light-dark(var(--modes-color-status-callout-hover-alt-light), var(--modes-color-status-callout-hover-alt-dark)); /* global message bg hover */
-  --status-color-message-global-info-bg-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
-  --status-color-message-global-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
-  --status-color-pill-custom-blue-bg-alt-hover: light-dark(var(--modes-color-status-custom-blue-hover-alt-light), var(--modes-color-status-custom-blue-hover-alt-dark));
-  --status-color-pill-custom-blue-bg-hover: light-dark(var(--modes-color-status-custom-blue-hover-light), var(--modes-color-status-custom-blue-hover-dark));
-  --status-color-pill-custom-teal-bg-alt-hover: light-dark(var(--modes-color-status-custom-teal-hover-alt-light), var(--modes-color-status-custom-teal-hover-alt-dark));
-  --status-color-pill-custom-teal-bg-hover: light-dark(var(--modes-color-status-custom-teal-hover-light), var(--modes-color-status-custom-teal-hover-dark));
-  --status-color-pill-custom-green-bg-alt-hover: light-dark(var(--modes-color-status-custom-green-hover-alt-light), var(--modes-color-status-custom-green-hover-alt-dark));
-  --status-color-pill-custom-green-bg-hover: light-dark(var(--modes-color-status-custom-green-hover-light), var(--modes-color-status-custom-green-hover-dark));
-  --status-color-pill-custom-lime-bg-alt-hover: light-dark(var(--modes-color-status-custom-lime-hover-alt-light), var(--modes-color-status-custom-lime-hover-alt-dark));
-  --status-color-pill-custom-lime-bg-hover: light-dark(var(--modes-color-status-custom-lime-hover-light), var(--modes-color-status-custom-lime-hover-dark));
-  --status-color-pill-custom-orange-bg-alt-hover: light-dark(var(--modes-color-status-custom-orange-hover-alt-light), var(--modes-color-status-custom-orange-hover-alt-dark));
-  --status-color-pill-custom-orange-bg-hover: light-dark(var(--modes-color-status-custom-orange-hover-light), var(--modes-color-status-custom-orange-hover-dark));
-  --status-color-pill-custom-red-bg-alt-hover: light-dark(var(--modes-color-status-custom-red-hover-alt-light), var(--modes-color-status-custom-red-hover-alt-dark));
-  --status-color-pill-custom-red-bg-hover: light-dark(var(--modes-color-status-custom-red-hover-light), var(--modes-color-status-custom-red-hover-dark));
-  --status-color-pill-custom-pink-bg-alt-hover: light-dark(var(--modes-color-status-custom-pink-hover-alt-light), var(--modes-color-status-custom-pink-hover-alt-dark));
-  --status-color-pill-custom-pink-bg-hover: light-dark(var(--modes-color-status-custom-pink-hover-light), var(--modes-color-status-custom-pink-hover-dark));
-  --status-color-pill-custom-purple-bg-alt-hover: light-dark(var(--modes-color-status-custom-purple-hover-alt-light), var(--modes-color-status-custom-purple-hover-alt-dark));
-  --status-color-pill-custom-purple-bg-hover: light-dark(var(--modes-color-status-custom-purple-hover-light), var(--modes-color-status-custom-purple-hover-dark));
-  --status-color-pill-custom-gray-bg-alt-hover: light-dark(var(--modes-color-status-custom-gray-hover-alt-light), var(--modes-color-status-custom-gray-hover-alt-dark));
-  --status-color-pill-custom-gray-bg-hover: light-dark(var(--modes-color-status-custom-gray-hover-light), var(--modes-color-status-custom-gray-hover-dark));
-  --status-color-pill-custom-slate-bg-alt-hover: light-dark(var(--modes-color-status-custom-slate-hover-alt-light), var(--modes-color-status-custom-slate-hover-alt-dark));
-  --status-color-pill-custom-slate-bg-hover: light-dark(var(--modes-color-status-custom-slate-hover-light), var(--modes-color-status-custom-slate-hover-dark));
-  --status-color-pill-error-bg-alt-hover: light-dark(var(--modes-color-status-negative-hover-alt-light), var(--modes-color-status-negative-hover-alt-dark));
-  --status-color-pill-error-bg-hover: light-dark(var(--modes-color-status-negative-hover-light), var(--modes-color-status-negative-hover-dark));
-  --status-color-pill-error-inverse-bg-alt-hover: light-dark(var(--modes-color-status-negative-inverse-hover-alt-light), var(--modes-color-status-negative-inverse-hover-alt-dark));
-  --status-color-pill-error-inverse-bg-hover: light-dark(var(--modes-color-status-negative-inverse-hover-light), var(--modes-color-status-negative-inverse-hover-dark));
-  --status-color-pill-generic-inverse-label-default: light-dark(var(--modes-color-status-content-inverse-with-default-light), var(--modes-color-status-content-inverse-with-default-dark));
-  --status-color-pill-generic-inverse-label-hover: light-dark(var(--modes-color-status-content-inverse-with-hover-light), var(--modes-color-status-content-inverse-with-hover-dark));
-  --status-color-pill-important-bg-alt-hover: light-dark(var(--modes-color-status-important-hover-alt-light), var(--modes-color-status-important-hover-alt-dark));
-  --status-color-pill-important-bg-hover: light-dark(var(--modes-color-status-important-hover-light), var(--modes-color-status-important-hover-dark));
-  --status-color-pill-important-inverse-bg-alt-hover: light-dark(var(--modes-color-status-important-inverse-hover-alt-light), var(--modes-color-status-important-inverse-hover-alt-dark));
-  --status-color-pill-important-inverse-bg-hover: light-dark(var(--modes-color-status-important-inverse-hover-light), var(--modes-color-status-important-inverse-hover-dark));
-  --status-color-pill-info-bg-alt-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
-  --status-color-pill-info-bg-hover: light-dark(var(--modes-color-status-info-hover-light), var(--modes-color-status-info-hover-dark));
-  --status-color-pill-info-inverse-bg-alt-hover: light-dark(var(--modes-color-status-info-inverse-hover-alt-light), var(--modes-color-status-info-inverse-hover-alt-dark));
-  --status-color-pill-info-inverse-bg-hover: light-dark(var(--modes-color-status-info-inverse-hover-light), var(--modes-color-status-info-inverse-hover-dark));
-  --status-color-pill-neutral-bg-alt-hover: light-dark(var(--modes-color-status-neutral-hover-alt-light), var(--modes-color-status-neutral-hover-alt-dark));
-  --status-color-pill-neutral-bg-hover: light-dark(var(--modes-color-status-neutral-hover-light), var(--modes-color-status-neutral-hover-dark));
-  --status-color-pill-neutral-inverse-bg-alt-hover: light-dark(var(--modes-color-status-neutral-inverse-hover-alt-light), var(--modes-color-status-neutral-inverse-hover-alt-dark));
-  --status-color-pill-neutral-inverse-bg-hover: light-dark(var(--modes-color-status-neutral-inverse-hover-light), var(--modes-color-status-neutral-inverse-hover-dark));
-  --status-color-pill-readonly-label: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-color-pill-success-bg-alt-hover: light-dark(var(--modes-color-status-positive-hover-alt-light), var(--modes-color-status-positive-hover-alt-dark));
-  --status-color-pill-success-bg-hover: light-dark(var(--modes-color-status-positive-hover-light), var(--modes-color-status-positive-hover-dark));
-  --status-color-pill-success-inverse-bg-alt-hover: light-dark(var(--modes-color-status-positive-inverse-hover-alt-light), var(--modes-color-status-positive-inverse-hover-alt-dark));
-  --status-color-pill-success-inverse-bg-hover: light-dark(var(--modes-color-status-positive-inverse-hover-light), var(--modes-color-status-positive-inverse-hover-dark));
-  --status-color-pill-warning-bg-alt-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
-  --status-color-pill-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-light), var(--modes-color-status-caution-hover-dark));
-  --status-color-pill-warning-inverse-bg-alt-hover: light-dark(var(--modes-color-status-caution-inverse-hover-alt-light), var(--modes-color-status-caution-inverse-hover-alt-dark));
-  --status-color-pill-warning-inverse-bg-hover: light-dark(var(--modes-color-status-caution-inverse-hover-light), var(--modes-color-status-caution-inverse-hover-dark));
-  --status-color-rating-bg-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
-  --status-color-rating-bg-default-alt: light-dark(var(--modes-color-status-reviews-default-alt-light), var(--modes-color-status-reviews-default-alt-dark));
-  --status-color-rating-bg-hover: light-dark(var(--modes-color-status-reviews-hover-light), var(--modes-color-status-reviews-hover-dark));
-  --status-color-rating-border-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
-  --status-color-message-contextual-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
-  --status-color-message-global-label-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
-  --status-color-message-global-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark)); /* Icon on tinted bgs */
-  --status-color-pill-generic-label-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark));
-  --status-color-pill-generic-label-hover: light-dark(var(--modes-color-status-content-with-hover-light), var(--modes-color-status-content-with-hover-dark));
-  --status-color-pill-generic-label-alt-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
-  --status-color-pill-generic-label-alt-hover: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
-  --status-color-pill-generic-inverse-label-alt-default: light-dark(var(--modes-color-status-content-inverse-with-default-alt-light), var(--modes-color-status-content-inverse-with-default-alt-dark));
-  --status-color-pill-generic-inverse-label-alt-hover: light-dark(var(--modes-color-status-content-inverse-with-default-alt-light), var(--modes-color-status-content-inverse-with-default-alt-dark));
-  --status-size-pill-s: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Min height */
-  --status-size-pill-m: var(--global-size-macro-xs); /* Min height and removable button. */
-  --status-size-pill-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* Min height and removable button */
-  --status-size-message-statuscontainer-m: var(--global-size-macro-s); /* message and toast icon container width */
-  --status-size-message-statuscontainer-l: var(--global-size-macro-m); /* message and toast icon container width */
-  --status-size-message-global-m: var(--global-size-macro-m); /* Global message minheight */
-  --status-size-icon-m: var(--global-size-icon-m);
-  --status-radius-message: var(--global-radius-container-m); /* Message */
-  --status-radius-pill: var(--global-radius-container-sm); /* Pill (outer corners) */
-  --status-borderwidth-pill: var(--global-borderwidth-s); /* Outlined Pill border */
-  --status-borderwidth-message: var(--global-borderwidth-xs); /* Contextual message and AI inline border */
-  --status-space-none: var(--global-space-none);
-  --status-space-integral-x: var(--global-space-micro-s); /* Space between pill label and icon. Space between message text and link. */
-  --status-space-pill-x-s: calc(var(--global-space-macro-xs) / 2);
-  --status-space-pill-x-m: calc(var(--global-space-macro-xs) / 2);
-  --status-space-pill-x-l: calc(var(--global-space-macro-xs) / 2);
-  --status-space-tooltip-x: var(--global-space-micro-xxl); /* Right left padding.  */
-  --status-space-tooltip-y: var(--global-space-micro-l); /* Top bottom padding.  */
-  --status-space-message-contextual-x-m: var(--global-space-micro-xxl); /* Left and right padding on Medium message */
-  --status-space-message-contextual-x-l: var(--global-space-macro-s); /* Left and right paddding on Large Message */
-  --status-space-message-contextual-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on Medium message */
-  --status-space-message-contextual-y-l: var(--global-space-macro-s); /* Top and bottom paddding on Large Message */
-  --status-space-message-contextual-xg-m: var(--global-space-micro-l); /* Gap between icon and text in subtle message, and between text and action button in typical message */
-  --status-space-message-contextual-xg-l: var(--global-space-macro-xs); /* Gap between icon and text in subtle message, and between text and action button in typical message */
-  --status-space-message-contextual-yg-m: var(--global-space-micro-xs); /* Gap between heading and other content */
-  --status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
-  --status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
-  --status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
-  --status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
-  --status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
-  --status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
-  --status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
-  --status-space-message-global-cta-y-m: var(--global-space-macro-xs); /* Top and bottom padding on global message for countdown */
-  --status-space-message-global-cta-yg-m: var(--global-space-macro-m); /* Gap between countdown spacing for global message */
-  --status-space-message-global-iconwrapper-y-m: var(--global-space-micro-xxl); /* Top padding on global message icon wrapper. */
-  --status-color-pill-readonly-bg-default: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-color-pill-readonly-border-default: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-size-message-messagecontent-maxwidth: var(--container-size-responsive-xxxl); /* max width of content inside message to make sure there are roughly 12 works per line */
-  /* tab component tokens */
-  --tab-color-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
-  --tab-color-navigation-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* For previous/next buttons on responsive tabs */
-  --tab-color-validation-border-warning: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --tab-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --tab-color-validation-icon-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --tab-color-validation-icon-warning: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --tab-radius-none: var(--button-radius-none); /* For previous/next buttons */
-  --tab-typography-label-s: var(--global-typography-component-firm-s);
-  --tab-typography-label-m: var(--global-typography-component-firm-m);
-  --tab-typography-label-l: var(--global-typography-component-firm-l);
-  --tab-color-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark)); /* For anchor nav, not tab. */
-  --tab-color-border-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --tab-color-icon-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --tab-color-label-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --tab-color-icon-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --tab-color-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
-  --tab-size-m: var(--global-size-macro-m); /* Anchor nav, M Tab */
-  --tab-size-l: var(--global-size-macro-l); /* L tab */
-  --tab-size-shadow-arrow: var(--global-size-micro-m); /* Shadow width for linear gradient shadow on repsonsive tab arrows. */
-  --tab-size-baseline-m: var(--global-size-micro-xxs); /* Thickness of baseline. */
-  --tab-size-baseline-l: var(--global-size-micro-xxs); /* Thickness of baseline. */
-  --tab-size-icon-m: var(--global-size-icon-m);
-  --tab-size-icon-l: var(--global-size-icon-m);
-  --tab-size-indicator-m: var(--global-size-micro-xs); /* Thickness of indicator for active and hover. */
-  --tab-size-indicator-l: var(--global-size-micro-xs); /* Thickness of indicator for active and hover. */
-  --tab-space-x-m: var(--global-space-macro-xs); /* Left and right padding on Tab. */
-  --tab-space-x-l: var(--global-space-macro-m); /* Left and right padding on Tab. */
-  --tab-space-xg-m: var(--global-space-micro-l); /* Gap between elements in Tab. */
-  --tab-space-xg-l: var(--global-space-micro-l); /* Gap between elements in Tab. */
-  --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
-  --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
-  --tab-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --tab-color-border-activealt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
-  --tab-color-border-enabled: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
-  --tab-color-border-hover: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
-  --tab-color-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --tab-color-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --tab-color-validation-label-error: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --tab-color-validation-label-warning: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --tab-radius-m: var(--global-radius-interactive-m); /* Tab horizontal - top corners. Tab vertical - left corners. */
-  --tab-radius-l: var(--global-radius-interactive-m); /* Tab horizontal - top corners. Tab vertical - left corners. */
-  --tab-radius-baseline-m: var(--global-radius-interactive-xxs);
-  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
-  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
-  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
-  /* table component tokens */
-  --table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
-  --table-color-row-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --table-color-row-label-hover: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
-  --table-typography-heading-s: var(--global-typography-component-firm-s);
-  --table-typography-heading-m: var(--global-typography-component-firm-m);
-  --table-typography-heading-l: var(--global-typography-component-firm-l);
-  --table-typography-default-s: var(--global-typography-component-moderate-s);
-  --table-typography-default-m: var(--global-typography-component-moderate-m);
-  --table-typography-default-l: var(--global-typography-component-moderate-l);
-  --table-typography-label-s: var(--global-typography-component-firm-s);
-  --table-typography-label-m: var(--global-typography-component-firm-m);
-  --table-typography-label-l: var(--global-typography-component-firm-l);
-  --table-color-row-bg-activated: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
-  --table-color-row-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
-  --table-color-row-bg-alt: light-dark(var(--modes-color-generic-bg-delicate-light), var(--modes-color-generic-bg-delicate-dark)); /* Zebra stripes */
-  --table-color-row-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* Zebra stripes combined with child rows. */
-  --table-color-row-bg-alt3: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* Child rows. */
-  --table-color-row-bg-hover: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark));
-  --table-color-row-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
-  --table-color-footer-bg-default: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark));
-  --table-boxshadow-parentrow: var(--global-boxshadow-container-far);
-  --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
-  --table-boxshadow-column-sticky-left: var(--global-boxshadow-cleanedge-near-right); /* Right shadow on left hand sticky column. */
-  --table-boxshadow-column-sticky-right: var(--global-boxshadow-cleanedge-near-left); /* Left shadow on right hand sticky column. */
-  --table-boxshadow-row-dragging: var(--global-boxshadow-interactive-drag); /* dragging state for a table row */
-  --table-color-header-subtle-bg-alt: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark)); /* header alt */
-  --table-color-header-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-light), var(--modes-color-interactive-monochrome-hover-dark));
-  --table-color-header-subtle-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Header borders */
-  --table-color-header-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --table-color-header-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --table-color-header-harsh-bg-alt: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* header alt */
-  --table-color-header-harsh-bg-default: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --table-color-header-harsh-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-light), var(--modes-color-interactive-monochrome-hover-dark));
-  --table-color-header-harsh-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
-  --table-color-header-harsh-label-default: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --table-color-header-harsh-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --table-color-row-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
-  --table-color-row-label-activated: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --table-color-row-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --table-color-footer-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Header borders */
-  --table-color-footer-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */
-  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
-  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
-  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
-  --table-space-none: var(--global-space-none);
-  --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
-  --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
-  --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
-  --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
-  --table-space-row-x-l: var(--global-space-macro-xs); /* Left and right padding inside L row cells */
-  --table-space-row-x-xl: var(--global-space-macro-xs); /* Left and right padding inside XL row cells */
-  --table-space-row-xg-xs: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-s: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-m: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-l: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-xl: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-rowchild-x-xs: calc(var(--global-space-macro-l) + var(--global-space-micro-s)); /* Left padding inside XS child row cells */
-  --table-space-rowchild-x-s: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside S child row cells */
-  --table-space-rowchild-x-m: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside M child row cells */
-  --table-space-rowchild-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside L child row cells */
-  --table-space-rowchild-x-xl: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside XL child row cells */
-  --table-size-row-standard-xs: var(--global-size-macro-xs);
-  --table-size-row-standard-s: var(--global-size-macro-s);
-  --table-size-row-standard-m: var(--global-size-macro-m);
-  --table-size-row-standard-l: var(--global-size-macro-l);
-  --table-size-row-standard-xl: calc(var(--global-size-macro-xl) + var(--global-size-micro-m));
-  --table-size-icon-xs: var(--global-size-icon-s);
-  --table-size-icon-s: var(--global-size-icon-m);
-  --table-size-icon-m: var(--global-size-icon-m);
-  --table-size-icon-l: var(--global-size-icon-l);
-  --table-size-icon-xl: var(--global-size-icon-xl);
-  --table-size-row-doubleheight-xs: calc(var(--table-size-row-standard-xs) * 2);
-  --table-size-row-doubleheight-s: calc(var(--table-size-row-standard-s) * 2);
-  --table-size-row-doubleheight-m: calc(var(--table-size-row-standard-m) * 2);
-  --table-size-row-doubleheight-l: calc(var(--table-size-row-standard-l) * 2);
-  --table-size-row-doubleheight-xl: calc(var(--table-size-row-standard-xl) * 2);
-}
-@media (width >= 1200px) {
-  :root {
-    /* Global tokens */
-    --global-space-macro-scale: 1px;
-    --global-space-macro-xxxs: 8px;
-    --global-space-macro-xxs: 12px;
-    --global-space-macro-xs: 16px;
-    --global-space-macro-s: 20px;
-    --global-space-macro-m: 24px;
-    --global-space-macro-ml: 28px;
-    --global-space-macro-l: 32px;
-    --global-space-macro-xl: 40px;
-    --global-space-macro-xxl: 48px;
-    --global-font-size-adaptive-step2: 18px;
-    --global-font-size-adaptive-step3: 21px;
-    --global-font-size-adaptive-step4: 24px;
-    --global-font-size-adaptive-step5: 27px;
-    --global-font-size-adaptive-step6: 30px;
-    --global-font-size-adaptive-step7: 35px;
-    --global-font-size-adaptive-step8: 40px;
-    --global-font-size-adaptive-step9: 46px;
-    --global-font-size-adaptive-step10: 52px;
-  }
-}