:root {
  --sf-spacing-0-5x: 4px;
  --sf-spacing-0x: 0px;
  --sf-spacing-1x: 8px;
  --sf-spacing-2x: 16px;
  --sf-spacing-3x: 24px;
  --sf-spacing-4x: 32px;
  --sf-spacing-5x: 40px;
  --sf-spacing-6x: 48px;
  --sf-spacing-7x: 56px;
  --sf-spacing-8x: 64px;
  --sf-spacing-9x: 72px;
  --sf-spacing-1-5x: 12px;
  --sf-spacing-0-25x: 2px;
  --sf-shadow-1x-color: #00000040;
  --sf-shadow-1x-x: 0px;
  --sf-shadow-1x-y: 2px;
  --sf-shadow-1x-blur: 8px;
  --sf-shadow-1x-spread: 0px;
  --sf-shadow-2x-color: #00000040;
  --sf-shadow-2x-x: 0px;
  --sf-shadow-2x-y: 8px;
  --sf-shadow-2x-spread: 0px;
  --sf-shadow-2x-blur: 24px;
  --sf-shadow-0x-y: 0px;
  --sf-shadow-0x-blur: 0px;
  --sf-shadow-0x-spread: 0px;
  --sf-shadow-0x-color: #ffffff00;
  --sf-shadow-0x-x: 0px;
  --sf-shape-border-radius-full: 9999px;
  --sf-shape-border-radius-2x: 16px;
  --sf-shape-border-radius-1x: 8px;
  --sf-shape-border-radius-0x: 0px;
  --sf-shape-border-radius-0-5x: 4px;
  --sf-shape-border-radius-0-25x: 2px;
  --sf-shape-border-width-0x: 0px;
  --sf-shape-border-width-1x: 1px;
  --sf-shape-border-width-2x: 2px;
  --sf-shape-border-width-4x: 4px;
  --sf-size-component-height-lg: 48px;
  --sf-size-component-height-md: 40px;
  --sf-size-component-height-sm: 32px;
  --sf-size-component-height-xl: 64px;
  --sf-size-component-height-xs: 24px;
  --sf-size-component-height-xxl: 72px;
  --sf-size-icon-height-2x: 16px;
  --sf-size-icon-height-3x: 24px;
  --sf-size-icon-height-4x: 32px;
  --sf-size-icon-height-5x: 40px;
  --sf-size-icon-height-6x: 48px;
  --sf-size-icon-height-7x: 56px;
  --sf-size-icon-height-8x: 64px;
  --sf-size-pictogram-height-10x: 32px;
  --sf-size-pictogram-height-11x: 40px;
  --sf-size-pictogram-height-12x: 48px;
  --sf-size-pictogram-height-13x: 56px;
  --sf-size-pictogram-height-14x: 64px;
  --sf-size-pictogram-height-15x: 72px;
  --sf-size-pictogram-height-8x: 16px;
  --sf-size-pictogram-height-9x: 24px;
}