jouw-stem__design-system 0.1.0

package/dist/scss/_tokens.scss

@@ -0,0 +1,2769 @@
+// Auto-generated by build-tokens.ts - DO NOT EDIT
+// These SCSS variables reference CSS custom properties for runtime theming
+
+// Surface
+$surface-canvas: var(--surface-canvas); // Main page background — nu.nl pure white
+$surface-panel: var(--surface-panel); // Card/panel background — light grey, derived above the #eeeeee hairline
+$surface-elevated: var(--surface-elevated); // Elevated surface (modals, dropdowns)
+$surface-overlay: var(--surface-overlay); // Modal overlay backdrop
+$surface-muted: var(--surface-muted); // Subtle/recessed background — slightly navy-tinted neutral
+$surface-inverse: var(--surface-inverse); // Dark surface for contrast (tooltips, banners) — nu.nl navy
+$surface-highlight: var(--surface-highlight); // Warm accent surface — light tint of breaking-news red
+$surface-gradient-start: var(--surface-gradient-start); // Gradient background start — flattened to solid (no nu.nl gradient)
+$surface-gradient-end: var(--surface-gradient-end); // Gradient background end — flattened to solid (no nu.nl gradient)
+
+// Text
+$text-default: var(--text-default); // Primary text — nu.nl navy rgb(31,37,68)
+$text-primary: var(--text-primary); // Primary text (alias)
+$text-secondary: var(--text-secondary); // Secondary text — slightly lifted navy
+$text-muted: var(--text-muted); // Helper/secondary text
+$text-subtle: var(--text-subtle); // Placeholder text
+$text-inverse: var(--text-inverse); // Text on dark backgrounds
+$text-link: var(--text-link); // Link text — nu.nl link blue rgb(0,108,222)
+$text-linkHover: var(--text-linkHover); // Link hover — darker blue
+$text-linkVisited: var(--text-linkVisited); // Visited link
+$text-heading: var(--text-heading); // Heading text — nu.nl navy
+
+// Border
+$border-subtle: var(--border-subtle); // Subtle borders — nu.nl hairline rgb(238,238,238)
+$border-default: var(--border-default); // Default borders
+$border-strong: var(--border-strong); // Emphasised borders — navy rule (nu.nl uses navy under nav, headings)
+$border-focus: var(--border-focus); // Focus ring colour — nu.nl link blue
+$border-vibrant-start: var(--border-vibrant-start); // Vibrant gradient border start — flattened to solid navy
+$border-vibrant-end: var(--border-vibrant-end); // Vibrant gradient border end — flattened to solid navy
+
+// Feedback
+$feedback-success: var(--feedback-success); // Success state
+$feedback-successSubtle: var(--feedback-successSubtle); // Success background
+$feedback-successEmphasis: var(--feedback-successEmphasis); // Success text
+$feedback-warning: var(--feedback-warning); // Warning state
+$feedback-warningSubtle: var(--feedback-warningSubtle); // Warning background
+$feedback-warningEmphasis: var(--feedback-warningEmphasis); // Warning text
+$feedback-error: var(--feedback-error); // Error state — nu.nl breaking-news red rgb(224,6,19)
+$feedback-errorSubtle: var(--feedback-errorSubtle); // Error background
+$feedback-errorEmphasis: var(--feedback-errorEmphasis); // Error text — nu.nl deeper promo red rgb(196,0,0)
+$feedback-info: var(--feedback-info); // Info state — nu.nl link blue
+$feedback-infoSubtle: var(--feedback-infoSubtle); // Info background
+$feedback-infoEmphasis: var(--feedback-infoEmphasis); // Info text
+
+// Accent
+$accent-gradient-start: var(--accent-gradient-start); // Accent gradient start — flattened to solid navy (nu.nl uses solid)
+$accent-gradient-end: var(--accent-gradient-end); // Accent gradient end — flattened to solid navy
+$accent-gradient-hoverStart: var(--accent-gradient-hoverStart); // Accent hover start — flattened to lifted navy
+$accent-gradient-hoverEnd: var(--accent-gradient-hoverEnd); // Accent hover end — flattened to lifted navy
+
+// Intent
+$intent-action-default: var(--intent-action-default); // Primary CTA colour — nu.nl navy
+$intent-action-hover: var(--intent-action-hover); // Primary CTA hover
+$intent-action-active: var(--intent-action-active); // Primary CTA pressed
+$intent-action-disabled: var(--intent-action-disabled); // Disabled state
+$intent-secondary-default: var(--intent-secondary-default); // Secondary action bg
+$intent-secondary-hover: var(--intent-secondary-hover); // Secondary action hover
+$intent-secondary-border: var(--intent-secondary-border); // Secondary action border — navy outline (nu.nl button pattern)
+
+// Focus
+$focus-ring: var(--focus-ring); // Focus ring colour — nu.nl link blue
+
+// Brand
+$brand-primary: var(--brand-primary); // Primary brand colour — nu.nl navy rgb(31,37,68)
+$brand-secondary: var(--brand-secondary); // Secondary brand colour (CTA / link) — nu.nl blue rgb(0,108,222)
+$brand-accent: var(--brand-accent); // Accent brand colour — nu.nl breaking red rgb(224,6,19)
+$brand-subtle: var(--brand-subtle); // Subtle brand background
+
+// Container
+$container-max-width-narrow: var(--container-max-width-narrow); // Long-form reading / forms / articles (~65ch comfortable line length)
+$container-max-width-default: var(--container-max-width-default); // Standard app shell
+$container-max-width-wide: var(--container-max-width-wide); // Data-heavy / multi-column dashboards
+
+// Radius
+$radius-none: var(--radius-none); // No rounding
+$radius-subtle: var(--radius-subtle); // Subtle rounding
+$radius-default: var(--radius-default); // Default border radius
+$radius-rounded: var(--radius-rounded); // More rounded corners
+$radius-large: var(--radius-large); // Large radius for cards
+$radius-pill: var(--radius-pill); // Fully rounded (pills, circles)
+
+// Shadow
+$shadow-xs: var(--shadow-xs); // Subtle depth - hover states
+$shadow-s: var(--shadow-s); // Low elevation - cards, buttons
+$shadow-m: var(--shadow-m); // Medium elevation - dropdowns
+$shadow-l: var(--shadow-l); // High elevation - modals
+$shadow-xl: var(--shadow-xl); // Highest elevation - toasts
+
+// Space
+$space-3xs: var(--space-3xs); // Canonical spacer 3xs (2px)
+$space-2xs: var(--space-2xs); // Canonical spacer 2xs (4px)
+$space-xs: var(--space-xs); // Canonical spacer xs (6px)
+$space-s: var(--space-s); // Canonical spacer s (10px)
+$space-m: var(--space-m); // Canonical spacer m (16px)
+$space-l: var(--space-l); // Canonical spacer l (26px)
+$space-xl: var(--space-xl); // Canonical spacer xl (42px)
+$space-2xl: var(--space-2xl); // Canonical spacer 2xl (68px)
+$space-3xl: var(--space-3xl); // Canonical spacer 3xl (110px)
+$space-4xl: var(--space-4xl); // Canonical spacer 4xl (178px)
+
+// Inset
+$inset-3xs: var(--inset-3xs); // Extra extra extra small inset padding
+$inset-2xs: var(--inset-2xs); // Extra extra small inset padding
+$inset-xs: var(--inset-xs); // Extra small inset padding
+$inset-s: var(--inset-s); // Small inset padding
+$inset-m: var(--inset-m); // Medium inset padding
+$inset-l: var(--inset-l); // Large inset padding
+$inset-xl: var(--inset-xl); // Extra large inset padding
+$inset-2xl: var(--inset-2xl); // Extra extra large inset padding
+
+// Stack
+$stack-3xs: var(--stack-3xs); // Vertical spacing between stacked items
+$stack-2xs: var(--stack-2xs);
+$stack-xs: var(--stack-xs);
+$stack-s: var(--stack-s);
+$stack-m: var(--stack-m);
+$stack-l: var(--stack-l);
+$stack-xl: var(--stack-xl);
+$stack-2xl: var(--stack-2xl);
+
+// Inline
+$inline-3xs: var(--inline-3xs); // Horizontal spacing between inline items
+$inline-2xs: var(--inline-2xs);
+$inline-xs: var(--inline-xs);
+$inline-s: var(--inline-s);
+$inline-m: var(--inline-m);
+$inline-l: var(--inline-l);
+$inline-xl: var(--inline-xl);
+$inline-2xl: var(--inline-2xl);
+
+// Accordion
+$accordion-header-padding: var(--accordion-header-padding); // Header padding
+$accordion-header-background-default: var(--accordion-header-background-default); // Header background
+$accordion-header-background-hover: var(--accordion-header-background-hover); // Header hover background - semi-transparent for dark mode
+$accordion-header-background-active: var(--accordion-header-background-active); // Header active/expanded background
+$accordion-header-color-default: var(--accordion-header-color-default); // Header text color
+$accordion-header-color-hover: var(--accordion-header-color-hover); // Header text color on hover
+$accordion-header-color-disabled: var(--accordion-header-color-disabled); // Header text color when disabled
+$accordion-content-padding: var(--accordion-content-padding); // Content padding
+$accordion-content-background: var(--accordion-content-background); // Content background
+$accordion-content-color: var(--accordion-content-color); // Content text color
+$accordion-border-width: var(--accordion-border-width); // Border width
+$accordion-border-color: var(--accordion-border-color); // Border color
+$accordion-border-radius: var(--accordion-border-radius); // Border radius
+$accordion-icon-size: var(--accordion-icon-size); // Toggle icon size
+$accordion-icon-color-default: var(--accordion-icon-color-default); // Icon color
+$accordion-icon-color-hover: var(--accordion-icon-color-hover); // Icon color on hover
+$accordion-icon-color-disabled: var(--accordion-icon-color-disabled); // Icon color when disabled
+$accordion-icon-rotation-collapsed: var(--accordion-icon-rotation-collapsed); // Icon rotation when collapsed
+$accordion-icon-rotation-expanded: var(--accordion-icon-rotation-expanded); // Icon rotation when expanded
+$accordion-transition-duration: var(--accordion-transition-duration); // Animation duration
+$accordion-gap: var(--accordion-gap); // Gap between accordion tabs
+
+// AppFooter
+$appFooter-background: var(--appFooter-background); // Status bar background (matches page; separated by the top rule)
+$appFooter-text: var(--appFooter-text); // Status bar text
+$appFooter-border: var(--appFooter-border); // Divider above the status bar
+$appFooter-focusRing: var(--appFooter-focusRing); // Focus outline colour
+$appFooter-height: var(--appFooter-height); // Status bar min-height
+$appFooter-paddingX: var(--appFooter-paddingX); // Horizontal inset
+$appFooter-gap: var(--appFooter-gap); // Gap between status-bar items
+$appFooter-status-text: var(--appFooter-status-text); // Status label colour
+$appFooter-status-gap: var(--appFooter-status-gap); // Gap between dot and label
+$appFooter-status-success: var(--appFooter-status-success); // Operational status dot
+$appFooter-status-warning: var(--appFooter-status-warning); // Degraded status dot
+$appFooter-status-error: var(--appFooter-status-error); // Outage status dot
+$appFooter-version-text: var(--appFooter-version-text); // Version stamp colour
+$appFooter-link-text: var(--appFooter-link-text); // Utility link colour
+$appFooter-link-hover: var(--appFooter-link-hover); // Utility link hover colour
+
+// AppHeader
+$appHeader-background: var(--appHeader-background); // Top bar background
+$appHeader-text: var(--appHeader-text); // Top bar text
+$appHeader-border: var(--appHeader-border); // Bottom + breadcrumb divider
+$appHeader-shadow: var(--appHeader-shadow); // Subtle top-bar elevation
+$appHeader-height: var(--appHeader-height); // Top bar min-height
+$appHeader-paddingX: var(--appHeader-paddingX); // Horizontal inset
+$appHeader-gap: var(--appHeader-gap); // Gap between top-bar items
+$appHeader-focusRing: var(--appHeader-focusRing); // Focus outline colour
+$appHeader-iconButton-text: var(--appHeader-iconButton-text); // Icon button glyph colour
+$appHeader-iconButton-hover: var(--appHeader-iconButton-hover); // Icon button hover background
+$appHeader-iconButton-size: var(--appHeader-iconButton-size); // Icon button hit area
+$appHeader-iconButton-radius: var(--appHeader-iconButton-radius); // Icon button radius
+$appHeader-search-background: var(--appHeader-search-background); // Search input background (matches bar; defined by its border)
+$appHeader-search-text: var(--appHeader-search-text); // Search input text
+$appHeader-search-border: var(--appHeader-search-border); // Search input border
+$appHeader-search-radius: var(--appHeader-search-radius); // Search input radius
+$appHeader-search-paddingX: var(--appHeader-search-paddingX); // Search input horizontal padding
+$appHeader-search-paddingY: var(--appHeader-search-paddingY); // Search input vertical padding
+$appHeader-badge-background: var(--appHeader-badge-background); // Notification badge background
+$appHeader-badge-text: var(--appHeader-badge-text); // Notification badge count colour
+$appHeader-avatar-background: var(--appHeader-avatar-background); // Account avatar background
+$appHeader-avatar-text: var(--appHeader-avatar-text); // Account avatar initials colour
+$appHeader-avatar-size: var(--appHeader-avatar-size); // Account avatar diameter
+$appHeader-crumbs-background: var(--appHeader-crumbs-background); // Breadcrumb row background (matches bar; separated by the top rule)
+$appHeader-crumbs-link: var(--appHeader-crumbs-link); // Breadcrumb link / separator colour
+$appHeader-crumbs-current: var(--appHeader-crumbs-current); // Current breadcrumb colour
+$appHeader-crumbs-height: var(--appHeader-crumbs-height); // Breadcrumb row min-height
+$appHeader-crumbs-gap: var(--appHeader-crumbs-gap); // Gap between crumbs
+$appHeader-menu-linkText: var(--appHeader-menu-linkText); // Drawer nav link colour
+$appHeader-menu-linkHover: var(--appHeader-menu-linkHover); // Drawer nav link hover background
+$appHeader-menu-linkCurrent: var(--appHeader-menu-linkCurrent); // Current drawer nav link background
+$appHeader-menu-linkPaddingY: var(--appHeader-menu-linkPaddingY); // Drawer nav link vertical padding
+$appHeader-menu-linkPaddingX: var(--appHeader-menu-linkPaddingX); // Drawer nav link horizontal padding
+$appHeader-menu-radius: var(--appHeader-menu-radius); // Drawer nav link radius
+$appHeader-menu-gap: var(--appHeader-menu-gap); // Gap between drawer nav links
+
+// Autocomplete
+$autocomplete-height-sm: var(--autocomplete-height-sm);
+$autocomplete-height-md: var(--autocomplete-height-md);
+$autocomplete-height-lg: var(--autocomplete-height-lg);
+$autocomplete-padding-x: var(--autocomplete-padding-x);
+$autocomplete-padding-y: var(--autocomplete-padding-y);
+$autocomplete-gap: var(--autocomplete-gap);
+$autocomplete-radius: var(--autocomplete-radius);
+$autocomplete-border-width: var(--autocomplete-border-width);
+$autocomplete-border-color-default: var(--autocomplete-border-color-default);
+$autocomplete-border-color-hover: var(--autocomplete-border-color-hover);
+$autocomplete-border-color-focus: var(--autocomplete-border-color-focus);
+$autocomplete-border-color-disabled: var(--autocomplete-border-color-disabled);
+$autocomplete-border-color-error: var(--autocomplete-border-color-error);
+$autocomplete-background-default: var(--autocomplete-background-default);
+$autocomplete-background-disabled: var(--autocomplete-background-disabled);
+$autocomplete-text-default: var(--autocomplete-text-default);
+$autocomplete-text-placeholder: var(--autocomplete-text-placeholder);
+$autocomplete-text-disabled: var(--autocomplete-text-disabled);
+$autocomplete-fontSize-sm: var(--autocomplete-fontSize-sm);
+$autocomplete-fontSize-md: var(--autocomplete-fontSize-md);
+$autocomplete-fontSize-lg: var(--autocomplete-fontSize-lg);
+$autocomplete-dropdown-background: var(--autocomplete-dropdown-background);
+$autocomplete-dropdown-border: var(--autocomplete-dropdown-border);
+$autocomplete-dropdown-shadow: var(--autocomplete-dropdown-shadow);
+$autocomplete-dropdown-radius: var(--autocomplete-dropdown-radius);
+$autocomplete-dropdown-maxHeight: var(--autocomplete-dropdown-maxHeight);
+$autocomplete-option-padding-x: var(--autocomplete-option-padding-x);
+$autocomplete-option-padding-y: var(--autocomplete-option-padding-y);
+$autocomplete-option-background-default: var(--autocomplete-option-background-default);
+$autocomplete-option-background-hover: var(--autocomplete-option-background-hover);
+$autocomplete-option-background-selected: var(--autocomplete-option-background-selected);
+$autocomplete-option-text-default: var(--autocomplete-option-text-default);
+$autocomplete-option-text-selected: var(--autocomplete-option-text-selected);
+$autocomplete-chip-padding-x: var(--autocomplete-chip-padding-x);
+$autocomplete-chip-padding-y: var(--autocomplete-chip-padding-y);
+$autocomplete-chip-gap: var(--autocomplete-chip-gap);
+$autocomplete-chip-radius: var(--autocomplete-chip-radius);
+$autocomplete-chip-background-default: var(--autocomplete-chip-background-default);
+$autocomplete-chip-background-hover: var(--autocomplete-chip-background-hover);
+$autocomplete-chip-text: var(--autocomplete-chip-text);
+$autocomplete-chip-fontSize: var(--autocomplete-chip-fontSize);
+$autocomplete-remove-size: var(--autocomplete-remove-size);
+$autocomplete-remove-color-default: var(--autocomplete-remove-color-default);
+$autocomplete-remove-color-hover: var(--autocomplete-remove-color-hover);
+$autocomplete-focus-ringWidth: var(--autocomplete-focus-ringWidth);
+$autocomplete-focus-ringColor: var(--autocomplete-focus-ringColor);
+$autocomplete-focus-ringOffset: var(--autocomplete-focus-ringOffset);
+$autocomplete-loader-size: var(--autocomplete-loader-size);
+$autocomplete-loader-color: var(--autocomplete-loader-color);
+
+// Avatar
+$avatar-background-default: var(--avatar-background-default); // Default avatar background
+$avatar-background-muted: var(--avatar-background-muted); // Subtle avatar background
+$avatar-background-brand: var(--avatar-background-brand); // Brand-colored avatar
+$avatar-background-accent: var(--avatar-background-accent); // Warm accent avatar
+$avatar-background-success: var(--avatar-background-success); // Success state avatar
+$avatar-background-warning: var(--avatar-background-warning); // Warning state avatar
+$avatar-background-error: var(--avatar-background-error); // Error state avatar
+$avatar-text-default: var(--avatar-text-default); // Text on light backgrounds
+$avatar-text-inverse: var(--avatar-text-inverse); // Text on dark backgrounds
+$avatar-text-brand: var(--avatar-text-brand); // Text on brand background
+$avatar-border-default: var(--avatar-border-default); // Default border color
+$avatar-border-ring: var(--avatar-border-ring); // Ring/outline around avatar
+$avatar-border-width: var(--avatar-border-width); // Border width
+$avatar-radius-square: var(--avatar-radius-square); // Rounded square avatar
+$avatar-radius-circle: var(--avatar-radius-circle); // Circular avatar
+$avatar-size-xs: var(--avatar-size-xs); // Extra small avatar
+$avatar-size-sm: var(--avatar-size-sm); // Small avatar
+$avatar-size-md: var(--avatar-size-md); // Medium avatar (default)
+$avatar-size-lg: var(--avatar-size-lg); // Large avatar
+$avatar-size-xl: var(--avatar-size-xl); // Extra large avatar
+$avatar-size-2xl: var(--avatar-size-2xl); // 2x large avatar
+$avatar-iconSize-xs: var(--avatar-iconSize-xs);
+$avatar-iconSize-sm: var(--avatar-iconSize-sm);
+$avatar-iconSize-md: var(--avatar-iconSize-md);
+$avatar-iconSize-lg: var(--avatar-iconSize-lg);
+$avatar-iconSize-xl: var(--avatar-iconSize-xl);
+$avatar-iconSize-2xl: var(--avatar-iconSize-2xl);
+$avatar-fontSize-xs: var(--avatar-fontSize-xs);
+$avatar-fontSize-sm: var(--avatar-fontSize-sm);
+$avatar-fontSize-md: var(--avatar-fontSize-md);
+$avatar-fontSize-lg: var(--avatar-fontSize-lg);
+$avatar-fontSize-xl: var(--avatar-fontSize-xl);
+$avatar-fontSize-2xl: var(--avatar-fontSize-2xl);
+$avatar-status-size-sm: var(--avatar-status-size-sm);
+$avatar-status-size-md: var(--avatar-status-size-md);
+$avatar-status-size-lg: var(--avatar-status-size-lg);
+$avatar-status-online: var(--avatar-status-online);
+$avatar-status-offline: var(--avatar-status-offline);
+$avatar-status-busy: var(--avatar-status-busy);
+$avatar-status-away: var(--avatar-status-away);
+$avatar-group-overlap: var(--avatar-group-overlap); // Overlap amount for avatar groups
+$avatar-group-ringWidth: var(--avatar-group-ringWidth); // Ring width in groups
+$avatar-group-ringColor: var(--avatar-group-ringColor); // Ring color matches canvas
+
+// Badge
+$badge-background-primary: var(--badge-background-primary); // Primary badge background - visible accent color
+$badge-background-success: var(--badge-background-success); // Success badge background (emphasis shade for white-text contrast)
+$badge-background-warning: var(--badge-background-warning); // Warning badge background (paired with dark text for contrast)
+$badge-background-danger: var(--badge-background-danger); // Danger badge background (emphasis shade for white-text contrast)
+$badge-background-info: var(--badge-background-info); // Info badge background (emphasis shade for white-text contrast)
+$badge-text-primary: var(--badge-text-primary); // Text on primary badge - white
+$badge-text-success: var(--badge-text-success); // Text on success badge
+$badge-text-warning: var(--badge-text-warning); // Text on warning badge (dark for contrast)
+$badge-text-danger: var(--badge-text-danger); // Text on danger badge
+$badge-text-info: var(--badge-text-info); // Text on info badge
+$badge-size-sm: var(--badge-size-sm); // Small badge min height
+$badge-size-md: var(--badge-size-md); // Medium badge min height
+$badge-size-lg: var(--badge-size-lg); // Large badge min height
+$badge-fontSize-sm: var(--badge-fontSize-sm); // Small badge font size
+$badge-fontSize-md: var(--badge-fontSize-md); // Medium badge font size
+$badge-fontSize-lg: var(--badge-fontSize-lg); // Large badge font size
+$badge-padding-sm: var(--badge-padding-sm); // Small badge horizontal padding
+$badge-padding-md: var(--badge-padding-md); // Medium badge horizontal padding
+$badge-padding-lg: var(--badge-padding-lg); // Large badge horizontal padding
+$badge-radius: var(--badge-radius); // Badge border radius (pill shape)
+$badge-fontWeight: var(--badge-fontWeight); // Badge font weight
+
+// Block-ui
+$block-ui-overlay-background: var(--block-ui-overlay-background); // Blocking overlay background
+$block-ui-overlay-zIndex: var(--block-ui-overlay-zIndex); // Overlay z-index
+$block-ui-spinner-size: var(--block-ui-spinner-size); // Loading spinner size
+$block-ui-spinner-color: var(--block-ui-spinner-color); // Spinner color
+$block-ui-spinner-borderWidth: var(--block-ui-spinner-borderWidth); // Spinner border width
+$block-ui-transition-duration: var(--block-ui-transition-duration); // Overlay fade transition
+
+// Breadcrumb
+$breadcrumb-gap: var(--breadcrumb-gap); // Gap between breadcrumb items and separators
+$breadcrumb-separator-color: var(--breadcrumb-separator-color); // Separator icon/text color
+$breadcrumb-separator-size: var(--breadcrumb-separator-size); // Separator icon size
+$breadcrumb-link-color-default: var(--breadcrumb-link-color-default); // Default link color
+$breadcrumb-link-color-hover: var(--breadcrumb-link-color-hover); // Link hover color
+$breadcrumb-link-color-current: var(--breadcrumb-link-color-current); // Current/active item color
+$breadcrumb-icon-size: var(--breadcrumb-icon-size); // Icon size in breadcrumb items
+$breadcrumb-icon-gap: var(--breadcrumb-icon-gap); // Gap between icon and label
+$breadcrumb-fontSize: var(--breadcrumb-fontSize); // Breadcrumb text size
+
+// Button
+$button-size-sm-height: var(--button-size-sm-height); // Small button height
+$button-size-sm-paddingX: var(--button-size-sm-paddingX); // Small button horizontal padding
+$button-size-sm-paddingY: var(--button-size-sm-paddingY); // Small button vertical padding
+$button-size-sm-fontSize: var(--button-size-sm-fontSize); // Small button font size
+$button-size-sm-iconSize: var(--button-size-sm-iconSize); // Small button icon size (1em — matches label font-size for optical balance)
+$button-size-sm-gap: var(--button-size-sm-gap); // Small button gap between icon and label
+$button-size-md-height: var(--button-size-md-height); // Medium button height
+$button-size-md-paddingX: var(--button-size-md-paddingX); // Medium button horizontal padding
+$button-size-md-paddingY: var(--button-size-md-paddingY); // Medium button vertical padding
+$button-size-md-fontSize: var(--button-size-md-fontSize); // Medium button font size
+$button-size-md-iconSize: var(--button-size-md-iconSize); // Medium button icon size (1em — matches label font-size for optical balance)
+$button-size-md-gap: var(--button-size-md-gap); // Medium button gap between icon and label
+$button-size-lg-height: var(--button-size-lg-height); // Large button height
+$button-size-lg-paddingX: var(--button-size-lg-paddingX); // Large button horizontal padding
+$button-size-lg-paddingY: var(--button-size-lg-paddingY); // Large button vertical padding
+$button-size-lg-fontSize: var(--button-size-lg-fontSize); // Large button font size
+$button-size-lg-iconSize: var(--button-size-lg-iconSize); // Large button icon size (1em — matches label font-size for optical balance)
+$button-size-lg-gap: var(--button-size-lg-gap); // Large button gap between icon and label
+$button-radius-default: var(--button-radius-default); // Button border radius — shape='rectangle' (default)
+$button-radius-rounded: var(--button-radius-rounded); // Softer corners — shape='rounded'
+$button-radius-pill: var(--button-radius-pill); // Fully rounded ends — shape='pill'
+$button-radius-square: var(--button-radius-square); // Sharp corners — shape='square'
+$button-radius-circle: var(--button-radius-circle); // Circular (icon-only) — shape='circle'
+$button-fontWeight: var(--button-fontWeight); // Button font weight
+$button-focus-ringColor: var(--button-focus-ringColor); // Button focus ring color
+$button-focus-ringWidth: var(--button-focus-ringWidth); // Button focus ring width
+$button-focus-ringOffset: var(--button-focus-ringOffset); // Button focus ring offset
+$button-transition-duration: var(--button-transition-duration); // Button transition duration
+$button-border-width: var(--button-border-width); // Button border width
+
+// Button-outlined
+$button-outlined-background-default: var(--button-outlined-background-default); // Outlined button background
+$button-outlined-background-hover: var(--button-outlined-background-hover); // Outlined button hover background
+$button-outlined-background-active: var(--button-outlined-background-active); // Outlined button active/pressed background
+$button-outlined-background-disabled: var(--button-outlined-background-disabled); // Outlined button disabled background
+$button-outlined-text-default: var(--button-outlined-text-default); // Outlined button text color
+$button-outlined-text-disabled: var(--button-outlined-text-disabled); // Outlined button disabled text color
+$button-outlined-border-default: var(--button-outlined-border-default); // Outlined button border
+$button-outlined-border-hover: var(--button-outlined-border-hover); // Outlined button hover border
+$button-outlined-border-active: var(--button-outlined-border-active); // Outlined button active border
+$button-outlined-border-disabled: var(--button-outlined-border-disabled); // Outlined button disabled border
+
+// Button-primary
+$button-primary-background-default: var(--button-primary-background-default); // Primary button background — navy.700, palette-step rest
+$button-primary-background-hover: var(--button-primary-background-hover); // Primary button hover — navy.800, one ramp step darker
+$button-primary-background-active: var(--button-primary-background-active); // Primary button pressed — navy.900, two steps darker
+$button-primary-background-disabled: var(--button-primary-background-disabled); // Primary button disabled background (state-exempt from rules)
+$button-primary-text-default: var(--button-primary-text-default); // Primary button label — white on dark fill
+$button-primary-text-disabled: var(--button-primary-text-disabled); // Primary button disabled label
+$button-primary-border-default: var(--button-primary-border-default); // Primary button border — matches fill
+$button-primary-border-hover: var(--button-primary-border-hover); // Primary button hover border
+$button-primary-border-active: var(--button-primary-border-active); // Primary button active border
+$button-primary-border-disabled: var(--button-primary-border-disabled); // Primary button disabled border
+
+// Button-secondary
+$button-secondary-background-default: var(--button-secondary-background-default); // Secondary button background
+$button-secondary-background-hover: var(--button-secondary-background-hover); // Secondary button hover background
+$button-secondary-background-active: var(--button-secondary-background-active); // Secondary button active background
+$button-secondary-background-disabled: var(--button-secondary-background-disabled); // Secondary button disabled background
+$button-secondary-text-default: var(--button-secondary-text-default); // Secondary button text color
+$button-secondary-text-disabled: var(--button-secondary-text-disabled); // Secondary button disabled text color
+$button-secondary-border-default: var(--button-secondary-border-default); // Secondary button border (gradient via pseudo-element)
+$button-secondary-border-hover: var(--button-secondary-border-hover); // Secondary button hover border
+$button-secondary-border-active: var(--button-secondary-border-active); // Secondary button active border
+$button-secondary-border-disabled: var(--button-secondary-border-disabled); // Secondary button disabled border
+
+// Button-text
+$button-text-background-default: var(--button-text-background-default); // Text button background
+$button-text-background-hover: var(--button-text-background-hover); // Text button hover background
+$button-text-background-active: var(--button-text-background-active); // Text button active/pressed background
+$button-text-background-disabled: var(--button-text-background-disabled); // Text button disabled background
+$button-text-text-default: var(--button-text-text-default); // Text button text color
+$button-text-text-disabled: var(--button-text-text-disabled); // Text button disabled text color
+$button-text-border-default: var(--button-text-border-default); // Text button border
+$button-text-border-hover: var(--button-text-border-hover); // Text button hover border
+$button-text-border-active: var(--button-text-border-active); // Text button active border
+$button-text-border-disabled: var(--button-text-border-disabled); // Text button disabled border
+
+// Calendar
+$calendar-width: var(--calendar-width);
+$calendar-padding: var(--calendar-padding);
+$calendar-radius: var(--calendar-radius);
+$calendar-background: var(--calendar-background);
+$calendar-border-width: var(--calendar-border-width);
+$calendar-border-color: var(--calendar-border-color);
+$calendar-shadow: var(--calendar-shadow);
+$calendar-header-padding: var(--calendar-header-padding);
+$calendar-header-gap: var(--calendar-header-gap);
+$calendar-header-text: var(--calendar-header-text);
+$calendar-header-fontSize: var(--calendar-header-fontSize);
+$calendar-header-fontWeight: var(--calendar-header-fontWeight);
+$calendar-nav-size: var(--calendar-nav-size);
+$calendar-nav-radius: var(--calendar-nav-radius);
+$calendar-nav-background-default: var(--calendar-nav-background-default);
+$calendar-nav-background-hover: var(--calendar-nav-background-hover); // Nav (prev/next/title) hover bg — semantic so it adapts in dark
+$calendar-nav-color-default: var(--calendar-nav-color-default);
+$calendar-nav-color-hover: var(--calendar-nav-color-hover);
+$calendar-weekday-padding: var(--calendar-weekday-padding);
+$calendar-weekday-text: var(--calendar-weekday-text);
+$calendar-weekday-fontSize: var(--calendar-weekday-fontSize);
+$calendar-weekday-fontWeight: var(--calendar-weekday-fontWeight);
+$calendar-day-size: var(--calendar-day-size);
+$calendar-day-radius: var(--calendar-day-radius);
+$calendar-day-fontSize: var(--calendar-day-fontSize);
+$calendar-day-text-default: var(--calendar-day-text-default);
+$calendar-day-text-muted: var(--calendar-day-text-muted);
+$calendar-day-text-selected: var(--calendar-day-text-selected);
+$calendar-day-text-today: var(--calendar-day-text-today);
+$calendar-day-background-default: var(--calendar-day-background-default);
+$calendar-day-background-hover: var(--calendar-day-background-hover); // Day hover bg (semantic, adapts to theme so text stays readable)
+$calendar-day-background-selected: var(--calendar-day-background-selected);
+$calendar-day-background-today: var(--calendar-day-background-today);
+$calendar-day-background-range: var(--calendar-day-background-range);
+$calendar-input-height-sm: var(--calendar-input-height-sm);
+$calendar-input-height-md: var(--calendar-input-height-md);
+$calendar-input-height-lg: var(--calendar-input-height-lg);
+$calendar-input-padding-x: var(--calendar-input-padding-x);
+$calendar-input-fontSize-sm: var(--calendar-input-fontSize-sm);
+$calendar-input-fontSize-md: var(--calendar-input-fontSize-md);
+$calendar-input-fontSize-lg: var(--calendar-input-fontSize-lg);
+$calendar-input-radius: var(--calendar-input-radius);
+$calendar-input-border-color-default: var(--calendar-input-border-color-default);
+$calendar-input-border-color-hover: var(--calendar-input-border-color-hover);
+$calendar-input-border-color-focus: var(--calendar-input-border-color-focus);
+$calendar-input-border-color-disabled: var(--calendar-input-border-color-disabled);
+$calendar-input-border-color-error: var(--calendar-input-border-color-error);
+$calendar-input-background-default: var(--calendar-input-background-default);
+$calendar-input-background-disabled: var(--calendar-input-background-disabled);
+$calendar-input-text-default: var(--calendar-input-text-default);
+$calendar-input-text-placeholder: var(--calendar-input-text-placeholder);
+$calendar-input-text-disabled: var(--calendar-input-text-disabled);
+$calendar-focus-ringWidth: var(--calendar-focus-ringWidth);
+$calendar-focus-ringColor: var(--calendar-focus-ringColor);
+$calendar-focus-ringOffset: var(--calendar-focus-ringOffset);
+
+// Card
+$card-background: var(--card-background); // Card background color
+$card-border-color: var(--card-border-color); // Card border color
+$card-border-width: var(--card-border-width); // Card border width
+$card-highlighted-border-start: var(--card-highlighted-border-start); // Highlighted card border - vibrant orange
+$card-highlighted-border-end: var(--card-highlighted-border-end); // Highlighted card border end - bright orange
+$card-highlighted-border-width: var(--card-highlighted-border-width); // Highlighted card border width
+$card-highlighted-glow: var(--card-highlighted-glow); // Highlighted card glow effect - vibrant orange
+$card-radius: var(--card-radius); // Card border radius
+$card-shadow: var(--card-shadow); // Card shadow
+$card-padding: var(--card-padding); // Card inner padding
+$card-header-padding: var(--card-header-padding); // Header section padding
+$card-header-borderColor: var(--card-header-borderColor); // Header bottom border color
+$card-header-borderWidth: var(--card-header-borderWidth); // Header bottom border width
+$card-body-padding: var(--card-body-padding); // Body section padding
+$card-body-gap: var(--card-body-gap); // Gap between caption and content
+$card-title-color: var(--card-title-color); // Title text color
+$card-title-fontSize: var(--card-title-fontSize); // Title font size
+$card-title-fontWeight: var(--card-title-fontWeight); // Title font weight
+$card-title-lineHeight: var(--card-title-lineHeight); // Title line height
+$card-subtitle-color: var(--card-subtitle-color); // Subtitle text color
+$card-subtitle-fontSize: var(--card-subtitle-fontSize); // Subtitle font size
+$card-subtitle-fontWeight: var(--card-subtitle-fontWeight); // Subtitle font weight
+$card-subtitle-marginTop: var(--card-subtitle-marginTop); // Space between title and subtitle
+$card-content-color: var(--card-content-color); // Content text color
+$card-footer-padding: var(--card-footer-padding); // Footer section padding
+$card-footer-borderColor: var(--card-footer-borderColor); // Footer top border color
+$card-footer-borderWidth: var(--card-footer-borderWidth); // Footer top border width
+
+// Carousel
+$carousel-container-background: var(--carousel-container-background); // Carousel container background
+$carousel-container-radius: var(--carousel-container-radius); // Carousel container border radius
+$carousel-content-gap: var(--carousel-content-gap); // Gap between carousel items
+$carousel-content-padding: var(--carousel-content-padding); // Content area padding
+$carousel-item-background: var(--carousel-item-background); // Carousel item background
+$carousel-item-radius: var(--carousel-item-radius); // Carousel item border radius
+$carousel-item-padding: var(--carousel-item-padding); // Carousel item padding
+$carousel-navigator-size: var(--carousel-navigator-size); // Navigator button size
+$carousel-navigator-iconSize: var(--carousel-navigator-iconSize); // Navigator icon size
+$carousel-navigator-background-default: var(--carousel-navigator-background-default); // Navigator button background
+$carousel-navigator-background-hover: var(--carousel-navigator-background-hover); // Navigator button hover background
+$carousel-navigator-background-disabled: var(--carousel-navigator-background-disabled); // Navigator button disabled background
+$carousel-navigator-color-default: var(--carousel-navigator-color-default); // Navigator icon color
+$carousel-navigator-color-hover: var(--carousel-navigator-color-hover); // Navigator icon hover color
+$carousel-navigator-color-disabled: var(--carousel-navigator-color-disabled); // Navigator icon disabled color
+$carousel-navigator-border-color: var(--carousel-navigator-border-color); // Navigator button border color
+$carousel-navigator-border-width: var(--carousel-navigator-border-width); // Navigator button border width
+$carousel-navigator-radius: var(--carousel-navigator-radius); // Navigator button border radius
+$carousel-navigator-shadow: var(--carousel-navigator-shadow); // Navigator button shadow
+$carousel-indicator-size: var(--carousel-indicator-size); // Indicator dot size
+$carousel-indicator-gap: var(--carousel-indicator-gap); // Gap between indicators
+$carousel-indicator-marginTop: var(--carousel-indicator-marginTop); // Space above indicators
+$carousel-indicator-background-default: var(--carousel-indicator-background-default); // Indicator background
+$carousel-indicator-background-active: var(--carousel-indicator-background-active); // Active indicator background
+$carousel-indicator-background-hover: var(--carousel-indicator-background-hover); // Indicator hover background
+$carousel-transition-duration: var(--carousel-transition-duration); // Slide transition duration
+
+// Chart
+$chart-container-background: var(--chart-container-background); // Chart container matches canvas — frame from border, not from a subtle tint that would fail WCAG 1.4.11
+$chart-container-padding: var(--chart-container-padding); // Chart container padding
+$chart-container-radius: var(--chart-container-radius); // Chart container border radius
+$chart-container-border-color: var(--chart-container-border-color); // Chart container border color
+$chart-container-border-width: var(--chart-container-border-width); // Chart container border width
+$chart-title-color: var(--chart-title-color); // Chart title color
+$chart-title-size: var(--chart-title-size); // Chart title font size
+$chart-title-weight: var(--chart-title-weight); // Chart title font weight
+$chart-title-marginBottom: var(--chart-title-marginBottom); // Space below chart title
+$chart-canvas-minHeight: var(--chart-canvas-minHeight); // Minimum chart canvas height
+$chart-legend-gap: var(--chart-legend-gap); // Gap between legend items
+$chart-legend-item-gap: var(--chart-legend-item-gap); // Gap between legend marker and text
+$chart-legend-item-color: var(--chart-legend-item-color); // Legend text color
+$chart-legend-item-size: var(--chart-legend-item-size); // Legend text font size
+$chart-legend-marker-size: var(--chart-legend-marker-size); // Legend marker size
+$chart-legend-marker-radius: var(--chart-legend-marker-radius); // Legend marker border radius
+$chart-loading-background: var(--chart-loading-background); // Loading overlay background
+$chart-loading-spinnerColor: var(--chart-loading-spinnerColor); // Loading spinner color
+$chart-loading-spinnerSize: var(--chart-loading-spinnerSize); // Loading spinner size
+$chart-empty-textColor: var(--chart-empty-textColor); // Empty state text color
+$chart-empty-iconColor: var(--chart-empty-iconColor); // Empty state icon color
+$chart-empty-iconSize: var(--chart-empty-iconSize); // Empty state icon size
+
+// Checkbox
+$checkbox-size-sm: var(--checkbox-size-sm); // Small checkbox
+$checkbox-size-md: var(--checkbox-size-md); // Medium checkbox (default)
+$checkbox-size-lg: var(--checkbox-size-lg); // Large checkbox
+$checkbox-iconSize-sm: var(--checkbox-iconSize-sm);
+$checkbox-iconSize-md: var(--checkbox-iconSize-md);
+$checkbox-iconSize-lg: var(--checkbox-iconSize-lg);
+$checkbox-radius: var(--checkbox-radius); // Checkbox border radius
+$checkbox-border-width: var(--checkbox-border-width);
+$checkbox-border-color-default: var(--checkbox-border-color-default); // Default unchecked border
+$checkbox-border-color-hover: var(--checkbox-border-color-hover);
+$checkbox-border-color-checked: var(--checkbox-border-color-checked); // Accent color when checked
+$checkbox-border-color-checkedHover: var(--checkbox-border-color-checkedHover); // Checked + hover — keeps filled look so checkmark stays visible (WCAG 1.4.11)
+$checkbox-border-color-focus: var(--checkbox-border-color-focus);
+$checkbox-border-color-disabled: var(--checkbox-border-color-disabled);
+$checkbox-border-color-error: var(--checkbox-border-color-error);
+$checkbox-background-default: var(--checkbox-background-default); // Transparent to inherit page background
+$checkbox-background-checked: var(--checkbox-background-checked); // Brand accent when checked
+$checkbox-background-checkedHover: var(--checkbox-background-checkedHover); // Checked + hover — keeps filled look so the white checkmark remains legible
+$checkbox-background-disabled: var(--checkbox-background-disabled);
+$checkbox-background-hover: var(--checkbox-background-hover);
+$checkbox-checkmark-color: var(--checkbox-checkmark-color);
+$checkbox-label-gap: var(--checkbox-label-gap);
+$checkbox-label-color-default: var(--checkbox-label-color-default);
+$checkbox-label-color-disabled: var(--checkbox-label-color-disabled);
+$checkbox-focus-ringWidth: var(--checkbox-focus-ringWidth);
+$checkbox-focus-ringColor: var(--checkbox-focus-ringColor);
+$checkbox-focus-ringOffset: var(--checkbox-focus-ringOffset);
+
+// Chip
+$chip-padding-x: var(--chip-padding-x); // Horizontal padding
+$chip-padding-y: var(--chip-padding-y); // Vertical padding
+$chip-gap: var(--chip-gap); // Gap between chip elements
+$chip-radius: var(--chip-radius); // Border radius (pill shape)
+$chip-background-default: var(--chip-background-default); // Default chip background — nu.nl navy. ~14.9:1 vs white canvas (WCAG 1.4.11 ≥3:1). The previous surface.muted tint was 1.13:1 — boundary invisible.
+$chip-background-hover: var(--chip-background-hover); // Hover background — lifted navy
+$chip-text-color: var(--chip-text-color); // Chip text — white on navy fill, ~14.9:1 (WCAG 1.4.3 ≥4.5:1)
+$chip-text-fontSize: var(--chip-text-fontSize); // Chip text size
+$chip-icon-size: var(--chip-icon-size); // Icon size
+$chip-icon-color: var(--chip-icon-color); // Icon color — white to match label on navy chip
+$chip-image-size: var(--chip-image-size); // Avatar/image size
+$chip-remove-size: var(--chip-remove-size); // Remove button size
+$chip-remove-color-default: var(--chip-remove-color-default); // Remove icon — white on navy chip
+$chip-remove-color-hover: var(--chip-remove-color-hover); // Remove icon hover — stays white; hover affordance is the button-bg change below
+$chip-remove-background-hover: var(--chip-remove-background-hover); // Remove button hover background — lifted navy
+$chip-remove-radius: var(--chip-remove-radius); // Remove button border radius
+
+// Color-picker
+$color-picker-width: var(--color-picker-width);
+$color-picker-padding: var(--color-picker-padding);
+$color-picker-gap: var(--color-picker-gap);
+$color-picker-radius: var(--color-picker-radius);
+$color-picker-background: var(--color-picker-background);
+$color-picker-border-width: var(--color-picker-border-width);
+$color-picker-border-color: var(--color-picker-border-color);
+$color-picker-shadow: var(--color-picker-shadow);
+$color-picker-trigger-size-sm: var(--color-picker-trigger-size-sm);
+$color-picker-trigger-size-md: var(--color-picker-trigger-size-md);
+$color-picker-trigger-size-lg: var(--color-picker-trigger-size-lg);
+$color-picker-trigger-radius: var(--color-picker-trigger-radius);
+$color-picker-trigger-border-width: var(--color-picker-trigger-border-width);
+$color-picker-trigger-border-color-default: var(--color-picker-trigger-border-color-default);
+$color-picker-trigger-border-color-hover: var(--color-picker-trigger-border-color-hover);
+$color-picker-trigger-border-color-focus: var(--color-picker-trigger-border-color-focus);
+$color-picker-gradient-height: var(--color-picker-gradient-height);
+$color-picker-gradient-radius: var(--color-picker-gradient-radius);
+$color-picker-hue-height: var(--color-picker-hue-height);
+$color-picker-hue-radius: var(--color-picker-hue-radius);
+$color-picker-slider-size: var(--color-picker-slider-size);
+$color-picker-slider-border-width: var(--color-picker-slider-border-width);
+$color-picker-slider-border-color: var(--color-picker-slider-border-color);
+$color-picker-slider-shadow: var(--color-picker-slider-shadow);
+$color-picker-input-height: var(--color-picker-input-height);
+$color-picker-input-padding-x: var(--color-picker-input-padding-x);
+$color-picker-input-radius: var(--color-picker-input-radius);
+$color-picker-input-fontSize: var(--color-picker-input-fontSize);
+$color-picker-input-background: var(--color-picker-input-background);
+$color-picker-input-border-color: var(--color-picker-input-border-color);
+$color-picker-input-text: var(--color-picker-input-text);
+$color-picker-preset-size: var(--color-picker-preset-size);
+$color-picker-preset-gap: var(--color-picker-preset-gap);
+$color-picker-preset-radius: var(--color-picker-preset-radius);
+$color-picker-preset-border-width: var(--color-picker-preset-border-width);
+$color-picker-preset-border-color-default: var(--color-picker-preset-border-color-default);
+$color-picker-preset-border-color-selected: var(--color-picker-preset-border-color-selected);
+$color-picker-focus-ringWidth: var(--color-picker-focus-ringWidth);
+$color-picker-focus-ringColor: var(--color-picker-focus-ringColor);
+$color-picker-focus-ringOffset: var(--color-picker-focus-ringOffset);
+
+// Column
+$column-header-background: var(--column-header-background); // Column header background color
+$column-header-color: var(--column-header-color); // Column header text color
+$column-header-padding: var(--column-header-padding); // Column header padding
+$column-header-fontWeight: var(--column-header-fontWeight); // Column header font weight
+$column-header-fontSize: var(--column-header-fontSize); // Column header font size
+$column-header-borderColor: var(--column-header-borderColor); // Column header border color
+$column-body-background: var(--column-body-background); // Column body background color
+$column-body-color: var(--column-body-color); // Column body text color
+$column-body-padding: var(--column-body-padding); // Column body padding
+$column-body-fontSize: var(--column-body-fontSize); // Column body font size
+$column-body-borderColor: var(--column-body-borderColor); // Column body border color
+$column-footer-background: var(--column-footer-background); // Column footer background color
+$column-footer-color: var(--column-footer-color); // Column footer text color
+$column-footer-padding: var(--column-footer-padding); // Column footer padding
+$column-footer-fontWeight: var(--column-footer-fontWeight); // Column footer font weight
+$column-footer-borderColor: var(--column-footer-borderColor); // Column footer border color
+$column-sortIcon-color-default: var(--column-sortIcon-color-default); // Sort icon default color
+$column-sortIcon-color-active: var(--column-sortIcon-color-active); // Sort icon active color
+$column-sortIcon-size: var(--column-sortIcon-size); // Sort icon size
+
+// Column-group
+$column-group-header-background: var(--column-group-header-background); // Column group header background
+$column-group-header-borderColor: var(--column-group-header-borderColor); // Column group header border color
+$column-group-header-borderWidth: var(--column-group-header-borderWidth); // Column group header border width
+$column-group-footer-background: var(--column-group-footer-background); // Column group footer background
+$column-group-footer-borderColor: var(--column-group-footer-borderColor); // Column group footer border color
+$column-group-footer-borderWidth: var(--column-group-footer-borderWidth); // Column group footer border width
+$column-group-row-borderColor: var(--column-group-row-borderColor); // Row border color within group
+
+// ConfirmDialog
+$confirmDialog-padding-header: var(--confirmDialog-padding-header); // Header section padding
+$confirmDialog-padding-content: var(--confirmDialog-padding-content); // Content area padding
+$confirmDialog-padding-footer: var(--confirmDialog-padding-footer); // Footer section padding
+$confirmDialog-background-default: var(--confirmDialog-background-default); // Dialog background color
+$confirmDialog-radius: var(--confirmDialog-radius); // Dialog border radius
+$confirmDialog-shadow: var(--confirmDialog-shadow); // Dialog elevation shadow
+$confirmDialog-border-color: var(--confirmDialog-border-color); // Dialog border color
+$confirmDialog-border-width: var(--confirmDialog-border-width); // Dialog border width
+$confirmDialog-header-background: var(--confirmDialog-header-background); // Header background
+$confirmDialog-header-borderColor: var(--confirmDialog-header-borderColor); // Header bottom border color
+$confirmDialog-header-title-color: var(--confirmDialog-header-title-color); // Header title text color
+$confirmDialog-icon-size: var(--confirmDialog-icon-size); // Icon size
+$confirmDialog-icon-color-warning: var(--confirmDialog-icon-color-warning); // Warning icon color
+$confirmDialog-icon-color-danger: var(--confirmDialog-icon-color-danger); // Danger icon color
+$confirmDialog-icon-color-info: var(--confirmDialog-icon-color-info); // Info icon color
+$confirmDialog-message-color: var(--confirmDialog-message-color); // Message text color
+$confirmDialog-message-fontSize: var(--confirmDialog-message-fontSize); // Message font size
+$confirmDialog-overlay-background: var(--confirmDialog-overlay-background); // Modal overlay backdrop color
+$confirmDialog-width: var(--confirmDialog-width); // Dialog width
+$confirmDialog-zIndex-overlay: var(--confirmDialog-zIndex-overlay); // Overlay z-index
+$confirmDialog-zIndex-dialog: var(--confirmDialog-zIndex-dialog); // Dialog z-index
+$confirmDialog-gap-content: var(--confirmDialog-gap-content); // Gap between icon and message
+$confirmDialog-gap-buttons: var(--confirmDialog-gap-buttons); // Gap between footer buttons
+
+// ConfirmPopup
+$confirmPopup-padding-x: var(--confirmPopup-padding-x); // Horizontal padding
+$confirmPopup-padding-y: var(--confirmPopup-padding-y); // Vertical padding
+$confirmPopup-background: var(--confirmPopup-background); // Popup background color
+$confirmPopup-radius: var(--confirmPopup-radius); // Popup border radius
+$confirmPopup-shadow: var(--confirmPopup-shadow); // Popup elevation shadow
+$confirmPopup-border-color: var(--confirmPopup-border-color); // Popup border color
+$confirmPopup-border-width: var(--confirmPopup-border-width); // Popup border width
+$confirmPopup-message-color: var(--confirmPopup-message-color); // Message text color
+$confirmPopup-message-fontSize: var(--confirmPopup-message-fontSize); // Message font size
+$confirmPopup-icon-size: var(--confirmPopup-icon-size); // Icon size
+$confirmPopup-icon-color: var(--confirmPopup-icon-color); // Icon color
+$confirmPopup-arrow-size: var(--confirmPopup-arrow-size); // Arrow/pointer size
+$confirmPopup-offset: var(--confirmPopup-offset); // Distance from target element
+$confirmPopup-maxWidth: var(--confirmPopup-maxWidth); // Maximum width
+$confirmPopup-zIndex: var(--confirmPopup-zIndex); // Z-index for stacking
+$confirmPopup-gap-content: var(--confirmPopup-gap-content); // Gap between icon/message and buttons
+$confirmPopup-gap-buttons: var(--confirmPopup-gap-buttons); // Gap between buttons
+
+// Context-menu
+$context-menu-background: var(--context-menu-background); // Context menu background
+$context-menu-border-color: var(--context-menu-border-color); // Context menu border color
+$context-menu-border-width: var(--context-menu-border-width); // Context menu border width
+$context-menu-radius: var(--context-menu-radius); // Context menu border radius
+$context-menu-shadow: var(--context-menu-shadow); // Context menu elevation shadow
+$context-menu-padding-y: var(--context-menu-padding-y); // Vertical padding
+$context-menu-minWidth: var(--context-menu-minWidth); // Minimum menu width
+$context-menu-maxWidth: var(--context-menu-maxWidth); // Maximum menu width
+$context-menu-zIndex: var(--context-menu-zIndex); // Z-index for stacking
+$context-menu-item-padding-x: var(--context-menu-item-padding-x); // Item horizontal padding
+$context-menu-item-padding-y: var(--context-menu-item-padding-y); // Item vertical padding
+$context-menu-item-text-color-default: var(--context-menu-item-text-color-default); // Item text color
+$context-menu-item-text-color-hover: var(--context-menu-item-text-color-hover); // Item hover text color
+$context-menu-item-text-color-disabled: var(--context-menu-item-text-color-disabled); // Disabled item text color
+$context-menu-item-text-fontSize: var(--context-menu-item-text-fontSize); // Item font size
+$context-menu-item-background-default: var(--context-menu-item-background-default); // Item background
+$context-menu-item-background-hover: var(--context-menu-item-background-hover); // Item hover background
+$context-menu-item-background-active: var(--context-menu-item-background-active); // Active item background
+$context-menu-item-icon-size: var(--context-menu-item-icon-size); // Item icon size
+$context-menu-item-icon-color: var(--context-menu-item-icon-color); // Item icon color
+$context-menu-item-icon-gap: var(--context-menu-item-icon-gap); // Space between icon and label
+$context-menu-item-shortcut-color: var(--context-menu-item-shortcut-color); // Keyboard shortcut color
+$context-menu-item-shortcut-fontSize: var(--context-menu-item-shortcut-fontSize); // Shortcut font size
+$context-menu-separator-color: var(--context-menu-separator-color); // Separator line color
+$context-menu-separator-margin: var(--context-menu-separator-margin); // Separator vertical margin
+$context-menu-submenu-arrow-size: var(--context-menu-submenu-arrow-size); // Submenu arrow size
+$context-menu-submenu-arrow-color: var(--context-menu-submenu-arrow-color); // Submenu arrow color
+$context-menu-submenu-offset: var(--context-menu-submenu-offset); // Submenu position offset
+
+// CorporateFooter
+$corporateFooter-background: var(--corporateFooter-background); // Footer background (matches page; separated by the bottom-bar rule)
+$corporateFooter-text: var(--corporateFooter-text); // Footer text
+$corporateFooter-textMuted: var(--corporateFooter-textMuted); // Muted footer text (tagline, copyright)
+$corporateFooter-heading: var(--corporateFooter-heading); // Column titles / brand
+$corporateFooter-border: var(--corporateFooter-border); // Divider above the bottom bar
+$corporateFooter-focusRing: var(--corporateFooter-focusRing); // Focus outline colour
+$corporateFooter-maxWidth: var(--corporateFooter-maxWidth); // Inner content max width
+$corporateFooter-paddingX: var(--corporateFooter-paddingX); // Horizontal inset
+$corporateFooter-paddingY: var(--corporateFooter-paddingY); // Vertical padding of the top region
+$corporateFooter-gap: var(--corporateFooter-gap); // Gap between footer columns
+$corporateFooter-stack: var(--corporateFooter-stack); // Vertical rhythm within a column
+$corporateFooter-inline: var(--corporateFooter-inline); // Inline gap (social, legal)
+$corporateFooter-link-text: var(--corporateFooter-link-text); // Footer link colour
+$corporateFooter-link-hover: var(--corporateFooter-link-hover); // Footer link hover colour
+$corporateFooter-input-background: var(--corporateFooter-input-background); // Newsletter input background
+$corporateFooter-input-text: var(--corporateFooter-input-text); // Newsletter input text
+$corporateFooter-input-border: var(--corporateFooter-input-border); // Newsletter input border
+$corporateFooter-input-radius: var(--corporateFooter-input-radius); // Newsletter input radius
+$corporateFooter-input-paddingX: var(--corporateFooter-input-paddingX); // Input horizontal padding
+$corporateFooter-input-paddingY: var(--corporateFooter-input-paddingY); // Input vertical padding
+$corporateFooter-cta-background: var(--corporateFooter-cta-background); // Subscribe button background
+$corporateFooter-cta-hover: var(--corporateFooter-cta-hover); // Subscribe button hover
+$corporateFooter-cta-text: var(--corporateFooter-cta-text); // Subscribe button label
+$corporateFooter-cta-radius: var(--corporateFooter-cta-radius); // Subscribe button radius
+$corporateFooter-cta-paddingX: var(--corporateFooter-cta-paddingX); // Subscribe button horizontal padding
+$corporateFooter-cta-paddingY: var(--corporateFooter-cta-paddingY); // Subscribe button vertical padding
+$corporateFooter-bottom-height: var(--corporateFooter-bottom-height); // Bottom bar min-height
+
+// CorporateHeader
+$corporateHeader-background: var(--corporateHeader-background); // Main header background
+$corporateHeader-text: var(--corporateHeader-text); // Header foreground text
+$corporateHeader-border: var(--corporateHeader-border); // Hairline under the header
+$corporateHeader-shadow: var(--corporateHeader-shadow); // Header elevation shadow
+$corporateHeader-height: var(--corporateHeader-height); // Main bar min-height
+$corporateHeader-maxWidth: var(--corporateHeader-maxWidth); // Inner content max width
+$corporateHeader-paddingX: var(--corporateHeader-paddingX); // Horizontal inset
+$corporateHeader-gap: var(--corporateHeader-gap); // Gap between header items
+$corporateHeader-focusRing: var(--corporateHeader-focusRing); // Focus outline colour
+$corporateHeader-link-text: var(--corporateHeader-link-text); // Primary nav link colour
+$corporateHeader-link-hover: var(--corporateHeader-link-hover); // Primary nav link hover colour
+$corporateHeader-link-radius: var(--corporateHeader-link-radius); // Nav link radius
+$corporateHeader-link-paddingX: var(--corporateHeader-link-paddingX); // Nav link horizontal padding
+$corporateHeader-link-paddingY: var(--corporateHeader-link-paddingY); // Nav link vertical padding
+$corporateHeader-cta-background: var(--corporateHeader-cta-background); // CTA background
+$corporateHeader-cta-hover: var(--corporateHeader-cta-hover); // CTA hover background
+$corporateHeader-cta-text: var(--corporateHeader-cta-text); // CTA label colour
+$corporateHeader-cta-radius: var(--corporateHeader-cta-radius); // CTA radius
+$corporateHeader-cta-paddingX: var(--corporateHeader-cta-paddingX); // CTA horizontal padding
+$corporateHeader-cta-paddingY: var(--corporateHeader-cta-paddingY); // CTA vertical padding
+$corporateHeader-utility-background: var(--corporateHeader-utility-background); // Utility bar background
+$corporateHeader-utility-text: var(--corporateHeader-utility-text); // Utility bar text
+$corporateHeader-utility-height: var(--corporateHeader-utility-height); // Utility bar min-height
+
+// DataTable
+$dataTable-background: var(--dataTable-background); // Table background — matches canvas so the wrapper isn't a separate subtle surface (was surface.panel, 1.09:1 vs canvas). Visual frame comes from border + header fill.
+$dataTable-border-color: var(--dataTable-border-color); // Table border color
+$dataTable-border-width: var(--dataTable-border-width); // Table border width
+$dataTable-radius: var(--dataTable-radius); // Table border radius
+$dataTable-header-background: var(--dataTable-header-background); // Header bg — navy, ~14:1 vs canvas (was surface.muted, 1.13:1 — invisible header chrome)
+$dataTable-header-color: var(--dataTable-header-color); // Header text — white on navy
+$dataTable-header-padding: var(--dataTable-header-padding); // Header cell padding
+$dataTable-header-fontSize: var(--dataTable-header-fontSize); // Header font size
+$dataTable-header-fontWeight: var(--dataTable-header-fontWeight); // Header font weight
+$dataTable-header-borderColor: var(--dataTable-header-borderColor); // Header border color
+$dataTable-body-background-default: var(--dataTable-body-background-default); // Row bg matches canvas — rows read as content on the page, header chrome carries the visual frame. WCAG 1.4.11 skipped because no surface change vs canvas.
+$dataTable-body-background-hover: var(--dataTable-body-background-hover); // Row hover bg — subtle tint as transient affordance (not part of the static identification surface)
+$dataTable-body-background-striped: var(--dataTable-body-background-striped); // Striped alternate row — by-design subtle (~1.04:1 vs canvas). The striped variant doesn't pass strict 1.4.11; consumers who need a11y-strict tables should opt-out of striped mode.
+$dataTable-body-color: var(--dataTable-body-color); // Body text color
+$dataTable-body-padding: var(--dataTable-body-padding); // Body cell padding
+$dataTable-body-fontSize: var(--dataTable-body-fontSize); // Body font size
+$dataTable-body-borderColor: var(--dataTable-body-borderColor); // Row border color
+$dataTable-sortIcon-size: var(--dataTable-sortIcon-size); // Sort icon size
+$dataTable-sortIcon-color-default: var(--dataTable-sortIcon-color-default); // Sort icon default color
+$dataTable-sortIcon-color-active: var(--dataTable-sortIcon-color-active); // Sort icon active color
+$dataTable-pagination-padding: var(--dataTable-pagination-padding); // Pagination area padding
+$dataTable-pagination-gap: var(--dataTable-pagination-gap); // Gap between pagination elements
+$dataTable-pagination-background: var(--dataTable-pagination-background); // Pagination background
+$dataTable-pagination-borderColor: var(--dataTable-pagination-borderColor); // Pagination border color
+$dataTable-empty-padding: var(--dataTable-empty-padding); // Empty state padding
+$dataTable-empty-color: var(--dataTable-empty-color); // Empty state text color
+$dataTable-transition-duration: var(--dataTable-transition-duration); // Animation duration
+
+// DataView
+$dataView-background: var(--dataView-background); // DataView container background
+$dataView-border-color: var(--dataView-border-color); // Container border color
+$dataView-border-width: var(--dataView-border-width); // Container border width
+$dataView-radius: var(--dataView-radius); // Container border radius
+$dataView-header-background: var(--dataView-header-background); // Header background color
+$dataView-header-padding: var(--dataView-header-padding); // Header padding
+$dataView-header-borderColor: var(--dataView-header-borderColor); // Header border color
+$dataView-content-padding: var(--dataView-content-padding); // Content area padding
+$dataView-grid-gap: var(--dataView-grid-gap); // Gap between grid items
+$dataView-list-gap: var(--dataView-list-gap); // Gap between list items
+$dataView-list-item-padding: var(--dataView-list-item-padding); // List item padding
+$dataView-list-item-background-default: var(--dataView-list-item-background-default); // List item background
+$dataView-list-item-background-hover: var(--dataView-list-item-background-hover); // List item hover background
+$dataView-list-item-borderColor: var(--dataView-list-item-borderColor); // List item border color
+$dataView-list-item-radius: var(--dataView-list-item-radius); // List item border radius
+$dataView-layoutSwitcher-gap: var(--dataView-layoutSwitcher-gap); // Gap between layout buttons
+$dataView-layoutSwitcher-button-size: var(--dataView-layoutSwitcher-button-size); // Layout button size
+$dataView-layoutSwitcher-button-background-default: var(--dataView-layoutSwitcher-button-background-default); // Button default background
+$dataView-layoutSwitcher-button-background-active: var(--dataView-layoutSwitcher-button-background-active); // Button active background
+$dataView-layoutSwitcher-button-background-hover: var(--dataView-layoutSwitcher-button-background-hover); // Button hover background
+$dataView-layoutSwitcher-button-color-default: var(--dataView-layoutSwitcher-button-color-default); // Button icon default color
+$dataView-layoutSwitcher-button-color-active: var(--dataView-layoutSwitcher-button-color-active); // Button icon active color
+$dataView-layoutSwitcher-button-radius: var(--dataView-layoutSwitcher-button-radius); // Button border radius
+$dataView-pagination-padding: var(--dataView-pagination-padding); // Pagination padding
+$dataView-pagination-borderColor: var(--dataView-pagination-borderColor); // Pagination border color
+$dataView-empty-padding: var(--dataView-empty-padding); // Empty state padding
+$dataView-empty-color: var(--dataView-empty-color); // Empty state text color
+$dataView-transition-duration: var(--dataView-transition-duration); // Animation duration
+
+// Dialog
+$dialog-padding-header: var(--dialog-padding-header); // Header section padding
+$dialog-padding-content: var(--dialog-padding-content); // Content area padding
+$dialog-padding-footer: var(--dialog-padding-footer); // Footer section padding
+$dialog-background-default: var(--dialog-background-default); // Dialog background color
+$dialog-radius: var(--dialog-radius); // Dialog border radius
+$dialog-shadow: var(--dialog-shadow); // Dialog elevation shadow
+$dialog-border-color: var(--dialog-border-color); // Dialog border color
+$dialog-border-width: var(--dialog-border-width); // Dialog border width
+$dialog-header-background: var(--dialog-header-background); // Header background
+$dialog-header-borderColor: var(--dialog-header-borderColor); // Header bottom border color
+$dialog-header-title-color: var(--dialog-header-title-color); // Header title text color
+$dialog-closeButton-size: var(--dialog-closeButton-size); // Close button size
+$dialog-closeButton-iconSize: var(--dialog-closeButton-iconSize); // Close icon size
+$dialog-closeButton-color-default: var(--dialog-closeButton-color-default); // Close button icon color
+$dialog-closeButton-color-hover: var(--dialog-closeButton-color-hover); // Close button hover color
+$dialog-closeButton-background-hover: var(--dialog-closeButton-background-hover); // Close button hover background
+$dialog-closeButton-radius: var(--dialog-closeButton-radius); // Close button border radius
+$dialog-overlay-background: var(--dialog-overlay-background); // Modal overlay backdrop color
+$dialog-width-sm: var(--dialog-width-sm); // Small dialog width
+$dialog-width-md: var(--dialog-width-md); // Medium dialog width (default)
+$dialog-width-lg: var(--dialog-width-lg); // Large dialog width
+$dialog-width-xl: var(--dialog-width-xl); // Extra large dialog width
+$dialog-maxHeight: var(--dialog-maxHeight); // Maximum dialog height
+$dialog-zIndex-overlay: var(--dialog-zIndex-overlay); // Overlay z-index
+$dialog-zIndex-dialog: var(--dialog-zIndex-dialog); // Dialog z-index
+
+// Divider
+$divider-border-color: var(--divider-border-color); // Default divider border color
+$divider-border-width: var(--divider-border-width); // Default divider border width
+$divider-margin-horizontal: var(--divider-margin-horizontal); // Vertical margin for horizontal dividers
+$divider-margin-vertical: var(--divider-margin-vertical); // Horizontal margin for vertical dividers
+$divider-content-gap: var(--divider-content-gap); // Gap between divider line and content
+$divider-content-color: var(--divider-content-color); // Color of content text within divider
+$divider-content-background: var(--divider-content-background); // Background behind content to cover the line
+
+// Dock
+$dock-background: var(--dock-background); // Dock background
+$dock-border-color: var(--dock-border-color); // Dock border color
+$dock-border-width: var(--dock-border-width); // Dock border width
+$dock-radius: var(--dock-radius); // Dock border radius
+$dock-shadow: var(--dock-shadow); // Dock elevation shadow
+$dock-padding: var(--dock-padding); // Dock inner padding
+$dock-gap: var(--dock-gap); // Gap between dock items
+$dock-zIndex: var(--dock-zIndex); // Z-index for stacking
+$dock-position-offset: var(--dock-position-offset); // Distance from screen edge
+$dock-item-size-default: var(--dock-item-size-default); // Default item size
+$dock-item-size-magnified: var(--dock-item-size-magnified); // Magnified item size on hover
+$dock-item-radius: var(--dock-item-radius); // Item border radius
+$dock-item-background-default: var(--dock-item-background-default); // Item background
+$dock-item-background-hover: var(--dock-item-background-hover); // Item hover background
+$dock-item-background-active: var(--dock-item-background-active); // Active item background
+$dock-item-icon-size-default: var(--dock-item-icon-size-default); // Default icon size
+$dock-item-icon-size-magnified: var(--dock-item-icon-size-magnified); // Magnified icon size
+$dock-item-icon-color-default: var(--dock-item-icon-color-default); // Icon color
+$dock-item-icon-color-hover: var(--dock-item-icon-color-hover); // Icon hover color
+$dock-tooltip-offset: var(--dock-tooltip-offset); // Tooltip distance from dock
+$dock-tooltip-background: var(--dock-tooltip-background); // Tooltip background
+$dock-tooltip-text-color: var(--dock-tooltip-text-color); // Tooltip text color
+$dock-tooltip-text-fontSize: var(--dock-tooltip-text-fontSize); // Tooltip font size
+$dock-tooltip-padding-x: var(--dock-tooltip-padding-x); // Tooltip horizontal padding
+$dock-tooltip-padding-y: var(--dock-tooltip-padding-y); // Tooltip vertical padding
+$dock-tooltip-radius: var(--dock-tooltip-radius); // Tooltip border radius
+$dock-indicator-size: var(--dock-indicator-size); // Active indicator dot size
+$dock-indicator-color: var(--dock-indicator-color); // Active indicator color
+$dock-indicator-gap: var(--dock-indicator-gap); // Gap between item and indicator
+
+// Drawer
+$drawer-background: var(--drawer-background); // Drawer background color
+$drawer-border-color: var(--drawer-border-color); // Drawer border color
+$drawer-border-width: var(--drawer-border-width); // Drawer border width
+$drawer-shadow: var(--drawer-shadow); // Drawer shadow
+$drawer-header-padding: var(--drawer-header-padding); // Header section padding
+$drawer-header-background: var(--drawer-header-background); // Header background
+$drawer-header-borderColor: var(--drawer-header-borderColor); // Header bottom border color
+$drawer-header-title-color: var(--drawer-header-title-color); // Header title text color
+$drawer-header-title-fontSize: var(--drawer-header-title-fontSize); // Header title font size
+$drawer-header-title-fontWeight: var(--drawer-header-title-fontWeight); // Header title font weight
+$drawer-content-padding: var(--drawer-content-padding); // Content area padding
+$drawer-footer-padding: var(--drawer-footer-padding); // Footer section padding
+$drawer-footer-borderColor: var(--drawer-footer-borderColor); // Footer top border color
+$drawer-closeButton-size: var(--drawer-closeButton-size); // Close button size
+$drawer-closeButton-iconSize: var(--drawer-closeButton-iconSize); // Close icon size
+$drawer-closeButton-color-default: var(--drawer-closeButton-color-default); // Close button icon color
+$drawer-closeButton-color-hover: var(--drawer-closeButton-color-hover); // Close button hover color
+$drawer-closeButton-background-hover: var(--drawer-closeButton-background-hover); // Close button hover background
+$drawer-closeButton-radius: var(--drawer-closeButton-radius); // Close button border radius
+$drawer-overlay-background: var(--drawer-overlay-background); // Overlay backdrop color
+$drawer-size-sm: var(--drawer-size-sm); // Small drawer size
+$drawer-size-md: var(--drawer-size-md); // Medium drawer size (default)
+$drawer-size-lg: var(--drawer-size-lg); // Large drawer size
+$drawer-size-xl: var(--drawer-size-xl); // Extra large drawer size
+$drawer-zIndex-overlay: var(--drawer-zIndex-overlay); // Overlay z-index
+$drawer-zIndex-drawer: var(--drawer-zIndex-drawer); // Drawer z-index
+$drawer-transition-duration: var(--drawer-transition-duration); // Slide animation duration
+
+// Dropdown
+$dropdown-height-sm: var(--dropdown-height-sm);
+$dropdown-height-md: var(--dropdown-height-md);
+$dropdown-height-lg: var(--dropdown-height-lg);
+$dropdown-padding-x: var(--dropdown-padding-x);
+$dropdown-padding-y: var(--dropdown-padding-y);
+$dropdown-fontSize-sm: var(--dropdown-fontSize-sm);
+$dropdown-fontSize-md: var(--dropdown-fontSize-md);
+$dropdown-fontSize-lg: var(--dropdown-fontSize-lg);
+$dropdown-radius: var(--dropdown-radius);
+$dropdown-border-width: var(--dropdown-border-width);
+$dropdown-border-color-default: var(--dropdown-border-color-default);
+$dropdown-border-color-hover: var(--dropdown-border-color-hover);
+$dropdown-border-color-focus: var(--dropdown-border-color-focus);
+$dropdown-border-color-disabled: var(--dropdown-border-color-disabled);
+$dropdown-border-color-error: var(--dropdown-border-color-error);
+$dropdown-background-default: var(--dropdown-background-default);
+$dropdown-background-disabled: var(--dropdown-background-disabled);
+$dropdown-background-hover: var(--dropdown-background-hover);
+$dropdown-text-default: var(--dropdown-text-default);
+$dropdown-text-placeholder: var(--dropdown-text-placeholder);
+$dropdown-text-disabled: var(--dropdown-text-disabled);
+$dropdown-icon-size: var(--dropdown-icon-size);
+$dropdown-icon-color-default: var(--dropdown-icon-color-default);
+$dropdown-icon-color-disabled: var(--dropdown-icon-color-disabled);
+$dropdown-panel-background: var(--dropdown-panel-background);
+$dropdown-panel-border: var(--dropdown-panel-border);
+$dropdown-panel-shadow: var(--dropdown-panel-shadow);
+$dropdown-panel-radius: var(--dropdown-panel-radius);
+$dropdown-panel-maxHeight: var(--dropdown-panel-maxHeight);
+$dropdown-panel-padding: var(--dropdown-panel-padding);
+$dropdown-filter-height: var(--dropdown-filter-height);
+$dropdown-filter-padding-x: var(--dropdown-filter-padding-x);
+$dropdown-filter-background: var(--dropdown-filter-background);
+$dropdown-filter-border: var(--dropdown-filter-border);
+$dropdown-filter-radius: var(--dropdown-filter-radius);
+$dropdown-filter-marginBottom: var(--dropdown-filter-marginBottom);
+$dropdown-option-padding-x: var(--dropdown-option-padding-x);
+$dropdown-option-padding-y: var(--dropdown-option-padding-y);
+$dropdown-option-radius: var(--dropdown-option-radius);
+$dropdown-option-background-default: var(--dropdown-option-background-default);
+$dropdown-option-background-hover: var(--dropdown-option-background-hover);
+$dropdown-option-background-selected: var(--dropdown-option-background-selected);
+$dropdown-option-background-focus: var(--dropdown-option-background-focus);
+$dropdown-option-text-default: var(--dropdown-option-text-default);
+$dropdown-option-text-selected: var(--dropdown-option-text-selected);
+$dropdown-focus-ringWidth: var(--dropdown-focus-ringWidth);
+$dropdown-focus-ringColor: var(--dropdown-focus-ringColor);
+$dropdown-focus-ringOffset: var(--dropdown-focus-ringOffset);
+
+// Editor
+$editor-minHeight: var(--editor-minHeight);
+$editor-radius: var(--editor-radius);
+$editor-border-width: var(--editor-border-width);
+$editor-border-color-default: var(--editor-border-color-default);
+$editor-border-color-hover: var(--editor-border-color-hover);
+$editor-border-color-focus: var(--editor-border-color-focus);
+$editor-border-color-disabled: var(--editor-border-color-disabled);
+$editor-border-color-error: var(--editor-border-color-error);
+$editor-background-default: var(--editor-background-default);
+$editor-background-disabled: var(--editor-background-disabled);
+$editor-toolbar-padding-x: var(--editor-toolbar-padding-x);
+$editor-toolbar-padding-y: var(--editor-toolbar-padding-y);
+$editor-toolbar-gap: var(--editor-toolbar-gap);
+$editor-toolbar-background: var(--editor-toolbar-background);
+$editor-toolbar-border-color: var(--editor-toolbar-border-color);
+$editor-button-size: var(--editor-button-size);
+$editor-button-radius: var(--editor-button-radius);
+$editor-button-background-default: var(--editor-button-background-default);
+$editor-button-background-hover: var(--editor-button-background-hover); // Toolbar button hover bg — semantic so it adapts in dark
+$editor-button-background-active: var(--editor-button-background-active); // Toolbar button active bg — semantic, adapts in dark
+$editor-button-color-default: var(--editor-button-color-default);
+$editor-button-color-active: var(--editor-button-color-active);
+$editor-button-color-disabled: var(--editor-button-color-disabled);
+$editor-separator-width: var(--editor-separator-width);
+$editor-separator-color: var(--editor-separator-color);
+$editor-separator-margin: var(--editor-separator-margin);
+$editor-content-padding: var(--editor-content-padding);
+$editor-content-text-default: var(--editor-content-text-default);
+$editor-content-text-placeholder: var(--editor-content-text-placeholder);
+$editor-content-text-disabled: var(--editor-content-text-disabled);
+$editor-content-fontSize: var(--editor-content-fontSize);
+$editor-content-lineHeight: var(--editor-content-lineHeight);
+$editor-focus-ringWidth: var(--editor-focus-ringWidth);
+$editor-focus-ringColor: var(--editor-focus-ringColor);
+$editor-focus-ringOffset: var(--editor-focus-ringOffset);
+
+// Field-set
+$field-set-padding: var(--field-set-padding); // Content padding
+$field-set-background: var(--field-set-background); // FieldSet background color
+$field-set-border-color: var(--field-set-border-color); // Border color
+$field-set-border-width: var(--field-set-border-width); // Border width
+$field-set-border-radius: var(--field-set-border-radius); // Border radius
+$field-set-legend-padding-x: var(--field-set-legend-padding-x); // Legend horizontal padding
+$field-set-legend-padding-y: var(--field-set-legend-padding-y); // Legend vertical padding
+$field-set-legend-background: var(--field-set-legend-background); // Legend background
+$field-set-legend-color: var(--field-set-legend-color); // Legend text color
+$field-set-legend-fontSize: var(--field-set-legend-fontSize); // Legend font size
+$field-set-legend-fontWeight: var(--field-set-legend-fontWeight); // Legend font weight
+$field-set-legend-border-color: var(--field-set-legend-border-color); // Legend border color
+$field-set-legend-border-width: var(--field-set-legend-border-width); // Legend border width
+$field-set-legend-border-radius: var(--field-set-legend-border-radius); // Legend border radius
+$field-set-toggle-icon-size: var(--field-set-toggle-icon-size); // Toggle icon size
+$field-set-toggle-icon-color-default: var(--field-set-toggle-icon-color-default); // Toggle icon color
+$field-set-toggle-icon-color-hover: var(--field-set-toggle-icon-color-hover); // Toggle icon hover color
+$field-set-toggle-gap: var(--field-set-toggle-gap); // Gap between legend text and toggle icon
+$field-set-transition-duration: var(--field-set-transition-duration); // Collapse/expand transition duration
+
+// FileUpload
+$fileUpload-dropzone-background-default: var(--fileUpload-dropzone-background-default); // Dropzone background color
+$fileUpload-dropzone-background-hover: var(--fileUpload-dropzone-background-hover); // Dropzone hover background
+$fileUpload-dropzone-background-active: var(--fileUpload-dropzone-background-active); // Dropzone active/dragging background
+$fileUpload-dropzone-border-color-default: var(--fileUpload-dropzone-border-color-default); // Dropzone border color
+$fileUpload-dropzone-border-color-hover: var(--fileUpload-dropzone-border-color-hover); // Dropzone hover border color
+$fileUpload-dropzone-border-color-active: var(--fileUpload-dropzone-border-color-active); // Dropzone active border color
+$fileUpload-dropzone-border-width: var(--fileUpload-dropzone-border-width); // Dropzone border width
+$fileUpload-dropzone-border-style: var(--fileUpload-dropzone-border-style); // Dropzone border style
+$fileUpload-dropzone-radius: var(--fileUpload-dropzone-radius); // Dropzone border radius
+$fileUpload-dropzone-padding: var(--fileUpload-dropzone-padding); // Dropzone padding
+$fileUpload-icon-size: var(--fileUpload-icon-size); // Upload icon size
+$fileUpload-icon-color-default: var(--fileUpload-icon-color-default); // Upload icon color
+$fileUpload-icon-color-active: var(--fileUpload-icon-color-active); // Upload icon color when dragging
+$fileUpload-text-primary-color: var(--fileUpload-text-primary-color); // Primary text color
+$fileUpload-text-primary-size: var(--fileUpload-text-primary-size); // Primary text font size
+$fileUpload-text-secondary-color: var(--fileUpload-text-secondary-color); // Secondary text color
+$fileUpload-text-secondary-size: var(--fileUpload-text-secondary-size); // Secondary text font size
+$fileUpload-fileList-gap: var(--fileUpload-fileList-gap); // Gap between file items
+$fileUpload-fileList-item-background: var(--fileUpload-fileList-item-background); // File item background
+$fileUpload-fileList-item-padding: var(--fileUpload-fileList-item-padding); // File item padding
+$fileUpload-fileList-item-radius: var(--fileUpload-fileList-item-radius); // File item border radius
+$fileUpload-fileList-item-border-color: var(--fileUpload-fileList-item-border-color); // File item border color
+$fileUpload-fileList-item-border-width: var(--fileUpload-fileList-item-border-width); // File item border width
+$fileUpload-fileList-fileName-color: var(--fileUpload-fileList-fileName-color); // File name color
+$fileUpload-fileList-fileName-size: var(--fileUpload-fileList-fileName-size); // File name font size
+$fileUpload-fileList-fileSize-color: var(--fileUpload-fileList-fileSize-color); // File size color
+$fileUpload-fileList-fileSize-size: var(--fileUpload-fileList-fileSize-size); // File size font size
+$fileUpload-fileList-removeButton-color-default: var(--fileUpload-fileList-removeButton-color-default); // Remove button color
+$fileUpload-fileList-removeButton-color-hover: var(--fileUpload-fileList-removeButton-color-hover); // Remove button hover color
+$fileUpload-fileList-removeButton-size: var(--fileUpload-fileList-removeButton-size); // Remove button icon size
+$fileUpload-transition-duration: var(--fileUpload-transition-duration); // Transition duration
+
+// Galleria
+$galleria-container-background: var(--galleria-container-background); // Galleria container background
+$galleria-container-radius: var(--galleria-container-radius); // Galleria container border radius
+$galleria-container-border-color: var(--galleria-container-border-color); // Container border color
+$galleria-container-border-width: var(--galleria-container-border-width); // Container border width
+$galleria-preview-background: var(--galleria-preview-background); // Preview area background
+$galleria-preview-padding: var(--galleria-preview-padding); // Preview area padding
+$galleria-preview-radius: var(--galleria-preview-radius); // Preview image border radius
+$galleria-thumbnail-container-gap: var(--galleria-thumbnail-container-gap); // Gap between thumbnails
+$galleria-thumbnail-container-padding: var(--galleria-thumbnail-container-padding); // Thumbnail container padding
+$galleria-thumbnail-item-width: var(--galleria-thumbnail-item-width); // Thumbnail width
+$galleria-thumbnail-item-height: var(--galleria-thumbnail-item-height); // Thumbnail height
+$galleria-thumbnail-item-radius: var(--galleria-thumbnail-item-radius); // Thumbnail border radius
+$galleria-thumbnail-item-opacity-default: var(--galleria-thumbnail-item-opacity-default); // Thumbnail opacity
+$galleria-thumbnail-item-opacity-hover: var(--galleria-thumbnail-item-opacity-hover); // Thumbnail hover opacity
+$galleria-thumbnail-item-opacity-active: var(--galleria-thumbnail-item-opacity-active); // Active thumbnail opacity
+$galleria-thumbnail-item-border-color-default: var(--galleria-thumbnail-item-border-color-default); // Thumbnail border color
+$galleria-thumbnail-item-border-color-active: var(--galleria-thumbnail-item-border-color-active); // Active thumbnail border color
+$galleria-thumbnail-item-border-width: var(--galleria-thumbnail-item-border-width); // Thumbnail border width
+$galleria-navigator-size: var(--galleria-navigator-size); // Navigator button size
+$galleria-navigator-iconSize: var(--galleria-navigator-iconSize); // Navigator icon size
+$galleria-navigator-background-default: var(--galleria-navigator-background-default); // Navigator background
+$galleria-navigator-background-hover: var(--galleria-navigator-background-hover); // Navigator hover background
+$galleria-navigator-color: var(--galleria-navigator-color); // Navigator icon color
+$galleria-navigator-radius: var(--galleria-navigator-radius); // Navigator border radius
+$galleria-indicator-size: var(--galleria-indicator-size); // Indicator dot size
+$galleria-indicator-gap: var(--galleria-indicator-gap); // Gap between indicators
+$galleria-indicator-background-default: var(--galleria-indicator-background-default); // Indicator background
+$galleria-indicator-background-active: var(--galleria-indicator-background-active); // Active indicator background
+$galleria-fullscreen-background: var(--galleria-fullscreen-background); // Fullscreen overlay background
+$galleria-fullscreen-zIndex: var(--galleria-fullscreen-zIndex); // Fullscreen z-index
+$galleria-fullscreen-closeButton-size: var(--galleria-fullscreen-closeButton-size); // Close button size
+$galleria-fullscreen-closeButton-color: var(--galleria-fullscreen-closeButton-color); // Close button color
+$galleria-fullscreen-closeButton-background-default: var(--galleria-fullscreen-closeButton-background-default); // Close button background
+$galleria-fullscreen-closeButton-background-hover: var(--galleria-fullscreen-closeButton-background-hover); // Close button hover background
+$galleria-caption-background: var(--galleria-caption-background); // Caption background
+$galleria-caption-color: var(--galleria-caption-color); // Caption text color
+$galleria-caption-padding: var(--galleria-caption-padding); // Caption padding
+$galleria-caption-fontSize: var(--galleria-caption-fontSize); // Caption font size
+$galleria-transition-duration: var(--galleria-transition-duration); // Transition duration
+
+// Image
+$image-radius: var(--image-radius); // Image border radius
+$image-placeholder-background: var(--image-placeholder-background); // Placeholder background color while loading
+$image-preview-icon-size: var(--image-preview-icon-size); // Preview indicator icon size
+$image-preview-icon-color: var(--image-preview-icon-color); // Preview indicator icon color
+$image-preview-icon-background: var(--image-preview-icon-background); // Preview indicator background
+$image-preview-overlay-background: var(--image-preview-overlay-background); // Preview overlay background
+$image-preview-overlay-zIndex: var(--image-preview-overlay-zIndex); // Preview overlay z-index
+$image-preview-closeButton-size: var(--image-preview-closeButton-size); // Close button size in preview
+$image-preview-closeButton-color: var(--image-preview-closeButton-color); // Close button color
+$image-preview-closeButton-hoverBackground: var(--image-preview-closeButton-hoverBackground); // Close button hover background
+$image-transition-duration: var(--image-transition-duration); // Transition duration for hover effects
+
+// Image-compare
+$image-compare-background: var(--image-compare-background); // Container background color
+$image-compare-border-color: var(--image-compare-border-color); // Border color
+$image-compare-border-width: var(--image-compare-border-width); // Border width
+$image-compare-border-radius: var(--image-compare-border-radius); // Border radius
+$image-compare-handle-width: var(--image-compare-handle-width); // Handle divider width
+$image-compare-handle-color-default: var(--image-compare-handle-color-default); // Handle color
+$image-compare-handle-color-hover: var(--image-compare-handle-color-hover); // Handle hover color
+$image-compare-handle-shadow: var(--image-compare-handle-shadow); // Handle shadow
+$image-compare-icon-size: var(--image-compare-icon-size); // Handle icon container size
+$image-compare-icon-color: var(--image-compare-icon-color); // Handle icon color
+$image-compare-icon-background: var(--image-compare-icon-background); // Handle icon background
+$image-compare-transition-duration: var(--image-compare-transition-duration); // Handle state transition duration
+
+// Inline-message
+$inline-message-padding-x: var(--inline-message-padding-x); // Horizontal padding
+$inline-message-padding-y: var(--inline-message-padding-y); // Vertical padding
+$inline-message-gap: var(--inline-message-gap); // Gap between icon and text
+$inline-message-radius: var(--inline-message-radius); // Border radius
+$inline-message-fontSize: var(--inline-message-fontSize); // Text font size
+$inline-message-fontWeight: var(--inline-message-fontWeight); // Text font weight
+$inline-message-iconSize: var(--inline-message-iconSize); // Icon size
+$inline-message-background-success: var(--inline-message-background-success); // Success bg — darker green, ≥4.5:1 vs white text (WCAG 1.4.3) and ≥3:1 vs white canvas (WCAG 1.4.11). Previous *Subtle was 1.14:1 vs canvas.
+$inline-message-background-info: var(--inline-message-background-info); // Info bg — darker blue, same constraints
+$inline-message-background-warn: var(--inline-message-background-warn); // Warning bg — darker orange (feedback.warning mid is too light against white canvas)
+$inline-message-background-error: var(--inline-message-background-error); // Error bg — darker red
+$inline-message-text-success: var(--inline-message-text-success); // Text — white on filled severity bg
+$inline-message-text-info: var(--inline-message-text-info); // Text — white on filled severity bg
+$inline-message-text-warn: var(--inline-message-text-warn); // Text — white on filled severity bg
+$inline-message-text-error: var(--inline-message-text-error); // Text — white on filled severity bg
+$inline-message-icon-success: var(--inline-message-icon-success); // Icon matches text — white on filled bg
+$inline-message-icon-info: var(--inline-message-icon-info); // Icon matches text — white on filled bg
+$inline-message-icon-warn: var(--inline-message-icon-warn); // Icon matches text — white on filled bg
+$inline-message-icon-error: var(--inline-message-icon-error); // Icon matches text — white on filled bg
+
+// In-place
+$in-place-display-paddingX: var(--in-place-display-paddingX); // Display element horizontal padding
+$in-place-display-paddingY: var(--in-place-display-paddingY); // Display element vertical padding
+$in-place-display-background-default: var(--in-place-display-background-default); // Display background
+$in-place-display-background-hover: var(--in-place-display-background-hover); // Display hover background
+$in-place-display-color-default: var(--in-place-display-color-default); // Display text color
+$in-place-display-color-hover: var(--in-place-display-color-hover); // Display hover text color
+$in-place-display-color-disabled: var(--in-place-display-color-disabled); // Display disabled text color
+$in-place-display-border-radius: var(--in-place-display-border-radius); // Display border radius
+$in-place-closeButton-size: var(--in-place-closeButton-size); // Close button size
+$in-place-closeButton-iconSize: var(--in-place-closeButton-iconSize); // Close icon size
+$in-place-closeButton-color-default: var(--in-place-closeButton-color-default); // Close button color
+$in-place-closeButton-color-hover: var(--in-place-closeButton-color-hover); // Close button hover color
+$in-place-closeButton-background-hover: var(--in-place-closeButton-background-hover); // Close button hover background
+$in-place-closeButton-radius: var(--in-place-closeButton-radius); // Close button border radius
+$in-place-closeButton-gap: var(--in-place-closeButton-gap); // Gap between content and close button
+$in-place-transition-duration: var(--in-place-transition-duration); // State transition duration
+
+// Input-chips
+$input-chips-height-sm: var(--input-chips-height-sm); // Small container min-height
+$input-chips-height-md: var(--input-chips-height-md); // Medium container min-height (default)
+$input-chips-height-lg: var(--input-chips-height-lg); // Large container min-height
+$input-chips-padding-x: var(--input-chips-padding-x); // Horizontal padding
+$input-chips-padding-y: var(--input-chips-padding-y); // Vertical padding
+$input-chips-gap: var(--input-chips-gap); // Gap between chips and input
+$input-chips-radius: var(--input-chips-radius); // Container border radius
+$input-chips-border-width: var(--input-chips-border-width);
+$input-chips-border-color-default: var(--input-chips-border-color-default); // Default border color
+$input-chips-border-color-hover: var(--input-chips-border-color-hover); // Hover border color
+$input-chips-border-color-focus: var(--input-chips-border-color-focus); // Focus border color
+$input-chips-border-color-disabled: var(--input-chips-border-color-disabled); // Disabled border color
+$input-chips-border-color-error: var(--input-chips-border-color-error); // Error/invalid border color
+$input-chips-background-default: var(--input-chips-background-default); // Default background
+$input-chips-background-disabled: var(--input-chips-background-disabled); // Disabled background
+$input-chips-text-default: var(--input-chips-text-default); // Default text color
+$input-chips-text-placeholder: var(--input-chips-text-placeholder); // Placeholder text color
+$input-chips-text-disabled: var(--input-chips-text-disabled); // Disabled text color
+$input-chips-fontSize-sm: var(--input-chips-fontSize-sm);
+$input-chips-fontSize-md: var(--input-chips-fontSize-md);
+$input-chips-fontSize-lg: var(--input-chips-fontSize-lg);
+$input-chips-chip-padding-x: var(--input-chips-chip-padding-x);
+$input-chips-chip-padding-y: var(--input-chips-chip-padding-y);
+$input-chips-chip-gap: var(--input-chips-chip-gap);
+$input-chips-chip-radius: var(--input-chips-chip-radius);
+$input-chips-chip-background-default: var(--input-chips-chip-background-default); // Chip bg — navy ~14.9:1 vs canvas (WCAG 1.4.11). Previous surface.muted was 1.13:1 — invisible.
+$input-chips-chip-background-hover: var(--input-chips-chip-background-hover); // Chip hover — lifted navy
+$input-chips-chip-text: var(--input-chips-chip-text); // Chip text — white on navy fill, ~14.9:1
+$input-chips-chip-fontSize: var(--input-chips-chip-fontSize);
+$input-chips-remove-size: var(--input-chips-remove-size);
+$input-chips-remove-color-default: var(--input-chips-remove-color-default); // Chip remove icon — matches chip text; SCSS applies opacity:0.75 so it reads as a slightly softer tint than the label.
+$input-chips-remove-color-hover: var(--input-chips-remove-color-hover); // Chip remove icon hover — same hue, full opacity for the affordance.
+$input-chips-focus-ringWidth: var(--input-chips-focus-ringWidth);
+$input-chips-focus-ringColor: var(--input-chips-focus-ringColor);
+$input-chips-focus-ringOffset: var(--input-chips-focus-ringOffset);
+
+// Input-group
+$input-group-display: var(--input-group-display); // Display type for input group container
+$input-group-border-radius: var(--input-group-border-radius); // Border radius for grouped elements
+$input-group-gap: var(--input-group-gap); // Gap between input group items (none for seamless grouping)
+
+// Input-group-addon
+$input-group-addon-background-default: var(--input-group-addon-background-default); // Addon background color
+$input-group-addon-text-default: var(--input-group-addon-text-default); // Addon text color
+$input-group-addon-border-color: var(--input-group-addon-border-color); // Addon border color
+$input-group-addon-border-width: var(--input-group-addon-border-width); // Addon border width
+$input-group-addon-padding-x: var(--input-group-addon-padding-x); // Horizontal padding
+$input-group-addon-padding-y: var(--input-group-addon-padding-y); // Vertical padding
+$input-group-addon-fontSize: var(--input-group-addon-fontSize); // Addon font size
+
+// Input-icon
+$input-icon-color-default: var(--input-icon-color-default); // Default icon color
+$input-icon-color-focus: var(--input-icon-color-focus); // Icon color when input is focused
+$input-icon-size-sm: var(--input-icon-size-sm); // Small icon size
+$input-icon-size-md: var(--input-icon-size-md); // Medium icon size
+$input-icon-size-lg: var(--input-icon-size-lg); // Large icon size
+$input-icon-offset: var(--input-icon-offset); // Horizontal offset from input edge
+
+// Input-mask
+$input-mask-height-sm: var(--input-mask-height-sm); // Small input height
+$input-mask-height-md: var(--input-mask-height-md); // Medium input height (default)
+$input-mask-height-lg: var(--input-mask-height-lg); // Large input height
+$input-mask-padding-x: var(--input-mask-padding-x); // Horizontal padding
+$input-mask-padding-y: var(--input-mask-padding-y); // Vertical padding
+$input-mask-fontSize-sm: var(--input-mask-fontSize-sm);
+$input-mask-fontSize-md: var(--input-mask-fontSize-md);
+$input-mask-fontSize-lg: var(--input-mask-fontSize-lg);
+$input-mask-radius: var(--input-mask-radius); // Input border radius
+$input-mask-border-width: var(--input-mask-border-width);
+$input-mask-border-color-default: var(--input-mask-border-color-default); // Default border color
+$input-mask-border-color-hover: var(--input-mask-border-color-hover); // Hover border color
+$input-mask-border-color-focus: var(--input-mask-border-color-focus); // Focus border color
+$input-mask-border-color-disabled: var(--input-mask-border-color-disabled); // Disabled border color
+$input-mask-border-color-error: var(--input-mask-border-color-error); // Error/invalid border color
+$input-mask-background-default: var(--input-mask-background-default); // Default background
+$input-mask-background-disabled: var(--input-mask-background-disabled); // Disabled background
+$input-mask-background-hover: var(--input-mask-background-hover); // Hover background
+$input-mask-text-default: var(--input-mask-text-default); // Default text color
+$input-mask-text-placeholder: var(--input-mask-text-placeholder); // Placeholder/slot character color
+$input-mask-text-disabled: var(--input-mask-text-disabled); // Disabled text color
+$input-mask-focus-ringWidth: var(--input-mask-focus-ringWidth); // Focus ring width
+$input-mask-focus-ringColor: var(--input-mask-focus-ringColor); // Focus ring color
+$input-mask-focus-ringOffset: var(--input-mask-focus-ringOffset); // Focus ring offset
+
+// InputNumber
+$inputNumber-height-sm: var(--inputNumber-height-sm);
+$inputNumber-height-md: var(--inputNumber-height-md);
+$inputNumber-height-lg: var(--inputNumber-height-lg);
+$inputNumber-padding-x: var(--inputNumber-padding-x);
+$inputNumber-fontSize-sm: var(--inputNumber-fontSize-sm);
+$inputNumber-fontSize-md: var(--inputNumber-fontSize-md);
+$inputNumber-fontSize-lg: var(--inputNumber-fontSize-lg);
+$inputNumber-radius: var(--inputNumber-radius);
+$inputNumber-border-width: var(--inputNumber-border-width);
+$inputNumber-border-color-default: var(--inputNumber-border-color-default);
+$inputNumber-border-color-hover: var(--inputNumber-border-color-hover);
+$inputNumber-border-color-focus: var(--inputNumber-border-color-focus);
+$inputNumber-border-color-disabled: var(--inputNumber-border-color-disabled);
+$inputNumber-border-color-error: var(--inputNumber-border-color-error);
+$inputNumber-background-default: var(--inputNumber-background-default);
+$inputNumber-background-disabled: var(--inputNumber-background-disabled);
+$inputNumber-text-default: var(--inputNumber-text-default);
+$inputNumber-text-placeholder: var(--inputNumber-text-placeholder);
+$inputNumber-text-disabled: var(--inputNumber-text-disabled);
+$inputNumber-button-width: var(--inputNumber-button-width);
+$inputNumber-button-background-default: var(--inputNumber-button-background-default);
+$inputNumber-button-background-hover: var(--inputNumber-button-background-hover);
+$inputNumber-button-background-active: var(--inputNumber-button-background-active);
+$inputNumber-button-background-disabled: var(--inputNumber-button-background-disabled);
+$inputNumber-button-icon-color-default: var(--inputNumber-button-icon-color-default);
+$inputNumber-button-icon-color-disabled: var(--inputNumber-button-icon-color-disabled);
+$inputNumber-focus-ringWidth: var(--inputNumber-focus-ringWidth);
+$inputNumber-focus-ringColor: var(--inputNumber-focus-ringColor);
+$inputNumber-focus-ringOffset: var(--inputNumber-focus-ringOffset);
+
+// Input-otp
+$input-otp-gap: var(--input-otp-gap); // Gap between input cells
+$input-otp-cell-size: var(--input-otp-cell-size); // Cell width and height
+$input-otp-cell-fontSize: var(--input-otp-cell-fontSize); // Cell character font size
+$input-otp-cell-fontWeight: var(--input-otp-cell-fontWeight); // Cell character font weight
+$input-otp-cell-radius: var(--input-otp-cell-radius); // Cell border radius
+$input-otp-cell-background-default: var(--input-otp-cell-background-default); // Default cell background
+$input-otp-cell-background-focus: var(--input-otp-cell-background-focus); // Focused cell background
+$input-otp-cell-background-filled: var(--input-otp-cell-background-filled); // Filled cell background
+$input-otp-cell-background-disabled: var(--input-otp-cell-background-disabled); // Disabled cell background
+$input-otp-cell-border-width: var(--input-otp-cell-border-width); // Cell border width
+$input-otp-cell-border-color-default: var(--input-otp-cell-border-color-default); // Default cell border color
+$input-otp-cell-border-color-hover: var(--input-otp-cell-border-color-hover); // Hover cell border color
+$input-otp-cell-border-color-focus: var(--input-otp-cell-border-color-focus); // Focused cell border color
+$input-otp-cell-border-color-filled: var(--input-otp-cell-border-color-filled); // Filled cell border color
+$input-otp-cell-border-color-disabled: var(--input-otp-cell-border-color-disabled); // Disabled cell border color
+$input-otp-cell-border-color-error: var(--input-otp-cell-border-color-error); // Error cell border color
+$input-otp-cell-text-default: var(--input-otp-cell-text-default); // Default text color
+$input-otp-cell-text-disabled: var(--input-otp-cell-text-disabled); // Disabled text color
+$input-otp-cell-text-mask: var(--input-otp-cell-text-mask); // Masked character color
+$input-otp-focus-ringWidth: var(--input-otp-focus-ringWidth); // Focus ring width
+$input-otp-focus-ringColor: var(--input-otp-focus-ringColor); // Focus ring color
+$input-otp-focus-ringOffset: var(--input-otp-focus-ringOffset); // Focus ring offset
+$input-otp-separator-width: var(--input-otp-separator-width); // Separator dash width
+$input-otp-separator-color: var(--input-otp-separator-color); // Separator color
+
+// InputSwitch
+$inputSwitch-width-sm: var(--inputSwitch-width-sm);
+$inputSwitch-width-md: var(--inputSwitch-width-md);
+$inputSwitch-width-lg: var(--inputSwitch-width-lg);
+$inputSwitch-height-sm: var(--inputSwitch-height-sm);
+$inputSwitch-height-md: var(--inputSwitch-height-md);
+$inputSwitch-height-lg: var(--inputSwitch-height-lg);
+$inputSwitch-thumb-size-sm: var(--inputSwitch-thumb-size-sm);
+$inputSwitch-thumb-size-md: var(--inputSwitch-thumb-size-md);
+$inputSwitch-thumb-size-lg: var(--inputSwitch-thumb-size-lg);
+$inputSwitch-thumb-offset: var(--inputSwitch-thumb-offset);
+$inputSwitch-thumb-color-default: var(--inputSwitch-thumb-color-default);
+$inputSwitch-thumb-shadow: var(--inputSwitch-thumb-shadow);
+$inputSwitch-track-background-off: var(--inputSwitch-track-background-off); // Off state — #737373, ~4.8:1 vs white canvas (WCAG 1.4.11 ≥3:1)
+$inputSwitch-track-background-on: var(--inputSwitch-track-background-on);
+$inputSwitch-track-background-disabled: var(--inputSwitch-track-background-disabled); // Disabled — exempt from 1.4.11 per WCAG
+$inputSwitch-label-gap: var(--inputSwitch-label-gap);
+$inputSwitch-label-color-default: var(--inputSwitch-label-color-default);
+$inputSwitch-label-color-disabled: var(--inputSwitch-label-color-disabled);
+$inputSwitch-focus-ringWidth: var(--inputSwitch-focus-ringWidth);
+$inputSwitch-focus-ringColor: var(--inputSwitch-focus-ringColor);
+$inputSwitch-focus-ringOffset: var(--inputSwitch-focus-ringOffset);
+
+// Input-text
+$input-text-height-sm: var(--input-text-height-sm); // Small input height
+$input-text-height-md: var(--input-text-height-md); // Medium input height (default)
+$input-text-height-lg: var(--input-text-height-lg); // Large input height
+$input-text-padding-x: var(--input-text-padding-x); // Horizontal padding
+$input-text-padding-y: var(--input-text-padding-y); // Vertical padding
+$input-text-fontSize-sm: var(--input-text-fontSize-sm);
+$input-text-fontSize-md: var(--input-text-fontSize-md);
+$input-text-fontSize-lg: var(--input-text-fontSize-lg);
+$input-text-radius: var(--input-text-radius); // Input border radius
+$input-text-border-width: var(--input-text-border-width);
+$input-text-border-color-default: var(--input-text-border-color-default); // Default border color (semantic, adapts to theme)
+$input-text-border-color-hover: var(--input-text-border-color-hover); // Hover border color
+$input-text-border-color-focus: var(--input-text-border-color-focus); // Focus border color
+$input-text-border-color-disabled: var(--input-text-border-color-disabled); // Disabled border color
+$input-text-border-color-error: var(--input-text-border-color-error); // Error/invalid border color (emphasis shade for visibility on both light + dark)
+$input-text-background-default: var(--input-text-background-default); // Default background
+$input-text-background-disabled: var(--input-text-background-disabled); // Disabled background
+$input-text-background-hover: var(--input-text-background-hover); // Hover background
+$input-text-text-default: var(--input-text-text-default); // Default text color
+$input-text-text-placeholder: var(--input-text-text-placeholder); // Placeholder text color
+$input-text-text-disabled: var(--input-text-text-disabled); // Disabled text color
+$input-text-focus-ringWidth: var(--input-text-focus-ringWidth); // Focus ring width
+$input-text-focus-ringColor: var(--input-text-focus-ringColor); // Focus ring color
+$input-text-focus-ringOffset: var(--input-text-focus-ringOffset); // Focus ring offset
+
+// Knob
+$knob-size-sm: var(--knob-size-sm); // Small knob size
+$knob-size-md: var(--knob-size-md); // Medium knob size
+$knob-size-lg: var(--knob-size-lg); // Large knob size
+$knob-strokeWidth-sm: var(--knob-strokeWidth-sm); // Small stroke width
+$knob-strokeWidth-md: var(--knob-strokeWidth-md); // Medium stroke width
+$knob-strokeWidth-lg: var(--knob-strokeWidth-lg); // Large stroke width
+$knob-track-color: var(--knob-track-color); // Background track color
+$knob-fill-color-default: var(--knob-fill-color-default); // Default fill color
+$knob-fill-color-disabled: var(--knob-fill-color-disabled); // Disabled fill color
+$knob-valueText-fontSize-sm: var(--knob-valueText-fontSize-sm); // Small value font size
+$knob-valueText-fontSize-md: var(--knob-valueText-fontSize-md); // Medium value font size
+$knob-valueText-fontSize-lg: var(--knob-valueText-fontSize-lg); // Large value font size
+$knob-valueText-fontWeight: var(--knob-valueText-fontWeight); // Value font weight
+$knob-valueText-color-default: var(--knob-valueText-color-default); // Default value color
+$knob-valueText-color-disabled: var(--knob-valueText-color-disabled); // Disabled value color
+$knob-focus-ringWidth: var(--knob-focus-ringWidth); // Focus ring width
+$knob-focus-ringColor: var(--knob-focus-ringColor); // Focus ring color
+$knob-focus-ringOffset: var(--knob-focus-ringOffset); // Focus ring offset
+$knob-transition-duration: var(--knob-transition-duration); // Value change transition
+
+// Listbox
+$listbox-padding: var(--listbox-padding); // Container padding
+$listbox-radius: var(--listbox-radius); // Container border radius
+$listbox-border-width: var(--listbox-border-width);
+$listbox-border-color-default: var(--listbox-border-color-default); // Default border color
+$listbox-border-color-focus: var(--listbox-border-color-focus); // Focus border color
+$listbox-border-color-disabled: var(--listbox-border-color-disabled); // Disabled border color
+$listbox-background-default: var(--listbox-background-default); // Default background
+$listbox-background-disabled: var(--listbox-background-disabled); // Disabled background
+$listbox-maxHeight: var(--listbox-maxHeight); // Max height before scrolling
+$listbox-filter-height: var(--listbox-filter-height);
+$listbox-filter-padding-x: var(--listbox-filter-padding-x);
+$listbox-filter-background: var(--listbox-filter-background);
+$listbox-filter-border: var(--listbox-filter-border);
+$listbox-filter-radius: var(--listbox-filter-radius);
+$listbox-filter-text: var(--listbox-filter-text);
+$listbox-filter-placeholder: var(--listbox-filter-placeholder);
+$listbox-filter-marginBottom: var(--listbox-filter-marginBottom);
+$listbox-option-padding-x: var(--listbox-option-padding-x);
+$listbox-option-padding-y: var(--listbox-option-padding-y);
+$listbox-option-radius: var(--listbox-option-radius);
+$listbox-option-background-default: var(--listbox-option-background-default);
+$listbox-option-background-hover: var(--listbox-option-background-hover);
+$listbox-option-background-selected: var(--listbox-option-background-selected);
+$listbox-option-background-focus: var(--listbox-option-background-focus);
+$listbox-option-text-default: var(--listbox-option-text-default);
+$listbox-option-text-selected: var(--listbox-option-text-selected);
+$listbox-option-text-disabled: var(--listbox-option-text-disabled);
+$listbox-option-fontSize: var(--listbox-option-fontSize);
+$listbox-focus-ringWidth: var(--listbox-focus-ringWidth);
+$listbox-focus-ringColor: var(--listbox-focus-ringColor);
+$listbox-focus-ringOffset: var(--listbox-focus-ringOffset);
+$listbox-checkbox-size: var(--listbox-checkbox-size);
+$listbox-checkbox-marginRight: var(--listbox-checkbox-marginRight);
+
+// Mega-menu
+$mega-menu-root-background: var(--mega-menu-root-background); // Menu bar background
+$mega-menu-root-padding-x: var(--mega-menu-root-padding-x); // Menu bar horizontal padding
+$mega-menu-root-padding-y: var(--mega-menu-root-padding-y); // Menu bar vertical padding
+$mega-menu-root-gap: var(--mega-menu-root-gap); // Gap between root items
+$mega-menu-rootItem-padding-x: var(--mega-menu-rootItem-padding-x); // Root item horizontal padding
+$mega-menu-rootItem-padding-y: var(--mega-menu-rootItem-padding-y); // Root item vertical padding
+$mega-menu-rootItem-text-color-default: var(--mega-menu-rootItem-text-color-default); // Root item text color
+$mega-menu-rootItem-text-color-hover: var(--mega-menu-rootItem-text-color-hover); // Root item hover text color
+$mega-menu-rootItem-text-color-active: var(--mega-menu-rootItem-text-color-active); // Active root item text color
+$mega-menu-rootItem-text-fontSize: var(--mega-menu-rootItem-text-fontSize); // Root item font size
+$mega-menu-rootItem-text-fontWeight-default: var(--mega-menu-rootItem-text-fontWeight-default); // Root item font weight
+$mega-menu-rootItem-text-fontWeight-active: var(--mega-menu-rootItem-text-fontWeight-active); // Active root item font weight
+$mega-menu-rootItem-background-default: var(--mega-menu-rootItem-background-default); // Root item background
+$mega-menu-rootItem-background-hover: var(--mega-menu-rootItem-background-hover); // Root item hover background
+$mega-menu-rootItem-background-active: var(--mega-menu-rootItem-background-active); // Active root item background
+$mega-menu-rootItem-radius: var(--mega-menu-rootItem-radius); // Root item border radius
+$mega-menu-rootItem-indicator-height: var(--mega-menu-rootItem-indicator-height); // Active indicator height
+$mega-menu-rootItem-indicator-color: var(--mega-menu-rootItem-indicator-color); // Active indicator color
+$mega-menu-panel-background: var(--mega-menu-panel-background); // Dropdown panel background
+$mega-menu-panel-border-color: var(--mega-menu-panel-border-color); // Panel border color
+$mega-menu-panel-border-width: var(--mega-menu-panel-border-width); // Panel border width
+$mega-menu-panel-radius: var(--mega-menu-panel-radius); // Panel border radius
+$mega-menu-panel-shadow: var(--mega-menu-panel-shadow); // Panel shadow
+$mega-menu-panel-padding: var(--mega-menu-panel-padding); // Panel padding
+$mega-menu-panel-gap: var(--mega-menu-panel-gap); // Gap between columns
+$mega-menu-panel-maxWidth: var(--mega-menu-panel-maxWidth); // Maximum panel width
+$mega-menu-panel-zIndex: var(--mega-menu-panel-zIndex); // Panel z-index
+$mega-menu-column-minWidth: var(--mega-menu-column-minWidth); // Minimum column width
+$mega-menu-column-gap: var(--mega-menu-column-gap); // Gap between column items
+$mega-menu-category-text-color: var(--mega-menu-category-text-color); // Category heading color
+$mega-menu-category-text-fontSize: var(--mega-menu-category-text-fontSize); // Category heading font size
+$mega-menu-category-text-fontWeight: var(--mega-menu-category-text-fontWeight); // Category heading font weight
+$mega-menu-category-text-textTransform: var(--mega-menu-category-text-textTransform); // Category text transform
+$mega-menu-category-text-letterSpacing: var(--mega-menu-category-text-letterSpacing); // Category letter spacing
+$mega-menu-category-margin-bottom: var(--mega-menu-category-margin-bottom); // Space below category heading
+$mega-menu-item-padding-x: var(--mega-menu-item-padding-x); // Item horizontal padding
+$mega-menu-item-padding-y: var(--mega-menu-item-padding-y); // Item vertical padding
+$mega-menu-item-text-color-default: var(--mega-menu-item-text-color-default); // Item text color
+$mega-menu-item-text-color-hover: var(--mega-menu-item-text-color-hover); // Item hover text color
+$mega-menu-item-text-fontSize: var(--mega-menu-item-text-fontSize); // Item font size
+$mega-menu-item-background-hover: var(--mega-menu-item-background-hover); // Item hover background
+$mega-menu-item-radius: var(--mega-menu-item-radius); // Item border radius
+$mega-menu-item-icon-size: var(--mega-menu-item-icon-size); // Item icon size
+$mega-menu-item-icon-color: var(--mega-menu-item-icon-color); // Item icon color
+$mega-menu-item-icon-gap: var(--mega-menu-item-icon-gap); // Gap between icon and text
+$mega-menu-item-description-color: var(--mega-menu-item-description-color); // Item description color
+$mega-menu-item-description-fontSize: var(--mega-menu-item-description-fontSize); // Item description font size
+
+// Menu
+$menu-background: var(--menu-background); // Menu popup background
+$menu-border-width: var(--menu-border-width); // Menu border width
+$menu-border-color: var(--menu-border-color); // Menu border color
+$menu-radius: var(--menu-radius); // Menu border radius
+$menu-shadow: var(--menu-shadow); // Menu popup shadow
+$menu-padding: var(--menu-padding); // Menu content padding
+$menu-minWidth: var(--menu-minWidth); // Minimum menu width
+$menu-maxHeight: var(--menu-maxHeight); // Maximum menu height before scrolling
+$menu-zIndex: var(--menu-zIndex); // Z-index for stacking
+$menu-item-padding-x: var(--menu-item-padding-x); // Item horizontal padding
+$menu-item-padding-y: var(--menu-item-padding-y); // Item vertical padding
+$menu-item-gap: var(--menu-item-gap); // Gap between icon and label
+$menu-item-radius: var(--menu-item-radius); // Item border radius
+$menu-item-background-default: var(--menu-item-background-default); // Default item background
+$menu-item-background-hover: var(--menu-item-background-hover); // Item hover background
+$menu-item-background-active: var(--menu-item-background-active); // Item active/pressed background
+$menu-item-background-disabled: var(--menu-item-background-disabled); // Disabled item background
+$menu-item-text-default: var(--menu-item-text-default); // Default item text color
+$menu-item-text-disabled: var(--menu-item-text-disabled); // Disabled item text color
+$menu-item-icon-size: var(--menu-item-icon-size); // Item icon size
+$menu-item-icon-color-default: var(--menu-item-icon-color-default); // Default icon color
+$menu-item-icon-color-disabled: var(--menu-item-icon-color-disabled); // Disabled icon color
+$menu-item-fontSize: var(--menu-item-fontSize); // Item font size
+$menu-separator-color: var(--menu-separator-color); // Separator line color
+$menu-separator-margin: var(--menu-separator-margin); // Separator vertical margin
+
+// Menubar
+$menubar-background: var(--menubar-background); // Menubar background color
+$menubar-padding: var(--menubar-padding); // Menubar container padding
+$menubar-border-width: var(--menubar-border-width); // Border width
+$menubar-border-color: var(--menubar-border-color); // Border color
+$menubar-border-radius: var(--menubar-border-radius); // Border radius
+$menubar-item-padding: var(--menubar-item-padding); // Menu item padding
+$menubar-item-gap: var(--menubar-item-gap); // Gap between icon and label
+$menubar-item-color-default: var(--menubar-item-color-default); // Item text color
+$menubar-item-color-hover: var(--menubar-item-color-hover); // Item text color on hover
+$menubar-item-color-active: var(--menubar-item-color-active); // Item text color when active
+$menubar-item-color-disabled: var(--menubar-item-color-disabled); // Item text color when disabled
+$menubar-item-background-default: var(--menubar-item-background-default); // Item background
+$menubar-item-background-hover: var(--menubar-item-background-hover); // Item background on hover
+$menubar-item-background-active: var(--menubar-item-background-active); // Item background when active
+$menubar-item-borderRadius: var(--menubar-item-borderRadius); // Item border radius
+$menubar-icon-size: var(--menubar-icon-size); // Icon size
+$menubar-icon-color-default: var(--menubar-icon-color-default); // Icon color
+$menubar-icon-color-hover: var(--menubar-icon-color-hover); // Icon color on hover
+$menubar-submenu-background: var(--menubar-submenu-background); // Submenu background
+$menubar-submenu-minWidth: var(--menubar-submenu-minWidth); // Submenu minimum width
+$menubar-submenu-padding: var(--menubar-submenu-padding); // Submenu container padding
+$menubar-submenu-borderRadius: var(--menubar-submenu-borderRadius); // Submenu border radius
+$menubar-submenu-shadow: var(--menubar-submenu-shadow); // Submenu shadow
+$menubar-separator-color: var(--menubar-separator-color); // Separator color
+$menubar-separator-margin: var(--menubar-separator-margin); // Separator vertical margin
+$menubar-transition-duration: var(--menubar-transition-duration); // Animation duration
+
+// Message
+$message-padding-x: var(--message-padding-x); // Horizontal padding
+$message-padding-y: var(--message-padding-y); // Vertical padding
+$message-gap: var(--message-gap); // Gap between icon and text
+$message-radius: var(--message-radius); // Border radius
+$message-fontSize: var(--message-fontSize); // Message text font size
+$message-fontWeight: var(--message-fontWeight); // Message text font weight
+$message-iconSize: var(--message-iconSize); // Icon size
+$message-closeButtonSize: var(--message-closeButtonSize); // Close button size
+$message-borderWidth: var(--message-borderWidth); // Border width
+$message-background-success: var(--message-background-success); // Success message background
+$message-background-info: var(--message-background-info); // Info message background
+$message-background-warn: var(--message-background-warn); // Warning message background
+$message-background-error: var(--message-background-error); // Error message background
+$message-text-success: var(--message-text-success); // Success message text color
+$message-text-info: var(--message-text-info); // Info message text color
+$message-text-warn: var(--message-text-warn); // Warning message text color
+$message-text-error: var(--message-text-error); // Error message text color
+$message-icon-success: var(--message-icon-success); // Success icon color
+$message-icon-info: var(--message-icon-info); // Info icon color
+$message-icon-warn: var(--message-icon-warn); // Warning icon color
+$message-icon-error: var(--message-icon-error); // Error icon color
+$message-border-success: var(--message-border-success); // Success message border color
+$message-border-info: var(--message-border-info); // Info message border color
+$message-border-warn: var(--message-border-warn); // Warning message border color
+$message-border-error: var(--message-border-error); // Error message border color
+$message-closeButton-color: var(--message-closeButton-color); // Close button icon color
+$message-closeButton-hoverColor: var(--message-closeButton-hoverColor); // Close button icon hover color
+
+// Meter-group
+$meter-group-track-height: var(--meter-group-track-height); // Height of the meter track
+$meter-group-track-background: var(--meter-group-track-background); // Background color of the meter track
+$meter-group-track-radius: var(--meter-group-track-radius); // Border radius of the meter track
+$meter-group-meter-gap: var(--meter-group-meter-gap); // Gap between meters in the group
+$meter-group-meter-radius: var(--meter-group-meter-radius); // Border radius of individual meters
+$meter-group-label-color: var(--meter-group-label-color); // Label text color
+$meter-group-label-fontSize: var(--meter-group-label-fontSize); // Label font size
+$meter-group-label-fontWeight: var(--meter-group-label-fontWeight); // Label font weight
+$meter-group-label-gap: var(--meter-group-label-gap); // Gap between label and meter
+$meter-group-valueText-color: var(--meter-group-valueText-color); // Value text color
+$meter-group-valueText-fontSize: var(--meter-group-valueText-fontSize); // Value font size
+$meter-group-legend-gap: var(--meter-group-legend-gap); // Gap between legend items
+$meter-group-legend-marker-size: var(--meter-group-legend-marker-size); // Size of the legend color marker
+$meter-group-legend-marker-radius: var(--meter-group-legend-marker-radius); // Border radius of the legend marker
+$meter-group-colors-primary: var(--meter-group-colors-primary); // Primary meter color
+$meter-group-colors-success: var(--meter-group-colors-success); // Success meter color
+$meter-group-colors-warning: var(--meter-group-colors-warning); // Warning meter color
+$meter-group-colors-danger: var(--meter-group-colors-danger); // Danger meter color
+
+// Multi-select
+$multi-select-height-sm: var(--multi-select-height-sm);
+$multi-select-height-md: var(--multi-select-height-md);
+$multi-select-height-lg: var(--multi-select-height-lg);
+$multi-select-minHeight: var(--multi-select-minHeight);
+$multi-select-padding-x: var(--multi-select-padding-x);
+$multi-select-padding-y: var(--multi-select-padding-y);
+$multi-select-fontSize-sm: var(--multi-select-fontSize-sm);
+$multi-select-fontSize-md: var(--multi-select-fontSize-md);
+$multi-select-fontSize-lg: var(--multi-select-fontSize-lg);
+$multi-select-radius: var(--multi-select-radius);
+$multi-select-border-width: var(--multi-select-border-width);
+$multi-select-border-color-default: var(--multi-select-border-color-default);
+$multi-select-border-color-hover: var(--multi-select-border-color-hover);
+$multi-select-border-color-focus: var(--multi-select-border-color-focus);
+$multi-select-border-color-disabled: var(--multi-select-border-color-disabled);
+$multi-select-border-color-error: var(--multi-select-border-color-error);
+$multi-select-background-default: var(--multi-select-background-default);
+$multi-select-background-disabled: var(--multi-select-background-disabled);
+$multi-select-background-hover: var(--multi-select-background-hover);
+$multi-select-text-default: var(--multi-select-text-default);
+$multi-select-text-placeholder: var(--multi-select-text-placeholder);
+$multi-select-text-disabled: var(--multi-select-text-disabled);
+$multi-select-icon-size: var(--multi-select-icon-size);
+$multi-select-icon-color-default: var(--multi-select-icon-color-default);
+$multi-select-icon-color-disabled: var(--multi-select-icon-color-disabled);
+$multi-select-chip-gap: var(--multi-select-chip-gap);
+$multi-select-chip-padding-x: var(--multi-select-chip-padding-x);
+$multi-select-chip-padding-y: var(--multi-select-chip-padding-y);
+$multi-select-chip-background: var(--multi-select-chip-background);
+$multi-select-chip-radius: var(--multi-select-chip-radius);
+$multi-select-chip-fontSize: var(--multi-select-chip-fontSize);
+$multi-select-chip-remove-size: var(--multi-select-chip-remove-size);
+$multi-select-chip-remove-color-default: var(--multi-select-chip-remove-color-default);
+$multi-select-chip-remove-color-hover: var(--multi-select-chip-remove-color-hover);
+$multi-select-dropdown-background: var(--multi-select-dropdown-background);
+$multi-select-dropdown-border: var(--multi-select-dropdown-border);
+$multi-select-dropdown-shadow: var(--multi-select-dropdown-shadow);
+$multi-select-dropdown-radius: var(--multi-select-dropdown-radius);
+$multi-select-dropdown-maxHeight: var(--multi-select-dropdown-maxHeight);
+$multi-select-option-padding-x: var(--multi-select-option-padding-x);
+$multi-select-option-padding-y: var(--multi-select-option-padding-y);
+$multi-select-option-gap: var(--multi-select-option-gap);
+$multi-select-option-background-default: var(--multi-select-option-background-default);
+$multi-select-option-background-hover: var(--multi-select-option-background-hover);
+$multi-select-option-text-default: var(--multi-select-option-text-default);
+$multi-select-filter-padding: var(--multi-select-filter-padding);
+$multi-select-filter-borderColor: var(--multi-select-filter-borderColor);
+$multi-select-focus-ringWidth: var(--multi-select-focus-ringWidth);
+$multi-select-focus-ringColor: var(--multi-select-focus-ringColor);
+$multi-select-focus-ringOffset: var(--multi-select-focus-ringOffset);
+
+// OrderList
+$orderList-background: var(--orderList-background); // OrderList container background
+$orderList-border-color: var(--orderList-border-color); // Container border color
+$orderList-border-width: var(--orderList-border-width); // Container border width
+$orderList-radius: var(--orderList-radius); // Container border radius
+$orderList-header-background: var(--orderList-header-background); // Header background color
+$orderList-header-padding: var(--orderList-header-padding); // Header padding
+$orderList-header-color: var(--orderList-header-color); // Header text color
+$orderList-header-fontSize: var(--orderList-header-fontSize); // Header font size
+$orderList-header-fontWeight: var(--orderList-header-fontWeight); // Header font weight
+$orderList-header-borderColor: var(--orderList-header-borderColor); // Header border color
+$orderList-list-padding: var(--orderList-list-padding); // List container padding
+$orderList-list-gap: var(--orderList-list-gap); // Gap between list items
+$orderList-item-padding: var(--orderList-item-padding); // Item padding
+$orderList-item-background-default: var(--orderList-item-background-default); // Item default background
+$orderList-item-background-hover: var(--orderList-item-background-hover); // Item hover background
+$orderList-item-background-selected: var(--orderList-item-background-selected); // Item selected background
+$orderList-item-background-dragging: var(--orderList-item-background-dragging); // Item dragging background
+$orderList-item-color: var(--orderList-item-color); // Item text color
+$orderList-item-radius: var(--orderList-item-radius); // Item border radius
+$orderList-item-borderColor-default: var(--orderList-item-borderColor-default); // Item default border
+$orderList-item-borderColor-selected: var(--orderList-item-borderColor-selected); // Item selected border
+$orderList-controls-gap: var(--orderList-controls-gap); // Gap between control buttons
+$orderList-controls-padding: var(--orderList-controls-padding); // Controls area padding
+$orderList-button-size: var(--orderList-button-size); // Button size
+$orderList-button-background-default: var(--orderList-button-background-default); // Button default background
+$orderList-button-background-hover: var(--orderList-button-background-hover); // Button hover background
+$orderList-button-background-disabled: var(--orderList-button-background-disabled); // Button disabled background
+$orderList-button-color-default: var(--orderList-button-color-default); // Button icon color
+$orderList-button-color-disabled: var(--orderList-button-color-disabled); // Button disabled icon color
+$orderList-button-radius: var(--orderList-button-radius); // Button border radius
+$orderList-dragHandle-color: var(--orderList-dragHandle-color); // Drag handle color
+$orderList-dragHandle-size: var(--orderList-dragHandle-size); // Drag handle icon size
+$orderList-transition-duration: var(--orderList-transition-duration); // Animation duration
+
+// OrganizationChart
+$organizationChart-background: var(--organizationChart-background); // Chart container background
+$organizationChart-padding: var(--organizationChart-padding); // Chart container padding
+$organizationChart-node-background-default: var(--organizationChart-node-background-default); // Node default background
+$organizationChart-node-background-hover: var(--organizationChart-node-background-hover); // Node hover background
+$organizationChart-node-background-selected: var(--organizationChart-node-background-selected); // Node selected background
+$organizationChart-node-border-width: var(--organizationChart-node-border-width); // Node border width
+$organizationChart-node-border-color-default: var(--organizationChart-node-border-color-default); // Node default border color
+$organizationChart-node-border-color-hover: var(--organizationChart-node-border-color-hover); // Node hover border color
+$organizationChart-node-border-color-selected: var(--organizationChart-node-border-color-selected); // Node selected border color
+$organizationChart-node-radius: var(--organizationChart-node-radius); // Node border radius
+$organizationChart-node-padding: var(--organizationChart-node-padding); // Node content padding
+$organizationChart-node-shadow-default: var(--organizationChart-node-shadow-default); // Node default shadow
+$organizationChart-node-shadow-hover: var(--organizationChart-node-shadow-hover); // Node hover shadow
+$organizationChart-node-minWidth: var(--organizationChart-node-minWidth); // Node minimum width
+$organizationChart-nodeContent-gap: var(--organizationChart-nodeContent-gap); // Gap between node content elements
+$organizationChart-nodeContent-title-color: var(--organizationChart-nodeContent-title-color); // Node title color
+$organizationChart-nodeContent-title-fontSize: var(--organizationChart-nodeContent-title-fontSize); // Node title font size
+$organizationChart-nodeContent-title-fontWeight: var(--organizationChart-nodeContent-title-fontWeight); // Node title font weight
+$organizationChart-nodeContent-subtitle-color: var(--organizationChart-nodeContent-subtitle-color); // Node subtitle color
+$organizationChart-nodeContent-subtitle-fontSize: var(--organizationChart-nodeContent-subtitle-fontSize); // Node subtitle font size
+$organizationChart-nodeContent-subtitle-fontWeight: var(--organizationChart-nodeContent-subtitle-fontWeight); // Node subtitle font weight
+$organizationChart-connector-color: var(--organizationChart-connector-color); // Connector line color
+$organizationChart-connector-width: var(--organizationChart-connector-width); // Connector line width
+$organizationChart-connector-style: var(--organizationChart-connector-style); // Connector line style
+$organizationChart-spacing-horizontal: var(--organizationChart-spacing-horizontal); // Horizontal spacing between nodes
+$organizationChart-spacing-vertical: var(--organizationChart-spacing-vertical); // Vertical spacing between levels
+$organizationChart-toggleButton-size: var(--organizationChart-toggleButton-size); // Toggle button size
+$organizationChart-toggleButton-background: var(--organizationChart-toggleButton-background); // Toggle button background
+$organizationChart-toggleButton-borderColor: var(--organizationChart-toggleButton-borderColor); // Toggle button border color
+$organizationChart-toggleButton-color: var(--organizationChart-toggleButton-color); // Toggle button icon color
+$organizationChart-toggleButton-radius: var(--organizationChart-toggleButton-radius); // Toggle button border radius
+$organizationChart-transition-duration: var(--organizationChart-transition-duration); // Animation duration
+
+// OverlayPanel
+$overlayPanel-padding-x: var(--overlayPanel-padding-x); // Horizontal padding
+$overlayPanel-padding-y: var(--overlayPanel-padding-y); // Vertical padding
+$overlayPanel-background: var(--overlayPanel-background); // Panel background color
+$overlayPanel-radius: var(--overlayPanel-radius); // Panel border radius
+$overlayPanel-shadow: var(--overlayPanel-shadow); // Panel elevation shadow
+$overlayPanel-border-color: var(--overlayPanel-border-color); // Panel border color
+$overlayPanel-border-width: var(--overlayPanel-border-width); // Panel border width
+$overlayPanel-closeButton-size: var(--overlayPanel-closeButton-size); // Close button size
+$overlayPanel-closeButton-iconSize: var(--overlayPanel-closeButton-iconSize); // Close icon size
+$overlayPanel-closeButton-color-default: var(--overlayPanel-closeButton-color-default); // Close button icon color
+$overlayPanel-closeButton-color-hover: var(--overlayPanel-closeButton-color-hover); // Close button hover color
+$overlayPanel-closeButton-background-hover: var(--overlayPanel-closeButton-background-hover); // Close button hover background
+$overlayPanel-closeButton-radius: var(--overlayPanel-closeButton-radius); // Close button border radius
+$overlayPanel-offset: var(--overlayPanel-offset); // Distance from trigger element
+$overlayPanel-maxWidth: var(--overlayPanel-maxWidth); // Maximum width
+$overlayPanel-zIndex: var(--overlayPanel-zIndex); // Z-index for stacking
+
+// Paginator
+$paginator-background: var(--paginator-background); // Paginator container background
+$paginator-padding: var(--paginator-padding); // Paginator container padding
+$paginator-gap: var(--paginator-gap); // Gap between paginator elements
+$paginator-border-width: var(--paginator-border-width); // Border width
+$paginator-border-color: var(--paginator-border-color); // Border color
+$paginator-border-radius: var(--paginator-border-radius); // Border radius
+$paginator-page-size: var(--paginator-page-size); // Page button size
+$paginator-page-background-default: var(--paginator-page-background-default); // Page button default background
+$paginator-page-background-hover: var(--paginator-page-background-hover); // Page button hover background
+$paginator-page-background-active: var(--paginator-page-background-active); // Active page button background
+$paginator-page-text-default: var(--paginator-page-text-default); // Page button default text color
+$paginator-page-text-hover: var(--paginator-page-text-hover); // Page button hover text color
+$paginator-page-text-active: var(--paginator-page-text-active); // Active page button text color
+$paginator-page-text-disabled: var(--paginator-page-text-disabled); // Disabled page button text color
+$paginator-page-fontSize: var(--paginator-page-fontSize); // Page button font size
+$paginator-page-fontWeight: var(--paginator-page-fontWeight); // Page button font weight
+$paginator-page-radius: var(--paginator-page-radius); // Page button border radius
+$paginator-nav-size: var(--paginator-nav-size); // Navigation button size
+$paginator-nav-background-default: var(--paginator-nav-background-default); // Nav button default background
+$paginator-nav-background-hover: var(--paginator-nav-background-hover); // Nav button hover background
+$paginator-nav-background-disabled: var(--paginator-nav-background-disabled); // Nav button disabled background
+$paginator-nav-icon-color-default: var(--paginator-nav-icon-color-default); // Nav icon default color
+$paginator-nav-icon-color-hover: var(--paginator-nav-icon-color-hover); // Nav icon hover color
+$paginator-nav-icon-color-disabled: var(--paginator-nav-icon-color-disabled); // Nav icon disabled color
+$paginator-nav-icon-size: var(--paginator-nav-icon-size); // Nav icon size
+$paginator-nav-radius: var(--paginator-nav-radius); // Nav button border radius
+$paginator-info-color: var(--paginator-info-color); // Info text color
+$paginator-info-fontSize: var(--paginator-info-fontSize); // Info text font size
+$paginator-focus-ringColor: var(--paginator-focus-ringColor); // Focus ring color
+$paginator-focus-ringWidth: var(--paginator-focus-ringWidth); // Focus ring width
+$paginator-focus-ringOffset: var(--paginator-focus-ringOffset); // Focus ring offset
+$paginator-transition-duration: var(--paginator-transition-duration); // Transition duration
+
+// Panel
+$panel-background: var(--panel-background); // Panel background color
+$panel-border-color: var(--panel-border-color); // Panel border color
+$panel-border-width: var(--panel-border-width); // Panel border width
+$panel-radius: var(--panel-radius); // Panel border radius
+$panel-header-padding: var(--panel-header-padding); // Header section padding
+$panel-header-background-default: var(--panel-header-background-default); // Header background
+$panel-header-background-hover: var(--panel-header-background-hover); // Header hover background when toggleable
+$panel-header-color: var(--panel-header-color); // Header text color
+$panel-header-borderColor: var(--panel-header-borderColor); // Header bottom border color
+$panel-header-fontSize: var(--panel-header-fontSize); // Header font size
+$panel-header-fontWeight: var(--panel-header-fontWeight); // Header font weight
+$panel-content-padding: var(--panel-content-padding); // Content area padding
+$panel-content-background: var(--panel-content-background); // Content background
+$panel-content-color: var(--panel-content-color); // Content text color
+$panel-icon-size: var(--panel-icon-size); // Toggle icon size
+$panel-icon-color-default: var(--panel-icon-color-default); // Icon color
+$panel-icon-color-hover: var(--panel-icon-color-hover); // Icon color on hover
+$panel-icon-rotation-collapsed: var(--panel-icon-rotation-collapsed); // Icon rotation when collapsed
+$panel-icon-rotation-expanded: var(--panel-icon-rotation-expanded); // Icon rotation when expanded
+$panel-transition-duration: var(--panel-transition-duration); // Animation duration
+
+// Panelmenu
+$panelmenu-background: var(--panelmenu-background); // PanelMenu background
+$panelmenu-border-width: var(--panelmenu-border-width); // Border width
+$panelmenu-border-color: var(--panelmenu-border-color); // Border color
+$panelmenu-border-radius: var(--panelmenu-border-radius); // Border radius
+$panelmenu-gap: var(--panelmenu-gap); // Gap between panels
+$panelmenu-header-padding: var(--panelmenu-header-padding); // Panel header padding
+$panelmenu-header-background-default: var(--panelmenu-header-background-default); // Header background
+$panelmenu-header-background-hover: var(--panelmenu-header-background-hover); // Header background on hover
+$panelmenu-header-background-active: var(--panelmenu-header-background-active); // Header background when expanded
+$panelmenu-header-color-default: var(--panelmenu-header-color-default); // Header text color
+$panelmenu-header-color-hover: var(--panelmenu-header-color-hover); // Header text color on hover
+$panelmenu-header-color-disabled: var(--panelmenu-header-color-disabled); // Header text color when disabled
+$panelmenu-content-padding: var(--panelmenu-content-padding); // Content area padding
+$panelmenu-content-background: var(--panelmenu-content-background); // Content background
+$panelmenu-item-padding: var(--panelmenu-item-padding); // Menu item padding
+$panelmenu-item-gap: var(--panelmenu-item-gap); // Gap between icon and label
+$panelmenu-item-color-default: var(--panelmenu-item-color-default); // Item text color
+$panelmenu-item-color-hover: var(--panelmenu-item-color-hover); // Item text color on hover
+$panelmenu-item-color-active: var(--panelmenu-item-color-active); // Active item text color
+$panelmenu-item-color-disabled: var(--panelmenu-item-color-disabled); // Disabled item text color
+$panelmenu-item-background-default: var(--panelmenu-item-background-default); // Item background
+$panelmenu-item-background-hover: var(--panelmenu-item-background-hover); // Item background on hover
+$panelmenu-item-background-active: var(--panelmenu-item-background-active); // Active item background
+$panelmenu-item-indent: var(--panelmenu-item-indent); // Indent for nested items
+$panelmenu-icon-size: var(--panelmenu-icon-size); // Icon size
+$panelmenu-icon-color-default: var(--panelmenu-icon-color-default); // Icon color
+$panelmenu-icon-color-hover: var(--panelmenu-icon-color-hover); // Icon color on hover
+$panelmenu-icon-rotation-collapsed: var(--panelmenu-icon-rotation-collapsed); // Chevron rotation when collapsed
+$panelmenu-icon-rotation-expanded: var(--panelmenu-icon-rotation-expanded); // Chevron rotation when expanded
+$panelmenu-separator-color: var(--panelmenu-separator-color); // Separator color
+$panelmenu-separator-margin: var(--panelmenu-separator-margin); // Separator margin
+$panelmenu-transition-duration: var(--panelmenu-transition-duration); // Animation duration
+
+// Picklist
+$picklist-padding: var(--picklist-padding); // Container padding
+$picklist-gap: var(--picklist-gap); // Gap between source, controls, and target
+$picklist-radius: var(--picklist-radius); // Container border radius
+$picklist-border-width: var(--picklist-border-width);
+$picklist-border-color-default: var(--picklist-border-color-default); // Default border color
+$picklist-border-color-disabled: var(--picklist-border-color-disabled); // Disabled border color
+$picklist-background-default: var(--picklist-background-default); // Default background
+$picklist-background-disabled: var(--picklist-background-disabled); // Disabled background
+$picklist-list-minHeight: var(--picklist-list-minHeight); // Minimum height of list panels
+$picklist-list-maxHeight: var(--picklist-list-maxHeight); // Maximum height before scrolling
+$picklist-list-padding: var(--picklist-list-padding);
+$picklist-header-padding-x: var(--picklist-header-padding-x);
+$picklist-header-padding-y: var(--picklist-header-padding-y);
+$picklist-header-background: var(--picklist-header-background);
+$picklist-header-text: var(--picklist-header-text);
+$picklist-header-borderColor: var(--picklist-header-borderColor);
+$picklist-item-padding-x: var(--picklist-item-padding-x);
+$picklist-item-padding-y: var(--picklist-item-padding-y);
+$picklist-item-radius: var(--picklist-item-radius);
+$picklist-item-background-default: var(--picklist-item-background-default);
+$picklist-item-background-hover: var(--picklist-item-background-hover);
+$picklist-item-background-selected: var(--picklist-item-background-selected);
+$picklist-item-text-default: var(--picklist-item-text-default);
+$picklist-item-text-selected: var(--picklist-item-text-selected);
+$picklist-controls-gap: var(--picklist-controls-gap);
+$picklist-controls-button-size: var(--picklist-controls-button-size);
+$picklist-controls-button-background-default: var(--picklist-controls-button-background-default);
+$picklist-controls-button-background-hover: var(--picklist-controls-button-background-hover);
+$picklist-controls-button-background-disabled: var(--picklist-controls-button-background-disabled);
+$picklist-controls-button-border: var(--picklist-controls-button-border);
+$picklist-controls-button-icon-default: var(--picklist-controls-button-icon-default);
+$picklist-controls-button-icon-disabled: var(--picklist-controls-button-icon-disabled);
+$picklist-controls-button-radius: var(--picklist-controls-button-radius);
+$picklist-focus-ringWidth: var(--picklist-focus-ringWidth);
+$picklist-focus-ringColor: var(--picklist-focus-ringColor);
+$picklist-focus-ringOffset: var(--picklist-focus-ringOffset);
+
+// Popover
+$popover-padding-x: var(--popover-padding-x); // Horizontal padding
+$popover-padding-y: var(--popover-padding-y); // Vertical padding
+$popover-background: var(--popover-background); // Popover background color
+$popover-radius: var(--popover-radius); // Popover border radius
+$popover-shadow: var(--popover-shadow); // Popover elevation shadow
+$popover-border-color: var(--popover-border-color); // Popover border color
+$popover-border-width: var(--popover-border-width); // Popover border width
+$popover-arrow-size: var(--popover-arrow-size); // Arrow/pointer size
+$popover-offset: var(--popover-offset); // Distance from trigger element
+$popover-maxWidth: var(--popover-maxWidth); // Maximum width
+$popover-zIndex: var(--popover-zIndex); // Z-index for stacking
+
+// Progress-bar
+$progress-bar-track-height: var(--progress-bar-track-height);
+$progress-bar-track-background: var(--progress-bar-track-background); // Track background - semi-transparent for dark backgrounds
+$progress-bar-track-radius: var(--progress-bar-track-radius);
+$progress-bar-fill-background: var(--progress-bar-fill-background); // Fill color - visible accent
+$progress-bar-label-color: var(--progress-bar-label-color); // Label text on fill
+
+// Progress-spinner
+$progress-spinner-size: var(--progress-spinner-size); // Default spinner size (width and height)
+$progress-spinner-strokeWidth: var(--progress-spinner-strokeWidth); // Stroke width of the spinner circle
+$progress-spinner-color: var(--progress-spinner-color); // Spinner stroke color
+$progress-spinner-fill: var(--progress-spinner-fill); // Spinner fill color (typically transparent)
+$progress-spinner-animation-duration: var(--progress-spinner-animation-duration); // Duration of the spinner animation
+$progress-spinner-track-color: var(--progress-spinner-track-color); // Background track circle color
+
+// PromotionFooter
+$promotionFooter-background: var(--promotionFooter-background); // Slim bar background (matches page; separated by the top rule)
+$promotionFooter-border: var(--promotionFooter-border); // Divider above the slim bar
+$promotionFooter-heading: var(--promotionFooter-heading); // Brand text
+$promotionFooter-textMuted: var(--promotionFooter-textMuted); // Copyright text
+$promotionFooter-focusRing: var(--promotionFooter-focusRing); // Focus outline colour
+$promotionFooter-maxWidth: var(--promotionFooter-maxWidth); // Inner content max width
+$promotionFooter-paddingX: var(--promotionFooter-paddingX); // Horizontal inset
+$promotionFooter-gap: var(--promotionFooter-gap); // Gap between slim-bar items
+$promotionFooter-height: var(--promotionFooter-height); // Slim bar min-height
+$promotionFooter-link-text: var(--promotionFooter-link-text); // Slim-bar link colour
+$promotionFooter-link-hover: var(--promotionFooter-link-hover); // Slim-bar link hover colour
+$promotionFooter-band-background: var(--promotionFooter-band-background); // Conversion band background — strong surface for emphasis
+$promotionFooter-band-title: var(--promotionFooter-band-title); // Conversion band headline (on inverse surface)
+$promotionFooter-band-height: var(--promotionFooter-band-height); // Conversion band min-height
+$promotionFooter-band-gap: var(--promotionFooter-band-gap); // Gap between headline and CTA
+$promotionFooter-cta-background: var(--promotionFooter-cta-background); // Band CTA background — light button on the inverse band
+$promotionFooter-cta-hover: var(--promotionFooter-cta-hover); // Band CTA hover
+$promotionFooter-cta-text: var(--promotionFooter-cta-text); // Band CTA label
+$promotionFooter-cta-radius: var(--promotionFooter-cta-radius); // Band CTA radius (pill)
+$promotionFooter-cta-paddingX: var(--promotionFooter-cta-paddingX); // Band CTA horizontal padding
+$promotionFooter-cta-paddingY: var(--promotionFooter-cta-paddingY); // Band CTA vertical padding
+
+// PromotionHeader
+$promotionHeader-background: var(--promotionHeader-background); // Header background
+$promotionHeader-text: var(--promotionHeader-text); // Header text
+$promotionHeader-border: var(--promotionHeader-border); // Hairline under the header
+$promotionHeader-shadow: var(--promotionHeader-shadow); // Header elevation
+$promotionHeader-height: var(--promotionHeader-height); // Main bar min-height
+$promotionHeader-maxWidth: var(--promotionHeader-maxWidth); // Inner content max width
+$promotionHeader-paddingX: var(--promotionHeader-paddingX); // Horizontal inset
+$promotionHeader-gap: var(--promotionHeader-gap); // Gap between header items
+$promotionHeader-focusRing: var(--promotionHeader-focusRing); // Focus outline colour
+$promotionHeader-link-text: var(--promotionHeader-link-text); // Anchor link colour
+$promotionHeader-link-hover: var(--promotionHeader-link-hover); // Anchor link hover colour
+$promotionHeader-link-radius: var(--promotionHeader-link-radius); // Link radius
+$promotionHeader-link-paddingX: var(--promotionHeader-link-paddingX); // Link horizontal padding
+$promotionHeader-link-paddingY: var(--promotionHeader-link-paddingY); // Link vertical padding
+$promotionHeader-cta-background: var(--promotionHeader-cta-background); // CTA background
+$promotionHeader-cta-hover: var(--promotionHeader-cta-hover); // CTA hover background
+$promotionHeader-cta-text: var(--promotionHeader-cta-text); // CTA label colour
+$promotionHeader-cta-radius: var(--promotionHeader-cta-radius); // CTA radius (pill)
+$promotionHeader-cta-paddingX: var(--promotionHeader-cta-paddingX); // CTA horizontal padding
+$promotionHeader-cta-paddingY: var(--promotionHeader-cta-paddingY); // CTA vertical padding
+$promotionHeader-announcement-background: var(--promotionHeader-announcement-background); // Announcement bar background
+$promotionHeader-announcement-text: var(--promotionHeader-announcement-text); // Announcement bar text
+$promotionHeader-announcement-height: var(--promotionHeader-announcement-height); // Announcement bar min-height
+
+// Radio
+$radio-size-sm: var(--radio-size-sm); // Small radio
+$radio-size-md: var(--radio-size-md); // Medium radio (default)
+$radio-size-lg: var(--radio-size-lg); // Large radio
+$radio-dotSize-sm: var(--radio-dotSize-sm);
+$radio-dotSize-md: var(--radio-dotSize-md);
+$radio-dotSize-lg: var(--radio-dotSize-lg);
+$radio-border-width: var(--radio-border-width);
+$radio-border-color-default: var(--radio-border-color-default); // Default unchecked border
+$radio-border-color-hover: var(--radio-border-color-hover);
+$radio-border-color-checked: var(--radio-border-color-checked); // Accent color when checked
+$radio-border-color-focus: var(--radio-border-color-focus);
+$radio-border-color-disabled: var(--radio-border-color-disabled);
+$radio-border-color-error: var(--radio-border-color-error);
+$radio-border-color-checkedHover: var(--radio-border-color-checkedHover); // Checked + hover — keeps filled look so the indicator stays visible (WCAG 1.4.11)
+$radio-background-default: var(--radio-background-default); // Transparent to inherit page background
+$radio-background-checked: var(--radio-background-checked); // Brand accent when checked
+$radio-background-disabled: var(--radio-background-disabled);
+$radio-background-hover: var(--radio-background-hover);
+$radio-background-checkedHover: var(--radio-background-checkedHover); // Checked + hover — keeps filled bg so the indicator inside remains legible
+$radio-dot-color: var(--radio-dot-color);
+$radio-label-gap: var(--radio-label-gap);
+$radio-label-color-default: var(--radio-label-color-default);
+$radio-label-color-disabled: var(--radio-label-color-disabled);
+$radio-focus-ringWidth: var(--radio-focus-ringWidth);
+$radio-focus-ringColor: var(--radio-focus-ringColor);
+$radio-focus-ringOffset: var(--radio-focus-ringOffset);
+
+// Rating
+$rating-star-size: var(--rating-star-size); // Size of each star icon
+$rating-star-gap: var(--rating-star-gap); // Gap between stars
+$rating-star-color-default: var(--rating-star-color-default); // Empty star color
+$rating-star-color-active: var(--rating-star-color-active); // Filled/active star color
+$rating-star-color-hover: var(--rating-star-color-hover); // Star hover color
+$rating-star-color-disabled: var(--rating-star-color-disabled); // Disabled star color
+$rating-star-color-disabledActive: var(--rating-star-color-disabledActive); // Disabled active star color
+$rating-cancel-size: var(--rating-cancel-size); // Size of cancel button icon
+$rating-cancel-color-default: var(--rating-cancel-color-default); // Cancel button default color
+$rating-cancel-color-hover: var(--rating-cancel-color-hover); // Cancel button hover color
+$rating-focus-ringWidth: var(--rating-focus-ringWidth);
+$rating-focus-ringColor: var(--rating-focus-ringColor);
+$rating-focus-ringOffset: var(--rating-focus-ringOffset);
+
+// RelationMatrix
+$relationMatrix-table-background: var(--relationMatrix-table-background); // Matrix outer table background
+$relationMatrix-table-borderColor: var(--relationMatrix-table-borderColor); // Matrix outer border
+$relationMatrix-table-borderRadius: var(--relationMatrix-table-borderRadius); // Matrix outer corner radius
+$relationMatrix-header-background: var(--relationMatrix-header-background); // Column-header row background
+$relationMatrix-header-color: var(--relationMatrix-header-color); // Column-header text colour
+$relationMatrix-header-fontWeight: var(--relationMatrix-header-fontWeight); // Column-header weight
+$relationMatrix-header-letterSpacing: var(--relationMatrix-header-letterSpacing); // Column-header tracking
+$relationMatrix-header-textTransform: var(--relationMatrix-header-textTransform); // Column-header case
+$relationMatrix-header-padding-x: var(--relationMatrix-header-padding-x); // Column-header horizontal padding
+$relationMatrix-header-padding-y: var(--relationMatrix-header-padding-y); // Column-header vertical padding
+$relationMatrix-header-borderColor: var(--relationMatrix-header-borderColor); // Border under the column-header row
+$relationMatrix-rowHeader-background: var(--relationMatrix-rowHeader-background); // Row-header column background
+$relationMatrix-rowHeader-color: var(--relationMatrix-rowHeader-color); // Row-header text colour
+$relationMatrix-rowHeader-fontWeight: var(--relationMatrix-rowHeader-fontWeight); // Row-header weight
+$relationMatrix-rowHeader-padding-x: var(--relationMatrix-rowHeader-padding-x); // Row-header horizontal padding
+$relationMatrix-rowHeader-padding-y: var(--relationMatrix-rowHeader-padding-y); // Row-header vertical padding
+$relationMatrix-cell-padding-x: var(--relationMatrix-cell-padding-x); // Cell horizontal padding
+$relationMatrix-cell-padding-y: var(--relationMatrix-cell-padding-y); // Cell vertical padding
+$relationMatrix-cell-borderColor: var(--relationMatrix-cell-borderColor); // Inner grid lines between cells
+$relationMatrix-cell-background-default: var(--relationMatrix-cell-background-default); // Cell background when no legend value is set (or value not found)
+$relationMatrix-cell-background-neutral: var(--relationMatrix-cell-background-neutral); // Cell background — neutral tone
+$relationMatrix-cell-background-success: var(--relationMatrix-cell-background-success); // Cell background — success tone
+$relationMatrix-cell-background-warning: var(--relationMatrix-cell-background-warning); // Cell background — warning tone
+$relationMatrix-cell-background-danger: var(--relationMatrix-cell-background-danger); // Cell background — danger tone
+$relationMatrix-cell-background-info: var(--relationMatrix-cell-background-info); // Cell background — info tone
+$relationMatrix-cell-glyph-default: var(--relationMatrix-cell-glyph-default); // Glyph/text colour — empty cell
+$relationMatrix-cell-glyph-neutral: var(--relationMatrix-cell-glyph-neutral); // Glyph/text colour — neutral tone
+$relationMatrix-cell-glyph-success: var(--relationMatrix-cell-glyph-success); // Glyph/text colour — success tone
+$relationMatrix-cell-glyph-warning: var(--relationMatrix-cell-glyph-warning); // Glyph/text colour — warning tone
+$relationMatrix-cell-glyph-danger: var(--relationMatrix-cell-glyph-danger); // Glyph/text colour — danger tone
+$relationMatrix-cell-glyph-info: var(--relationMatrix-cell-glyph-info); // Glyph/text colour — info tone
+$relationMatrix-cell-hoverBackground: var(--relationMatrix-cell-hoverBackground); // Cell hover background — only when interactive
+$relationMatrix-cell-focusOutline: var(--relationMatrix-cell-focusOutline); // Cell focus outline colour — only when interactive
+$relationMatrix-legend-color: var(--relationMatrix-legend-color); // Legend label colour
+$relationMatrix-legend-fontSize: var(--relationMatrix-legend-fontSize); // Legend label size
+$relationMatrix-legend-gap: var(--relationMatrix-legend-gap); // Gap between legend items
+$relationMatrix-legend-swatchSize: var(--relationMatrix-legend-swatchSize); // Legend tone-swatch box size
+$relationMatrix-legend-swatchRadius: var(--relationMatrix-legend-swatchRadius); // Legend swatch corner radius
+$relationMatrix-legend-marginTop: var(--relationMatrix-legend-marginTop); // Space between matrix and legend
+$relationMatrix-size-sm-cellMinHeight: var(--relationMatrix-size-sm-cellMinHeight); // Cell minimum row height — small
+$relationMatrix-size-sm-glyphSize: var(--relationMatrix-size-sm-glyphSize); // Cell glyph font-size — small
+$relationMatrix-size-sm-fontSize: var(--relationMatrix-size-sm-fontSize); // Cell text font-size — small
+$relationMatrix-size-md-cellMinHeight: var(--relationMatrix-size-md-cellMinHeight); // Cell minimum row height — medium
+$relationMatrix-size-md-glyphSize: var(--relationMatrix-size-md-glyphSize); // Cell glyph font-size — medium
+$relationMatrix-size-md-fontSize: var(--relationMatrix-size-md-fontSize); // Cell text font-size — medium
+$relationMatrix-size-lg-cellMinHeight: var(--relationMatrix-size-lg-cellMinHeight); // Cell minimum row height — large
+$relationMatrix-size-lg-glyphSize: var(--relationMatrix-size-lg-glyphSize); // Cell glyph font-size — large
+$relationMatrix-size-lg-fontSize: var(--relationMatrix-size-lg-fontSize); // Cell text font-size — large
+
+// Row
+$row-background-default: var(--row-background-default); // Default row background
+$row-background-hover: var(--row-background-hover); // Row background on hover
+$row-background-selected: var(--row-background-selected); // Selected row background
+$row-background-striped: var(--row-background-striped); // Striped row background (alternate)
+$row-text-default: var(--row-text-default); // Row text color
+$row-border-color: var(--row-border-color); // Row border color
+$row-border-width: var(--row-border-width); // Row border width
+$row-padding-x: var(--row-padding-x); // Horizontal cell padding
+$row-padding-y: var(--row-padding-y); // Vertical cell padding
+$row-height: var(--row-height); // Minimum row height
+
+// Scroll-panel
+$scroll-panel-background: var(--scroll-panel-background); // Scroll panel container background
+$scroll-panel-scrollbar-size: var(--scroll-panel-scrollbar-size); // Scrollbar track width/height
+$scroll-panel-scrollbar-padding: var(--scroll-panel-scrollbar-padding); // Padding around scrollbar
+$scroll-panel-scrollbar-track-background: var(--scroll-panel-scrollbar-track-background); // Scrollbar track background
+$scroll-panel-scrollbar-track-radius: var(--scroll-panel-scrollbar-track-radius); // Scrollbar track border radius
+$scroll-panel-scrollbar-thumb-background-default: var(--scroll-panel-scrollbar-thumb-background-default); // Scrollbar thumb — #737373, ~4.8:1 vs white canvas (WCAG 1.4.11 ≥3:1)
+$scroll-panel-scrollbar-thumb-background-hover: var(--scroll-panel-scrollbar-thumb-background-hover); // Scrollbar thumb hover — darker for affordance
+$scroll-panel-scrollbar-thumb-background-active: var(--scroll-panel-scrollbar-thumb-background-active); // Scrollbar thumb active — darkest grade
+$scroll-panel-scrollbar-thumb-radius: var(--scroll-panel-scrollbar-thumb-radius); // Scrollbar thumb border radius
+$scroll-panel-scrollbar-thumb-minSize: var(--scroll-panel-scrollbar-thumb-minSize); // Minimum scrollbar thumb size
+$scroll-panel-transition-duration: var(--scroll-panel-transition-duration); // Scrollbar visibility transition
+
+// Scroll-top
+$scroll-top-size: var(--scroll-top-size); // Size of the scroll top button
+$scroll-top-background-default: var(--scroll-top-background-default); // Default background color
+$scroll-top-background-hover: var(--scroll-top-background-hover); // Hover background color
+$scroll-top-background-active: var(--scroll-top-background-active); // Active background color
+$scroll-top-icon-color: var(--scroll-top-icon-color); // Icon color
+$scroll-top-icon-size: var(--scroll-top-icon-size); // Icon size
+$scroll-top-radius: var(--scroll-top-radius); // Border radius (circular by default)
+$scroll-top-shadow: var(--scroll-top-shadow); // Box shadow for elevation
+$scroll-top-position-bottom: var(--scroll-top-position-bottom); // Distance from bottom of viewport
+$scroll-top-position-right: var(--scroll-top-position-right); // Distance from right of viewport
+$scroll-top-transition-duration: var(--scroll-top-transition-duration); // Transition duration for visibility
+$scroll-top-focus-ringColor: var(--scroll-top-focus-ringColor); // Focus ring color
+$scroll-top-focus-ringWidth: var(--scroll-top-focus-ringWidth); // Focus ring width
+$scroll-top-focus-ringOffset: var(--scroll-top-focus-ringOffset); // Focus ring offset
+
+// Select
+$select-height-sm: var(--select-height-sm);
+$select-height-md: var(--select-height-md);
+$select-height-lg: var(--select-height-lg);
+$select-padding-x: var(--select-padding-x);
+$select-padding-y: var(--select-padding-y);
+$select-fontSize-sm: var(--select-fontSize-sm);
+$select-fontSize-md: var(--select-fontSize-md);
+$select-fontSize-lg: var(--select-fontSize-lg);
+$select-radius: var(--select-radius);
+$select-border-width: var(--select-border-width);
+$select-border-color-default: var(--select-border-color-default);
+$select-border-color-hover: var(--select-border-color-hover);
+$select-border-color-focus: var(--select-border-color-focus);
+$select-border-color-disabled: var(--select-border-color-disabled);
+$select-border-color-error: var(--select-border-color-error);
+$select-background-default: var(--select-background-default);
+$select-background-disabled: var(--select-background-disabled);
+$select-background-hover: var(--select-background-hover);
+$select-text-default: var(--select-text-default);
+$select-text-placeholder: var(--select-text-placeholder);
+$select-text-disabled: var(--select-text-disabled);
+$select-icon-size: var(--select-icon-size);
+$select-icon-color-default: var(--select-icon-color-default);
+$select-icon-color-disabled: var(--select-icon-color-disabled);
+$select-dropdown-background: var(--select-dropdown-background);
+$select-dropdown-border: var(--select-dropdown-border);
+$select-dropdown-shadow: var(--select-dropdown-shadow);
+$select-dropdown-radius: var(--select-dropdown-radius);
+$select-dropdown-maxHeight: var(--select-dropdown-maxHeight);
+$select-option-padding-x: var(--select-option-padding-x);
+$select-option-padding-y: var(--select-option-padding-y);
+$select-option-background-default: var(--select-option-background-default);
+$select-option-background-hover: var(--select-option-background-hover);
+$select-option-background-selected: var(--select-option-background-selected);
+$select-option-text-default: var(--select-option-text-default);
+$select-option-text-selected: var(--select-option-text-selected);
+$select-focus-ringWidth: var(--select-focus-ringWidth);
+$select-focus-ringColor: var(--select-focus-ringColor);
+$select-focus-ringOffset: var(--select-focus-ringOffset);
+
+// SelectButton
+$selectButton-gap: var(--selectButton-gap); // Gap between option buttons
+$selectButton-padding-x: var(--selectButton-padding-x); // Horizontal padding for option buttons
+$selectButton-padding-y: var(--selectButton-padding-y); // Vertical padding for option buttons
+$selectButton-radius: var(--selectButton-radius); // Border radius for option buttons
+$selectButton-border-width: var(--selectButton-border-width); // Border width for option buttons
+$selectButton-border-color-default: var(--selectButton-border-color-default); // Default border color
+$selectButton-border-color-hover: var(--selectButton-border-color-hover); // Hover border color
+$selectButton-border-color-selected: var(--selectButton-border-color-selected); // Selected border color
+$selectButton-border-color-disabled: var(--selectButton-border-color-disabled); // Disabled border color
+$selectButton-background-default: var(--selectButton-background-default); // Default background color
+$selectButton-background-hover: var(--selectButton-background-hover); // Hover background color
+$selectButton-background-selected: var(--selectButton-background-selected); // Selected background color
+$selectButton-background-disabled: var(--selectButton-background-disabled); // Disabled background color
+$selectButton-text-default: var(--selectButton-text-default); // Default text color
+$selectButton-text-hover: var(--selectButton-text-hover); // Hover text color
+$selectButton-text-selected: var(--selectButton-text-selected); // Selected text color
+$selectButton-text-disabled: var(--selectButton-text-disabled); // Disabled text color
+$selectButton-focus-ringWidth: var(--selectButton-focus-ringWidth); // Focus ring width
+$selectButton-focus-ringColor: var(--selectButton-focus-ringColor); // Focus ring color
+$selectButton-focus-ringOffset: var(--selectButton-focus-ringOffset); // Focus ring offset
+$selectButton-fontSize: var(--selectButton-fontSize); // Font size for option text
+$selectButton-fontWeight-default: var(--selectButton-fontWeight-default); // Default font weight
+$selectButton-fontWeight-selected: var(--selectButton-fontWeight-selected); // Selected font weight
+$selectButton-minHeight: var(--selectButton-minHeight); // Minimum height of option buttons
+$selectButton-transition-duration: var(--selectButton-transition-duration); // Transition duration for state changes
+
+// Sidebar
+$sidebar-background: var(--sidebar-background); // Sidebar background color
+$sidebar-border-color: var(--sidebar-border-color); // Sidebar border color
+$sidebar-border-width: var(--sidebar-border-width); // Sidebar border width
+$sidebar-shadow: var(--sidebar-shadow); // Sidebar shadow
+$sidebar-header-padding: var(--sidebar-header-padding); // Header section padding
+$sidebar-header-background: var(--sidebar-header-background); // Header background
+$sidebar-header-borderColor: var(--sidebar-header-borderColor); // Header bottom border color
+$sidebar-header-title-color: var(--sidebar-header-title-color); // Header title text color
+$sidebar-header-title-fontSize: var(--sidebar-header-title-fontSize); // Header title font size
+$sidebar-header-title-fontWeight: var(--sidebar-header-title-fontWeight); // Header title font weight
+$sidebar-content-padding: var(--sidebar-content-padding); // Content area padding
+$sidebar-content-color: var(--sidebar-content-color); // Content text color
+$sidebar-closeButton-size: var(--sidebar-closeButton-size); // Close button size
+$sidebar-closeButton-iconSize: var(--sidebar-closeButton-iconSize); // Close icon size
+$sidebar-closeButton-color-default: var(--sidebar-closeButton-color-default); // Close button icon color
+$sidebar-closeButton-color-hover: var(--sidebar-closeButton-color-hover); // Close button hover color
+$sidebar-closeButton-background-hover: var(--sidebar-closeButton-background-hover); // Close button hover background
+$sidebar-closeButton-radius: var(--sidebar-closeButton-radius); // Close button border radius
+$sidebar-overlay-background: var(--sidebar-overlay-background); // Overlay backdrop color
+$sidebar-width-default: var(--sidebar-width-default); // Default sidebar width
+$sidebar-width-fullScreen: var(--sidebar-width-fullScreen); // Full screen width
+$sidebar-zIndex-overlay: var(--sidebar-zIndex-overlay); // Overlay z-index
+$sidebar-zIndex-sidebar: var(--sidebar-zIndex-sidebar); // Sidebar z-index
+$sidebar-transition-duration: var(--sidebar-transition-duration); // Slide animation duration
+
+// Skeleton
+$skeleton-background: var(--skeleton-background); // Base skeleton background color
+$skeleton-highlight: var(--skeleton-highlight); // Animation highlight/shimmer color
+$skeleton-radius: var(--skeleton-radius); // Default border radius for rectangle skeleton
+$skeleton-animation-duration: var(--skeleton-animation-duration); // Wave animation duration
+
+// Slider
+$slider-track-height: var(--slider-track-height);
+$slider-track-background-default: var(--slider-track-background-default); // Inactive track — #737373, ~4.8:1 vs white canvas (WCAG 1.4.11 ≥3:1)
+$slider-track-background-fill: var(--slider-track-background-fill); // Active/filled track — primary action navy, ~14:1 vs white canvas
+$slider-track-background-disabled: var(--slider-track-background-disabled); // Disabled track — exempt from 1.4.11
+$slider-track-radius: var(--slider-track-radius);
+$slider-thumb-size: var(--slider-thumb-size);
+$slider-thumb-background-default: var(--slider-thumb-background-default); // Thumb — primary action navy, ~14:1 vs canvas, ≥3:1 vs the inactive-grey track
+$slider-thumb-background-hover: var(--slider-thumb-background-hover); // Thumb hover — lifted navy
+$slider-thumb-background-disabled: var(--slider-thumb-background-disabled); // Disabled thumb — exempt from 1.4.11
+$slider-thumb-border-width: var(--slider-thumb-border-width);
+$slider-thumb-border-color: var(--slider-thumb-border-color);
+$slider-thumb-shadow: var(--slider-thumb-shadow);
+$slider-focus-ringWidth: var(--slider-focus-ringWidth);
+$slider-focus-ringColor: var(--slider-focus-ringColor);
+$slider-focus-ringOffset: var(--slider-focus-ringOffset);
+
+// Speed-dial
+$speed-dial-button-size: var(--speed-dial-button-size);
+$speed-dial-button-background-default: var(--speed-dial-button-background-default);
+$speed-dial-button-background-hover: var(--speed-dial-button-background-hover);
+$speed-dial-button-background-active: var(--speed-dial-button-background-active);
+$speed-dial-button-color: var(--speed-dial-button-color);
+$speed-dial-button-radius: var(--speed-dial-button-radius);
+$speed-dial-button-shadow: var(--speed-dial-button-shadow);
+$speed-dial-button-iconSize: var(--speed-dial-button-iconSize);
+$speed-dial-action-size: var(--speed-dial-action-size);
+$speed-dial-action-background-default: var(--speed-dial-action-background-default);
+$speed-dial-action-background-hover: var(--speed-dial-action-background-hover);
+$speed-dial-action-color-default: var(--speed-dial-action-color-default);
+$speed-dial-action-color-hover: var(--speed-dial-action-color-hover);
+$speed-dial-action-border-width: var(--speed-dial-action-border-width);
+$speed-dial-action-border-color: var(--speed-dial-action-border-color);
+$speed-dial-action-radius: var(--speed-dial-action-radius);
+$speed-dial-action-shadow: var(--speed-dial-action-shadow);
+$speed-dial-action-iconSize: var(--speed-dial-action-iconSize);
+$speed-dial-action-gap: var(--speed-dial-action-gap);
+$speed-dial-label-background: var(--speed-dial-label-background);
+$speed-dial-label-color: var(--speed-dial-label-color);
+$speed-dial-label-padding-x: var(--speed-dial-label-padding-x);
+$speed-dial-label-padding-y: var(--speed-dial-label-padding-y);
+$speed-dial-label-radius: var(--speed-dial-label-radius);
+$speed-dial-label-fontSize: var(--speed-dial-label-fontSize);
+$speed-dial-label-offset: var(--speed-dial-label-offset);
+$speed-dial-focus-ringColor: var(--speed-dial-focus-ringColor);
+$speed-dial-focus-ringWidth: var(--speed-dial-focus-ringWidth);
+$speed-dial-focus-ringOffset: var(--speed-dial-focus-ringOffset);
+$speed-dial-transition-duration: var(--speed-dial-transition-duration);
+
+// Split-button
+$split-button-background-primary-default: var(--split-button-background-primary-default);
+$split-button-background-primary-hover: var(--split-button-background-primary-hover);
+$split-button-background-primary-active: var(--split-button-background-primary-active);
+$split-button-background-primary-disabled: var(--split-button-background-primary-disabled);
+$split-button-background-secondary-default: var(--split-button-background-secondary-default);
+$split-button-background-secondary-hover: var(--split-button-background-secondary-hover);
+$split-button-background-secondary-active: var(--split-button-background-secondary-active);
+$split-button-background-secondary-disabled: var(--split-button-background-secondary-disabled);
+$split-button-background-outlined-default: var(--split-button-background-outlined-default);
+$split-button-background-outlined-hover: var(--split-button-background-outlined-hover);
+$split-button-background-outlined-active: var(--split-button-background-outlined-active);
+$split-button-background-outlined-disabled: var(--split-button-background-outlined-disabled);
+$split-button-text-primary-default: var(--split-button-text-primary-default);
+$split-button-text-primary-disabled: var(--split-button-text-primary-disabled);
+$split-button-text-secondary-default: var(--split-button-text-secondary-default);
+$split-button-text-secondary-disabled: var(--split-button-text-secondary-disabled);
+$split-button-text-outlined-default: var(--split-button-text-outlined-default);
+$split-button-text-outlined-disabled: var(--split-button-text-outlined-disabled);
+$split-button-border-primary-default: var(--split-button-border-primary-default);
+$split-button-border-primary-hover: var(--split-button-border-primary-hover);
+$split-button-border-primary-disabled: var(--split-button-border-primary-disabled);
+$split-button-border-secondary-default: var(--split-button-border-secondary-default);
+$split-button-border-secondary-hover: var(--split-button-border-secondary-hover);
+$split-button-border-secondary-disabled: var(--split-button-border-secondary-disabled);
+$split-button-border-outlined-default: var(--split-button-border-outlined-default);
+$split-button-border-outlined-hover: var(--split-button-border-outlined-hover);
+$split-button-border-outlined-disabled: var(--split-button-border-outlined-disabled);
+$split-button-border-width: var(--split-button-border-width);
+$split-button-radius: var(--split-button-radius);
+$split-button-divider-primary: var(--split-button-divider-primary);
+$split-button-divider-secondary: var(--split-button-divider-secondary);
+$split-button-divider-outlined: var(--split-button-divider-outlined);
+$split-button-divider-width: var(--split-button-divider-width);
+$split-button-size-sm-height: var(--split-button-size-sm-height);
+$split-button-size-sm-paddingX: var(--split-button-size-sm-paddingX);
+$split-button-size-sm-fontSize: var(--split-button-size-sm-fontSize);
+$split-button-size-sm-iconSize: var(--split-button-size-sm-iconSize);
+$split-button-size-sm-gap: var(--split-button-size-sm-gap);
+$split-button-size-md-height: var(--split-button-size-md-height);
+$split-button-size-md-paddingX: var(--split-button-size-md-paddingX);
+$split-button-size-md-fontSize: var(--split-button-size-md-fontSize);
+$split-button-size-md-iconSize: var(--split-button-size-md-iconSize);
+$split-button-size-md-gap: var(--split-button-size-md-gap);
+$split-button-size-lg-height: var(--split-button-size-lg-height);
+$split-button-size-lg-paddingX: var(--split-button-size-lg-paddingX);
+$split-button-size-lg-fontSize: var(--split-button-size-lg-fontSize);
+$split-button-size-lg-iconSize: var(--split-button-size-lg-iconSize);
+$split-button-size-lg-gap: var(--split-button-size-lg-gap);
+$split-button-dropdown-background: var(--split-button-dropdown-background);
+$split-button-dropdown-border: var(--split-button-dropdown-border);
+$split-button-dropdown-shadow: var(--split-button-dropdown-shadow);
+$split-button-dropdown-radius: var(--split-button-dropdown-radius);
+$split-button-menu-item-padding-x: var(--split-button-menu-item-padding-x);
+$split-button-menu-item-padding-y: var(--split-button-menu-item-padding-y);
+$split-button-menu-item-gap: var(--split-button-menu-item-gap);
+$split-button-menu-item-background-default: var(--split-button-menu-item-background-default);
+$split-button-menu-item-background-hover: var(--split-button-menu-item-background-hover);
+$split-button-menu-item-text-default: var(--split-button-menu-item-text-default);
+$split-button-menu-item-icon-color: var(--split-button-menu-item-icon-color);
+$split-button-menu-item-icon-size: var(--split-button-menu-item-icon-size);
+$split-button-fontWeight: var(--split-button-fontWeight);
+$split-button-focus-ringColor: var(--split-button-focus-ringColor);
+$split-button-focus-ringWidth: var(--split-button-focus-ringWidth);
+$split-button-focus-ringOffset: var(--split-button-focus-ringOffset);
+$split-button-transition-duration: var(--split-button-transition-duration);
+
+// Splitter
+$splitter-background: var(--splitter-background); // Splitter container background
+$splitter-border-color: var(--splitter-border-color); // Splitter border color
+$splitter-border-width: var(--splitter-border-width); // Splitter border width
+$splitter-border-radius: var(--splitter-border-radius); // Splitter border radius
+$splitter-gutter-size: var(--splitter-gutter-size); // Default gutter width/height
+$splitter-gutter-background-default: var(--splitter-gutter-background-default); // Gutter background color
+$splitter-gutter-background-hover: var(--splitter-gutter-background-hover); // Gutter hover background
+$splitter-gutter-background-active: var(--splitter-gutter-background-active); // Gutter active/dragging background
+$splitter-gutter-handle-size: var(--splitter-gutter-handle-size); // Gutter handle indicator size
+$splitter-gutter-handle-color-default: var(--splitter-gutter-handle-color-default); // Gutter handle color
+$splitter-gutter-handle-color-hover: var(--splitter-gutter-handle-color-hover); // Gutter handle hover color
+$splitter-gutter-handle-color-active: var(--splitter-gutter-handle-color-active); // Gutter handle active color
+$splitter-panel-minSize: var(--splitter-panel-minSize); // Minimum panel size
+$splitter-transition-duration: var(--splitter-transition-duration); // Gutter state transition duration
+
+// Steps
+$steps-gap: var(--steps-gap); // Gap between step items
+$steps-connector-height: var(--steps-connector-height); // Connector line height
+$steps-connector-color-incomplete: var(--steps-connector-color-incomplete); // Incomplete connector color
+$steps-connector-color-complete: var(--steps-connector-color-complete); // Completed connector color
+$steps-marker-size: var(--steps-marker-size); // Step marker size
+$steps-marker-fontSize: var(--steps-marker-fontSize); // Step number font size
+$steps-marker-fontWeight: var(--steps-marker-fontWeight); // Step number font weight
+$steps-marker-background-incomplete: var(--steps-marker-background-incomplete); // Incomplete step marker background
+$steps-marker-background-active: var(--steps-marker-background-active); // Active step marker background
+$steps-marker-background-complete: var(--steps-marker-background-complete); // Completed step marker background
+$steps-marker-text-incomplete: var(--steps-marker-text-incomplete); // Incomplete step number color
+$steps-marker-text-active: var(--steps-marker-text-active); // Active step number color
+$steps-marker-text-complete: var(--steps-marker-text-complete); // Completed step number/icon color
+$steps-marker-border-width: var(--steps-marker-border-width); // Marker border width
+$steps-marker-border-color-incomplete: var(--steps-marker-border-color-incomplete); // Incomplete marker border color
+$steps-marker-border-color-active: var(--steps-marker-border-color-active); // Active marker border color
+$steps-marker-border-color-complete: var(--steps-marker-border-color-complete); // Completed marker border color
+$steps-label-fontSize: var(--steps-label-fontSize); // Step label font size
+$steps-label-fontWeight: var(--steps-label-fontWeight); // Step label font weight
+$steps-label-color-incomplete: var(--steps-label-color-incomplete); // Incomplete step label color
+$steps-label-color-active: var(--steps-label-color-active); // Active step label color
+$steps-label-color-complete: var(--steps-label-color-complete); // Completed step label color
+$steps-label-gap: var(--steps-label-gap); // Gap between marker and label
+$steps-focus-ringWidth: var(--steps-focus-ringWidth); // Focus ring width
+$steps-focus-ringColor: var(--steps-focus-ringColor); // Focus ring color
+$steps-focus-ringOffset: var(--steps-focus-ringOffset); // Focus ring offset
+
+// Tabmenu
+$tabmenu-background: var(--tabmenu-background); // TabMenu container background
+$tabmenu-border-width: var(--tabmenu-border-width); // Bottom border width
+$tabmenu-border-color: var(--tabmenu-border-color); // Bottom border color
+$tabmenu-item-padding: var(--tabmenu-item-padding); // Tab item padding
+$tabmenu-item-gap: var(--tabmenu-item-gap); // Gap between icon and label
+$tabmenu-item-color-default: var(--tabmenu-item-color-default); // Tab text color
+$tabmenu-item-color-hover: var(--tabmenu-item-color-hover); // Tab text color on hover
+$tabmenu-item-color-active: var(--tabmenu-item-color-active); // Active tab text color
+$tabmenu-item-color-disabled: var(--tabmenu-item-color-disabled); // Disabled tab text color
+$tabmenu-item-background-default: var(--tabmenu-item-background-default); // Tab background
+$tabmenu-item-background-hover: var(--tabmenu-item-background-hover); // Tab background on hover
+$tabmenu-item-background-active: var(--tabmenu-item-background-active); // Active tab background
+$tabmenu-icon-size: var(--tabmenu-icon-size); // Icon size
+$tabmenu-inkbar-height: var(--tabmenu-inkbar-height); // Active indicator height
+$tabmenu-inkbar-color: var(--tabmenu-inkbar-color); // Active indicator color
+$tabmenu-inkbar-borderRadius: var(--tabmenu-inkbar-borderRadius); // Active indicator border radius
+$tabmenu-transition-duration: var(--tabmenu-transition-duration); // Animation duration
+
+// Tabs
+$tabs-nav-borderColor: var(--tabs-nav-borderColor); // Border color for tab navigation
+$tabs-nav-borderWidth: var(--tabs-nav-borderWidth);
+$tabs-tab-padding-x: var(--tabs-tab-padding-x); // Horizontal tab padding
+$tabs-tab-padding-y: var(--tabs-tab-padding-y); // Vertical tab padding
+$tabs-tab-text-default: var(--tabs-tab-text-default); // Inactive tab text
+$tabs-tab-text-hover: var(--tabs-tab-text-hover); // Tab text on hover
+$tabs-tab-text-active: var(--tabs-tab-text-active); // Active tab text - visible accent
+$tabs-tab-text-disabled: var(--tabs-tab-text-disabled);
+$tabs-tab-background-default: var(--tabs-tab-background-default);
+$tabs-tab-background-hover: var(--tabs-tab-background-hover);
+$tabs-tab-background-active: var(--tabs-tab-background-active);
+$tabs-indicator-color: var(--tabs-indicator-color); // Active tab indicator - visible accent
+$tabs-indicator-height: var(--tabs-indicator-height); // Active tab indicator thickness
+$tabs-content-padding: var(--tabs-content-padding); // Tab panel content padding
+$tabs-focus-ringWidth: var(--tabs-focus-ringWidth);
+$tabs-focus-ringColor: var(--tabs-focus-ringColor);
+$tabs-focus-ringOffset: var(--tabs-focus-ringOffset);
+
+// Tag
+$tag-padding-x: var(--tag-padding-x); // Horizontal padding
+$tag-padding-y: var(--tag-padding-y); // Vertical padding
+$tag-gap: var(--tag-gap); // Gap between icon and text
+$tag-radius-default: var(--tag-radius-default); // Default border radius
+$tag-radius-rounded: var(--tag-radius-rounded); // Fully rounded (pill) border radius
+$tag-fontSize: var(--tag-fontSize); // Tag font size
+$tag-fontWeight: var(--tag-fontWeight); // Tag font weight
+$tag-iconSize: var(--tag-iconSize); // Icon size inside tag
+$tag-background-brand: var(--tag-background-brand); // Brand color tag (darker shade for white-text contrast)
+$tag-background-accent: var(--tag-background-accent); // Accent color tag (paired with dark text)
+$tag-background-neutral: var(--tag-background-neutral); // Neutral/muted tag (visible on light surfaces)
+$tag-background-success: var(--tag-background-success); // Success status tag (emphasis shade for white-text contrast)
+$tag-background-warning: var(--tag-background-warning); // Warning status tag (paired with dark text for contrast)
+$tag-background-danger: var(--tag-background-danger); // Danger/error status tag (emphasis shade for white-text contrast)
+$tag-background-info: var(--tag-background-info); // Info status tag (emphasis shade for white-text contrast)
+$tag-text-brand: var(--tag-text-brand); // Text on brand background
+$tag-text-accent: var(--tag-text-accent); // Text on accent background (dark for contrast)
+$tag-text-neutral: var(--tag-text-neutral); // Text on neutral background
+$tag-text-success: var(--tag-text-success); // Text on success background
+$tag-text-warning: var(--tag-text-warning); // Text on warning background (dark for contrast)
+$tag-text-danger: var(--tag-text-danger); // Text on danger background
+$tag-text-info: var(--tag-text-info); // Text on info background
+
+// Terminal
+$terminal-background: var(--terminal-background); // Terminal background color
+$terminal-border-color: var(--terminal-border-color); // Terminal border color
+$terminal-border-width: var(--terminal-border-width); // Terminal border width
+$terminal-border-radius: var(--terminal-border-radius); // Terminal border radius
+$terminal-padding: var(--terminal-padding); // Terminal content padding
+$terminal-font-family: var(--terminal-font-family); // Terminal font family
+$terminal-font-size: var(--terminal-font-size); // Terminal font size
+$terminal-font-lineHeight: var(--terminal-font-lineHeight); // Terminal line height
+$terminal-text-color: var(--terminal-text-color); // Terminal text color
+$terminal-prompt-color: var(--terminal-prompt-color); // Prompt text color
+$terminal-prompt-gap: var(--terminal-prompt-gap); // Gap between prompt and input
+$terminal-response-color: var(--terminal-response-color); // Response text color
+$terminal-welcome-color: var(--terminal-welcome-color); // Welcome message color
+$terminal-welcome-marginBottom: var(--terminal-welcome-marginBottom); // Space below welcome message
+$terminal-command-gap: var(--terminal-command-gap); // Gap between commands
+$terminal-input-caretColor: var(--terminal-input-caretColor); // Input caret color
+
+// Textarea
+$textarea-padding-x: var(--textarea-padding-x);
+$textarea-padding-y: var(--textarea-padding-y);
+$textarea-minHeight: var(--textarea-minHeight);
+$textarea-fontSize: var(--textarea-fontSize);
+$textarea-lineHeight: var(--textarea-lineHeight);
+$textarea-radius: var(--textarea-radius);
+$textarea-border-width: var(--textarea-border-width);
+$textarea-border-color-default: var(--textarea-border-color-default);
+$textarea-border-color-hover: var(--textarea-border-color-hover);
+$textarea-border-color-focus: var(--textarea-border-color-focus);
+$textarea-border-color-disabled: var(--textarea-border-color-disabled);
+$textarea-border-color-error: var(--textarea-border-color-error);
+$textarea-background-default: var(--textarea-background-default);
+$textarea-background-disabled: var(--textarea-background-disabled);
+$textarea-text-default: var(--textarea-text-default);
+$textarea-text-placeholder: var(--textarea-text-placeholder);
+$textarea-text-disabled: var(--textarea-text-disabled);
+$textarea-focus-ringWidth: var(--textarea-focus-ringWidth);
+$textarea-focus-ringColor: var(--textarea-focus-ringColor);
+$textarea-focus-ringOffset: var(--textarea-focus-ringOffset);
+
+// Tieredmenu
+$tieredmenu-background: var(--tieredmenu-background); // Menu background
+$tieredmenu-padding: var(--tieredmenu-padding); // Menu container padding
+$tieredmenu-border-width: var(--tieredmenu-border-width); // Border width
+$tieredmenu-border-color: var(--tieredmenu-border-color); // Border color
+$tieredmenu-border-radius: var(--tieredmenu-border-radius); // Border radius
+$tieredmenu-shadow: var(--tieredmenu-shadow); // Menu shadow (popup mode)
+$tieredmenu-minWidth: var(--tieredmenu-minWidth); // Minimum menu width
+$tieredmenu-item-padding: var(--tieredmenu-item-padding); // Item padding
+$tieredmenu-item-gap: var(--tieredmenu-item-gap); // Gap between icon and label
+$tieredmenu-item-color-default: var(--tieredmenu-item-color-default); // Item text color
+$tieredmenu-item-color-hover: var(--tieredmenu-item-color-hover); // Item text color on hover
+$tieredmenu-item-color-active: var(--tieredmenu-item-color-active); // Active item text color
+$tieredmenu-item-color-disabled: var(--tieredmenu-item-color-disabled); // Disabled item text color
+$tieredmenu-item-background-default: var(--tieredmenu-item-background-default); // Item background
+$tieredmenu-item-background-hover: var(--tieredmenu-item-background-hover); // Item background on hover
+$tieredmenu-item-background-active: var(--tieredmenu-item-background-active); // Active item background
+$tieredmenu-item-borderRadius: var(--tieredmenu-item-borderRadius); // Item border radius
+$tieredmenu-icon-size: var(--tieredmenu-icon-size); // Icon size
+$tieredmenu-icon-color-default: var(--tieredmenu-icon-color-default); // Icon color
+$tieredmenu-icon-color-hover: var(--tieredmenu-icon-color-hover); // Icon color on hover
+$tieredmenu-submenu-offset: var(--tieredmenu-submenu-offset); // Submenu offset from parent
+$tieredmenu-separator-color: var(--tieredmenu-separator-color); // Separator color
+$tieredmenu-separator-margin: var(--tieredmenu-separator-margin); // Separator margin
+$tieredmenu-transition-duration: var(--tieredmenu-transition-duration); // Animation duration
+
+// Timeline
+$timeline-line-width: var(--timeline-line-width); // Width of the vertical timeline line
+$timeline-line-color: var(--timeline-line-color); // Color of the timeline line
+$timeline-marker-size: var(--timeline-marker-size); // Size of the timeline marker dot
+$timeline-marker-background: var(--timeline-marker-background); // Background color of the marker
+$timeline-marker-border-width: var(--timeline-marker-border-width); // Border width of the marker
+$timeline-marker-border-color: var(--timeline-marker-border-color); // Border color of the marker
+$timeline-marker-ring-size: var(--timeline-marker-ring-size); // Size of the outer ring around the marker
+$timeline-marker-ring-color: var(--timeline-marker-ring-color); // Color of the outer ring
+$timeline-content-gap: var(--timeline-content-gap); // Gap between timeline items
+$timeline-content-padding: var(--timeline-content-padding); // Padding around content area
+$timeline-event-title-color: var(--timeline-event-title-color); // Event title color
+$timeline-event-title-fontSize: var(--timeline-event-title-fontSize); // Event title font size
+$timeline-event-title-fontWeight: var(--timeline-event-title-fontWeight); // Event title font weight
+$timeline-event-date-color: var(--timeline-event-date-color); // Event date color
+$timeline-event-date-fontSize: var(--timeline-event-date-fontSize); // Event date font size
+$timeline-event-description-color: var(--timeline-event-description-color); // Event description color
+$timeline-event-description-fontSize: var(--timeline-event-description-fontSize); // Event description font size
+$timeline-colors-primary: var(--timeline-colors-primary); // Primary marker color
+$timeline-colors-success: var(--timeline-colors-success); // Success marker color
+$timeline-colors-warning: var(--timeline-colors-warning); // Warning marker color
+$timeline-colors-danger: var(--timeline-colors-danger); // Danger marker color
+
+// Toast
+$toast-container-gap: var(--toast-container-gap); // Gap between stacked toasts
+$toast-container-padding: var(--toast-container-padding); // Container padding from screen edge
+$toast-container-zIndex: var(--toast-container-zIndex); // Toast container z-index
+$toast-container-maxWidth: var(--toast-container-maxWidth); // Maximum toast width
+$toast-background-default: var(--toast-background-default); // Default toast background
+$toast-background-success: var(--toast-background-success); // Success toast background
+$toast-background-info: var(--toast-background-info); // Info toast background
+$toast-background-warning: var(--toast-background-warning); // Warning toast background
+$toast-background-error: var(--toast-background-error); // Error toast background
+$toast-border-width: var(--toast-border-width); // Toast border width
+$toast-border-color-default: var(--toast-border-color-default); // Default border color
+$toast-border-color-success: var(--toast-border-color-success); // Success border color
+$toast-border-color-info: var(--toast-border-color-info); // Info border color
+$toast-border-color-warning: var(--toast-border-color-warning); // Warning border color
+$toast-border-color-error: var(--toast-border-color-error); // Error border color
+$toast-radius: var(--toast-radius); // Toast border radius
+$toast-shadow: var(--toast-shadow); // Toast elevation shadow
+$toast-padding-x: var(--toast-padding-x); // Horizontal padding
+$toast-padding-y: var(--toast-padding-y); // Vertical padding
+$toast-icon-size: var(--toast-icon-size); // Icon size
+$toast-icon-color-default: var(--toast-icon-color-default); // Default icon color
+$toast-icon-color-success: var(--toast-icon-color-success); // Success icon color
+$toast-icon-color-info: var(--toast-icon-color-info); // Info icon color
+$toast-icon-color-warning: var(--toast-icon-color-warning); // Warning icon color
+$toast-icon-color-error: var(--toast-icon-color-error); // Error icon color
+$toast-icon-gap: var(--toast-icon-gap); // Gap between icon and content
+$toast-content-gap: var(--toast-content-gap); // Gap between summary and detail
+$toast-summary-color-default: var(--toast-summary-color-default); // Summary text color
+$toast-summary-color-success: var(--toast-summary-color-success); // Success summary color
+$toast-summary-color-info: var(--toast-summary-color-info); // Info summary color
+$toast-summary-color-warning: var(--toast-summary-color-warning); // Warning summary color
+$toast-summary-color-error: var(--toast-summary-color-error); // Error summary color
+$toast-summary-fontSize: var(--toast-summary-fontSize); // Summary font size
+$toast-summary-fontWeight: var(--toast-summary-fontWeight); // Summary font weight
+$toast-detail-color: var(--toast-detail-color); // Detail text color
+$toast-detail-fontSize: var(--toast-detail-fontSize); // Detail font size
+$toast-closeButton-size: var(--toast-closeButton-size); // Close button size
+$toast-closeButton-iconSize: var(--toast-closeButton-iconSize); // Close icon size
+$toast-closeButton-color-default: var(--toast-closeButton-color-default); // Close button color
+$toast-closeButton-color-hover: var(--toast-closeButton-color-hover); // Close button hover color
+$toast-closeButton-background-hover: var(--toast-closeButton-background-hover); // Close button hover background
+$toast-closeButton-radius: var(--toast-closeButton-radius); // Close button border radius
+$toast-progress-height: var(--toast-progress-height); // Progress bar height
+$toast-progress-background: var(--toast-progress-background); // Progress bar track background
+$toast-progress-fill-default: var(--toast-progress-fill-default); // Default progress fill
+$toast-progress-fill-success: var(--toast-progress-fill-success); // Success progress fill
+$toast-progress-fill-info: var(--toast-progress-fill-info); // Info progress fill
+$toast-progress-fill-warning: var(--toast-progress-fill-warning); // Warning progress fill
+$toast-progress-fill-error: var(--toast-progress-fill-error); // Error progress fill
+
+// ToggleButton
+$toggleButton-height-sm: var(--toggleButton-height-sm); // Small toggle button height
+$toggleButton-height-md: var(--toggleButton-height-md); // Medium toggle button height
+$toggleButton-height-lg: var(--toggleButton-height-lg); // Large toggle button height
+$toggleButton-padding-sm-x: var(--toggleButton-padding-sm-x); // Small toggle button horizontal padding
+$toggleButton-padding-sm-y: var(--toggleButton-padding-sm-y); // Small toggle button vertical padding
+$toggleButton-padding-md-x: var(--toggleButton-padding-md-x); // Medium toggle button horizontal padding
+$toggleButton-padding-md-y: var(--toggleButton-padding-md-y); // Medium toggle button vertical padding
+$toggleButton-padding-lg-x: var(--toggleButton-padding-lg-x); // Large toggle button horizontal padding
+$toggleButton-padding-lg-y: var(--toggleButton-padding-lg-y); // Large toggle button vertical padding
+$toggleButton-gap: var(--toggleButton-gap); // Gap between icon and label
+$toggleButton-background-off-default: var(--toggleButton-background-off-default); // Toggle button off state background
+$toggleButton-background-off-hover: var(--toggleButton-background-off-hover); // Toggle button off state hover background
+$toggleButton-background-on-default: var(--toggleButton-background-on-default); // Toggle button on state background
+$toggleButton-background-on-hover: var(--toggleButton-background-on-hover); // Toggle button on state hover background
+$toggleButton-background-disabled: var(--toggleButton-background-disabled); // Toggle button disabled background
+$toggleButton-text-off-default: var(--toggleButton-text-off-default); // Toggle button off state text color
+$toggleButton-text-on-default: var(--toggleButton-text-on-default); // Toggle button on state text color
+$toggleButton-text-disabled: var(--toggleButton-text-disabled); // Toggle button disabled text color
+$toggleButton-border-width: var(--toggleButton-border-width); // Toggle button border width
+$toggleButton-border-off-default: var(--toggleButton-border-off-default); // Toggle button off state border color
+$toggleButton-border-off-hover: var(--toggleButton-border-off-hover); // Toggle button off state hover border color
+$toggleButton-border-on-default: var(--toggleButton-border-on-default); // Toggle button on state border color
+$toggleButton-border-on-hover: var(--toggleButton-border-on-hover); // Toggle button on state hover border color
+$toggleButton-border-disabled: var(--toggleButton-border-disabled); // Toggle button disabled border color
+$toggleButton-radius: var(--toggleButton-radius); // Toggle button border radius
+$toggleButton-fontSize-sm: var(--toggleButton-fontSize-sm); // Small toggle button font size
+$toggleButton-fontSize-md: var(--toggleButton-fontSize-md); // Medium toggle button font size
+$toggleButton-fontSize-lg: var(--toggleButton-fontSize-lg); // Large toggle button font size
+$toggleButton-iconSize-sm: var(--toggleButton-iconSize-sm); // Small toggle button icon size
+$toggleButton-iconSize-md: var(--toggleButton-iconSize-md); // Medium toggle button icon size
+$toggleButton-iconSize-lg: var(--toggleButton-iconSize-lg); // Large toggle button icon size
+$toggleButton-fontWeight: var(--toggleButton-fontWeight); // Toggle button font weight
+$toggleButton-focus-ringColor: var(--toggleButton-focus-ringColor); // Toggle button focus ring color
+$toggleButton-focus-ringWidth: var(--toggleButton-focus-ringWidth); // Toggle button focus ring width
+$toggleButton-focus-ringOffset: var(--toggleButton-focus-ringOffset); // Toggle button focus ring offset
+$toggleButton-transition-duration: var(--toggleButton-transition-duration); // Toggle button transition duration
+
+// ToggleSwitch
+$toggleSwitch-width-sm: var(--toggleSwitch-width-sm);
+$toggleSwitch-width-md: var(--toggleSwitch-width-md);
+$toggleSwitch-width-lg: var(--toggleSwitch-width-lg);
+$toggleSwitch-height-sm: var(--toggleSwitch-height-sm);
+$toggleSwitch-height-md: var(--toggleSwitch-height-md);
+$toggleSwitch-height-lg: var(--toggleSwitch-height-lg);
+$toggleSwitch-thumb-size-sm: var(--toggleSwitch-thumb-size-sm);
+$toggleSwitch-thumb-size-md: var(--toggleSwitch-thumb-size-md);
+$toggleSwitch-thumb-size-lg: var(--toggleSwitch-thumb-size-lg);
+$toggleSwitch-thumb-offset: var(--toggleSwitch-thumb-offset);
+$toggleSwitch-thumb-color-default: var(--toggleSwitch-thumb-color-default);
+$toggleSwitch-thumb-shadow: var(--toggleSwitch-thumb-shadow);
+$toggleSwitch-track-background-off: var(--toggleSwitch-track-background-off); // Off state — mid-grey #737373, ~4.8:1 contrast vs #ffffff canvas (meets WCAG 1.4.11 Non-text Contrast 3:1)
+$toggleSwitch-track-background-on: var(--toggleSwitch-track-background-on); // On state — primary action navy, ~14:1 vs white canvas (WCAG 1.4.11 ≥3:1, also semantically the right 'active' color)
+$toggleSwitch-track-background-disabled: var(--toggleSwitch-track-background-disabled); // Disabled state — light grey #d4d4d4. Disabled controls are exempt from 1.4.11 per WCAG; cursor + ARIA carry the affordance
+$toggleSwitch-focus-ringWidth: var(--toggleSwitch-focus-ringWidth);
+$toggleSwitch-focus-ringColor: var(--toggleSwitch-focus-ringColor);
+$toggleSwitch-focus-ringOffset: var(--toggleSwitch-focus-ringOffset);
+
+// Toolbar
+$toolbar-background: var(--toolbar-background); // Toolbar background color
+$toolbar-border-color: var(--toolbar-border-color); // Toolbar border color
+$toolbar-border-width: var(--toolbar-border-width); // Toolbar border width
+$toolbar-radius: var(--toolbar-radius); // Toolbar border radius
+$toolbar-padding: var(--toolbar-padding); // Toolbar inner padding
+$toolbar-gap: var(--toolbar-gap); // Gap between toolbar items
+$toolbar-minHeight: var(--toolbar-minHeight); // Minimum toolbar height
+
+// Tooltip
+$tooltip-padding-x: var(--tooltip-padding-x); // Horizontal padding
+$tooltip-padding-y: var(--tooltip-padding-y); // Vertical padding
+$tooltip-background: var(--tooltip-background); // Tooltip background color (dark)
+$tooltip-text-color: var(--tooltip-text-color); // Tooltip text color (light on dark)
+$tooltip-text-fontSize: var(--tooltip-text-fontSize); // Tooltip font size
+$tooltip-radius: var(--tooltip-radius); // Border radius
+$tooltip-arrow-size: var(--tooltip-arrow-size); // Arrow/pointer size
+$tooltip-offset: var(--tooltip-offset); // Distance from trigger element
+$tooltip-maxWidth: var(--tooltip-maxWidth); // Maximum width before wrapping
+$tooltip-zIndex: var(--tooltip-zIndex); // Z-index for stacking
+
+// Tree
+$tree-padding: var(--tree-padding); // Container padding
+$tree-radius: var(--tree-radius); // Container border radius
+$tree-border-width: var(--tree-border-width);
+$tree-border-color-default: var(--tree-border-color-default); // Default border color
+$tree-border-color-disabled: var(--tree-border-color-disabled); // Disabled border color
+$tree-background-default: var(--tree-background-default); // Default background
+$tree-background-disabled: var(--tree-background-disabled); // Disabled background
+$tree-maxHeight: var(--tree-maxHeight); // Maximum height before scrolling
+$tree-node-padding-x: var(--tree-node-padding-x);
+$tree-node-padding-y: var(--tree-node-padding-y);
+$tree-node-gap: var(--tree-node-gap);
+$tree-node-indent: var(--tree-node-indent);
+$tree-node-radius: var(--tree-node-radius);
+$tree-node-background-default: var(--tree-node-background-default);
+$tree-node-background-hover: var(--tree-node-background-hover);
+$tree-node-background-selected: var(--tree-node-background-selected);
+$tree-node-text-default: var(--tree-node-text-default);
+$tree-node-text-selected: var(--tree-node-text-selected);
+$tree-toggler-size: var(--tree-toggler-size);
+$tree-toggler-color-default: var(--tree-toggler-color-default);
+$tree-toggler-color-hover: var(--tree-toggler-color-hover);
+$tree-checkbox-size: var(--tree-checkbox-size);
+$tree-checkbox-border: var(--tree-checkbox-border);
+$tree-checkbox-background-checked: var(--tree-checkbox-background-checked);
+$tree-filter-padding: var(--tree-filter-padding);
+$tree-filter-marginBottom: var(--tree-filter-marginBottom);
+$tree-focus-ringWidth: var(--tree-focus-ringWidth);
+$tree-focus-ringColor: var(--tree-focus-ringColor);
+$tree-focus-ringOffset: var(--tree-focus-ringOffset);
+
+// Tree-select
+$tree-select-height-sm: var(--tree-select-height-sm);
+$tree-select-height-md: var(--tree-select-height-md);
+$tree-select-height-lg: var(--tree-select-height-lg);
+$tree-select-padding-x: var(--tree-select-padding-x);
+$tree-select-padding-y: var(--tree-select-padding-y);
+$tree-select-fontSize-sm: var(--tree-select-fontSize-sm);
+$tree-select-fontSize-md: var(--tree-select-fontSize-md);
+$tree-select-fontSize-lg: var(--tree-select-fontSize-lg);
+$tree-select-radius: var(--tree-select-radius);
+$tree-select-border-width: var(--tree-select-border-width);
+$tree-select-border-color-default: var(--tree-select-border-color-default);
+$tree-select-border-color-hover: var(--tree-select-border-color-hover);
+$tree-select-border-color-focus: var(--tree-select-border-color-focus);
+$tree-select-border-color-disabled: var(--tree-select-border-color-disabled);
+$tree-select-border-color-error: var(--tree-select-border-color-error);
+$tree-select-background-default: var(--tree-select-background-default);
+$tree-select-background-disabled: var(--tree-select-background-disabled);
+$tree-select-background-hover: var(--tree-select-background-hover);
+$tree-select-text-default: var(--tree-select-text-default);
+$tree-select-text-placeholder: var(--tree-select-text-placeholder);
+$tree-select-text-disabled: var(--tree-select-text-disabled);
+$tree-select-icon-size: var(--tree-select-icon-size);
+$tree-select-icon-color-default: var(--tree-select-icon-color-default);
+$tree-select-icon-color-disabled: var(--tree-select-icon-color-disabled);
+$tree-select-dropdown-background: var(--tree-select-dropdown-background);
+$tree-select-dropdown-border: var(--tree-select-dropdown-border);
+$tree-select-dropdown-shadow: var(--tree-select-dropdown-shadow);
+$tree-select-dropdown-radius: var(--tree-select-dropdown-radius);
+$tree-select-dropdown-maxHeight: var(--tree-select-dropdown-maxHeight);
+$tree-select-node-padding-x: var(--tree-select-node-padding-x);
+$tree-select-node-padding-y: var(--tree-select-node-padding-y);
+$tree-select-node-gap: var(--tree-select-node-gap);
+$tree-select-node-indent: var(--tree-select-node-indent);
+$tree-select-node-background-default: var(--tree-select-node-background-default);
+$tree-select-node-background-hover: var(--tree-select-node-background-hover);
+$tree-select-node-background-selected: var(--tree-select-node-background-selected);
+$tree-select-node-text-default: var(--tree-select-node-text-default);
+$tree-select-node-text-selected: var(--tree-select-node-text-selected);
+$tree-select-toggler-size: var(--tree-select-toggler-size);
+$tree-select-toggler-color-default: var(--tree-select-toggler-color-default);
+$tree-select-toggler-color-hover: var(--tree-select-toggler-color-hover);
+$tree-select-filter-padding: var(--tree-select-filter-padding);
+$tree-select-filter-borderColor: var(--tree-select-filter-borderColor);
+$tree-select-focus-ringWidth: var(--tree-select-focus-ringWidth);
+$tree-select-focus-ringColor: var(--tree-select-focus-ringColor);
+$tree-select-focus-ringOffset: var(--tree-select-focus-ringOffset);
+
+// Treetable
+$treetable-radius: var(--treetable-radius); // Container border radius
+$treetable-border-width: var(--treetable-border-width);
+$treetable-border-color-default: var(--treetable-border-color-default);
+$treetable-background-default: var(--treetable-background-default);
+$treetable-header-padding-x: var(--treetable-header-padding-x);
+$treetable-header-padding-y: var(--treetable-header-padding-y);
+$treetable-header-background: var(--treetable-header-background); // Header bg — navy, ~14:1 vs white canvas (was neutral.50 = 1.04:1, header invisible)
+$treetable-header-text: var(--treetable-header-text); // Header text — white on navy
+$treetable-header-fontWeight: var(--treetable-header-fontWeight);
+$treetable-header-borderColor: var(--treetable-header-borderColor); // Header border matches fill
+$treetable-row-padding-x: var(--treetable-row-padding-x);
+$treetable-row-padding-y: var(--treetable-row-padding-y);
+$treetable-row-background-default: var(--treetable-row-background-default);
+$treetable-row-background-hover: var(--treetable-row-background-hover);
+$treetable-row-background-selected: var(--treetable-row-background-selected);
+$treetable-row-background-stripe: var(--treetable-row-background-stripe);
+$treetable-row-text-default: var(--treetable-row-text-default);
+$treetable-row-text-selected: var(--treetable-row-text-selected);
+$treetable-row-borderColor: var(--treetable-row-borderColor);
+$treetable-cell-padding-x: var(--treetable-cell-padding-x);
+$treetable-cell-padding-y: var(--treetable-cell-padding-y);
+$treetable-toggler-size: var(--treetable-toggler-size);
+$treetable-toggler-color-default: var(--treetable-toggler-color-default);
+$treetable-toggler-color-hover: var(--treetable-toggler-color-hover);
+$treetable-toggler-marginRight: var(--treetable-toggler-marginRight);
+$treetable-indent: var(--treetable-indent);
+$treetable-checkbox-size: var(--treetable-checkbox-size);
+$treetable-checkbox-marginRight: var(--treetable-checkbox-marginRight);
+$treetable-focus-ringWidth: var(--treetable-focus-ringWidth);
+$treetable-focus-ringColor: var(--treetable-focus-ringColor);
+
+// Virtualscroller
+$virtualscroller-background-default: var(--virtualscroller-background-default); // Default background
+$virtualscroller-border-width: var(--virtualscroller-border-width);
+$virtualscroller-border-color-default: var(--virtualscroller-border-color-default);
+$virtualscroller-border-radius: var(--virtualscroller-border-radius);
+$virtualscroller-item-padding-x: var(--virtualscroller-item-padding-x);
+$virtualscroller-item-padding-y: var(--virtualscroller-item-padding-y);
+$virtualscroller-item-background-default: var(--virtualscroller-item-background-default);
+$virtualscroller-item-background-hover: var(--virtualscroller-item-background-hover);
+$virtualscroller-item-background-stripe: var(--virtualscroller-item-background-stripe);
+$virtualscroller-item-text-default: var(--virtualscroller-item-text-default);
+$virtualscroller-item-borderColor: var(--virtualscroller-item-borderColor);
+$virtualscroller-loader-padding: var(--virtualscroller-loader-padding);
+$virtualscroller-loader-text: var(--virtualscroller-loader-text);
+$virtualscroller-loader-background: var(--virtualscroller-loader-background);
+$virtualscroller-scrollbar-width: var(--virtualscroller-scrollbar-width);
+$virtualscroller-scrollbar-track: var(--virtualscroller-scrollbar-track);
+$virtualscroller-scrollbar-thumb: var(--virtualscroller-scrollbar-thumb);
+$virtualscroller-scrollbar-thumbHover: var(--virtualscroller-scrollbar-thumbHover);
+
+// Font
+$font-sans: var(--font-sans); // Body font stack
+$font-display: var(--font-display); // Display/heading font stack
+$font-mono: var(--font-mono); // Monospace font stack