// COLORS

$color-purple-100: #D1C4E9;
$color-purple-200: #B39DDB;
$color-purple-300: #9575CD;
$color-purple-400: #7E57C2;
$color-purple-500: #673AB7;
$color-purple-600: #5E35B1;
$color-purple-700: #512DA8;
$color-purple-800: #4527A0;
$color-purple-900: #311B92;

$color-pink-100: #F8BBD0;
$color-pink-200: #F48FB1;
$color-pink-300: #F06292;
$color-pink-400: #EC407A;
$color-pink-500: #E91E63;
$color-pink-600: #D81B60;
$color-pink-700: #C2185B;
$color-pink-800: #AD1457;
$color-pink-900: #880E4F;

$color-blue-100: #E0F1FB;
$color-blue-200: #9BD3F1;
$color-blue-300: #56B5E8;
$color-blue-400: #229EE0;
$color-blue-500: #1D93D2;
$color-blue-600: #187BB0;
$color-blue-700: #116591;
$color-blue-800: #11577C;
$color-blue-900: #0C3F59;


$color-yellow-100: #ffeab3;
$color-yellow-200: #ffdd80;
$color-yellow-300: #ffcf4d;
$color-yellow-400: #ffc426;
$color-yellow-500: #ffba00;
$color-yellow-600: #ffb300;
$color-yellow-700: #ffab00;
$color-yellow-800: #ffa300;
$color-yellow-900: #ff9400;

$color-green-100: #D9F5EF;
$color-green-200: #8BE2CC;
$color-green-300: #4DD2B1;
$color-green-400: #32C5A1;
$color-green-500: #4CAF50;
$color-green-600: #46A14A;
$color-green-700: #3A863D;
$color-green-800: #285D2A;
$color-green-900: #1C421E;

$color-red-100: #FCEAEC;
$color-red-200: #F8CBCF;
$color-red-300: #F0868E;
$color-red-400: #EC6C76;
$color-red-500: #E9525E;
$color-red-600: #DF2A30;
$color-red-700: #D2191E;
$color-red-800: #B7080B;
$color-red-900: #900203;

$color-orange-100: #FFF8D8;
$color-orange-200: #FFED9D;
$color-orange-300: #FFDE4E;
$color-orange-400: #FFD314;
$color-orange-500: #FFBA00;
$color-orange-600: #FF9000;
$color-orange-700: #EB8500;
$color-orange-800: #C46F00;
$color-orange-900: #764200;

$color-gray-100: #F8F8F8;
$color-gray-200: #F2F2F2;
$color-gray-300: #EBEBEB;
$color-gray-400: #DEDEDE;
$color-gray-500: #9E9E9E;
$color-gray-600: #757575;
$color-gray-700: #616161;
$color-gray-800: #424242;
$color-gray-900: #212121;

$white:  #ffffff !default;
$black:  #000000 !default;

// main colors
$brand-primary:        $color-blue-500 !default;
$brand-primary-dark:   $color-blue-700 !default;
$brand-primary-light:  $color-blue-300 !default;
$brand-success:        $color-green-500 !default;
$brand-info:           $color-blue-200 !default;
$brand-warning:        $color-orange-500 !default;
$brand-danger:         $color-red-500 !default;
$brand-error:          $color-red-500 !default;
$brand-inverse:        $color-gray-800 !default;

$text : $color-gray-800 !default;
$text-muted: $color-gray-300 !default;

// BACKGROUNDS
$bg-primary: $color-blue-500 !default;
$bg-primary_hover: $color-blue-400 !default;
$bg-primary_active: $color-blue-600 !default;

$bg-secondary: $color-gray-300 !default;
$bg-secondary_hover: $color-gray-200 !default;
$bg-secondary_active: $color-gray-400 !default;

// FONTS
$font-size-xxxl: 34px   !default;
$font-size-xxl:  20px   !default;
$font-size-xl:   17px   !default;
$font-size-lg:   15px   !default;
$font-size-md:   11.5px !default;
$font-size-sm:   10.5px !default;
$font-size-xs:   10px   !default;

$font-weight-normal: normal !default;
$font-weight-bold: bold !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;

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

// MARGINS
$margin-100: 3px !default;
$margin-200: 6px !default;
$margin-300: 12px !default;
$margin-400: 18px !default;
$margin-500: 24px !default;
$margin-600: 30px !default;
$margin-700: 36px !default;
$margin-800: 42px !default;
$margin-900: 48px !default;

// PADDINGS
$padding-100: 3px !default;
$padding-200: 6px !default;
$padding-300: 12px !default;
$padding-400: 18px !default;
$padding-500: 24px !default;
$padding-600: 30px !default;
$padding-700: 36px !default;
$padding-800: 42px !default;
$padding-900: 48px !default;

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

$container-paddings: (
    100: 3px,
    200: 6px,
    300: 12px,
    400: 18px,
    500: 24px,
    600: 30px,
    700: 36px,
    800: 42px,
    900: 48px,
) !default;

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

//border radius
$border-radius-xs:     1px !default;
$border-radius-sm:     2px !default;
$border-radius-md:     3px !default;
$border-radius-lg:     6px !default;
$border-radius-circle: 50% !default;

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


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

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