/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  /* Base spacing tokens */
  --ds-breakpoint-sm: 640px;
  --ds-breakpoint-md: 768px;
  --ds-breakpoint-lg: 1024px;
  --ds-breakpoint-xl: 1280px;
  --ds-breakpoint-2xl: 1536px;
  --ds-border-radius-rounded-none: 0px;
  --ds-border-radius-rounded-xs: 2px;
  --ds-border-radius-rounded-sm: 6px;
  --ds-border-radius-rounded-md: 8px;
  --ds-border-radius-rounded-lg: 10px;
  --ds-border-radius-rounded-xl: 14px;
  --ds-border-radius-rounded-2xl: 16px;
  --ds-border-radius-rounded-3xl: 24px;
  --ds-border-radius-rounded-4xl: 32px;
  --ds-border-radius-rounded-full: 9999.008px;
  --ds-shadow-2xs-offset-x: 0px;
  --ds-shadow-2xs-offset-y: 1px;
  --ds-shadow-2xs-blur-radius: 0px;
  --ds-shadow-2xs-spread-radius: 0px;
  --ds-shadow-xs-offset-x: 0px;
  --ds-shadow-xs-offset-y: 1px;
  --ds-shadow-xs-blur-radius: 2px;
  --ds-shadow-xs-spread-radius: 0px;
  --ds-shadow-sm-1-offset-x: 0px;
  --ds-shadow-sm-1-offset-y: 1px;
  --ds-shadow-sm-1-blur-radius: 3px;
  --ds-shadow-sm-1-spread-radius: 0px;
  --ds-shadow-sm-2-offset-x: 0px;
  --ds-shadow-sm-2-offset-y: 1px;
  --ds-shadow-sm-2-blur-radius: 2px;
  --ds-shadow-sm-2-spread-radius: -1px;
  --ds-shadow-md-1-offset-x: 0px;
  --ds-shadow-md-1-offset-y: 4px;
  --ds-shadow-md-1-blur-radius: 6px;
  --ds-shadow-md-1-spread-radius: -1px;
  --ds-shadow-md-2-offset-x: 0px;
  --ds-shadow-md-2-offset-y: 2px;
  --ds-shadow-md-2-blur-radius: 4px;
  --ds-shadow-md-2-spread-radius: -2px;
  --ds-shadow-lg-1-offset-x: 0px;
  --ds-shadow-lg-1-offset-y: 10px;
  --ds-shadow-lg-1-blur-radius: 15px;
  --ds-shadow-lg-1-spread-radius: -3px;
  --ds-shadow-lg-2-offset-x: 0px;
  --ds-shadow-lg-2-offset-y: 4px;
  --ds-shadow-lg-2-blur-radius: 6px;
  --ds-shadow-lg-2-spread-radius: -4px;
  --ds-shadow-xl-1-offset-x: 0px;
  --ds-shadow-xl-1-offset-y: 20px;
  --ds-shadow-xl-1-blur-radius: 25px;
  --ds-shadow-xl-1-spread-radius: -5px;
  --ds-shadow-xl-2-offset-x: 0px;
  --ds-shadow-xl-2-offset-y: 8px;
  --ds-shadow-xl-2-blur-radius: 10px;
  --ds-shadow-xl-2-spread-radius: -6px;
  --ds-shadow-2xl-offset-x: 0px;
  --ds-shadow-2xl-offset-y: 25px;
  --ds-shadow-2xl-blur-radius: 50px;
  --ds-shadow-2xl-spread-radius: -12px;
  --ds-inset-shadow-2xs-offset-x: 0px;
  --ds-inset-shadow-2xs-offset-y: 1px;
  --ds-inset-shadow-2xs-blur-radius: 0px;
  --ds-inset-shadow-2xs-spread-radius: 0px;
  --ds-inset-shadow-xs-offset-x: 0px;
  --ds-inset-shadow-xs-offset-y: 1px;
  --ds-inset-shadow-xs-blur-radius: 1px;
  --ds-inset-shadow-xs-spread-radius: 0px;
  --ds-inset-shadow-sm-offset-x: 0px;
  --ds-inset-shadow-sm-offset-y: 2px;
  --ds-inset-shadow-sm-blur-radius: 4px;
  --ds-inset-shadow-sm-spread-radius: 0px;
  --ds-drop-shadow-xs-offset-x: 0px;
  --ds-drop-shadow-xs-offset-y: 1px;
  --ds-drop-shadow-xs-blur-radius: 1px;
  --ds-drop-shadow-xs-spread-radius: 0px;
  --ds-drop-shadow-sm-offset-x: 0px;
  --ds-drop-shadow-sm-offset-y: 1px;
  --ds-drop-shadow-sm-blur-radius: 2px;
  --ds-drop-shadow-sm-spread-radius: 0px;
  --ds-drop-shadow-md-offset-x: 0px;
  --ds-drop-shadow-md-offset-y: 3px;
  --ds-drop-shadow-md-blur-radius: 3px;
  --ds-drop-shadow-md-spread-radius: 0px;
  --ds-drop-shadow-lg-offset-x: 0px;
  --ds-drop-shadow-lg-offset-y: 4px;
  --ds-drop-shadow-lg-blur-radius: 4px;
  --ds-drop-shadow-lg-spread-radius: 0px;
  --ds-drop-shadow-xl-offset-x: 0px;
  --ds-drop-shadow-xl-offset-y: 9px;
  --ds-drop-shadow-xl-blur-radius: 7px;
  --ds-drop-shadow-xl-spread-radius: 0px;
  --ds-drop-shadow-2xl-offset-x: 0px;
  --ds-drop-shadow-2xl-offset-y: 25px;
  --ds-drop-shadow-2xl-blur-radius: 25px;
  --ds-drop-shadow-2xl-spread-radius: 0px;
  --ds-radius-sm: 6px;
  --ds-radius-xs: 2px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 14px;
  --ds-radius-md: 8px;
  --ds-radius-2xl: 16px;
  --ds-radius-3xl: 24px;
  --ds-radius-4xl: 32px;
  --ds-container-3xs: 256px;
  --ds-container-2xs: 288px;
  --ds-container-xs: 320px;
  --ds-container-sm: 384px;
  --ds-container-md: 448px;
  --ds-container-lg: 512px;
  --ds-container-xl: 576px;
  --ds-container-2xl: 672px;
  --ds-container-3xl: 768px;
  --ds-container-4xl: 896px;
  --ds-container-5xl: 1024px;
  --ds-container-6xl: 1152px;
  --ds-container-7xl: 1280px;
  --ds-blur-xs: 4px;
  --ds-blur-sm: 8px;
  --ds-blur-md: 12px;
  --ds-blur-lg: 16px;
  --ds-blur-xl: 24px;
  --ds-blur-2xl: 40px;
  --ds-blur-3xl: 64px;
  --ds-spread-xs: 3px;

  /* Responsive spacing tokens (Mobile default) */
  --ds-section-padding-x-sm: 16px;
  --ds-section-padding-y-sm: 16px;
  --ds-section-title-gap-xl: 16px;
  --ds-section-title-gap-lg: 16px;
  --ds-section-title-gap-md: 20px;
  --ds-section-title-gap-sm: 16px;
  --ds-section-padding-x-md: 16px;
  --ds-section-padding-y-md: 16px;
  --ds-section-padding-x-xs: 0px;
}

/* Responsive spacing tokens (Tablet: lg breakpoint 1024px) */
@media (min-width: 1024px) {
  :root {
    --ds-section-padding-x-md: 24px;
    --ds-section-padding-y-md: 24px;
    --ds-section-padding-x-xs: 16px;
  }
}

/* Responsive spacing tokens (Desktop: xl breakpoint 1280px) */
@media (min-width: 1280px) {
  :root {
    --ds-section-padding-x-sm: 24px;
    --ds-section-padding-y-sm: 24px;
    --ds-section-title-gap-xl: 24px;
    --ds-section-title-gap-lg: 20px;
    --ds-section-padding-x-md: 32px;
    --ds-section-padding-y-md: 32px;
    --ds-section-padding-x-xs: 24px;
  }
}