// COLORS
$blue: #0076ff !default;
$green:  #4aca7d !default;
$white:  #fff !default;
$black:  #000 !default;
$red:    #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$teal:   #5bc0de !default;
$pink:   #ff5b77 !default;
$purple: #613d7c !default;
$white-opaque: rgba(255, 255, 255, 0.5);
$light-gray: #eee;
$primary: #1d93d2;

$colors: (
  blue: $blue,
  green: $green,
  white: $white,
  black: $black,
  red: $red,
  orange: $orange,
  yellow: $yellow,
  teal: $teal,
  pink: $pink,
  purple: $purple,
);

//grays
$gray-dark:     #292b2c !default;
$gray:          #969698 !default;
$gray-mid:      #bfbfc1 !default;
//$gray-mid:      #c3c3c3;
$gray-blue:     #efeff4 !default;
$gray-light:    #efefef !default;
$gray-lighter:  #f7f7f7 !default;
$gray-lightest: #f7f7f9 !default;

// main colors
$brand-primary:             $primary !default;
$brand-primary-dark:        darken($brand-primary, 10) !default;
$brand-primary-light:       lighten($brand-primary, 10) !default;
$brand-success:             $green !default;
$brand-info:                $teal !default;
$brand-warning:             $orange !default;
$brand-danger:              $red !default;
$brand-error:               $red !default;
$brand-inverse:             $gray-dark !default;


$text: #646464; //updated from rgb(51, 51, 51)
$secondary_background: rgb(219,221,227);
$secondary_background_hover: rgb(224,226,231);
$secondary_background_active: rgb(186,188,193);

// FONTS
$font-size-xxl: 36px !default;
$font-size-xl: 24px !default;
$font-size-lg: 18px !default;
$font-size-md: 16px !default;
$font-size-sm: 14px !default;
$font-size-xs: 12px !default;

$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
$text-muted: $gray-light !default;
$enable-hover-media-query:  false !default;

// BREAKPOINTS
// standard grid breakpoints are taken from bootstrap
$grid-breakpoints: (
  xs: 0px,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

$width-configs: (
  flex-direction: row row-reverse column column-reverse,
  justify-content: flex-start flex-end center space-between space-around,
  align-items: flex-start flex-end center,
);

$flex-basis-percentages: (
  100: 100%,
  75: 75%,
  66: 66.66%,
  50: 50%,
  33: 33.33%,
  25: 25%
) !default;

$flex-grow-factors: 1, 2, 3, 4, 5 !default;

// BACKGROUNDS
$bg-primary: $blue !default;

// TRANSITIONS
$transition-all: all 0.25s ease !default;
$transition-background: background 0.25s ease !default;

// MARGINS
$margin-xs: 8px !default;
$margin-sm: 16px !default;
$margin-md: 24px !default;
$margin-lg: 38px !default;
$margin-xl: 64px !default;
$margin-xxl: 120px !default;
$margin-xxxl: 150px !default;

// PADDINGS
$padding-xs:  8px !default;
$padding-sm:  16px !default;
$padding-md:  24px !default;
$padding-lg:  38px !default;
$padding-xl:  56px !default;
$padding-xxl: 64px !default;
$padding-xxxl: 92px !default;

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

$container-paddings: (
  xs: $padding-sm,
  sm: $padding-md,
  md: $padding-xl,
  lg: $padding-xxl,
  xl: $padding-xxxl
) !default;

// BORDERS
$border-dark: 1px solid $gray !default;
$border-light: 1px solid $gray-light !default;
$border-primary: 1px solid $brand-primary !default;
$border-transparent: 1px solid transparent !default;
$border-dotted: 1px dotted $gray !default;
$border-none: 0px solid transparent !default;

//border radius
$border-radius-xs: 1px !default;
$border-radius-sm: 3px !default;
$border-radius-md: 5px !default;
$border-radius-lg: 100px !default;

// PANELS
$panel-height-sm: 250px !default;
$panel-height-md: 350px !default;
$panel-height-lg: 450px !default;


// Accent Color
$accent-color: $primary;
$accent-color-hover: lighten($accent_color, 15%);
$accent-color-active: darken($accent_color, 15%);

// Tray
$tray-header-height: 34px;