$base-themes: (
  primary var(--primary) $primary,
  secondary var(--secondary) $secondary,
  tertiary var(--tertiary) $tertiary
) !default;

$base-colors: (
  info: $info,
  danger: $danger,
  success: $success,
  warning: $warning,
  dark: $gray-dark,
) !default;

// Color Scales
$base-scale: () !default;
@each $label, $color in $base-colors {
  $base-scale: map-merge($base-scale, (#{$label}-shade: mix($color, $black, 30%)));
  $base-scale: map-merge($base-scale, (#{$label}-dark: mix($color, $black, 60%)));
  $base-scale: map-merge($base-scale, (#{$label}-light: mix($color, $white, 60%)));
  $base-scale: map-merge($base-scale, (#{$label}-tint: mix($color, $white, 30%)));
}

$colors: (
  muted: $base-muted,
) !default;
$colors: map-merge($colors, $gray-list);
$colors: map-merge($colors, $base-colors);
$colors: map-merge($colors, $base-scale);
$colors: map-merge($colors, $color-list);

// Shadows
$light-shadow-level0: 0 0 0 1px rgba($shadow, 0.15), 0 0 0 rgba($shadow, 0), 0 0 0 rgba($shadow, 0) !default;
$light-shadow-level1: 0 0 0 1px rgba($shadow, 0.1), 0 0 0 rgba($shadow, 0), 0 1px 1px rgba($shadow, 0.2) !default;
$light-shadow-level2: 0 0 0 1px rgba($shadow, 0.1), 0 1px 1px rgba($shadow, 0.2), 0 2px 6px rgba($shadow, 0.2) !default;
$light-shadow-level3: 0 0 0 1px rgba($shadow, 0.1), 0 2px 4px rgba($shadow, 0.2), 0 8px 24px rgba($shadow, 0.2) !default;
$light-shadow-level4: 0 0 0 1px rgba($shadow, 0.1), 0 4px 8px rgba($shadow, 0.2), 0 18px 46px 6px rgba($shadow, 0.2) !default;

$dark-shadow-level0: 0 0 0 1px rgba($shadow, 0.5), 0 0 0 rgba($shadow, 0), 0 0 0 rgba($shadow, 0) !default;
$dark-shadow-level1: 0 0 0 1px rgba($shadow, 0.3), 0 0 0 rgba($shadow, 0), 0 1px 1px rgba($shadow, 0.6) !default;
$dark-shadow-level2: 0 0 0 1px rgba($shadow, 0.3), 0 1px 1px rgba($shadow, 0.6), 0 2px 6px rgba($shadow, 0.6) !default;
$dark-shadow-level3: 0 0 0 1px rgba($shadow, 0.3), 0 2px 4px rgba($shadow, 0.6), 0 8px 24px rgba($shadow, 0.6) !default;
$dark-shadow-level4: 0 0 0 1px rgba($shadow, 0.3), 0 4px 8px rgba($shadow, 0.6), 0 18px 46px 6px rgba($shadow, 0.6) !default;

$light: abs(lightness($base-theme)) > 50;
$shadow-level0: if($light, $light-shadow-level0, $dark-shadow-level0);
$shadow-level1: if($light, $light-shadow-level1, $dark-shadow-level1);
$shadow-level2: if($light, $light-shadow-level2, $dark-shadow-level2);
$shadow-level3: if($light, $light-shadow-level3, $dark-shadow-level3);
$shadow-level4: if($light, $light-shadow-level4, $dark-shadow-level4);
