$fg-0: #fff;
$fg-1: mix($dark-primary-text, $light-background, 15%);
$fg-2: mix($dark-primary-text, $light-background, 40%);
$fg-3: mix($dark-primary-text, $light-background, 55%);
$fg-4: mix($dark-primary-text, $light-background, 75%);
$fg-5: mix($dark-primary-text, $light-background, 100%);

$bg-1: mix($dark-background, $white, 0%);
$bg-2: mix($dark-background, $light-background, 20%);
$bg-3: mix($dark-background, $light-background, 50%);
$bg-4: mix($dark-background, $light-background, 70%);
$bg-5: mix($dark-background, $light-background, 100%);

$dark-fg-1: #000;
$dark-fg-1: mix($light-primary-text, $dark-background, 15%);
$dark-fg-2: mix($light-primary-text, $dark-background, 40%);
$dark-fg-3: mix($light-primary-text, $dark-background, 55%);
$dark-fg-4: mix($light-primary-text, $dark-background, 75%);
$dark-fg-5: mix($light-primary-text, $dark-background, 100%);

$dark-bg-1: mix($dark-background, #000, 30%);
$dark-bg-2: mix($light-background, $dark-background, 10%);
$dark-bg-3: mix($light-background, $dark-background, 30%);
$dark-bg-4: mix($light-background, $dark-background, 60%);
$dark-bg-5: mix($light-background, $dark-background, 100%);


.text-fg-0, .bg-3, .bg-4, .bg-5 { color: $fg-0 }
.text-fg-1 { color: $fg-1 }
.text-fg-2 { color: $fg-2; }
.text-fg-3 { color: $fg-3; }
.text-fg-4 { color: $fg-4; }
.text-fg-5 { color: $fg-5; }

.bg-1 { background-color: $bg-1; }
.bg-2 { background-color: $bg-2; }
.bg-3 { background-color: $bg-3; }
.bg-4 { background-color: $bg-4; }
.bg-5 { background-color: $bg-5; }

// http://colormind.io/
// https://leonardocolor.io/?colorKeys=%232e0bfd&base=ffffff&ratios=3%2C3.52%2C4.15%2C4.89%2C5.73%2C6.68%2C7.75%2C8.95%2C11.50&mode=CAM02
// https://leonardocolor.io/?colorKeys=%232e0bfd&base=ffffff&ratios=1.5%2C4.46%2C12%2C16.00&mode=CAM02

$palette-primary: (
  lighter: #efe5ff,
  light: #b494ff,
  default: #2f00ff,
  dark: #0000c6,
  darker: #00006b
);
@include make-color-classes('primary', $palette-primary);
$color-primary-lighter: map_get($palette-primary, 'lighter');
$color-primary-light: map_get($palette-primary, 'light');
$color-primary: map_get($palette-primary, 'default');
$color-primary-dark: map_get($palette-primary, 'dark');
$color-primary-darker: map_get($palette-primary, 'darker');


$palette-accent: (
  lighter: #efe5ff,
  light: #b494ff,
  default: #2f00ff,
  dark: #0000c6,
  darker: #00006b
);
@include make-color-classes('accent', $palette-accent);
$color-accent-lighter: map_get($palette-accent, 'lighter');
$color-accent-light: map_get($palette-accent, 'light');
$color-accent: map_get($palette-accent, 'default');
$color-accent-dark: map_get($palette-accent, 'dark');
$color-accent-darker: map_get($palette-accent, 'darker');

$palette-success: (
  lighter: #E1E8D3,
  light: #91AC61,
  default: #688E26,
  dark: #394E15,
  darker: #26340E
);
@include make-color-classes('success', $palette-success);
$color-success-lighter: map_get($palette-success, 'lighter');
$color-success-light: map_get($palette-success, 'light');
$color-success: map_get($palette-success, 'default');
$color-success-dark: map_get($palette-success, 'dark');
$color-success-darker: map_get($palette-success, 'darker');

$palette-warning: (
  lighter: #FDECC9,
  light: #FBD482,
  default: #EDAC2A,
  dark: #805c20,
  darker: #523d14
);
@include make-color-classes('warning', $palette-warning);
$color-warning-lighter: map_get($palette-warning, 'lighter');
$color-warning-light: map_get($palette-warning, 'light');
$color-warning: map_get($palette-warning, 'default');
$color-warning-dark: map_get($palette-warning, 'dark');
$color-warning-darker: map_get($palette-warning, 'darker');

$palette-danger: (
  lighter: #F1D0D5,
  light: #CE5C6D,
  default: #B3001B,
  dark: #62000F,
  darker: #42000A
);
@include make-color-classes('danger', $palette-danger);
$color-danger-lighter: map_get($palette-danger, 'lighter');
$color-danger-light: map_get($palette-danger, 'light');
$color-danger: map_get($palette-danger, 'default');
$color-danger-dark: map_get($palette-danger, 'dark');
$color-danger-darker: map_get($palette-danger, 'darker');

.bg-grad-1 {
  background: linear-gradient(0deg, lighten($bg-1, 10%) 0%, lighten($bg-1, 0%) 100%);
}

hr {
  border: none;
  border-bottom: 1px solid $fg-1;
}

.theme-dark {
  .text-fg-1, .bg-3, .bg-4, .bg-5 { color: $dark-fg-1 }
  .text-fg-2 { color: $dark-fg-2; }
  .text-fg-3 { color: $dark-fg-3; }
  .text-fg-4 { color: $dark-fg-4; }
  .text-fg-5 { color: $dark-fg-5; }

  .bg-1 { background-color: $dark-bg-1; }
  .bg-2 { background-color: $dark-bg-2; }
  .bg-3 { background-color: $dark-bg-3; }
  .bg-4 { background-color: $dark-bg-4; }
  .bg-5 { background-color: $dark-bg-5; }

  .bg-grad-1 {
    background: linear-gradient(0deg, lighten($dark-bg-1, 10%) 0%, lighten($dark-bg-1, 0%) 100%);
  }

  hr {
    border-bottom: 1px solid $dark-fg-1;
  }
}