//====================================================
//  Colors
//====================================================
$white: #fff;
$gray: #c1c2c4;
$black: #000;
$red: #e54d42;
$orange: #ed9c2a;
$yellow: #fde169;
$green: #1eb79d;
$blue: #2fa8dd;

// Color Palette Modifiers
$palettes: (
  gray: (
    xx-light    : #fcfcfc,
    x-light     : #edeff0,
    light       : #d5d5d5,
    base        : $gray,
    dark        : #646567,
    x-dark      : #3e403f,
    xx-dark     : #29282d
  ),
  blue: (
    xx-light    : lighten($blue, 35%),
    x-light     : lighten($blue, 10%),
    light       : lighten($blue, 5%),
    base        : $blue,
    dark        : #1e799d,
    x-dark      : #606b76,
    xx-dark     : #333f48,
    dull        : #7f99b5
  ),
  green: (
    x-light     : lighten($green, 10%),
    light       : lighten($green, 5%),
    base        : $green,
    dark        : darken($green, 5%),
    bright      : #4cd29a
  ),
  orange: (
    light       : lighten($orange, 15%),
    base        : $orange,
    dark        : darken($orange, 15%),
    bittersweet : #f77e59
  ),
  red: (
    x-light     : #fbf2f2,
    light       : #f2e2e2,
    salmon      : #ff7763,
    base        : $red,
    dark        : #bd3a3a,
  )
);

@function palette($palette: 'gray', $shade: 'base') {
  @return map-get(map-get($palettes, $palette), $shade);
}
$ui-colors: (
  'transparent' : transparent, base          : palette(gray), consumer      : palette(blue), danger        : $red, dark          : palette(gray, xx-dark), dark-blue     : palette(blue, xx-dark), default       : palette(gray, light), dev           : palette(green), error         : $red, featured      : rgba(black, 0.3), info          : $blue, info--accent  : darken($blue, 10%), light         : $white, link          : $blue, normal        : $blue, off-light     : darken(palette(gray, xx-light), 2%), revoke        : $red, success       : palette(green, bright), warning       : $orange, default-type  : palette(blue, x-dark)
) !default;

.theme-bg--dark {
  color: $white;
}