lumir-design-system-01/dist/css/tokens.css

Lumir Design System 01 - Professional & Clean

:root {
  --semantic-color-primary-background-1-rest: #00A0E9;
  --semantic-color-primary-background-1-hovered: #00608C;
  --semantic-color-primary-background-1-pressed: #66D1FF;
  --semantic-color-primary-background-1-selected: #0080BA;
  --semantic-color-primary-background-1-disabled: #CCF0FF;
  --semantic-color-primary-background-2-rest: #33C1FF;
  --semantic-color-primary-background-2-hovered: #0080BA;
  --semantic-color-primary-background-2-pressed: #99E0FF;
  --semantic-color-primary-background-2-selected: #00A0E9;
  --semantic-color-primary-background-2-disabled: #E6F7FF;
  --semantic-color-primary-foreground-1-rest: #00A0E9;
  --semantic-color-primary-foreground-1-hovered: #00608C;
  --semantic-color-primary-foreground-1-pressed: #66D1FF;
  --semantic-color-primary-foreground-1-selected: #0080BA;
  --semantic-color-primary-foreground-1-disabled: #CCF0FF;
  --semantic-color-primary-stroke-1-rest: #0080BA;
  --semantic-color-primary-stroke-1-hovered: #00405D;
  --semantic-color-primary-stroke-1-pressed: #33C1FF;
  --semantic-color-primary-stroke-1-disabled: #66D1FF;
  --semantic-color-primary-oncolor-global: #FFFFFF;
  --semantic-color-secondary-background-1-rest: #F4F4F4;
  --semantic-color-secondary-background-1-hovered: #E0E0E0;
  --semantic-color-secondary-background-1-pressed: #CCCCCC;
  --semantic-color-secondary-background-1-selected: #D6D6D6;
  --semantic-color-secondary-background-1-disabled: #F9F9F9;
  --semantic-color-secondary-background-2-rest: #EAEAEA;
  --semantic-color-secondary-background-2-hovered: #D6D6D6;
  --semantic-color-secondary-background-2-pressed: #C1C1C1;
  --semantic-color-secondary-background-2-selected: #CCCCCC;
  --semantic-color-secondary-background-2-disabled: #F4F4F4;
  --semantic-color-secondary-background-3-rest: #E0E0E0;
  --semantic-color-secondary-background-3-hovered: #CCCCCC;
  --semantic-color-secondary-background-3-pressed: #B7B7B7;
  --semantic-color-secondary-background-3-selected: #C1C1C1;
  --semantic-color-secondary-background-3-disabled: #EFEFEF;
  --semantic-color-secondary-background-inverse-rest: #FFFFFF;
  --semantic-color-secondary-foreground-1-rest: #333333;
  --semantic-color-secondary-foreground-1-hovered: #7F7F7F;
  --semantic-color-secondary-foreground-1-pressed: #B2B2B2;
  --semantic-color-secondary-foreground-1-selected: #999999;
  --semantic-color-secondary-foreground-1-disabled: #CCCCCC;
  --semantic-color-secondary-foreground-2-rest: #666666;
  --semantic-color-secondary-foreground-2-hovered: #B2B2B2;
  --semantic-color-secondary-foreground-2-pressed: #E5E5E5;
  --semantic-color-secondary-foreground-2-selected: #CCCCCC;
  --semantic-color-secondary-foreground-2-disabled: #E5E5E5;
  --semantic-color-secondary-foreground-3-rest: #999999;
  --semantic-color-secondary-foreground-3-hovered: #E5E5E5;
  --semantic-color-secondary-foreground-3-pressed: #FFFFFF;
  --semantic-color-secondary-foreground-3-selected: #EFEFEF;
  --semantic-color-secondary-foreground-3-disabled: #B2B2B2;
  --semantic-color-secondary-foreground-inverse-rest: #000000;
  --semantic-color-secondary-stroke-1-rest: #999999;
  --semantic-color-secondary-stroke-1-hovered: #CCCCCC;
  --semantic-color-secondary-stroke-1-pressed: #E5E5E5;
  --semantic-color-secondary-stroke-1-disabled: #7F7F7F;
  --semantic-color-secondary-stroke-2-rest: #CCCCCC;
  --semantic-color-secondary-stroke-2-hovered: #E5E5E5;
  --semantic-color-secondary-stroke-2-pressed: #F4F4F4;
  --semantic-color-secondary-stroke-2-disabled: #B2B2B2;
  --semantic-color-secondary-stroke-3-rest: #FFFFFF;
  --semantic-color-secondary-stroke-3-hovered: #F4F4F4;
  --semantic-color-secondary-stroke-3-pressed: #EFEFEF;
  --semantic-color-secondary-stroke-3-disabled: #E5E5E5;
  --semantic-color-secondary-stroke-inverse-rest: #000000;
  --semantic-color-secondary-oncolor-global: #FFFFFF;
  --semantic-color-cta-background-1-rest: #66BB6A;
  --semantic-color-cta-background-1-hovered: #43A047;
  --semantic-color-cta-background-1-pressed: #A5D6A7;
  --semantic-color-cta-background-1-disabled: #C8E6C9;
  --semantic-color-cta-background-2-rest: #81C784;
  --semantic-color-cta-background-2-hovered: #4CAF50;
  --semantic-color-cta-background-2-pressed: #C8E6C9;
  --semantic-color-cta-background-2-disabled: #E8F5E9;
  --semantic-color-cta-foreground-1-rest: #43A047;
  --semantic-color-cta-foreground-1-hovered: #2E7D32;
  --semantic-color-cta-foreground-1-pressed: #66BB6A;
  --semantic-color-cta-foreground-1-selected: #388E3C;
  --semantic-color-cta-foreground-1-disabled: #81C784;
  --semantic-color-cta-foreground-2-rest: #2E7D32;
  --semantic-color-cta-foreground-2-hovered: #15411B;
  --semantic-color-cta-foreground-2-pressed: #43A047;
  --semantic-color-cta-foreground-2-selected: #1B5E20;
  --semantic-color-cta-foreground-2-disabled: #4CAF50;
  --semantic-color-cta-stroke-1-rest: #43A047;
  --semantic-color-cta-stroke-1-hovered: #2E7D32;
  --semantic-color-cta-stroke-1-pressed: #66BB6A;
  --semantic-color-cta-stroke-1-disabled: #81C784;
  --semantic-color-cta-stroke-2-rest: #2E7D32;
  --semantic-color-cta-stroke-2-hovered: #15411B;
  --semantic-color-cta-stroke-2-pressed: #43A047;
  --semantic-color-cta-stroke-2-disabled: #4CAF50;
  --semantic-color-cta-oncolor-global: #FFFFFF;
  --semantic-color-status-error-global: #EF5350;
  --semantic-color-status-warning-global: #FF9800;
  --semantic-color-status-success-global: #66BB6A;
  --semantic-color-status-info-global: #33C1FF;
  --semantic-color-status-focused-global: #666666;
  --semantic-color-overlay-background-light-global: rgba(0, 0, 0, 0.12);
  --semantic-color-overlay-background-light-subtle: rgba(0, 0, 0, 0.12);
  --semantic-color-overlay-background-light-medium: rgba(0, 0, 0, 0.06);
  --semantic-color-overlay-background-light-heavy: rgba(0, 0, 0, 0.20);
  --semantic-shadow-interaction-button-rest: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-interaction-button-hovered: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-interaction-button-pressed: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  --semantic-shadow-interaction-button-disabled: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  --semantic-shadow-interaction-card-rest: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-interaction-card-hovered: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-interaction-card-pressed: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-interaction-input-rest: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  --semantic-shadow-interaction-input-focused: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-interaction-input-error: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-surface-overlay: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-surface-dropdown: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-surface-modal: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-surface-tooltip: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-surface-toast: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-surface-sidebar: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-feedback-error: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-feedback-success: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-feedback-warning: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-shadow-feedback-info: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --semantic-typography-hero-1-regular-fontSize: 48px;
  --semantic-typography-hero-1-regular-lineHeight: 1.6;
  --semantic-typography-hero-1-regular-letterSpacing: -0.025em;
  --semantic-typography-hero-1-regular-fontWeight: 400;
  --semantic-typography-hero-1-medium-fontSize: 48px;
  --semantic-typography-hero-1-medium-lineHeight: 1.6;
  --semantic-typography-hero-1-medium-letterSpacing: -0.025em;
  --semantic-typography-hero-1-medium-fontWeight: 500;
  --semantic-typography-hero-1-bold-fontSize: 48px;
  --semantic-typography-hero-1-bold-lineHeight: 1.6;
  --semantic-typography-hero-1-bold-letterSpacing: -0.025em;
  --semantic-typography-hero-1-bold-fontWeight: 700;
  --semantic-typography-hero-2-regular-fontSize: 36px;
  --semantic-typography-hero-2-regular-lineHeight: 1.6;
  --semantic-typography-hero-2-regular-letterSpacing: -0.025em;
  --semantic-typography-hero-2-regular-fontWeight: 400;
  --semantic-typography-hero-2-medium-fontSize: 36px;
  --semantic-typography-hero-2-medium-lineHeight: 1.6;
  --semantic-typography-hero-2-medium-letterSpacing: -0.025em;
  --semantic-typography-hero-2-medium-fontWeight: 500;
  --semantic-typography-hero-2-bold-fontSize: 36px;
  --semantic-typography-hero-2-bold-lineHeight: 1.6;
  --semantic-typography-hero-2-bold-letterSpacing: -0.025em;
  --semantic-typography-hero-2-bold-fontWeight: 700;
  --semantic-typography-title-1-regular-fontSize: 30px;
  --semantic-typography-title-1-regular-lineHeight: 1.4;
  --semantic-typography-title-1-regular-letterSpacing: -0.025em;
  --semantic-typography-title-1-regular-fontWeight: 400;
  --semantic-typography-title-1-medium-fontSize: 30px;
  --semantic-typography-title-1-medium-lineHeight: 1.4;
  --semantic-typography-title-1-medium-letterSpacing: -0.025em;
  --semantic-typography-title-1-medium-fontWeight: 500;
  --semantic-typography-title-1-bold-fontSize: 30px;
  --semantic-typography-title-1-bold-lineHeight: 1.4;
  --semantic-typography-title-1-bold-letterSpacing: -0.025em;
  --semantic-typography-title-1-bold-fontWeight: 700;
  --semantic-typography-title-2-regular-fontSize: 24px;
  --semantic-typography-title-2-regular-lineHeight: 1.4;
  --semantic-typography-title-2-regular-letterSpacing: -0.025em;
  --semantic-typography-title-2-regular-fontWeight: 400;
  --semantic-typography-title-2-medium-fontSize: 24px;
  --semantic-typography-title-2-medium-lineHeight: 1.4;
  --semantic-typography-title-2-medium-letterSpacing: -0.025em;
  --semantic-typography-title-2-medium-fontWeight: 500;
  --semantic-typography-title-2-bold-fontSize: 24px;
  --semantic-typography-title-2-bold-lineHeight: 1.4;
  --semantic-typography-title-2-bold-letterSpacing: -0.025em;
  --semantic-typography-title-2-bold-fontWeight: 700;
  --semantic-typography-heading-1-regular-fontSize: 20px;
  --semantic-typography-heading-1-regular-lineHeight: 1.4;
  --semantic-typography-heading-1-regular-letterSpacing: -0.05em;
  --semantic-typography-heading-1-regular-fontWeight: 400;
  --semantic-typography-heading-1-medium-fontSize: 20px;
  --semantic-typography-heading-1-medium-lineHeight: 1.4;
  --semantic-typography-heading-1-medium-letterSpacing: -0.05em;
  --semantic-typography-heading-1-medium-fontWeight: 500;
  --semantic-typography-heading-1-bold-fontSize: 20px;
  --semantic-typography-heading-1-bold-lineHeight: 1.4;
  --semantic-typography-heading-1-bold-letterSpacing: -0.05em;
  --semantic-typography-heading-1-bold-fontWeight: 600;
  --semantic-typography-heading-2-regular-fontSize: 20px;
  --semantic-typography-heading-2-regular-lineHeight: 1.4;
  --semantic-typography-heading-2-regular-letterSpacing: -0.05em;
  --semantic-typography-heading-2-regular-fontWeight: 400;
  --semantic-typography-heading-2-medium-fontSize: 20px;
  --semantic-typography-heading-2-medium-lineHeight: 1.4;
  --semantic-typography-heading-2-medium-letterSpacing: -0.05em;
  --semantic-typography-heading-2-medium-fontWeight: 500;
  --semantic-typography-heading-2-bold-fontSize: 20px;
  --semantic-typography-heading-2-bold-lineHeight: 1.4;
  --semantic-typography-heading-2-bold-letterSpacing: -0.05em;
  --semantic-typography-heading-2-bold-fontWeight: 600;
  --semantic-typography-heading-3-regular-fontSize: 16px;
  --semantic-typography-heading-3-regular-lineHeight: 1.4;
  --semantic-typography-heading-3-regular-letterSpacing: 0em;
  --semantic-typography-heading-3-regular-fontWeight: 400;
  --semantic-typography-heading-3-medium-fontSize: 16px;
  --semantic-typography-heading-3-medium-lineHeight: 1.4;
  --semantic-typography-heading-3-medium-letterSpacing: 0em;
  --semantic-typography-heading-3-medium-fontWeight: 500;
  --semantic-typography-heading-3-bold-fontSize: 16px;
  --semantic-typography-heading-3-bold-lineHeight: 1.4;
  --semantic-typography-heading-3-bold-letterSpacing: 0em;
  --semantic-typography-heading-3-bold-fontWeight: 600;
  --semantic-typography-body-1-regular-fontSize: 16px;
  --semantic-typography-body-1-regular-lineHeight: 1.6;
  --semantic-typography-body-1-regular-letterSpacing: 0.025em;
  --semantic-typography-body-1-regular-fontWeight: 400;
  --semantic-typography-body-1-medium-fontSize: 16px;
  --semantic-typography-body-1-medium-lineHeight: 1.6;
  --semantic-typography-body-1-medium-letterSpacing: 0.025em;
  --semantic-typography-body-1-medium-fontWeight: 500;
  --semantic-typography-body-1-bold-fontSize: 16px;
  --semantic-typography-body-1-bold-lineHeight: 1.6;
  --semantic-typography-body-1-bold-letterSpacing: 0.025em;
  --semantic-typography-body-1-bold-fontWeight: 700;
  --semantic-typography-body-2-regular-fontSize: 14px;
  --semantic-typography-body-2-regular-lineHeight: 1.6;
  --semantic-typography-body-2-regular-letterSpacing: 0.025em;
  --semantic-typography-body-2-regular-fontWeight: 400;
  --semantic-typography-body-2-medium-fontSize: 14px;
  --semantic-typography-body-2-medium-lineHeight: 1.6;
  --semantic-typography-body-2-medium-letterSpacing: 0.025em;
  --semantic-typography-body-2-medium-fontWeight: 500;
  --semantic-typography-body-2-bold-fontSize: 14px;
  --semantic-typography-body-2-bold-lineHeight: 1.6;
  --semantic-typography-body-2-bold-letterSpacing: 0.025em;
  --semantic-typography-body-2-bold-fontWeight: 700;
  --semantic-typography-label-1-regular-fontSize: 14px;
  --semantic-typography-label-1-regular-lineHeight: 1.4;
  --semantic-typography-label-1-regular-letterSpacing: 0.05em;
  --semantic-typography-label-1-regular-fontWeight: 400;
  --semantic-typography-label-1-medium-fontSize: 14px;
  --semantic-typography-label-1-medium-lineHeight: 1.4;
  --semantic-typography-label-1-medium-letterSpacing: 0.05em;
  --semantic-typography-label-1-medium-fontWeight: 500;
  --semantic-typography-label-1-bold-fontSize: 14px;
  --semantic-typography-label-1-bold-lineHeight: 1.4;
  --semantic-typography-label-1-bold-letterSpacing: 0.05em;
  --semantic-typography-label-1-bold-fontWeight: 700;
  --semantic-typography-label-2-regular-fontSize: 12px;
  --semantic-typography-label-2-regular-lineHeight: 1.4;
  --semantic-typography-label-2-regular-letterSpacing: 0.05em;
  --semantic-typography-label-2-regular-fontWeight: 400;
  --semantic-typography-label-2-medium-fontSize: 12px;
  --semantic-typography-label-2-medium-lineHeight: 1.4;
  --semantic-typography-label-2-medium-letterSpacing: 0.05em;
  --semantic-typography-label-2-medium-fontWeight: 500;
  --semantic-typography-label-2-bold-fontSize: 12px;
  --semantic-typography-label-2-bold-lineHeight: 1.4;
  --semantic-typography-label-2-bold-letterSpacing: 0.05em;
  --semantic-typography-label-2-bold-fontWeight: 700;
  --semantic-typography-caption-1-regular-fontSize: 12px;
  --semantic-typography-caption-1-regular-lineHeight: 1.4;
  --semantic-typography-caption-1-regular-letterSpacing: 0.075em;
  --semantic-typography-caption-1-regular-fontWeight: 400;
  --semantic-typography-caption-1-medium-fontSize: 12px;
  --semantic-typography-caption-1-medium-lineHeight: 1.4;
  --semantic-typography-caption-1-medium-letterSpacing: 0.075em;
  --semantic-typography-caption-1-medium-fontWeight: 500;
  --semantic-typography-caption-1-bold-fontSize: 12px;
  --semantic-typography-caption-1-bold-lineHeight: 1.4;
  --semantic-typography-caption-1-bold-letterSpacing: 0.075em;
  --semantic-typography-caption-1-bold-fontWeight: 700;
  --semantic-typography-caption-2-regular-fontSize: 12px;
  --semantic-typography-caption-2-regular-lineHeight: 1.2;
  --semantic-typography-caption-2-regular-letterSpacing: 0.075em;
  --semantic-typography-caption-2-regular-fontWeight: 400;
  --semantic-typography-caption-2-medium-fontSize: 12px;
  --semantic-typography-caption-2-medium-lineHeight: 1.2;
  --semantic-typography-caption-2-medium-letterSpacing: 0.075em;
  --semantic-typography-caption-2-medium-fontWeight: 500;
  --semantic-typography-caption-2-bold-fontSize: 12px;
  --semantic-typography-caption-2-bold-lineHeight: 1.2;
  --semantic-typography-caption-2-bold-letterSpacing: 0.075em;
  --semantic-typography-caption-2-bold-fontWeight: 700;
  --semantic-typography-caption-3-regular-fontSize: 12px;
  --semantic-typography-caption-3-regular-lineHeight: 1.2;
  --semantic-typography-caption-3-regular-letterSpacing: 0.075em;
  --semantic-typography-caption-3-regular-fontWeight: 400;
  --semantic-typography-caption-3-medium-fontSize: 12px;
  --semantic-typography-caption-3-medium-lineHeight: 1.2;
  --semantic-typography-caption-3-medium-letterSpacing: 0.075em;
  --semantic-typography-caption-3-medium-fontWeight: 500;
  --semantic-typography-caption-3-bold-fontSize: 12px;
  --semantic-typography-caption-3-bold-lineHeight: 1.2;
  --semantic-typography-caption-3-bold-letterSpacing: 0.075em;
  --semantic-typography-caption-3-bold-fontWeight: 700;
  --semantic-typography-reading-regular-fontSize: 16px;
  --semantic-typography-reading-regular-lineHeight: 1.8;
  --semantic-typography-reading-regular-letterSpacing: 0.05em;
  --semantic-typography-reading-regular-fontWeight: 400;
  --semantic-typography-reading-medium-fontSize: 16px;
  --semantic-typography-reading-medium-lineHeight: 1.8;
  --semantic-typography-reading-medium-letterSpacing: 0.05em;
  --semantic-typography-reading-medium-fontWeight: 500;
  --semantic-typography-reading-bold-fontSize: 16px;
  --semantic-typography-reading-bold-lineHeight: 1.8;
  --semantic-typography-reading-bold-letterSpacing: 0.05em;
  --semantic-typography-reading-bold-fontWeight: 700;
  --semantic-spacingVer-global-none: 0px;
  --semantic-spacingVer-global-xxxs: 2px;
  --semantic-spacingVer-global-xxs: 4px;
  --semantic-spacingVer-global-xs: 6px;
  --semantic-spacingVer-global-sm: 8px;
  --semantic-spacingVer-global-md: 10px;
  --semantic-spacingVer-global-lg: 12px;
  --semantic-spacingVer-global-xl: 16px;
  --semantic-spacingVer-global-xxl: 20px;
  --semantic-spacingVer-global-xxxl: 24px;
  --semantic-spacingHor-global-none: 0px;
  --semantic-spacingHor-global-xxxs: 2px;
  --semantic-spacingHor-global-xxs: 4px;
  --semantic-spacingHor-global-xs: 6px;
  --semantic-spacingHor-global-sm: 8px;
  --semantic-spacingHor-global-md: 10px;
  --semantic-spacingHor-global-lg: 12px;
  --semantic-spacingHor-global-xl: 16px;
  --semantic-spacingHor-global-xxl: 20px;
  --semantic-spacingHor-global-xxxl: 24px;
  --semantic-size-global-none: 0px;
  --semantic-size-global-xxxs: 2px;
  --semantic-size-global-xxs: 4px;
  --semantic-size-global-xs: 12px;
  --semantic-size-global-sm: 16px;
  --semantic-size-global-md: 20px;
  --semantic-size-global-lg: 24px;
  --semantic-size-global-xl: 28px;
  --semantic-size-global-xxl: 32px;
  --semantic-size-global-xxxl: 36px;
  --semantic-size-global-xxxxl: 40px;
  --semantic-radius-global-none: 0px;
  --semantic-radius-global-sm: 2px;
  --semantic-radius-global-md: 4px;
  --semantic-radius-global-lg: 6px;
  --semantic-radius-global-xl: 8px;
  --semantic-radius-global-xxl: 10px;
  --semantic-radius-global-circular: 10000px;
  --semantic-radius-global-pill: 10000px;
  --semantic-height-global-xxxs: 12px;
  --semantic-height-global-xxs: 16px;
  --semantic-height-global-xs: 20px;
  --semantic-height-global-sm: 24px;
  --semantic-height-global-md: 28px;
  --semantic-height-global-lg: 32px;
  --semantic-height-global-xl: 36px;
  --semantic-height-global-xxl: 40px;
  --semantic-height-global-xxxl: 44px;
  --semantic-layout-spacing-inset-xs: 0px;
  --semantic-layout-spacing-inset-sm: 0px;
  --semantic-layout-spacing-inset-md: 0px;
  --semantic-layout-spacing-inset-lg: 0px;
  --semantic-layout-spacing-inset-xl: 0px;
  --semantic-layout-spacing-stack-xs: 0px;
  --semantic-layout-spacing-stack-sm: 0px;
  --semantic-layout-spacing-stack-md: 0px;
  --semantic-layout-spacing-stack-lg: 0px;
  --semantic-layout-spacing-stack-xl: 0px;
  --semantic-layout-spacing-inline-xs: 0px;
  --semantic-layout-spacing-inline-sm: 0px;
  --semantic-layout-spacing-inline-md: 0px;
  --semantic-layout-spacing-inline-lg: 0px;
  --semantic-layout-spacing-inline-xl: 0px;
  --semantic-layout-grid-gutter-sm: 0px;
  --semantic-layout-grid-gutter-md: 0px;
  --semantic-layout-grid-gutter-lg: 0px;
  --semantic-layout-grid-margin-sm: 0px;
  --semantic-layout-grid-margin-md: 0px;
  --semantic-layout-grid-margin-lg: 0px;
  --semantic-layout-grid-columns-sm: 4px;
  --semantic-layout-grid-columns-md: 8px;
  --semantic-layout-grid-columns-lg: 12px;
  --semantic-layout-breakpoint-small: 479px;
  --semantic-layout-breakpoint-medium: 639px;
  --semantic-layout-breakpoint-large: 1023px;
  --semantic-layout-breakpoint-xlarge: 1365px;
  --semantic-layout-breakpoint-xxlarge: 1919px;
  --semantic-shape-radius-button-sm: 2px;
  --semantic-shape-radius-button-md: 4px;
  --semantic-shape-radius-button-lg: 6px;
  --semantic-shape-radius-card: 4px;
  --semantic-shape-radius-input: 4px;
  --semantic-shape-radius-badge-default: 2px;
  --semantic-shape-radius-badge-pill: 10000px;
  --semantic-shape-radius-avatar: 10000px;
  --semantic-shape-radius-popover: 6px;
  --semantic-shape-radius-modal: 6px;
  --semantic-shape-borderWidth-thin: 1px;
  --semantic-shape-borderWidth-medium: 2px;
  --semantic-shape-borderWidth-thick: 3px;
  --semantic-shape-borderWidth-thicker: 4px;
  --semantic-shape-borderWidth-button: 1px;
  --semantic-shape-borderWidth-card: 1px;
  --semantic-shape-borderWidth-input-default: 1px;
  --semantic-shape-borderWidth-input-focused: 2px;
  --semantic-shape-borderWidth-divider: 1px;
  --semantic-shape-form-rectangle-default-borderRadius: 2px;
  --semantic-shape-form-rectangle-sharp-borderRadius: 0px;
  --semantic-shape-form-circular-borderRadius: 10000px;
  --semantic-shape-form-pill-borderRadius: 10000px;
  --semantic-shape-form-beak-width: 8px;
  --semantic-shape-form-beak-height: 8px;
  --semantic-animation-duration-global-instant: 100ms;
  --semantic-animation-duration-global-fast: 200ms;
  --semantic-animation-duration-global-normal: 300ms;
  --semantic-animation-duration-global-slow: 500ms;
  --semantic-animation-duration-global-slower: 700ms;
  --semantic-animation-duration-transition-button: 200ms;
  --semantic-animation-duration-transition-card: 300ms;
  --semantic-animation-duration-transition-dropdown: 200ms;
  --semantic-animation-duration-transition-modal-enter: 300ms;
  --semantic-animation-duration-transition-modal-exit: 200ms;
  --semantic-animation-duration-transition-tooltip: 200ms;
  --semantic-animation-duration-transition-toast: 200ms;
  --semantic-animation-duration-feedback-success: 400ms;
  --semantic-animation-duration-feedback-error: 600ms;
  --semantic-animation-duration-feedback-loading: 800ms;
  --semantic-animation-easing-global-default: cubic-bezier(0.4, 0.0, 0.2, 1);
  --semantic-animation-easing-global-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
  --semantic-animation-easing-global-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --semantic-animation-easing-global-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1);
  --semantic-animation-easing-interaction-button: cubic-bezier(0.0, 0.0, 0.2, 1);
  --semantic-animation-easing-interaction-card: cubic-bezier(0.4, 0.0, 0.2, 1);
  --semantic-animation-easing-interaction-dropdown-open: cubic-bezier(0.4, 0.0, 1, 1);
  --semantic-animation-easing-interaction-dropdown-close: cubic-bezier(0.0, 0.0, 0.2, 1);
  --semantic-animation-easing-interaction-modal-enter: cubic-bezier(0.4, 0.0, 1, 1);
  --semantic-animation-easing-interaction-modal-exit: cubic-bezier(0.0, 0.0, 0.2, 1);
  --semantic-animation-easing-interaction-tooltip: cubic-bezier(0.4, 0.0, 1, 1);
  --semantic-animation-easing-interaction-toast: cubic-bezier(0.4, 0.0, 1, 1);
  --semantic-elevation-z-base: 0;
  --semantic-elevation-z-raised: 100;
  --semantic-elevation-z-navigation: 200;
  --semantic-elevation-z-header: 300;
  --semantic-elevation-z-dropdown: 400;
  --semantic-elevation-z-sticky: 500;
  --semantic-elevation-z-overlay: 600;
  --semantic-elevation-z-modal: 700;
  --semantic-elevation-z-toast: 800;
  --semantic-elevation-z-popover: 900;
  --semantic-elevation-z-tooltip: 1000;
  --semantic-focus-outline-width: 2px;
  --semantic-focus-outline-style: solid;
  --semantic-focus-outline-color: #00A0E9;
  --semantic-focus-outline-offset: 2px;
  --semantic-focus-ring-width: 2px;
  --semantic-focus-ring-color: #00A0E9;
  --semantic-focus-ring-offset: 2px;
  --semantic-object-fit-fill: fill;
  --semantic-object-fit-contain: contain;
  --semantic-object-fit-cover: cover;
  --semantic-object-fit-none: none;
  --semantic-object-fit-scaleDown: scale-down;
  --semantic-object-fit-stretch: fill;
  --semantic-object-fit-fitInside: contain;
  --semantic-object-fit-fillArea: cover;
  --semantic-object-fit-crop: cover;
  --semantic-object-position-center: center;
  --semantic-object-position-top: top;
  --semantic-object-position-bottom: bottom;
  --semantic-object-position-left: left;
  --semantic-object-position-right: right;
  --semantic-object-position-topLeft: top left;
  --semantic-object-position-topRight: top right;
  --semantic-object-position-bottomLeft: bottom left;
  --semantic-object-position-bottomRight: bottom right;
  --semantic-object-position-cropCenter: center;
  --semantic-object-position-cropTop: top;
  --semantic-object-position-cropBottom: bottom;
  --semantic-object-position-cropLeft: left;
  --semantic-object-position-cropRight: right;
  --semantic-object-position-cropTopLeft: top left;
  --semantic-object-position-cropTopRight: top right;
  --semantic-object-position-cropBottomLeft: bottom left;
  --semantic-object-position-cropBottomRight: bottom right;
  --semantic-boxSizing-contentBox: content-box;
  --semantic-boxSizing-borderBox: border-box;
  --semantic-aspectRatio-square: 1/1;
  --semantic-aspectRatio-landscape-classic: 4/3;
  --semantic-aspectRatio-landscape-wide: 16/9;
  --semantic-aspectRatio-landscape-ultraWide: 21/9;
  --semantic-aspectRatio-landscape-film: 3/2;
  --semantic-aspectRatio-portrait-classic: 3/4;
  --semantic-aspectRatio-portrait-tall: 9/16;
  --semantic-aspectRatio-portrait-book: 2/3;
  --semantic-opacity-hover: 0.8;
  --semantic-opacity-disabled: 0.4;
  --semantic-opacity-overlay-light: 0.2;
  --semantic-opacity-overlay-medium: 0.4;
  --semantic-opacity-overlay-heavy: 0.6;
}