// Do not edit directly
// Generated on Fri, 09 Oct 2026 14:38:15 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;
}