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

@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: @cnvs-base-font-weight-700;
@cnvs-sys-font-weight-medium: @cnvs-base-font-weight-500;
@cnvs-sys-font-weight-normal: @cnvs-base-font-weight-400;
@cnvs-sys-font-weight-light: @cnvs-base-font-weight-300;
@cnvs-sys-letter-spacing-body-sm: @cnvs-base-letter-spacing-200;
@cnvs-sys-letter-spacing-subtext-lg: @cnvs-base-letter-spacing-150;
@cnvs-sys-letter-spacing-subtext-md: @cnvs-base-letter-spacing-100;
@cnvs-sys-letter-spacing-subtext-sm: @cnvs-base-letter-spacing-50;
@cnvs-sys-font-family-global: @cnvs-base-font-family-200;
@cnvs-sys-font-family-mono: @cnvs-base-font-family-100;
@cnvs-sys-font-family-default: @cnvs-base-font-family-50;
@cnvs-sys-gap-none: @cnvs-base-size-0; // Use when there is no space between elements
@cnvs-sys-padding-none: @cnvs-base-size-0; // Use when there should be no space between content and element's edges.
@cnvs-sys-opacity-accent-pressed: @cnvs-base-opacity-360; // State layer applied to accent colors while pressing
@cnvs-sys-opacity-accent-hover: @cnvs-base-opacity-180; // State layer applied to accent colors on hover
@cnvs-sys-opacity-surface-pressed: @cnvs-base-opacity-180; // State layer applied to surface colors while pressing
@cnvs-sys-opacity-shadow-second: @cnvs-base-opacity-80; // Alpha on second shadow
@cnvs-sys-opacity-shadow-first: @cnvs-base-opacity-120; // Alpha on first shadow
@cnvs-sys-opacity-contrast: @cnvs-base-opacity-840; // Tooltips, Status Indicator
@cnvs-sys-opacity-overlay: @cnvs-base-opacity-640; // Overlay
@cnvs-sys-opacity-disabled: @cnvs-base-opacity-400; // Disabled states
@cnvs-sys-opacity-zero: @cnvs-base-opacity-0; // Dev only
@cnvs-sys-motion-easing-purposeful-deceleration: @cnvs-base-easing-b-300;
@cnvs-sys-motion-easing-purposeful-acceleration: @cnvs-base-easing-b-200;
@cnvs-sys-motion-easing-purposeful-standard: @cnvs-base-easing-b-100;
@cnvs-sys-motion-easing-quick-deceleration: @cnvs-base-easing-a-300;
@cnvs-sys-motion-easing-quick-acceleration: @cnvs-base-easing-a-200;
@cnvs-sys-motion-easing-quick-standard: @cnvs-base-easing-a-100;
@cnvs-sys-color-focus-contrast: @cnvs-base-palette-neutral-a900; // High contrast focus ring for accessibility
@cnvs-sys-color-focus-inverse: @cnvs-base-palette-neutral-0; // Focus ring for use on dark backgrounds
@cnvs-sys-color-accent-overlay-mixin: @cnvs-base-palette-neutral-1000; // Pressed overlay mixin color for accent-colored elements
@cnvs-sys-color-accent-overlay-pressed: @cnvs-base-palette-neutral-a400; // Pressed overlay for accent-colored elements
@cnvs-sys-color-accent-overlay-hover: @cnvs-base-palette-neutral-a200; // Hover overlay for accent-colored elements
@cnvs-sys-color-accent-muted-soft: @cnvs-base-palette-slate-400; // Softer muted accent for tertiary elements
@cnvs-sys-color-accent-muted-default: @cnvs-base-palette-slate-600; // Muted accent for secondary visual elements
@cnvs-sys-color-accent-contrast: @cnvs-base-palette-neutral-a900; // High contrast accent for maximum visibility
@cnvs-sys-color-accent-success: @cnvs-base-palette-green-600; // Solid success accent for positive indicators (not tenant themeable)
@cnvs-sys-color-accent-warning: @cnvs-base-palette-amber-400; // Solid warning accent for caution indicators (not tenant themeable)
@cnvs-sys-color-accent-danger: @cnvs-base-palette-red-600; // Solid danger accent for error indicators (not tenant themeable)
@cnvs-sys-color-accent-info: @cnvs-base-palette-blue-600; // Solid info accent for indicators (not tenant themeable)
@cnvs-sys-color-accent-ai: @cnvs-base-palette-blue-950; // Dark accent indicating AI-generated content
@cnvs-sys-color-surface-overlay-scrim: @cnvs-base-palette-neutral-a400;
@cnvs-sys-color-surface-overlay-pressed-inverse: @cnvs-base-palette-white-a300; // Pressed overlay for containers on dark backgrounds
@cnvs-sys-color-surface-overlay-pressed-default: @cnvs-base-palette-slate-a100; // Pressed state overlay for interactive containers
@cnvs-sys-color-surface-overlay-mixin: @cnvs-base-palette-slate-500; // Pressed state overlay for interactive containers
@cnvs-sys-color-surface-overlay-hover-inverse: @cnvs-base-palette-white-a200; // Hover overlay for containers on dark backgrounds
@cnvs-sys-color-surface-overlay-hover-default: @cnvs-base-palette-slate-a50; // Hover state overlay for interactive containers
@cnvs-sys-color-surface-contrast-strong: @cnvs-base-palette-neutral-a950; // Stronger high contrast dark container background
@cnvs-sys-color-surface-contrast-default: @cnvs-base-palette-neutral-a900; // High contrast dark container background
@cnvs-sys-color-surface-inverse: @cnvs-base-palette-neutral-0; // Container background for use on dark backgrounds
@cnvs-sys-color-surface-transparent: @cnvs-base-palette-neutral-a0; // Fully transparent container background
@cnvs-sys-color-surface-ai-pressed: @cnvs-base-palette-blue-400; // Pressed state for AI-generated content containers
@cnvs-sys-color-surface-ai-hover: @cnvs-base-palette-blue-a200; // Hover state for AI-generated content containers
@cnvs-sys-color-surface-ai-default: @cnvs-base-palette-blue-a100; // Container background indicating AI-generated content
@cnvs-sys-color-surface-success-strong: @cnvs-base-palette-green-a50; // Stronger container background for success states
@cnvs-sys-color-surface-success-default: @cnvs-base-palette-green-a25; // Container background for success states (not tenant themeable)
@cnvs-sys-color-surface-warning-strong: @cnvs-base-palette-amber-a50; // Stronger container background for warning states
@cnvs-sys-color-surface-warning-default: @cnvs-base-palette-amber-a25; // Container background for warning states (not tenant themeable)
@cnvs-sys-color-surface-danger-strong: @cnvs-base-palette-red-a50; // Stronger container background for error states
@cnvs-sys-color-surface-danger-default: @cnvs-base-palette-red-a25; // Container background for error states (not tenant themeable)
@cnvs-sys-color-surface-info-strong: @cnvs-base-palette-blue-a50; // Stronger container background for info badges and indicators
@cnvs-sys-color-surface-info-default: @cnvs-base-palette-blue-a25; // Container background for informational callouts
@cnvs-sys-color-surface-loading: @cnvs-base-palette-slate-a200; // Background for skeleton loaders and loading states
@cnvs-sys-color-surface-alt-strong: @cnvs-base-palette-slate-a100; // Stronger de-emphasized container background
@cnvs-sys-color-surface-alt-default: @cnvs-base-palette-slate-a50; // De-emphasized container background for secondary information
@cnvs-sys-color-surface-raised: @cnvs-base-palette-slate-a25; // Separates a layer from the surface, e.g. table headers or sticky elements
@cnvs-sys-color-surface-modal: @cnvs-base-palette-neutral-0; // Background for modal dialog containers
@cnvs-sys-color-surface-popover: @cnvs-base-palette-neutral-0; // Background for floating containers like dropdowns and tooltips
@cnvs-sys-color-surface-navigation: @cnvs-base-palette-slate-50; // Background for navigation containers like sidebars and top bars
@cnvs-sys-color-surface-default: @cnvs-base-palette-neutral-0; // Default background for containers on top of the page
@cnvs-sys-color-static-amber-soft: @cnvs-base-palette-amber-100; // Soft amber
@cnvs-sys-color-static-amber-strongest: @cnvs-base-palette-amber-950; // Stronger amber
@cnvs-sys-color-static-amber-softer: @cnvs-base-palette-amber-50; // Soft amber
@cnvs-sys-color-static-amber-stronger: @cnvs-base-palette-amber-600; // Stronger amber
@cnvs-sys-color-static-amber-strong: @cnvs-base-palette-amber-500; // Stronger amber
@cnvs-sys-color-static-amber-softest: @cnvs-base-palette-amber-25; // Soft amber
@cnvs-sys-color-static-amber-default: @cnvs-base-palette-amber-400; // amber
@cnvs-sys-color-static-gray-softer: @cnvs-base-palette-slate-100; // Light gray
@cnvs-sys-color-static-gray-softest: @cnvs-base-palette-slate-50; // Light gray
@cnvs-sys-color-static-gray-strongest: @cnvs-base-palette-slate-950; // Stronger gray
@cnvs-sys-color-static-gray-stronger: @cnvs-base-palette-slate-800; // Stronger gray
@cnvs-sys-color-static-gray-strong: @cnvs-base-palette-slate-700; // Stronger gray
@cnvs-sys-color-static-gray-soft: @cnvs-base-palette-slate-200; // Light gray
@cnvs-sys-color-static-gray-default: @cnvs-base-palette-slate-600; // Gray
@cnvs-sys-color-static-black: @cnvs-base-palette-neutral-1000; // Just black
@cnvs-sys-color-static-white: @cnvs-base-palette-neutral-0; // Just white
@cnvs-sys-color-static-red-softer: @cnvs-base-palette-red-50; // Light red
@cnvs-sys-color-static-red-strongest: @cnvs-base-palette-red-950; // Strong red
@cnvs-sys-color-static-red-softest: @cnvs-base-palette-red-25; // Light red
@cnvs-sys-color-static-red-stronger: @cnvs-base-palette-red-800; // Strong red
@cnvs-sys-color-static-red-strong: @cnvs-base-palette-red-700; // Strong red
@cnvs-sys-color-static-red-soft: @cnvs-base-palette-red-100; // Light red
@cnvs-sys-color-static-red-default: @cnvs-base-palette-red-600; // Red
@cnvs-sys-color-static-green-strongest: @cnvs-base-palette-green-950; // Stronger green
@cnvs-sys-color-static-green-softest: @cnvs-base-palette-green-25; // Light green
@cnvs-sys-color-static-green-stronger: @cnvs-base-palette-green-800; // Stronger green
@cnvs-sys-color-static-green-softer: @cnvs-base-palette-green-50; // Light green
@cnvs-sys-color-static-green-strong: @cnvs-base-palette-green-700; // Stronger green
@cnvs-sys-color-static-green-soft: @cnvs-base-palette-green-100; // Light green
@cnvs-sys-color-static-green-default: @cnvs-base-palette-green-600; // Default green
@cnvs-sys-color-static-blue-strongest: @cnvs-base-palette-blue-950; // Stronger blue
@cnvs-sys-color-static-blue-soft: @cnvs-base-palette-blue-100; // Light blue
@cnvs-sys-color-static-blue-softer: @cnvs-base-palette-blue-50; // Light blue
@cnvs-sys-color-static-blue-stronger: @cnvs-base-palette-blue-800; // Stronger blue
@cnvs-sys-color-static-blue-strong: @cnvs-base-palette-blue-700; // Stronger blue
@cnvs-sys-color-static-blue-softest: @cnvs-base-palette-blue-25; // Light blue
@cnvs-sys-color-static-blue-default: @cnvs-base-palette-blue-600; // Blue
@cnvs-sys-color-static-orange-strong: @cnvs-base-palette-amber-500;
@cnvs-sys-color-static-orange-soft: @cnvs-base-palette-amber-100;
@cnvs-sys-color-static-orange-default: @cnvs-base-palette-amber-400;
@cnvs-sys-color-static-gold-stronger: @cnvs-base-palette-amber-600;
@cnvs-sys-color-shadow-ambient: @cnvs-base-palette-slate-a100; // Subtle ambient shadow for soft depth
@cnvs-sys-color-shadow-base: @cnvs-base-palette-slate-a200; // Primary shadow color for elevated elements
@cnvs-sys-color-border-transparent: @cnvs-base-palette-neutral-a0; // Invisible border for layout spacing
@cnvs-sys-color-border-inverse-strong: @cnvs-base-palette-white-a700; // Stronger border for use on dark backgrounds
@cnvs-sys-color-border-inverse-default: @cnvs-base-palette-neutral-0; // Border for use on dark backgrounds
@cnvs-sys-color-border-warning: @cnvs-base-palette-amber-400; // Border for warning states (not tenant themeable)
@cnvs-sys-color-border-danger: @cnvs-base-palette-red-500; // Border for error states (not tenant themeable)
@cnvs-sys-color-border-info-default: @cnvs-base-palette-blue-500; // Border for informational containers (not tenant themeable)
@cnvs-sys-color-border-strong: @cnvs-base-palette-slate-a300; // Stronger border for more visible separation
@cnvs-sys-color-border-default: @cnvs-base-palette-slate-a200; // Default border for containers and dividers
@cnvs-sys-color-border-container: @cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
@cnvs-sys-color-border-primary-default: @cnvs-base-palette-blue-500; // Brand, Focus
@cnvs-sys-color-border-divider: @cnvs-base-palette-slate-200; // Dividers
@cnvs-sys-color-border-caution-strong: @cnvs-base-palette-amber-500; // Warning outer (box shadow)
@cnvs-sys-color-border-caution-default: @cnvs-base-palette-amber-400; // Warning inner
@cnvs-sys-color-border-critical-default: @cnvs-base-palette-red-500; // Error
@cnvs-sys-color-border-contrast-default: @cnvs-base-palette-neutral-a900; // High contrast border for maximum visibility
@cnvs-sys-color-border-contrast-strong: @cnvs-base-palette-neutral-950; // Secondary Button Hover
@cnvs-sys-color-border-input-hover: @cnvs-base-palette-slate-a700; // Hover state border for form inputs
@cnvs-sys-color-border-input-default: @cnvs-base-palette-slate-a500; // Default border for form inputs
@cnvs-sys-color-border-input-inverse: @cnvs-base-palette-neutral-0; // Borders on checkboxes and radios
@cnvs-sys-color-border-input-strong: @cnvs-base-palette-slate-700; // Input hover
@cnvs-sys-color-border-input-disabled: @cnvs-base-palette-slate-400; // Disabled inputs
@cnvs-sys-color-border-ai: @cnvs-base-palette-blue-950; // Active state on AI borders
@cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-a950; // Stronger high contrast text
@cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-neutral-a900; // High contrast text for maximum readability
@cnvs-sys-color-fg-ai: @cnvs-base-palette-blue-950; // Text and icons indicating AI-generated content
@cnvs-sys-color-fg-link-hover: @cnvs-base-palette-blue-700; // Text color for hyperlinks on hover
@cnvs-sys-color-fg-link-default: @cnvs-base-palette-blue-600; // Default text color for hyperlinks (not tenant themeable)
@cnvs-sys-color-fg-success-strong: @cnvs-base-palette-green-700; // Stronger success text and icons
@cnvs-sys-color-fg-success-default: @cnvs-base-palette-green-600; // Success text and icons (not tenant themeable)
@cnvs-sys-color-fg-warning-strong: @cnvs-base-palette-amber-700; // Stronger warning text and icons
@cnvs-sys-color-fg-warning-default: @cnvs-base-palette-amber-600; // Warning text and icons (not tenant themeable)
@cnvs-sys-color-fg-danger-strong: @cnvs-base-palette-red-700; // Stronger error text and icons
@cnvs-sys-color-fg-danger-default: @cnvs-base-palette-red-600; // Error text and icons (not tenant themeable)
@cnvs-sys-color-fg-inverse: @cnvs-base-palette-neutral-0; // Text and icons for use on dark backgrounds
@cnvs-sys-color-fg-disabled: @cnvs-base-palette-slate-a400; // Disabled state text and icons
@cnvs-sys-color-fg-stronger: @cnvs-base-palette-neutral-a950; // Strongest text for titles
@cnvs-sys-color-fg-strong: @cnvs-base-palette-neutral-a900; // Stronger text for headings and labels
@cnvs-sys-color-fg-default: @cnvs-base-palette-neutral-a800; // Default body text and icons
@cnvs-sys-color-fg-positive-stronger: @cnvs-base-palette-green-800; // Error
@cnvs-sys-color-fg-positive-strong: @cnvs-base-palette-green-700; // Error
@cnvs-sys-color-fg-positive-soft: @cnvs-base-palette-green-400; // Error
@cnvs-sys-color-fg-positive-softer: @cnvs-base-palette-green-200; // Error
@cnvs-sys-color-fg-positive-default: @cnvs-base-palette-green-600; // Error
@cnvs-sys-color-fg-info-strong: @cnvs-base-palette-blue-700; // Stronger informational text and icons
@cnvs-sys-color-fg-info-default: @cnvs-base-palette-blue-600; // Informational text and icons (not tenant themeable)
@cnvs-sys-color-fg-info-stronger: @cnvs-base-palette-blue-800; // Links on hover
@cnvs-sys-color-fg-info-soft: @cnvs-base-palette-blue-400;
@cnvs-sys-color-fg-info-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
@cnvs-sys-color-fg-caution-softer: @cnvs-base-palette-amber-500; // Warning
@cnvs-sys-color-fg-caution-stronger: @cnvs-base-palette-amber-975; // Warning on hover
@cnvs-sys-color-fg-caution-soft: @cnvs-base-palette-amber-700; // Warning
@cnvs-sys-color-fg-caution-strong: @cnvs-base-palette-amber-950; // Warning on hover
@cnvs-sys-color-fg-caution-default: @cnvs-base-palette-amber-900; // Warning
@cnvs-sys-color-fg-primary-strong: @cnvs-base-palette-blue-700; // Links on hover
@cnvs-sys-color-fg-primary-stronger: @cnvs-base-palette-blue-800; // Links on hover
@cnvs-sys-color-fg-primary-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
@cnvs-sys-color-fg-primary-soft: @cnvs-base-palette-blue-400;
@cnvs-sys-color-fg-primary-default: @cnvs-base-palette-blue-600; // Branded text
@cnvs-sys-color-fg-muted-strong: @cnvs-base-palette-slate-a700; // Stronger secondary text
@cnvs-sys-color-fg-muted-default: @cnvs-base-palette-slate-a600; // Secondary text for hints and placeholders
@cnvs-sys-color-fg-muted-soft: @cnvs-base-palette-slate-400; // Tab item foreground
@cnvs-sys-color-fg-muted-stronger: @cnvs-base-palette-slate-800;
@cnvs-sys-color-fg-critical-softer: @cnvs-base-palette-red-200; // Error
@cnvs-sys-color-fg-critical-soft: @cnvs-base-palette-red-400; // Error
@cnvs-sys-color-fg-critical-stronger: @cnvs-base-palette-red-800; // Error
@cnvs-sys-color-fg-critical-strong: @cnvs-base-palette-red-700; // Error
@cnvs-sys-color-fg-critical-default: @cnvs-base-palette-red-600; // Error
@cnvs-sys-color-icon-info-stronger: @cnvs-base-palette-blue-800; // Stronger brand icon color
@cnvs-sys-color-icon-info-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
@cnvs-sys-color-icon-info-default: @cnvs-base-palette-blue-600; // Brand icon color
@cnvs-sys-color-icon-disabled: @cnvs-base-palette-slate-400; // Disabled icon color
@cnvs-sys-color-icon-caution-softer: @cnvs-base-palette-amber-500; // Softer caution icon color
@cnvs-sys-color-icon-caution-soft: @cnvs-base-palette-amber-700; // Soft caution icon color
@cnvs-sys-color-icon-caution-stronger: @cnvs-base-palette-amber-975; // Strong caution icon color
@cnvs-sys-color-icon-caution-strong: @cnvs-base-palette-amber-950; // Strong caution icon color
@cnvs-sys-color-icon-caution-default: @cnvs-base-palette-amber-900; // Caution icon color
@cnvs-sys-color-icon-critical-softer: @cnvs-base-palette-red-200; // Error icon color
@cnvs-sys-color-icon-critical-soft: @cnvs-base-palette-red-400; // Error icon color
@cnvs-sys-color-icon-critical-stronger: @cnvs-base-palette-red-800; // Error icon color
@cnvs-sys-color-icon-critical-strong: @cnvs-base-palette-red-700; // Error icon color
@cnvs-sys-color-icon-critical-default: @cnvs-base-palette-red-600; // Error icon color
@cnvs-sys-color-icon-positive-softer: @cnvs-base-palette-green-200; // Success icon color
@cnvs-sys-color-icon-positive-soft: @cnvs-base-palette-green-400; // Success icon color
@cnvs-sys-color-icon-positive-stronger: @cnvs-base-palette-green-800; // Success icon color
@cnvs-sys-color-icon-positive-strong: @cnvs-base-palette-green-700; // Success icon color
@cnvs-sys-color-icon-positive-default: @cnvs-base-palette-green-600; // Success icon color
@cnvs-sys-color-icon-primary-softer: @cnvs-base-palette-blue-200; // Stronger brand icon color
@cnvs-sys-color-icon-primary-soft: @cnvs-base-palette-blue-400; // Stronger brand icon color
@cnvs-sys-color-icon-primary-stronger: @cnvs-base-palette-blue-800; // Stronger brand icon color
@cnvs-sys-color-icon-primary-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
@cnvs-sys-color-icon-primary-default: @cnvs-base-palette-blue-600; // Brand icon color
@cnvs-sys-color-icon-inverse: @cnvs-base-palette-neutral-0; // Inverse icon color
@cnvs-sys-color-icon-strong: @cnvs-base-palette-neutral-900; // Hover icon color
@cnvs-sys-color-icon-soft: @cnvs-base-palette-slate-600; // Disabled icon color
@cnvs-sys-color-icon-default: @cnvs-base-palette-neutral-800; // Default icon color
@cnvs-sys-color-text-info-softer: @cnvs-base-palette-blue-200; // Active links
@cnvs-sys-color-text-info-soft: @cnvs-base-palette-blue-400; // Active links
@cnvs-sys-color-text-info-stronger: @cnvs-base-palette-blue-800; // Active links
@cnvs-sys-color-text-info-strong: @cnvs-base-palette-blue-700; // Branded hover text
@cnvs-sys-color-text-info-default: @cnvs-base-palette-blue-600; // Branded text
@cnvs-sys-color-text-positive-softer: @cnvs-base-palette-green-200; // Active links
@cnvs-sys-color-text-positive-soft: @cnvs-base-palette-green-400; // Active links
@cnvs-sys-color-text-positive-stronger: @cnvs-base-palette-green-800; // Active links
@cnvs-sys-color-text-positive-strong: @cnvs-base-palette-green-700; // Branded hover text
@cnvs-sys-color-text-positive-default: @cnvs-base-palette-green-600; // Branded text
@cnvs-sys-color-text-ai: @cnvs-base-palette-blue-950;
@cnvs-sys-color-text-caution-softer: @cnvs-base-palette-amber-200; // Softer warning text
@cnvs-sys-color-text-caution-stronger: @cnvs-base-palette-amber-975; // Stronger warning text
@cnvs-sys-color-text-caution-soft: @cnvs-base-palette-amber-400; // Disabled warning text
@cnvs-sys-color-text-caution-strong: @cnvs-base-palette-amber-950; // Strong warning text
@cnvs-sys-color-text-caution-default: @cnvs-base-palette-amber-900; // Warning text
@cnvs-sys-color-text-primary-softer: @cnvs-base-palette-blue-200; // Active links
@cnvs-sys-color-text-primary-soft: @cnvs-base-palette-blue-400; // Active links
@cnvs-sys-color-text-primary-stronger: @cnvs-base-palette-blue-800; // Active links
@cnvs-sys-color-text-primary-strong: @cnvs-base-palette-blue-700; // Branded hover text
@cnvs-sys-color-text-primary-default: @cnvs-base-palette-blue-600; // Branded text
@cnvs-sys-color-text-critical-softer: @cnvs-base-palette-red-200; // Error text
@cnvs-sys-color-text-critical-soft: @cnvs-base-palette-red-400; // Error text
@cnvs-sys-color-text-critical-stronger: @cnvs-base-palette-red-800; // Error text
@cnvs-sys-color-text-critical-strong: @cnvs-base-palette-red-700; // Error text
@cnvs-sys-color-text-critical-default: @cnvs-base-palette-red-600; // Error text
@cnvs-sys-color-text-inverse: @cnvs-base-palette-neutral-0; // Inverse text color
@cnvs-sys-color-text-hint: @cnvs-base-palette-slate-600; // Hint text color
@cnvs-sys-color-text-disabled: @cnvs-base-palette-slate-400; // Disabled text color
@cnvs-sys-color-text-stronger: @cnvs-base-palette-neutral-950; // Display text
@cnvs-sys-color-text-strong: @cnvs-base-palette-neutral-900; // Heading text
@cnvs-sys-color-text-default: @cnvs-base-palette-neutral-800; // Body text
@cnvs-sys-color-bg-default: @cnvs-base-palette-neutral-0; // Default page background
@cnvs-sys-color-bg-info-stronger: @cnvs-base-palette-blue-800; // Brand active background
@cnvs-sys-color-bg-info-strong: @cnvs-base-palette-blue-700; // Brand hover background
@cnvs-sys-color-bg-info-default: @cnvs-base-palette-blue-600; // Info color
@cnvs-sys-color-bg-info-soft: @cnvs-base-palette-blue-100; // Disabled
@cnvs-sys-color-bg-info-softer: @cnvs-base-palette-blue-50; // Select
@cnvs-sys-color-bg-info-softest: @cnvs-base-palette-blue-25; // Surface
@cnvs-sys-color-bg-ai-strongest: @cnvs-base-palette-blue-950; // AI surfaces
@cnvs-sys-color-bg-ai-stronger: @cnvs-base-palette-blue-400; // Active state on AI containers
@cnvs-sys-color-bg-ai-strong: @cnvs-base-palette-blue-200; // Hover on AI container
@cnvs-sys-color-bg-ai-default: @cnvs-base-palette-blue-100; // AI container
@cnvs-sys-color-bg-critical-stronger: @cnvs-base-palette-red-800; // Stronger error background
@cnvs-sys-color-bg-critical-strong: @cnvs-base-palette-red-700; // Strong error background
@cnvs-sys-color-bg-critical-default: @cnvs-base-palette-red-600; // Default error background
@cnvs-sys-color-bg-critical-soft: @cnvs-base-palette-red-100; // Disabled error background
@cnvs-sys-color-bg-critical-softer: @cnvs-base-palette-red-50; // Disabled error background
@cnvs-sys-color-bg-critical-softest: @cnvs-base-palette-red-25; // Input error background
@cnvs-sys-color-bg-caution-stronger: @cnvs-base-palette-amber-600; // Stronger warning background
@cnvs-sys-color-bg-caution-strong: @cnvs-base-palette-amber-500; // Strong warning background
@cnvs-sys-color-bg-caution-default: @cnvs-base-palette-amber-400; // Default warning background
@cnvs-sys-color-bg-caution-soft: @cnvs-base-palette-amber-100; // Softer warning background
@cnvs-sys-color-bg-caution-softer: @cnvs-base-palette-amber-50; // Softer warning background
@cnvs-sys-color-bg-caution-softest: @cnvs-base-palette-amber-25; // Disabled warning background
@cnvs-sys-color-bg-positive-stronger: @cnvs-base-palette-green-800; // Active success background
@cnvs-sys-color-bg-positive-strong: @cnvs-base-palette-green-700; // Hover success background
@cnvs-sys-color-bg-positive-default: @cnvs-base-palette-green-600; // Disabled success background
@cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-100; // Disabled success background
@cnvs-sys-color-bg-positive-softer: @cnvs-base-palette-green-50; // Surface success background
@cnvs-sys-color-bg-positive-softest: @cnvs-base-palette-green-25; // Lightest surface success background
@cnvs-sys-color-bg-contrast-strong: @cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
@cnvs-sys-color-bg-contrast-default: @cnvs-base-palette-neutral-900; // Contrast backgrounds, like Secondary Buttons
@cnvs-sys-color-bg-muted-strong: @cnvs-base-palette-slate-700;
@cnvs-sys-color-bg-muted-default: @cnvs-base-palette-slate-600;
@cnvs-sys-color-bg-muted-soft: @cnvs-base-palette-slate-500;
@cnvs-sys-color-bg-muted-softer: @cnvs-base-palette-slate-400;
@cnvs-sys-color-bg-alt-default: @cnvs-base-palette-slate-50; // Alternative page background for visual separation between page sections
@cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-slate-300; // Active state for segmented control, Pill
@cnvs-sys-color-bg-alt-strong: @cnvs-base-palette-slate-200; // Active states
@cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-50; // Alternative page background
@cnvs-sys-color-bg-alt-softer: @cnvs-base-palette-slate-25; // Disabled inputs
@cnvs-sys-color-bg-translucent: oklch(from @cnvs-base-palette-neutral-1000 l c h  /  @cnvs-base-opacity-500); // Tooltip, Status Indicator
@cnvs-sys-color-bg-overlay: oklch(from @cnvs-base-palette-neutral-1000 l c h  /  @cnvs-base-opacity-400); // Overlay background
@cnvs-sys-color-bg-transparent-stronger: oklch(from @cnvs-base-palette-neutral-1000 l c h  /  @cnvs-base-opacity-250); // Inverse Secondary Button Active state
@cnvs-sys-color-bg-transparent-strong: oklch(from @cnvs-base-palette-neutral-1000 l c h  /  @cnvs-base-opacity-100); // Inverse Secondary Button Hover state
@cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
@cnvs-sys-color-bg-primary-stronger: @cnvs-base-palette-blue-800; // Brand active background
@cnvs-sys-color-bg-primary-strong: @cnvs-base-palette-blue-700; // Brand hover background
@cnvs-sys-color-bg-primary-default: @cnvs-base-palette-blue-600; // Primary brand color
@cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blue-100; // Primary disabled
@cnvs-sys-color-bg-primary-softer: @cnvs-base-palette-blue-50; // Select
@cnvs-sys-color-bg-primary-softest: @cnvs-base-palette-blue-25; // Surface
@cnvs-sys-line-height-title-large: @cnvs-base-line-height-600;
@cnvs-sys-line-height-title-medium: @cnvs-base-line-height-500;
@cnvs-sys-line-height-title-small: @cnvs-base-line-height-400;
@cnvs-sys-line-height-heading-large: @cnvs-base-line-height-350;
@cnvs-sys-line-height-heading-medium: @cnvs-base-line-height-300;
@cnvs-sys-line-height-heading-small: @cnvs-base-line-height-250;
@cnvs-sys-line-height-body-large: @cnvs-base-line-height-200;
@cnvs-sys-line-height-body-medium: @cnvs-base-line-height-200;
@cnvs-sys-line-height-body-small: @cnvs-base-line-height-150;
@cnvs-sys-line-height-subtext-large: @cnvs-base-line-height-100;
@cnvs-sys-line-height-subtext-medium: @cnvs-base-line-height-50;
@cnvs-sys-line-height-subtext-small: @cnvs-base-line-height-50;
@cnvs-sys-font-size-subtext-small: @cnvs-base-font-size-25;
@cnvs-sys-space-x20: calc(@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(@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(@cnvs-base-unit * 14); // Mobile only
@cnvs-sys-space-x10: calc(@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(@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(@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(@cnvs-base-unit * 5); // Mobile only
@cnvs-sys-space-x4: calc(@cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
@cnvs-sys-space-x3: calc(@cnvs-base-unit * 3); // Use when compact padding is required
@cnvs-sys-space-x2: calc(@cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
@cnvs-sys-space-x1: @cnvs-base-unit; // Compact spacing between text or icons
@cnvs-sys-space-half: calc(@cnvs-base-unit * 0.5); // Mobile only
@cnvs-sys-shape-none: @cnvs-base-size-0; // Full-width and background containers. Fixed navigation containers such as headers, and side-panels.
@cnvs-sys-shape-round: calc(@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(@cnvs-base-unit * 6); // (Mobile) Full width sheets that are temporary and modal views
@cnvs-sys-shape-x4: calc(@cnvs-base-unit * 4); // (Mobile) Primary containers that house a large amount of other elements and complex information
@cnvs-sys-shape-x2: calc(@cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
@cnvs-sys-shape-x1-half: calc(@cnvs-base-unit * 1.5);
@cnvs-sys-shape-x1: @cnvs-base-unit;
@cnvs-sys-shape-half: calc(@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: @cnvs-base-opacity-100; // State layer applied to surface colors on hover
@cnvs-sys-color-brand-border-caution: @cnvs-brand-caution-500; // Tenant-themeable caution border for warning states
@cnvs-sys-color-brand-border-critical: @cnvs-brand-critical-500; // Tenant-themeable critical border for error states
@cnvs-sys-color-brand-border-primary: @cnvs-brand-primary-500; // Tenant-themeable primary border for focused inputs
@cnvs-sys-color-brand-fg-selected: @cnvs-brand-primary-700; // Tenant-themeable text color for selected items
@cnvs-sys-color-brand-fg-positive-strong: @cnvs-brand-positive-700; // Stronger tenant-themeable positive text and icon color
@cnvs-sys-color-brand-fg-positive-default: @cnvs-brand-positive-600; // Tenant-themeable positive text and icon color
@cnvs-sys-color-brand-fg-caution-strong: @cnvs-brand-caution-700; // Stronger tenant-themeable caution text and icon color
@cnvs-sys-color-brand-fg-caution-default: @cnvs-brand-caution-600; // Tenant-themeable caution text and icon color
@cnvs-sys-color-brand-fg-critical-strong: @cnvs-brand-critical-700; // Stronger tenant-themeable critical text and icon color
@cnvs-sys-color-brand-fg-critical-default: @cnvs-brand-critical-600; // Tenant-themeable critical text and icon color
@cnvs-sys-color-brand-fg-primary-strong: @cnvs-brand-primary-700; // Stronger tenant-themeable primary text and icon color
@cnvs-sys-color-brand-fg-primary-default: @cnvs-brand-primary-600; // Tenant-themeable primary text and icon color
@cnvs-sys-color-brand-accent-action: @cnvs-brand-primary-600;
@cnvs-sys-color-brand-accent-positive: @cnvs-brand-positive-600; // Tenant-themeable solid positive accent
@cnvs-sys-color-brand-accent-caution: @cnvs-brand-caution-400; // Tenant-themeable solid caution accent
@cnvs-sys-color-brand-accent-critical: @cnvs-brand-critical-600; // Tenant-themeable solid critical accent for destructive actions
@cnvs-sys-color-brand-accent-primary: @cnvs-brand-primary-600; // Tenant-themeable solid primary accent for buttons and key actions
@cnvs-sys-color-brand-surface-selected: @cnvs-brand-primary-a50; // Tenant-themeable background for selected items
@cnvs-sys-color-brand-surface-positive-strong: @cnvs-brand-positive-a50; // Stronger tenant-themeable positive container background
@cnvs-sys-color-brand-surface-positive-default: @cnvs-brand-positive-a25; // Tenant-themeable positive/success container background
@cnvs-sys-color-brand-surface-caution-strong: @cnvs-brand-caution-a50; // Stronger tenant-themeable caution container background
@cnvs-sys-color-brand-surface-caution-default: @cnvs-brand-caution-a25; // Tenant-themeable caution/warning container background
@cnvs-sys-color-brand-surface-critical-strong: @cnvs-brand-critical-a50; // Stronger tenant-themeable critical container background
@cnvs-sys-color-brand-surface-critical-default: @cnvs-brand-critical-a25; // Tenant-themeable critical/error container background
@cnvs-sys-color-brand-surface-primary-strong: @cnvs-brand-primary-a50; // Stronger tenant-themeable primary container background
@cnvs-sys-color-brand-surface-primary-default: @cnvs-brand-primary-a25; // Tenant-themeable primary container background
@cnvs-sys-color-brand-focus-caution-inner: @cnvs-brand-caution-400; // Tenant-themeable inner focus ring for caution-state elements
@cnvs-sys-color-brand-focus-caution-outer: @cnvs-brand-caution-500; // Tenant-themeable outer focus ring for caution-state elements
@cnvs-sys-color-brand-focus-critical: @cnvs-brand-critical-500; // Tenant-themeable focus ring for error-state elements
@cnvs-sys-color-brand-focus-primary: @cnvs-brand-primary-500; // Tenant-themeable focus ring for interactive elements
@cnvs-sys-color-shadow-default: @cnvs-sys-color-shadow-base; // Main shadow color
@cnvs-sys-color-shadow-2: @cnvs-sys-color-shadow-ambient; // Second shadow color
@cnvs-sys-color-shadow-1: @cnvs-sys-color-shadow-base; // First shadow color
@cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
@cnvs-sys-shape-zero: @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: @cnvs-base-size-800; // Use this for the space between content sections
@cnvs-sys-gap-xl: @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: @cnvs-base-size-300; // Use this for tighter spacing between cards. Cards are self contained blocks of content.
@cnvs-sys-gap-md: @cnvs-base-size-200; // Use the default inline spacing when other gap tokens may not fit.
@cnvs-sys-gap-sm: @cnvs-base-size-100; // Horizontal space between pills, tighter space between buttons, inline icon to text, segmented controls.
@cnvs-sys-gap-xs: @cnvs-base-size-50; // Compact spacing from icon to text, labels to inputs, between tab items.
@cnvs-sys-padding-xxl: @cnvs-base-size-400; // Padding used around Modal and Large Button content
@cnvs-sys-padding-xl: @cnvs-base-size-300; // Padding used around Card and Medium Button content
@cnvs-sys-padding-lg: @cnvs-base-size-250; // Large padding, used in Medium Buttons with Icons
@cnvs-sys-padding-md: @cnvs-base-size-200; // Default padding used for components used around Small Button content.
@cnvs-sys-padding-sm: @cnvs-base-size-150; // Compact padding, used in Rich Text Editor, or X-Small Buttons
@cnvs-sys-padding-xs: @cnvs-base-size-100; // Horizontal padding on Input Fields
@cnvs-sys-padding-xxs: @cnvs-base-size-50;
@cnvs-sys-size-xxl: @cnvs-base-size-800; // Expandable containers. Used for expandable containers in their collapsed state.
@cnvs-sys-size-xl: @cnvs-base-size-700; // Content containers. Used for table cells and toasts.
@cnvs-sys-size-lg: @cnvs-base-size-600; // Prominent components. Used for large buttons, segmented controls, expandable triggers, tabs, and avatars.
@cnvs-sys-size-md: @cnvs-base-size-500; // Default size for most components. Used for buttons, segmented controls, banners, input fields, and menu items.
@cnvs-sys-size-sm: @cnvs-base-size-400; // Standard interactive components. Used for buttons, segmented controls, tooltips, and avatars.
@cnvs-sys-size-xs: @cnvs-base-size-300; // Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons.
@cnvs-sys-size-xxs: @cnvs-base-size-250; // Compact indicators. Used for status indicators and count badges.
@cnvs-sys-size-xxxs: @cnvs-base-size-200; // Used for switch toggle.
@cnvs-sys-line-height-title-lg: @cnvs-base-size-800;
@cnvs-sys-line-height-title-md: @cnvs-base-size-700;
@cnvs-sys-line-height-title-sm: @cnvs-base-size-600;
@cnvs-sys-line-height-heading-lg: @cnvs-base-size-500;
@cnvs-sys-line-height-heading-md: @cnvs-base-size-450;
@cnvs-sys-line-height-heading-sm: @cnvs-base-size-400;
@cnvs-sys-line-height-body-lg: @cnvs-base-size-350;
@cnvs-sys-line-height-body-md: @cnvs-base-size-350;
@cnvs-sys-line-height-body-sm: @cnvs-base-size-300;
@cnvs-sys-line-height-subtext-lg: @cnvs-base-size-250;
@cnvs-sys-line-height-subtext-md: @cnvs-base-size-200;
@cnvs-sys-line-height-subtext-sm: @cnvs-base-size-200;
@cnvs-sys-font-size-title-lg: @cnvs-base-size-700;
@cnvs-sys-font-size-title-md: @cnvs-base-size-600;
@cnvs-sys-font-size-title-sm: @cnvs-base-size-500;
@cnvs-sys-font-size-heading-lg: @cnvs-base-size-400;
@cnvs-sys-font-size-heading-md: @cnvs-base-size-350;
@cnvs-sys-font-size-heading-sm: @cnvs-base-size-300;
@cnvs-sys-font-size-body-lg: @cnvs-base-size-250;
@cnvs-sys-font-size-body-md: @cnvs-base-size-225;
@cnvs-sys-font-size-body-sm: @cnvs-base-size-200;
@cnvs-sys-font-size-subtext-lg: @cnvs-base-size-175;
@cnvs-sys-font-size-subtext-md: @cnvs-base-size-150;
@cnvs-sys-font-size-subtext-sm: @cnvs-base-size-125;
@cnvs-sys-font-size-subtext-large: @cnvs-base-font-size-75;
@cnvs-sys-shape-full: calc(@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: @cnvs-base-size-400; // Maximum rounding for modals and large containers
@cnvs-sys-shape-xxl: @cnvs-base-size-300; // Extra extra large rounding for cards and items
@cnvs-sys-shape-xl: @cnvs-base-size-200; // Extra large rounding for prominent containers
@cnvs-sys-shape-lg: @cnvs-base-size-150; // Rich text editor
@cnvs-sys-shape-md: @cnvs-base-size-100; // Inputs, Toast, Tooltip, Snackbar
@cnvs-sys-shape-sm: @cnvs-base-size-50; // Pill, Status Indicator, Checkbox
@cnvs-sys-font-size-body-small: @cnvs-base-font-size-100;
@cnvs-sys-font-size-body-medium: @cnvs-base-font-size-125;
@cnvs-sys-font-size-body-large: @cnvs-base-font-size-150;
@cnvs-sys-font-size-heading-small: @cnvs-base-font-size-200;
@cnvs-sys-font-size-heading-medium: @cnvs-base-font-size-250;
@cnvs-sys-font-size-heading-large: @cnvs-base-font-size-300;
@cnvs-sys-font-size-title-small: @cnvs-base-font-size-400;
@cnvs-sys-font-size-title-medium: @cnvs-base-font-size-500;
@cnvs-sys-font-size-title-large: @cnvs-base-font-size-600;
@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-type-subtext-small {
  font-family: @cnvs-sys-font-family-default;
  font-weight: @cnvs-sys-font-weight-normal;
  line-height: @cnvs-sys-line-height-subtext-small;
  font-size: @cnvs-sys-font-size-subtext-small;
  letter-spacing: @cnvs-base-letter-spacing-50;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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