// ==========================================================================
// = Global Variables
// ==========================================================================

// Colors
// =============

// UI Colors
$color-primary                 : color('blue', 90);
$color-secondary               : color('blue', 80);
$color-tertiary                : color('blue', 70);

// Grays
$color-gray-70                 : color('gray', 70);
$color-gray-60                 : color('gray', 60);
$color-gray-50                 : color('gray', 50);
$color-gray-40                 : color('gray', 40);
$color-gray-30                 : color('gray', 30);
$color-gray-20                 : color('gray', 20);
$color-gray-10                 : color('gray', 10);

$color-cool-20                 : color('cool white', 20);
$color-cool-30                 : color('cool white', 30);
$color-cool-40                 : color('cool white', 40);

$color-white                   : color('white', core);
$color-black                   : color('black', core);

//Active Colors
$color-active--darker           : color('magenta', 70);
$color-active                   : color('magenta', 60);
$color-active--lighter          : color('magenta', 50);

$color-active-dark--darker      : color('teal', 40);
$color-active-dark              : color('teal', 30);
$color-active-dark--lighter     : color('teal', 20);

//Accent Colors
$color-accent                   : color('blue', 50);
$color-accent-dark              : color('blue', 20);

// System ML Buttons
$color-systemml-accent          : #FF5003;
$color-systemml-accent-dark     : #D74108;

$color-systemml-accent2          : #4178be;
$color-systemml-accent2-dark     : #325C80;

//Status Colors
$color-success                  : color('green', 50);
$color-success-dark             : color('green', 30);
$color-warning                  : color('yellow', 20);
$color-error                    : color('red', 50);
$color-info                     : color('blue', 50);
$color-info-dark                : color('blue', 20);

//Focus Colors
//$color-focus                    : rgba(color('blue', 20), .75);
//$color-focus-dark               : rgba(color('blue', 50), .75);

//Type Colors
$color-text                     : $color-primary;
$color-text-dark                : $color-cool-20;

$color-text-systemml            : #A6AFAF;

// Link colors
$color-link                     : $color-active;
$color-link-hover               : $color-active;
$color-link-active              : $color-active--lighter;

$color-link-dark                : $color-active-dark;
$color-link-hover-dark          : $color-active-dark;
$color-link-active-dark         : $color-active-dark--lighter;

// Button colors
$color-button                 : $color-active;
$color-button-light           : $color-active-dark--darker;

$color-button-dark            : $color-active-dark;
$color-button-disabled        : $color-gray-30;
$color-button-dark-disabled   : $color-gray-50;

$color-button-primary         : $color-systemml-accent;

// Checkbox Colors
$color-checkbox                 : $color-active;
$color-checkbox-border          : $color-secondary;
$color-checkbox-disabled        : $color-gray-30;

$color-checkbox-dark            : $color-active-dark;
$color-checkbox-dark-border     : $color-cool-20;
$color-checkbox-dark-disabled   : $color-gray-50;

// Radio Colors
$color-radio                  : $color-active;
$color-radio-border           : $color-secondary;
$color-radio-disabled         : $color-gray-30;

$color-radio-dark             : $color-active-dark;
$color-radio-dark-border      : $color-cool-20;
$color-radio-dark-disabled    : $color-gray-50;

// Select Box Colors
$color-select                 : $color-active;
$color-select-bg              : $color-gray-10;
$color-select-option          : $color-secondary;
$color-select-hover           : $color-white;

$color-select-dark            : $color-active-dark;
$color-select-bg-dark         : $color-tertiary;
$color-select-option-dark     : $color-cool-20;
$color-select-dark-hover      : $color-primary;

// Slider Colors
$color-slider-right             : $color-gray-10;
$color-slider-left              : $color-active;
$color-slider-front             : $color-active--darker;
$color-slider-disabled          : $color-gray-30;

$color-slider-right-dark        : $color-gray-30;
$color-slider-left-dark         : $color-active-dark;
$color-slider-front-dark        : $color-active-dark--darker;
$color-slider-disableda         : $color-gray-60;
$color-slider-disabledb         : $color-gray-50;

// Table Colors
$color-table-background         : $color-white;
$color-table-title              : $color-secondary;
$color-table-subtitle           : $color-gray-50;
$color-table-border1            : $color-gray-10;
$color-table-border2            : $color-gray-20;
$color-table-first-column       : $color-gray-10;
$color-table-text               : $color-gray-50;
//$color-table-hover-background   : rgba($color-gray-10, .2);
$color-table-hover-top          : $color-primary;

// Text Field Colors
$color-textfield              : $color-gray-60;
$color-textfield-border       : $color-gray-50;
$color-textfield-focus        : $color-secondary;

$color-textfield-dark         : $color-gray-20;
$color-textfield-border-dark  : $color-gray-30;
$color-textfield-dark-focus   : $color-cool-20;

$color-validation-info        : $color-secondary;
$color-validation-info-dark   : $color-cool-20;

// Toggle Colors
$color-toggle-on                : $color-active;
$color-toggle-off               : $color-gray-30;
$color-toggle-front             : $color-white;
$color-toggle-check             : $color-cool-20;
$color-toggle-disabled          : $color-gray-30;
$color-toggle-on-dark           : $color-active-dark;
$color-toggle-off-dark          : $color-gray-30;
$color-toggle-front-dark        : $color-tertiary;
$color-toggle-check-dark        : $color-primary;
$color-toggle-disabled-dark     : $color-gray-50;


// Gradients
$gradient-light             :repeating-linear-gradient(45deg, $color-gray-20, $color-gray-20 2px, $color-gray-30 2px, $color-gray-30 8px);
$gradient-dark              :repeating-linear-gradient(45deg, $color-gray-60, $color-gray-60 2px, $color-gray-50 2px, $color-gray-50 8px);

// Search Colors
$color-search                   : $color-secondary;
$color-search-placeholder       : $color-gray-60;
$color-search-border            : $color-gray-50;
$color-auto                     : $color-gray-60;
$color-auto-focus               : $color-active;
$color-auto-bg                  : $color-gray-10;
$color-auto-bg-focus            : $color-white;


$color-search-dark              : $color-cool-20;
$color-search-placeholder-dark  : $color-gray-20;
$color-search-border-dark       : $color-gray-30;
$color-auto-dark                : $color-gray-20;
$color-auto-focus-dark          : $color-active-dark;
$color-auto-bg-dark             : $color-tertiary;
$color-auto-bg-focus-dark       : $color-primary;

// Base Sizes
// ==========

$base-font-size                 : 16px;
$large-font-size                : 22px;

$base-line-height               : 1.68;

// Font Stacks
// ===========

$font-family-default            : 'Helvetica Neue for IBM', 'Helvetica Neue', Helvetica, Arial, Roboto, sans-serif;
$font-family-monospace          : 'Source Code Pro', Lucida Console, Andale Mono, monospace;

// Font Weights
// ============

$font-weight-light              : 300;
$font-weight-medium             : 400;
$font-weight-roman              : 500;
$font-weight-bold               : 700;

//
// Define z-indexes for various elements
// @link http://www.sitepoint.com/using-sass-maps/
// @type number
//

// z-index reference
$zindex: (
  modal                       : 9000,
  overlay                     : 8000,
  header                      : 7000,
  dropdown                    : 6000
  );

// Transitions
// ============

$transition-default             : all .2s ease-in-out;
$transition-nav                 : all .25s ease-in-out;

//Used for Drop Downs
$ibm-bezier                     : cubic-bezier(.5, .08, 0, 1);

$button-speed                   : $transition-default;
$button-speed--faster           : all .1s ease-in-out;

// Shadow
// ============

$shadow-color           : rgba(0, 0, 0, .1);
$shadow-default         : 0px 2px 2px 0px $shadow-color; //double check this
$shadow-toggle-color    : rgb(77, 144, 254);
$shadow-toggle          : 0 0 5px 2px $shadow-toggle-color; // #4D90FE
$shadow-checkbox-color  : rgba(77, 144, 254, .5);

//Breakpoints
//=============

$bp-small               : 30em; // changed from 21em;
$bp-medium              : 64em;
$bp-large               : 90em;