/**
 * Do not edit directly
 * Generated on Fri, 09 Oct 2026 14:38:15 GMT
 */

:root {
  --cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.125rem 0.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Standard card depth */
  --cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.25rem 1rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Top navigation, Bottom Navigation */
  --cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.375rem 1.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Floating Action Buttons (FAB), Menus */
  --cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.5rem 2rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Bottom Sheets */
  --cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.625rem 2.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
  --cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75rem 3rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
  --cnvs-sys-opacity-full: 1; /* Dev only */
  --cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
  --cnvs-sys-breakpoints-zero: 0; /* Use to set a media query `min-width` below small. */
  --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
  --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
  --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
  --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
  --cnvs-sys-letter-spacing-body-sm: var(--cnvs-base-letter-spacing-200);
  --cnvs-sys-letter-spacing-subtext-lg: var(--cnvs-base-letter-spacing-150);
  --cnvs-sys-letter-spacing-subtext-md: var(--cnvs-base-letter-spacing-100);
  --cnvs-sys-letter-spacing-subtext-sm: var(--cnvs-base-letter-spacing-50);
  --cnvs-sys-font-family-global: var(--cnvs-base-font-family-200);
  --cnvs-sys-font-family-mono: var(--cnvs-base-font-family-100);
  --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
  --cnvs-sys-gap-none: var(--cnvs-base-size-0); /* Use when there is no space between elements */
  --cnvs-sys-padding-none: var(--cnvs-base-size-0); /* Use when there should be no space between content and element's edges. */
  --cnvs-sys-opacity-accent-pressed: var(--cnvs-base-opacity-360); /* State layer applied to accent colors while pressing */
  --cnvs-sys-opacity-accent-hover: var(--cnvs-base-opacity-180); /* State layer applied to accent colors on hover */
  --cnvs-sys-opacity-surface-pressed: var(--cnvs-base-opacity-180); /* State layer applied to surface colors while pressing */
  --cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-80); /* Alpha on second shadow */
  --cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-120); /* Alpha on first shadow */
  --cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-840); /* Tooltips, Status Indicator */
  --cnvs-sys-opacity-overlay: var(--cnvs-base-opacity-640); /* Overlay */
  --cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-400); /* Disabled states */
  --cnvs-sys-opacity-zero: var(--cnvs-base-opacity-0); /* Dev only */
  --cnvs-sys-motion-easing-purposeful-deceleration: var(--cnvs-base-easing-b-300);
  --cnvs-sys-motion-easing-purposeful-acceleration: var(--cnvs-base-easing-b-200);
  --cnvs-sys-motion-easing-purposeful-standard: var(--cnvs-base-easing-b-100);
  --cnvs-sys-motion-easing-quick-deceleration: var(--cnvs-base-easing-a-300);
  --cnvs-sys-motion-easing-quick-acceleration: var(--cnvs-base-easing-a-200);
  --cnvs-sys-motion-easing-quick-standard: var(--cnvs-base-easing-a-100);
  --cnvs-sys-color-focus-contrast: var(--cnvs-base-palette-neutral-a900); /* High contrast focus ring for accessibility */
  --cnvs-sys-color-focus-inverse: var(--cnvs-base-palette-neutral-0); /* Focus ring for use on dark backgrounds */
  --cnvs-sys-color-accent-overlay-mixin: var(--cnvs-base-palette-neutral-1000); /* Pressed overlay mixin color for accent-colored elements */
  --cnvs-sys-color-accent-overlay-pressed: var(--cnvs-base-palette-neutral-a400); /* Pressed overlay for accent-colored elements */
  --cnvs-sys-color-accent-overlay-hover: var(--cnvs-base-palette-neutral-a200); /* Hover overlay for accent-colored elements */
  --cnvs-sys-color-accent-muted-soft: var(--cnvs-base-palette-slate-400); /* Softer muted accent for tertiary elements */
  --cnvs-sys-color-accent-muted-default: var(--cnvs-base-palette-slate-600); /* Muted accent for secondary visual elements */
  --cnvs-sys-color-accent-contrast: var(--cnvs-base-palette-neutral-a900); /* High contrast accent for maximum visibility */
  --cnvs-sys-color-accent-success: var(--cnvs-base-palette-green-600); /* Solid success accent for positive indicators (not tenant themeable) */
  --cnvs-sys-color-accent-warning: var(--cnvs-base-palette-amber-400); /* Solid warning accent for caution indicators (not tenant themeable) */
  --cnvs-sys-color-accent-danger: var(--cnvs-base-palette-red-600); /* Solid danger accent for error indicators (not tenant themeable) */
  --cnvs-sys-color-accent-info: var(--cnvs-base-palette-blue-600); /* Solid info accent for indicators (not tenant themeable) */
  --cnvs-sys-color-accent-ai: var(--cnvs-base-palette-blue-950); /* Dark accent indicating AI-generated content */
  --cnvs-sys-color-surface-overlay-scrim: var(--cnvs-base-palette-neutral-a400);
  --cnvs-sys-color-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a300); /* Pressed overlay for containers on dark backgrounds */
  --cnvs-sys-color-surface-overlay-pressed-default: var(--cnvs-base-palette-slate-a100); /* Pressed state overlay for interactive containers */
  --cnvs-sys-color-surface-overlay-mixin: var(--cnvs-base-palette-slate-500); /* Pressed state overlay for interactive containers */
  --cnvs-sys-color-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a200); /* Hover overlay for containers on dark backgrounds */
  --cnvs-sys-color-surface-overlay-hover-default: var(--cnvs-base-palette-slate-a50); /* Hover state overlay for interactive containers */
  --cnvs-sys-color-surface-contrast-strong: var(--cnvs-base-palette-neutral-a950); /* Stronger high contrast dark container background */
  --cnvs-sys-color-surface-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast dark container background */
  --cnvs-sys-color-surface-inverse: var(--cnvs-base-palette-neutral-0); /* Container background for use on dark backgrounds */
  --cnvs-sys-color-surface-transparent: var(--cnvs-base-palette-neutral-a0); /* Fully transparent container background */
  --cnvs-sys-color-surface-ai-pressed: var(--cnvs-base-palette-blue-400); /* Pressed state for AI-generated content containers */
  --cnvs-sys-color-surface-ai-hover: var(--cnvs-base-palette-blue-a200); /* Hover state for AI-generated content containers */
  --cnvs-sys-color-surface-ai-default: var(--cnvs-base-palette-blue-a100); /* Container background indicating AI-generated content */
  --cnvs-sys-color-surface-success-strong: var(--cnvs-base-palette-green-a50); /* Stronger container background for success states */
  --cnvs-sys-color-surface-success-default: var(--cnvs-base-palette-green-a25); /* Container background for success states (not tenant themeable) */
  --cnvs-sys-color-surface-warning-strong: var(--cnvs-base-palette-amber-a50); /* Stronger container background for warning states */
  --cnvs-sys-color-surface-warning-default: var(--cnvs-base-palette-amber-a25); /* Container background for warning states (not tenant themeable) */
  --cnvs-sys-color-surface-danger-strong: var(--cnvs-base-palette-red-a50); /* Stronger container background for error states */
  --cnvs-sys-color-surface-danger-default: var(--cnvs-base-palette-red-a25); /* Container background for error states (not tenant themeable) */
  --cnvs-sys-color-surface-info-strong: var(--cnvs-base-palette-blue-a50); /* Stronger container background for info badges and indicators */
  --cnvs-sys-color-surface-info-default: var(--cnvs-base-palette-blue-a25); /* Container background for informational callouts */
  --cnvs-sys-color-surface-loading: var(--cnvs-base-palette-slate-a200); /* Background for skeleton loaders and loading states */
  --cnvs-sys-color-surface-alt-strong: var(--cnvs-base-palette-slate-a100); /* Stronger de-emphasized container background */
  --cnvs-sys-color-surface-alt-default: var(--cnvs-base-palette-slate-a50); /* De-emphasized container background for secondary information */
  --cnvs-sys-color-surface-raised: var(--cnvs-base-palette-slate-a25); /* Separates a layer from the surface, e.g. table headers or sticky elements */
  --cnvs-sys-color-surface-modal: var(--cnvs-base-palette-neutral-0); /* Background for modal dialog containers */
  --cnvs-sys-color-surface-popover: var(--cnvs-base-palette-neutral-0); /* Background for floating containers like dropdowns and tooltips */
  --cnvs-sys-color-surface-navigation: var(--cnvs-base-palette-slate-50); /* Background for navigation containers like sidebars and top bars */
  --cnvs-sys-color-surface-default: var(--cnvs-base-palette-neutral-0); /* Default background for containers on top of the page */
  --cnvs-sys-color-static-amber-soft: var(--cnvs-base-palette-amber-100); /* Soft amber */
  --cnvs-sys-color-static-amber-strongest: var(--cnvs-base-palette-amber-950); /* Stronger amber */
  --cnvs-sys-color-static-amber-softer: var(--cnvs-base-palette-amber-50); /* Soft amber */
  --cnvs-sys-color-static-amber-stronger: var(--cnvs-base-palette-amber-600); /* Stronger amber */
  --cnvs-sys-color-static-amber-strong: var(--cnvs-base-palette-amber-500); /* Stronger amber */
  --cnvs-sys-color-static-amber-softest: var(--cnvs-base-palette-amber-25); /* Soft amber */
  --cnvs-sys-color-static-amber-default: var(--cnvs-base-palette-amber-400); /* amber */
  --cnvs-sys-color-static-gray-softer: var(--cnvs-base-palette-slate-100); /* Light gray */
  --cnvs-sys-color-static-gray-softest: var(--cnvs-base-palette-slate-50); /* Light gray */
  --cnvs-sys-color-static-gray-strongest: var(--cnvs-base-palette-slate-950); /* Stronger gray */
  --cnvs-sys-color-static-gray-stronger: var(--cnvs-base-palette-slate-800); /* Stronger gray */
  --cnvs-sys-color-static-gray-strong: var(--cnvs-base-palette-slate-700); /* Stronger gray */
  --cnvs-sys-color-static-gray-soft: var(--cnvs-base-palette-slate-200); /* Light gray */
  --cnvs-sys-color-static-gray-default: var(--cnvs-base-palette-slate-600); /* Gray */
  --cnvs-sys-color-static-black: var(--cnvs-base-palette-neutral-1000); /* Just black */
  --cnvs-sys-color-static-white: var(--cnvs-base-palette-neutral-0); /* Just white */
  --cnvs-sys-color-static-red-softer: var(--cnvs-base-palette-red-50); /* Light red */
  --cnvs-sys-color-static-red-strongest: var(--cnvs-base-palette-red-950); /* Strong red */
  --cnvs-sys-color-static-red-softest: var(--cnvs-base-palette-red-25); /* Light red */
  --cnvs-sys-color-static-red-stronger: var(--cnvs-base-palette-red-800); /* Strong red */
  --cnvs-sys-color-static-red-strong: var(--cnvs-base-palette-red-700); /* Strong red */
  --cnvs-sys-color-static-red-soft: var(--cnvs-base-palette-red-100); /* Light red */
  --cnvs-sys-color-static-red-default: var(--cnvs-base-palette-red-600); /* Red */
  --cnvs-sys-color-static-green-strongest: var(--cnvs-base-palette-green-950); /* Stronger green */
  --cnvs-sys-color-static-green-softest: var(--cnvs-base-palette-green-25); /* Light green */
  --cnvs-sys-color-static-green-stronger: var(--cnvs-base-palette-green-800); /* Stronger green */
  --cnvs-sys-color-static-green-softer: var(--cnvs-base-palette-green-50); /* Light green */
  --cnvs-sys-color-static-green-strong: var(--cnvs-base-palette-green-700); /* Stronger green */
  --cnvs-sys-color-static-green-soft: var(--cnvs-base-palette-green-100); /* Light green */
  --cnvs-sys-color-static-green-default: var(--cnvs-base-palette-green-600); /* Default green */
  --cnvs-sys-color-static-blue-strongest: var(--cnvs-base-palette-blue-950); /* Stronger blue */
  --cnvs-sys-color-static-blue-soft: var(--cnvs-base-palette-blue-100); /* Light blue */
  --cnvs-sys-color-static-blue-softer: var(--cnvs-base-palette-blue-50); /* Light blue */
  --cnvs-sys-color-static-blue-stronger: var(--cnvs-base-palette-blue-800); /* Stronger blue */
  --cnvs-sys-color-static-blue-strong: var(--cnvs-base-palette-blue-700); /* Stronger blue */
  --cnvs-sys-color-static-blue-softest: var(--cnvs-base-palette-blue-25); /* Light blue */
  --cnvs-sys-color-static-blue-default: var(--cnvs-base-palette-blue-600); /* Blue */
  --cnvs-sys-color-static-orange-strong: var(--cnvs-base-palette-amber-500);
  --cnvs-sys-color-static-orange-soft: var(--cnvs-base-palette-amber-100);
  --cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-amber-400);
  --cnvs-sys-color-static-gold-stronger: var(--cnvs-base-palette-amber-600);
  --cnvs-sys-color-shadow-ambient: var(--cnvs-base-palette-slate-a100); /* Subtle ambient shadow for soft depth */
  --cnvs-sys-color-shadow-base: var(--cnvs-base-palette-slate-a200); /* Primary shadow color for elevated elements */
  --cnvs-sys-color-border-transparent: var(--cnvs-base-palette-neutral-a0); /* Invisible border for layout spacing */
  --cnvs-sys-color-border-inverse-strong: var(--cnvs-base-palette-white-a700); /* Stronger border for use on dark backgrounds */
  --cnvs-sys-color-border-inverse-default: var(--cnvs-base-palette-neutral-0); /* Border for use on dark backgrounds */
  --cnvs-sys-color-border-warning: var(--cnvs-base-palette-amber-400); /* Border for warning states (not tenant themeable) */
  --cnvs-sys-color-border-danger: var(--cnvs-base-palette-red-500); /* Border for error states (not tenant themeable) */
  --cnvs-sys-color-border-info-default: var(--cnvs-base-palette-blue-500); /* Border for informational containers (not tenant themeable) */
  --cnvs-sys-color-border-strong: var(--cnvs-base-palette-slate-a300); /* Stronger border for more visible separation */
  --cnvs-sys-color-border-default: var(--cnvs-base-palette-slate-a200); /* Default border for containers and dividers */
  --cnvs-sys-color-border-container: var(--cnvs-base-palette-slate-300); /* Cards, Toasts, Surfaces */
  --cnvs-sys-color-border-primary-default: var(--cnvs-base-palette-blue-500); /* Brand, Focus */
  --cnvs-sys-color-border-divider: var(--cnvs-base-palette-slate-200); /* Dividers */
  --cnvs-sys-color-border-caution-strong: var(--cnvs-base-palette-amber-500); /* Warning outer (box shadow) */
  --cnvs-sys-color-border-caution-default: var(--cnvs-base-palette-amber-400); /* Warning inner */
  --cnvs-sys-color-border-critical-default: var(--cnvs-base-palette-red-500); /* Error */
  --cnvs-sys-color-border-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast border for maximum visibility */
  --cnvs-sys-color-border-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Secondary Button Hover */
  --cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-slate-a700); /* Hover state border for form inputs */
  --cnvs-sys-color-border-input-default: var(--cnvs-base-palette-slate-a500); /* Default border for form inputs */
  --cnvs-sys-color-border-input-inverse: var(--cnvs-base-palette-neutral-0); /* Borders on checkboxes and radios */
  --cnvs-sys-color-border-input-strong: var(--cnvs-base-palette-slate-700); /* Input hover */
  --cnvs-sys-color-border-input-disabled: var(--cnvs-base-palette-slate-400); /* Disabled inputs */
  --cnvs-sys-color-border-ai: var(--cnvs-base-palette-blue-950); /* Active state on AI borders */
  --cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-a950); /* Stronger high contrast text */
  --cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast text for maximum readability */
  --cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /* Text and icons indicating AI-generated content */
  --cnvs-sys-color-fg-link-hover: var(--cnvs-base-palette-blue-700); /* Text color for hyperlinks on hover */
  --cnvs-sys-color-fg-link-default: var(--cnvs-base-palette-blue-600); /* Default text color for hyperlinks (not tenant themeable) */
  --cnvs-sys-color-fg-success-strong: var(--cnvs-base-palette-green-700); /* Stronger success text and icons */
  --cnvs-sys-color-fg-success-default: var(--cnvs-base-palette-green-600); /* Success text and icons (not tenant themeable) */
  --cnvs-sys-color-fg-warning-strong: var(--cnvs-base-palette-amber-700); /* Stronger warning text and icons */
  --cnvs-sys-color-fg-warning-default: var(--cnvs-base-palette-amber-600); /* Warning text and icons (not tenant themeable) */
  --cnvs-sys-color-fg-danger-strong: var(--cnvs-base-palette-red-700); /* Stronger error text and icons */
  --cnvs-sys-color-fg-danger-default: var(--cnvs-base-palette-red-600); /* Error text and icons (not tenant themeable) */
  --cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /* Text and icons for use on dark backgrounds */
  --cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-a400); /* Disabled state text and icons */
  --cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-a950); /* Strongest text for titles */
  --cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-a900); /* Stronger text for headings and labels */
  --cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-a800); /* Default body text and icons */
  --cnvs-sys-color-fg-positive-stronger: var(--cnvs-base-palette-green-800); /* Error */
  --cnvs-sys-color-fg-positive-strong: var(--cnvs-base-palette-green-700); /* Error */
  --cnvs-sys-color-fg-positive-soft: var(--cnvs-base-palette-green-400); /* Error */
  --cnvs-sys-color-fg-positive-softer: var(--cnvs-base-palette-green-200); /* Error */
  --cnvs-sys-color-fg-positive-default: var(--cnvs-base-palette-green-600); /* Error */
  --cnvs-sys-color-fg-info-strong: var(--cnvs-base-palette-blue-700); /* Stronger informational text and icons */
  --cnvs-sys-color-fg-info-default: var(--cnvs-base-palette-blue-600); /* Informational text and icons (not tenant themeable) */
  --cnvs-sys-color-fg-info-stronger: var(--cnvs-base-palette-blue-800); /* Links on hover */
  --cnvs-sys-color-fg-info-soft: var(--cnvs-base-palette-blue-400);
  --cnvs-sys-color-fg-info-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
  --cnvs-sys-color-fg-caution-softer: var(--cnvs-base-palette-amber-500); /* Warning */
  --cnvs-sys-color-fg-caution-stronger: var(--cnvs-base-palette-amber-975); /* Warning on hover */
  --cnvs-sys-color-fg-caution-soft: var(--cnvs-base-palette-amber-700); /* Warning */
  --cnvs-sys-color-fg-caution-strong: var(--cnvs-base-palette-amber-950); /* Warning on hover */
  --cnvs-sys-color-fg-caution-default: var(--cnvs-base-palette-amber-900); /* Warning */
  --cnvs-sys-color-fg-primary-strong: var(--cnvs-base-palette-blue-700); /* Links on hover */
  --cnvs-sys-color-fg-primary-stronger: var(--cnvs-base-palette-blue-800); /* Links on hover */
  --cnvs-sys-color-fg-primary-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
  --cnvs-sys-color-fg-primary-soft: var(--cnvs-base-palette-blue-400);
  --cnvs-sys-color-fg-primary-default: var(--cnvs-base-palette-blue-600); /* Branded text */
  --cnvs-sys-color-fg-muted-strong: var(--cnvs-base-palette-slate-a700); /* Stronger secondary text */
  --cnvs-sys-color-fg-muted-default: var(--cnvs-base-palette-slate-a600); /* Secondary text for hints and placeholders */
  --cnvs-sys-color-fg-muted-soft: var(--cnvs-base-palette-slate-400); /* Tab item foreground */
  --cnvs-sys-color-fg-muted-stronger: var(--cnvs-base-palette-slate-800);
  --cnvs-sys-color-fg-critical-softer: var(--cnvs-base-palette-red-200); /* Error */
  --cnvs-sys-color-fg-critical-soft: var(--cnvs-base-palette-red-400); /* Error */
  --cnvs-sys-color-fg-critical-stronger: var(--cnvs-base-palette-red-800); /* Error */
  --cnvs-sys-color-fg-critical-strong: var(--cnvs-base-palette-red-700); /* Error */
  --cnvs-sys-color-fg-critical-default: var(--cnvs-base-palette-red-600); /* Error */
  --cnvs-sys-color-icon-info-stronger: var(--cnvs-base-palette-blue-800); /* Stronger brand icon color */
  --cnvs-sys-color-icon-info-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
  --cnvs-sys-color-icon-info-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
  --cnvs-sys-color-icon-disabled: var(--cnvs-base-palette-slate-400); /* Disabled icon color */
  --cnvs-sys-color-icon-caution-softer: var(--cnvs-base-palette-amber-500); /* Softer caution icon color */
  --cnvs-sys-color-icon-caution-soft: var(--cnvs-base-palette-amber-700); /* Soft caution icon color */
  --cnvs-sys-color-icon-caution-stronger: var(--cnvs-base-palette-amber-975); /* Strong caution icon color */
  --cnvs-sys-color-icon-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong caution icon color */
  --cnvs-sys-color-icon-caution-default: var(--cnvs-base-palette-amber-900); /* Caution icon color */
  --cnvs-sys-color-icon-critical-softer: var(--cnvs-base-palette-red-200); /* Error icon color */
  --cnvs-sys-color-icon-critical-soft: var(--cnvs-base-palette-red-400); /* Error icon color */
  --cnvs-sys-color-icon-critical-stronger: var(--cnvs-base-palette-red-800); /* Error icon color */
  --cnvs-sys-color-icon-critical-strong: var(--cnvs-base-palette-red-700); /* Error icon color */
  --cnvs-sys-color-icon-critical-default: var(--cnvs-base-palette-red-600); /* Error icon color */
  --cnvs-sys-color-icon-positive-softer: var(--cnvs-base-palette-green-200); /* Success icon color */
  --cnvs-sys-color-icon-positive-soft: var(--cnvs-base-palette-green-400); /* Success icon color */
  --cnvs-sys-color-icon-positive-stronger: var(--cnvs-base-palette-green-800); /* Success icon color */
  --cnvs-sys-color-icon-positive-strong: var(--cnvs-base-palette-green-700); /* Success icon color */
  --cnvs-sys-color-icon-positive-default: var(--cnvs-base-palette-green-600); /* Success icon color */
  --cnvs-sys-color-icon-primary-softer: var(--cnvs-base-palette-blue-200); /* Stronger brand icon color */
  --cnvs-sys-color-icon-primary-soft: var(--cnvs-base-palette-blue-400); /* Stronger brand icon color */
  --cnvs-sys-color-icon-primary-stronger: var(--cnvs-base-palette-blue-800); /* Stronger brand icon color */
  --cnvs-sys-color-icon-primary-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
  --cnvs-sys-color-icon-primary-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
  --cnvs-sys-color-icon-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse icon color */
  --cnvs-sys-color-icon-strong: var(--cnvs-base-palette-neutral-900); /* Hover icon color */
  --cnvs-sys-color-icon-soft: var(--cnvs-base-palette-slate-600); /* Disabled icon color */
  --cnvs-sys-color-icon-default: var(--cnvs-base-palette-neutral-800); /* Default icon color */
  --cnvs-sys-color-text-info-softer: var(--cnvs-base-palette-blue-200); /* Active links */
  --cnvs-sys-color-text-info-soft: var(--cnvs-base-palette-blue-400); /* Active links */
  --cnvs-sys-color-text-info-stronger: var(--cnvs-base-palette-blue-800); /* Active links */
  --cnvs-sys-color-text-info-strong: var(--cnvs-base-palette-blue-700); /* Branded hover text */
  --cnvs-sys-color-text-info-default: var(--cnvs-base-palette-blue-600); /* Branded text */
  --cnvs-sys-color-text-positive-softer: var(--cnvs-base-palette-green-200); /* Active links */
  --cnvs-sys-color-text-positive-soft: var(--cnvs-base-palette-green-400); /* Active links */
  --cnvs-sys-color-text-positive-stronger: var(--cnvs-base-palette-green-800); /* Active links */
  --cnvs-sys-color-text-positive-strong: var(--cnvs-base-palette-green-700); /* Branded hover text */
  --cnvs-sys-color-text-positive-default: var(--cnvs-base-palette-green-600); /* Branded text */
  --cnvs-sys-color-text-ai: var(--cnvs-base-palette-blue-950);
  --cnvs-sys-color-text-caution-softer: var(--cnvs-base-palette-amber-200); /* Softer warning text */
  --cnvs-sys-color-text-caution-stronger: var(--cnvs-base-palette-amber-975); /* Stronger warning text */
  --cnvs-sys-color-text-caution-soft: var(--cnvs-base-palette-amber-400); /* Disabled warning text */
  --cnvs-sys-color-text-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong warning text */
  --cnvs-sys-color-text-caution-default: var(--cnvs-base-palette-amber-900); /* Warning text */
  --cnvs-sys-color-text-primary-softer: var(--cnvs-base-palette-blue-200); /* Active links */
  --cnvs-sys-color-text-primary-soft: var(--cnvs-base-palette-blue-400); /* Active links */
  --cnvs-sys-color-text-primary-stronger: var(--cnvs-base-palette-blue-800); /* Active links */
  --cnvs-sys-color-text-primary-strong: var(--cnvs-base-palette-blue-700); /* Branded hover text */
  --cnvs-sys-color-text-primary-default: var(--cnvs-base-palette-blue-600); /* Branded text */
  --cnvs-sys-color-text-critical-softer: var(--cnvs-base-palette-red-200); /* Error text */
  --cnvs-sys-color-text-critical-soft: var(--cnvs-base-palette-red-400); /* Error text */
  --cnvs-sys-color-text-critical-stronger: var(--cnvs-base-palette-red-800); /* Error text */
  --cnvs-sys-color-text-critical-strong: var(--cnvs-base-palette-red-700); /* Error text */
  --cnvs-sys-color-text-critical-default: var(--cnvs-base-palette-red-600); /* Error text */
  --cnvs-sys-color-text-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse text color */
  --cnvs-sys-color-text-hint: var(--cnvs-base-palette-slate-600); /* Hint text color */
  --cnvs-sys-color-text-disabled: var(--cnvs-base-palette-slate-400); /* Disabled text color */
  --cnvs-sys-color-text-stronger: var(--cnvs-base-palette-neutral-950); /* Display text */
  --cnvs-sys-color-text-strong: var(--cnvs-base-palette-neutral-900); /* Heading text */
  --cnvs-sys-color-text-default: var(--cnvs-base-palette-neutral-800); /* Body text */
  --cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-0); /* Default page background */
  --cnvs-sys-color-bg-info-stronger: var(--cnvs-base-palette-blue-800); /* Brand active background */
  --cnvs-sys-color-bg-info-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
  --cnvs-sys-color-bg-info-default: var(--cnvs-base-palette-blue-600); /* Info color */
  --cnvs-sys-color-bg-info-soft: var(--cnvs-base-palette-blue-100); /* Disabled */
  --cnvs-sys-color-bg-info-softer: var(--cnvs-base-palette-blue-50); /* Select */
  --cnvs-sys-color-bg-info-softest: var(--cnvs-base-palette-blue-25); /* Surface */
  --cnvs-sys-color-bg-ai-strongest: var(--cnvs-base-palette-blue-950); /* AI surfaces */
  --cnvs-sys-color-bg-ai-stronger: var(--cnvs-base-palette-blue-400); /* Active state on AI containers */
  --cnvs-sys-color-bg-ai-strong: var(--cnvs-base-palette-blue-200); /* Hover on AI container */
  --cnvs-sys-color-bg-ai-default: var(--cnvs-base-palette-blue-100); /* AI container */
  --cnvs-sys-color-bg-critical-stronger: var(--cnvs-base-palette-red-800); /* Stronger error background */
  --cnvs-sys-color-bg-critical-strong: var(--cnvs-base-palette-red-700); /* Strong error background */
  --cnvs-sys-color-bg-critical-default: var(--cnvs-base-palette-red-600); /* Default error background */
  --cnvs-sys-color-bg-critical-soft: var(--cnvs-base-palette-red-100); /* Disabled error background */
  --cnvs-sys-color-bg-critical-softer: var(--cnvs-base-palette-red-50); /* Disabled error background */
  --cnvs-sys-color-bg-critical-softest: var(--cnvs-base-palette-red-25); /* Input error background */
  --cnvs-sys-color-bg-caution-stronger: var(--cnvs-base-palette-amber-600); /* Stronger warning background */
  --cnvs-sys-color-bg-caution-strong: var(--cnvs-base-palette-amber-500); /* Strong warning background */
  --cnvs-sys-color-bg-caution-default: var(--cnvs-base-palette-amber-400); /* Default warning background */
  --cnvs-sys-color-bg-caution-soft: var(--cnvs-base-palette-amber-100); /* Softer warning background */
  --cnvs-sys-color-bg-caution-softer: var(--cnvs-base-palette-amber-50); /* Softer warning background */
  --cnvs-sys-color-bg-caution-softest: var(--cnvs-base-palette-amber-25); /* Disabled warning background */
  --cnvs-sys-color-bg-positive-stronger: var(--cnvs-base-palette-green-800); /* Active success background */
  --cnvs-sys-color-bg-positive-strong: var(--cnvs-base-palette-green-700); /* Hover success background */
  --cnvs-sys-color-bg-positive-default: var(--cnvs-base-palette-green-600); /* Disabled success background */
  --cnvs-sys-color-bg-positive-soft: var(--cnvs-base-palette-green-100); /* Disabled success background */
  --cnvs-sys-color-bg-positive-softer: var(--cnvs-base-palette-green-50); /* Surface success background */
  --cnvs-sys-color-bg-positive-softest: var(--cnvs-base-palette-green-25); /* Lightest surface success background */
  --cnvs-sys-color-bg-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Contrast backgrounds, like Secondary Buttons */
  --cnvs-sys-color-bg-contrast-default: var(--cnvs-base-palette-neutral-900); /* Contrast backgrounds, like Secondary Buttons */
  --cnvs-sys-color-bg-muted-strong: var(--cnvs-base-palette-slate-700);
  --cnvs-sys-color-bg-muted-default: var(--cnvs-base-palette-slate-600);
  --cnvs-sys-color-bg-muted-soft: var(--cnvs-base-palette-slate-500);
  --cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
  --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-50); /* Alternative page background for visual separation between page sections */
  --cnvs-sys-color-bg-alt-stronger: var(--cnvs-base-palette-slate-300); /* Active state for segmented control, Pill */
  --cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
  --cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
  --cnvs-sys-color-bg-alt-softer: var(--cnvs-base-palette-slate-25); /* Disabled inputs */
  --cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
  --cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-400)); /* Overlay background */
  --cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-250)); /* Inverse Secondary Button Active state */
  --cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h  /  var(--cnvs-base-opacity-100)); /* Inverse Secondary Button Hover state */
  --cnvs-sys-color-bg-transparent-default: transparent; /* Transparent background */
  --cnvs-sys-color-bg-primary-stronger: var(--cnvs-base-palette-blue-800); /* Brand active background */
  --cnvs-sys-color-bg-primary-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
  --cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blue-600); /* Primary brand color */
  --cnvs-sys-color-bg-primary-soft: var(--cnvs-base-palette-blue-100); /* Primary disabled */
  --cnvs-sys-color-bg-primary-softer: var(--cnvs-base-palette-blue-50); /* Select */
  --cnvs-sys-color-bg-primary-softest: var(--cnvs-base-palette-blue-25); /* Surface */
  --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
  --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
  --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
  --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
  --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
  --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
  --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
  --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
  --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
  --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
  --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
  --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
  --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
  --cnvs-sys-space-x20: calc(var(--cnvs-base-unit) * 20); /* - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available */
  --cnvs-sys-space-x16: calc(var(--cnvs-base-unit) * 16); /* - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections */
  --cnvs-sys-space-x14: calc(var(--cnvs-base-unit) * 14); /* Mobile only */
  --cnvs-sys-space-x10: calc(var(--cnvs-base-unit) * 10); /* - Used for outer margins on the overall page content ; - Used for inner margins on large items such as page sections */
  --cnvs-sys-space-x8: calc(var(--cnvs-base-unit) * 8); /* - Standard spacing between cards; - Used to separate groups of content ; - Separate section headings or titles from body text or inputs */
  --cnvs-sys-space-x6: calc(var(--cnvs-base-unit) * 6); /* - Padding around card content; - Related elements where more space between them can be afforded; - Separate section headings or titles from body text or inputs */
  --cnvs-sys-space-x5: calc(var(--cnvs-base-unit) * 5); /* Mobile only */
  --cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4); /* Default space token. Used to group Inputs with related data */
  --cnvs-sys-space-x3: calc(var(--cnvs-base-unit) * 3); /* Use when compact padding is required */
  --cnvs-sys-space-x2: calc(var(--cnvs-base-unit) * 2); /* Commonly used to group compact elements like icon buttons */
  --cnvs-sys-space-x1: var(--cnvs-base-unit); /* Compact spacing between text or icons */
  --cnvs-sys-space-half: calc(var(--cnvs-base-unit) * 0.5); /* Mobile only */
  --cnvs-sys-shape-none: var(--cnvs-base-size-0); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
  --cnvs-sys-shape-round: calc(var(--cnvs-base-unit) * 250); /* Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges. */
  --cnvs-sys-shape-x6: calc(var(--cnvs-base-unit) * 6); /* (Mobile) Full width sheets that are temporary and modal views */
  --cnvs-sys-shape-x4: calc(var(--cnvs-base-unit) * 4); /* (Mobile) Primary containers that house a large amount of other elements and complex information */
  --cnvs-sys-shape-x2: calc(var(--cnvs-base-unit) * 2); /* Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts. */
  --cnvs-sys-shape-x1-half: calc(var(--cnvs-base-unit) * 1.5);
  --cnvs-sys-shape-x1: var(--cnvs-base-unit);
  --cnvs-sys-shape-half: calc(var(--cnvs-base-unit) * 0.5); /* Use this for subtle and small components that don't require to group complex information like Status Indicators, Checkboxes and Color Swatches. */
  --cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
  --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
  --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
  --cnvs-sys-opacity-surface-hover: var(--cnvs-base-opacity-100); /* State layer applied to surface colors on hover */
  --cnvs-sys-color-brand-border-caution: var(--cnvs-brand-caution-500); /* Tenant-themeable caution border for warning states */
  --cnvs-sys-color-brand-border-critical: var(--cnvs-brand-critical-500); /* Tenant-themeable critical border for error states */
  --cnvs-sys-color-brand-border-primary: var(--cnvs-brand-primary-500); /* Tenant-themeable primary border for focused inputs */
  --cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-primary-700); /* Tenant-themeable text color for selected items */
  --cnvs-sys-color-brand-fg-positive-strong: var(--cnvs-brand-positive-700); /* Stronger tenant-themeable positive text and icon color */
  --cnvs-sys-color-brand-fg-positive-default: var(--cnvs-brand-positive-600); /* Tenant-themeable positive text and icon color */
  --cnvs-sys-color-brand-fg-caution-strong: var(--cnvs-brand-caution-700); /* Stronger tenant-themeable caution text and icon color */
  --cnvs-sys-color-brand-fg-caution-default: var(--cnvs-brand-caution-600); /* Tenant-themeable caution text and icon color */
  --cnvs-sys-color-brand-fg-critical-strong: var(--cnvs-brand-critical-700); /* Stronger tenant-themeable critical text and icon color */
  --cnvs-sys-color-brand-fg-critical-default: var(--cnvs-brand-critical-600); /* Tenant-themeable critical text and icon color */
  --cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-primary-700); /* Stronger tenant-themeable primary text and icon color */
  --cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-primary-600); /* Tenant-themeable primary text and icon color */
  --cnvs-sys-color-brand-accent-action: var(--cnvs-brand-primary-600);
  --cnvs-sys-color-brand-accent-positive: var(--cnvs-brand-positive-600); /* Tenant-themeable solid positive accent */
  --cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-caution-400); /* Tenant-themeable solid caution accent */
  --cnvs-sys-color-brand-accent-critical: var(--cnvs-brand-critical-600); /* Tenant-themeable solid critical accent for destructive actions */
  --cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-primary-600); /* Tenant-themeable solid primary accent for buttons and key actions */
  --cnvs-sys-color-brand-surface-selected: var(--cnvs-brand-primary-a50); /* Tenant-themeable background for selected items */
  --cnvs-sys-color-brand-surface-positive-strong: var(--cnvs-brand-positive-a50); /* Stronger tenant-themeable positive container background */
  --cnvs-sys-color-brand-surface-positive-default: var(--cnvs-brand-positive-a25); /* Tenant-themeable positive/success container background */
  --cnvs-sys-color-brand-surface-caution-strong: var(--cnvs-brand-caution-a50); /* Stronger tenant-themeable caution container background */
  --cnvs-sys-color-brand-surface-caution-default: var(--cnvs-brand-caution-a25); /* Tenant-themeable caution/warning container background */
  --cnvs-sys-color-brand-surface-critical-strong: var(--cnvs-brand-critical-a50); /* Stronger tenant-themeable critical container background */
  --cnvs-sys-color-brand-surface-critical-default: var(--cnvs-brand-critical-a25); /* Tenant-themeable critical/error container background */
  --cnvs-sys-color-brand-surface-primary-strong: var(--cnvs-brand-primary-a50); /* Stronger tenant-themeable primary container background */
  --cnvs-sys-color-brand-surface-primary-default: var(--cnvs-brand-primary-a25); /* Tenant-themeable primary container background */
  --cnvs-sys-color-brand-focus-caution-inner: var(--cnvs-brand-caution-400); /* Tenant-themeable inner focus ring for caution-state elements */
  --cnvs-sys-color-brand-focus-caution-outer: var(--cnvs-brand-caution-500); /* Tenant-themeable outer focus ring for caution-state elements */
  --cnvs-sys-color-brand-focus-critical: var(--cnvs-brand-critical-500); /* Tenant-themeable focus ring for error-state elements */
  --cnvs-sys-color-brand-focus-primary: var(--cnvs-brand-primary-500); /* Tenant-themeable focus ring for interactive elements */
  --cnvs-sys-color-shadow-default: var(--cnvs-sys-color-shadow-base); /* Main shadow color */
  --cnvs-sys-color-shadow-2: var(--cnvs-sys-color-shadow-ambient); /* Second shadow color */
  --cnvs-sys-color-shadow-1: var(--cnvs-sys-color-shadow-base); /* First shadow color */
  --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
  --cnvs-sys-shape-zero: var(--cnvs-sys-shape-none); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
  --cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
  --cnvs-sys-breakpoints-lg: 1024px; /* Large screens, such as desktops. */
  --cnvs-sys-breakpoints-md: 768px; /* Medium screens, such as laptops. */
  --cnvs-sys-breakpoints-sm: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
  --cnvs-sys-gap-xxl: var(--cnvs-base-size-800); /* Use this for the space between content sections */
  --cnvs-sys-gap-xl: var(--cnvs-base-size-400); /* Use this for the default spacing between cards, as well as the gutter width used in the large 12-column grid. */
  --cnvs-sys-gap-lg: var(--cnvs-base-size-300); /* Use this for tighter spacing between cards. Cards are self contained blocks of content. */
  --cnvs-sys-gap-md: var(--cnvs-base-size-200); /* Use the default inline spacing when other gap tokens may not fit. */
  --cnvs-sys-gap-sm: var(--cnvs-base-size-100); /* Horizontal space between pills, tighter space between buttons, inline icon to text, segmented controls. */
  --cnvs-sys-gap-xs: var(--cnvs-base-size-50); /* Compact spacing from icon to text, labels to inputs, between tab items. */
  --cnvs-sys-padding-xxl: var(--cnvs-base-size-400); /* Padding used around Modal and Large Button content */
  --cnvs-sys-padding-xl: var(--cnvs-base-size-300); /* Padding used around Card and Medium Button content */
  --cnvs-sys-padding-lg: var(--cnvs-base-size-250); /* Large padding, used in Medium Buttons with Icons */
  --cnvs-sys-padding-md: var(--cnvs-base-size-200); /* Default padding used for components used around Small Button content. */
  --cnvs-sys-padding-sm: var(--cnvs-base-size-150); /* Compact padding, used in Rich Text Editor, or X-Small Buttons */
  --cnvs-sys-padding-xs: var(--cnvs-base-size-100); /* Horizontal padding on Input Fields */
  --cnvs-sys-padding-xxs: var(--cnvs-base-size-50);
  --cnvs-sys-size-xxl: var(--cnvs-base-size-800); /* Expandable containers. Used for expandable containers in their collapsed state. */
  --cnvs-sys-size-xl: var(--cnvs-base-size-700); /* Content containers. Used for table cells and toasts. */
  --cnvs-sys-size-lg: var(--cnvs-base-size-600); /* Prominent components. Used for large buttons, segmented controls, expandable triggers, tabs, and avatars. */
  --cnvs-sys-size-md: var(--cnvs-base-size-500); /* Default size for most components. Used for buttons, segmented controls, banners, input fields, and menu items. */
  --cnvs-sys-size-sm: var(--cnvs-base-size-400); /* Standard interactive components. Used for buttons, segmented controls, tooltips, and avatars. */
  --cnvs-sys-size-xs: var(--cnvs-base-size-300); /* Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons. */
  --cnvs-sys-size-xxs: var(--cnvs-base-size-250); /* Compact indicators. Used for status indicators and count badges. */
  --cnvs-sys-size-xxxs: var(--cnvs-base-size-200); /* Used for switch toggle. */
  --cnvs-sys-line-height-title-lg: var(--cnvs-base-size-800);
  --cnvs-sys-line-height-title-md: var(--cnvs-base-size-700);
  --cnvs-sys-line-height-title-sm: var(--cnvs-base-size-600);
  --cnvs-sys-line-height-heading-lg: var(--cnvs-base-size-500);
  --cnvs-sys-line-height-heading-md: var(--cnvs-base-size-450);
  --cnvs-sys-line-height-heading-sm: var(--cnvs-base-size-400);
  --cnvs-sys-line-height-body-lg: var(--cnvs-base-size-350);
  --cnvs-sys-line-height-body-md: var(--cnvs-base-size-350);
  --cnvs-sys-line-height-body-sm: var(--cnvs-base-size-300);
  --cnvs-sys-line-height-subtext-lg: var(--cnvs-base-size-250);
  --cnvs-sys-line-height-subtext-md: var(--cnvs-base-size-200);
  --cnvs-sys-line-height-subtext-sm: var(--cnvs-base-size-200);
  --cnvs-sys-font-size-title-lg: var(--cnvs-base-size-700);
  --cnvs-sys-font-size-title-md: var(--cnvs-base-size-600);
  --cnvs-sys-font-size-title-sm: var(--cnvs-base-size-500);
  --cnvs-sys-font-size-heading-lg: var(--cnvs-base-size-400);
  --cnvs-sys-font-size-heading-md: var(--cnvs-base-size-350);
  --cnvs-sys-font-size-heading-sm: var(--cnvs-base-size-300);
  --cnvs-sys-font-size-body-lg: var(--cnvs-base-size-250);
  --cnvs-sys-font-size-body-md: var(--cnvs-base-size-225);
  --cnvs-sys-font-size-body-sm: var(--cnvs-base-size-200);
  --cnvs-sys-font-size-subtext-lg: var(--cnvs-base-size-175);
  --cnvs-sys-font-size-subtext-md: var(--cnvs-base-size-150);
  --cnvs-sys-font-size-subtext-sm: var(--cnvs-base-size-125);
  --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
  --cnvs-sys-shape-full: calc(var(--cnvs-base-size-75) * 100); /* Full rounding is reserved high-visibility components. This shape is intended to draw attention. Buttons, Badge, Status Indicator, Essential Inputs, Border Containers (Not Cards) */
  --cnvs-sys-shape-xxxl: var(--cnvs-base-size-400); /* Maximum rounding for modals and large containers */
  --cnvs-sys-shape-xxl: var(--cnvs-base-size-300); /* Extra extra large rounding for cards and items */
  --cnvs-sys-shape-xl: var(--cnvs-base-size-200); /* Extra large rounding for prominent containers */
  --cnvs-sys-shape-lg: var(--cnvs-base-size-150); /* Rich text editor */
  --cnvs-sys-shape-md: var(--cnvs-base-size-100); /* Inputs, Toast, Tooltip, Snackbar */
  --cnvs-sys-shape-sm: var(--cnvs-base-size-50); /* Pill, Status Indicator, Checkbox */
  --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
  --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
  --cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
  --cnvs-sys-font-size-heading-small: var(--cnvs-base-font-size-200);
  --cnvs-sys-font-size-heading-medium: var(--cnvs-base-font-size-250);
  --cnvs-sys-font-size-heading-large: var(--cnvs-base-font-size-300);
  --cnvs-sys-font-size-title-small: var(--cnvs-base-font-size-400);
  --cnvs-sys-font-size-title-medium: var(--cnvs-base-font-size-500);
  --cnvs-sys-font-size-title-large: var(--cnvs-base-font-size-600);
}

.cnvs-sys-type-subtext-small {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-small);
  font-size: var(--cnvs-sys-font-size-subtext-small);
  letter-spacing: var(--cnvs-base-letter-spacing-50);
}

.cnvs-sys-type-subtext-medium {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-medium);
  font-size: var(--cnvs-sys-font-size-subtext-medium);
  letter-spacing: var(--cnvs-base-letter-spacing-100);
}

.cnvs-sys-type-subtext-large {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-large);
  font-size: var(--cnvs-sys-font-size-subtext-large);
  letter-spacing: var(--cnvs-base-letter-spacing-150);
}

.cnvs-sys-type-subtext-sm {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-sm);
  font-size: var(--cnvs-sys-font-size-subtext-sm);
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-sm);
}

.cnvs-sys-type-subtext-md {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-md);
  font-size: var(--cnvs-sys-font-size-subtext-md);
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md);
}

.cnvs-sys-type-subtext-lg {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-lg);
  font-size: var(--cnvs-sys-font-size-subtext-lg);
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg);
}

.cnvs-sys-type-body-small {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-body-small);
  font-size: var(--cnvs-sys-font-size-body-small);
  letter-spacing: var(--cnvs-base-letter-spacing-200);
}

.cnvs-sys-type-body-medium {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-body-medium);
  font-size: var(--cnvs-sys-font-size-body-medium);
}

.cnvs-sys-type-body-large {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-body-large);
  font-size: var(--cnvs-sys-font-size-body-large);
}

.cnvs-sys-type-body-sm {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-body-sm);
  font-size: var(--cnvs-sys-font-size-body-sm);
  letter-spacing: var(--cnvs-sys-letter-spacing-body-sm);
}

.cnvs-sys-type-body-md {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-body-md);
  font-size: var(--cnvs-sys-font-size-body-md);
}

.cnvs-sys-type-body-lg {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-body-lg);
  font-size: var(--cnvs-sys-font-size-body-lg);
}

.cnvs-sys-type-heading-small {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-heading-small);
  font-size: var(--cnvs-sys-font-size-heading-small);
}

.cnvs-sys-type-heading-medium {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-heading-medium);
  font-size: var(--cnvs-sys-font-size-heading-medium);
}

.cnvs-sys-type-heading-large {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-heading-large);
  font-size: var(--cnvs-sys-font-size-heading-large);
}

.cnvs-sys-type-heading-sm {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-heading-sm);
  font-size: var(--cnvs-sys-font-size-heading-sm);
}

.cnvs-sys-type-heading-md {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-heading-md);
  font-size: var(--cnvs-sys-font-size-heading-md);
}

.cnvs-sys-type-heading-lg {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-heading-lg);
  font-size: var(--cnvs-sys-font-size-heading-lg);
}

.cnvs-sys-type-title-small {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-title-small);
  font-size: var(--cnvs-sys-font-size-title-small);
}

.cnvs-sys-type-title-medium {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-title-medium);
  font-size: var(--cnvs-sys-font-size-title-medium);
}

.cnvs-sys-type-title-large {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-title-large);
  font-size: var(--cnvs-sys-font-size-title-large);
}

.cnvs-sys-type-title-sm {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-title-sm);
  font-size: var(--cnvs-sys-font-size-title-sm);
}

.cnvs-sys-type-title-md {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-title-md);
  font-size: var(--cnvs-sys-font-size-title-md);
}

.cnvs-sys-type-title-lg {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-title-lg);
  font-size: var(--cnvs-sys-font-size-title-lg);
}