$color-weights: (50 300 500 700 900);

// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;

$negative-spacers: (
  1: $spacer * -0.25,
  2: $spacer * -0.5,
  3: $spacer * -1,
  4: $spacer * -1.5,
  5: $spacer * -3,
);

// Grid breakpoints
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
) !default;

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

$gutters: $spacers !default;

$container-padding-x: $grid-gutter-width * 0.5 !default;

// Shadows

$shadow: 0 1px 4px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 13%),
  0 0.4px 0.5px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 3.7%),
  0 1px 1.4px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 5.3%),
  0 2.1px 2.8px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 6.7%),
  0 4.4px 5.8px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 8.3%),
  0 12px 16px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 12%);
$shadow-lg: 0 1px 4px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 13%),
  0 0.4px 0.5px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 3.7%),
  0 1px 1.4px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 5.3%),
  0 2.1px 2.8px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 6.7%),
  0 4.4px 5.8px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 8.3%),
  0 12px 16px -6px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 12%);
$shadow-sm: 0 0.2px 0.4px
    hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 4%),
  0 0.5px 1px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 6%),
  0 1.2px 2.4px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 8%),
  0 1.8px 4px hsl(var(--_body-hue) var(--_shadow-saturation) var(--_shadow-lightness) / 12%);