// Colors
//
// ### Brand colors
//
// You can use your own brand colors for your version of this application.
// The look and feel of our theme relies on using a handful
// of specific colors that help convey meaning and purpose.
//
// #### Primary color
//
// When using a primary color in your palette, this color should
// be the most widely used across all screens and components.
//
// __Variable name__: `$brand-primary`
//
// #### Secondary color
//
// Palettes with a secondary color may use this color
// to indicate a related action or information.
//
// __Variable name__: `$brand-secondary`
//
// #### Accent color
//
// The accent should be used for promoted actions only.
//
// __Variable name__: `$brand-accent`
//
// #### Usage
// Colors are defined as variables. You also use some predefined classes such as
// * `.bg-primary`
// * `.text-primary`
//
// ### State colors
// For states in forms, messages and other feedback we use state colors
// to indicate whether user actions were performed successfully or failed for example.
//
// #### Brand
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class=" brand-primary"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class=" brand-secondary"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem;
// border-radius: .25rem;" class=" brand-accent"></div>
//
// #### State
//
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-success"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-warning"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-danger"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-info"></div>
//
// #### Grayscale
//
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-base"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-darker"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-dark"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-light"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-light-1"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-lighter"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-lighter-1"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-gray-lightest"></div>
// <div style="display: inline-block; width: 6rem; height: 6rem; border-radius: .25rem;" class="bg-white"></div>
//
// Weight: 0
//
// Style guide: sass.colors




$gray-base:             #000;
$gray-darker:           lighten($gray-base, 13.5%); // #222
$gray-dark:             lighten($gray-base, 20%);   // #333
$gray:                  lighten($gray-base, 33.5%); // #555
$gray-light:            #777;
$gray-light-1:          #adadad;
$gray-lighter:          #e6e6e6;
$gray-lighter-1:        #f7f7f7;
$gray-lightest:         #f3f3f3;

$default-color:         #343434;

$brand-primary:         #29abe2;
$brand-secondary:       #1f80aa;
$brand-accent:          #ffc142;
$brand-accent-text:     #343434;

$brand-success:         #5cb85c;
$brand-info:            #33b5e5;
$brand-warning:         #f80;
$brand-danger:          #d9534f;

$brand-primary-dark:    mix($gray-base, $brand-primary, 30%);

$brand-link:            #33b5e5;

$state-success-text:    #3c763d;
$state-success-bg:      #dff0d8;
$state-success-border:  darken(adjust-hue($state-success-bg, -10), 5%);

$state-info-text:       #31708f;
$state-info-bg:         #d9edf7;
$state-info-border:     darken(adjust-hue($state-info-bg, -10), 7%);

$state-warning-text:    #8a6d3b;
$state-warning-bg:      #fcf8e3;
$state-warning-border:  darken(adjust-hue($state-warning-bg, -10), 5%);

$state-danger-text:     #a94442;
$state-danger-bg:       #f2dede;
$state-danger-border:   darken(adjust-hue($state-danger-bg, -10), 5%);

$text-muted:            $gray;

$second-line-navbar-bg: #004494;
$second-line-navbar-text: #fffff1;
$second-line-navbar-active-bg: #f2f5f9;
$second-line-navbar-active-text: #002f67;


// Bootstrap 4.0 Beta syntax
$theme-colors: (
  primary: $brand-primary,
  secondary: $brand-secondary,
  accent: $brand-accent,
  success: $brand-success,
  info: $brand-info,
  warning: $brand-warning,
  danger: $brand-danger,
  light: $gray-lighter,
  dark: $gray-dark
);

// Set a specific jump point for requesting color jumps
$theme-color-interval: 8%;
