@layer component;
@layer component {
  :root {
    --isp_radius-none: 0px;
    --isp_radius-sharp: 4px;
    --isp_radius-subtle: 6px;
    --isp_radius-default: 8px;
    --isp_radius-smooth: 12px;
    --isp_radius-rounded: 16px;
    --isp_radius-pill: 24px;
    --isp_radius-full: 9999px;
    --isp_spacing-none: 0px;
    --isp_spacing-optical: 2px;
    --isp_spacing-mini: 4px;
    --isp_spacing-tiny: 6px;
    --isp_spacing-micro: 8px;
    --isp_spacing-petite: 12px;
    --isp_spacing-base: 16px;
    --isp_spacing-moderate: 24px;
    --isp_spacing-medium: 32px;
    --isp_spacing-large: 40px;
    --isp_spacing-jumbo: 48px;
    --isp_spacing-giant: 64px;
  }
  @media screen and (max-width: 768px) {
    :root {
      --isp_radius-none: 0px;
      --isp_radius-sharp: 4px;
      --isp_radius-subtle: 6px;
      --isp_radius-default: 8px;
      --isp_radius-smooth: 10px;
      --isp_radius-rounded: 12px;
      --isp_radius-pill: 20px;
      --isp_radius-full: 9999px;
      --isp_spacing-none: 0px;
      --isp_spacing-optical: 2px;
      --isp_spacing-mini: 4px;
      --isp_spacing-tiny: 6px;
      --isp_spacing-micro: 8px;
      --isp_spacing-petite: 10px;
      --isp_spacing-base: 14px;
      --isp_spacing-moderate: 18px;
      --isp_spacing-medium: 24px;
      --isp_spacing-large: 32px;
      --isp_spacing-jumbo: 36px;
      --isp_spacing-giant: 48px;
    }
  }
}