// config: variables
// ====================
// NOTE: these variables override Bootstrap-centric variables.

// + colors
// + application - bootstrap overrides

// colors
// --------------------
// basic
$black: rgb(10,10,10);                                                                              // system black
$black-t: rgb(0,0,0);
$black-t0: rgba($black,0.125);
$black-t1: rgba($black,0.25);
$black-t2: rgba($black,0.50);
$black-t3: rgba($black,0.75);

$white: rgb(250,250,250);                                                                           // system white
$white-t: rgb(255,255,255);
$white-t0: rgba($white,0.125);
$white-t1: rgba($white,0.25);
$white-t2: rgba($white,0.50);
$white-t3: rgba($white,0.75);

$gray: rgb(139, 133, 127);
$gray-l1: lighten($gray,20%);
$gray-l2: lighten($gray,30%);
$gray-d1: darken($gray,20%);
$gray-d2: darken($gray,30%);
$gray-t0: rgba($gray,0.125);
$gray-t1: rgba($gray,0.25);
$gray-t2: rgba($gray,0.50);
$gray-t3: rgba($gray,0.75);

// colors - default
$blue: rgb(58, 162, 224);
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,30%);
$blue-d1: shade($blue,20%);
$blue-d2: shade($blue,30%);
$blue-s1: saturate($blue,15%);
$blue-s2: saturate($blue,30%);
$blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%);
$blue-t0: rgba($blue,0.125);
$blue-t1: rgba($blue,0.25);
$blue-t2: rgba($blue,0.50);
$blue-t3: rgba($blue,0.75);

$green: rgb(95, 187, 121);
$green-l1: tint($green,20%);
$green-l2: tint($green,30%);
$green-d1: shade($green,20%);
$green-d2: shade($green,30%);
$green-s1: saturate($green,15%);
$green-s2: saturate($green,30%);
$green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-t0: rgba($green,0.125);
$green-t1: rgba($green,0.25);
$green-t2: rgba($green,0.50);
$green-t3: rgba($green,0.75);

$yellow: rgb(242, 212, 142);
$yellow-l1: tint($yellow,20%);
$yellow-l2: tint($yellow,30%);
$yellow-d1: shade($yellow,20%);
$yellow-d2: shade($yellow,30%);
$yellow-s1: saturate($yellow,15%);
$yellow-s2: saturate($yellow,30%);
$yellow-u1: desaturate($yellow,15%);
$yellow-u2: desaturate($yellow,30%);
$yellow-t0: rgba($yellow,0.125);
$yellow-t1: rgba($yellow,0.25);
$yellow-t2: rgba($yellow,0.50);
$yellow-t3: rgba($yellow,0.75);

$orange: rgb(247, 168, 86);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,30%);
$orange-d1: shade($orange,20%);
$orange-d2: shade($orange,30%);
$orange-s1: saturate($orange,15%);
$orange-s2: saturate($orange,30%);
$orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%);
$orange-t0: rgba($orange,0.125);
$orange-t1: rgba($orange,0.25);
$orange-t2: rgba($orange,0.50);
$orange-t3: rgba($orange,0.75);

$red: rgb(226, 94, 100);
$red-l1: tint($red,20%);
$red-l2: tint($red,30%);
$red-d1: shade($red,20%);
$red-d2: shade($red,30%);
$red-s1: saturate($red,15%);
$red-s2: saturate($red,30%);
$red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%);
$red-t0: rgba($red,0.125);
$red-t1: rgba($red,0.25);
$red-t2: rgba($red,0.50);
$red-t3: rgba($red,0.75);

// shadows
$shadow: rgba($black-t,0.2);
$shadow-l1: rgba($black-t,0.1);
$shadow-l2: rgba($black-t,0.05);
$shadow-d1: rgba($black-t,0.4);
$shadow-d2: rgba($black-t,0.6);

// edx-centric colors
$edx-blue: rgb(58, 162, 224);
$edx-blue-l1: lighten($edx-blue,20%);
$edx-blue-l2: lighten($edx-blue,30%);
$edx-blue-d1: darken($edx-blue,20%);
$edx-blue-d2: darken($edx-blue,30%);
$edx-blue-s1: saturate($edx-blue,15%);
$edx-blue-s2: saturate($edx-blue,30%);
$edx-blue-s3: saturate($edx-blue,45%);
$edx-blue-u1: desaturate($edx-blue,15%);
$edx-blue-u2: desaturate($edx-blue,30%);
$edx-blue-u3: desaturate($edx-blue,45%);
$edx-blue-t0: rgba($edx-blue,0.125);
$edx-blue-t1: rgba($edx-blue,0.25);
$edx-blue-t2: rgba($edx-blue,0.50);
$edx-blue-t3: rgba($edx-blue,0.75);

$edx-pink: rgb(182,37,104);
$edx-pink-l1: lighten($edx-pink,20%);
$edx-pink-l2: lighten($edx-pink,30%);
$edx-pink-d1: darken($edx-pink,20%);
$edx-pink-d2: darken($edx-pink,30%);
$edx-pink-s1: saturate($edx-pink,15%);
$edx-pink-s2: saturate($edx-pink,30%);
$edx-pink-s3: saturate($edx-pink,45%);
$edx-pink-u1: desaturate($edx-pink,15%);
$edx-pink-u2: desaturate($edx-pink,30%);
$edx-pink-u3: desaturate($edx-pink,45%);
$edx-pink-t0: rgba($edx-pink,0.125);
$edx-pink-t1: rgba($edx-pink,0.25);
$edx-pink-t2: rgba($edx-pink,0.50);
$edx-pink-t3: rgba($edx-pink,0.75);

$edx-gray: rgb(164, 165, 168);
$edx-gray-l1: lighten($edx-gray,20%);
$edx-gray-l2: lighten($edx-gray,30%);
$edx-gray-d1: darken($edx-gray,20%);
$edx-gray-d2: darken($edx-gray,40%);
$edx-gray-s1: saturate($edx-gray,15%);
$edx-gray-s2: saturate($edx-gray,30%);
$edx-gray-s3: saturate($edx-gray,45%);
$edx-gray-u1: desaturate($edx-gray,15%);
$edx-gray-u2: desaturate($edx-gray,30%);
$edx-gray-u3: desaturate($edx-gray,45%);
$edx-gray-t0: rgba($edx-gray,0.125);
$edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75);

// general color application
$color-primary: $edx-blue;
$color-secondary: $edx-blue-l1;
$color-tertiary: $edx-blue-l2;
$color-success: $green;
$color-warning: $yellow;
$color-error: $red;
$color-status: $blue;
$color-input: $blue-s1;
$color-create: $green;
$color-delete: $red;
$color-support: $orange;

// fonts
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-sans-serif-alt: 'Montserrat','Avenir Next', Helvetica, Arial, sans-serif;


// application - bootstrap overrides (from http://getbootstrap.com/customize/#less-variables)
// --------------------
// colors
$gray-lighter: $gray-l2;
$gray-light: $gray-l1;
$gray: $gray;
$gray-dark: $gray-d1;
$gray-darker: $gray-d2;
$brand-primary: $color-primary;
$brand-success: $color-success;
$brand-info: $color-status;
$brand-warning: $color-warning;
$brand-danger: $color-error;

// scaffolding
$body-bg: $edx-gray-l2;
$text-color: $gray-d2;
// $link-color: ;
// $link-hover-color: ;

// grid
$grid-gutter-width: 40px;

// typography
$font-family-base: $f-sans-serif;
$font-family-sans-serif: $f-sans-serif;
$headings-font-weight: 500;
// $font-size-small: ;
// $font-size-base: ;
// $font-size-large: ;
// $headings-font-family: $f-sans-serif-alt;

// components
$border-radius-base: 2px;
$border-radius-large: 4px;
// $component-active-color: ;
// $component-active-bg: ;

// navbar
$navbar-height: 80px;
$navbar-default-color: black;
$navbar-default-bg: $white-t;
$navbar-default-link-color: $edx-gray-d2;
$navbar-default-link-hover-color: $edx-blue-s2;
$navbar-default-link-hover-bg: transparent;
$navbar-default-link-active-color: $edx-blue-s1;
$navbar-default-link-active-bg: $white;
$navbar-default-border: $gray-lighter;
// $navbar-padding-horizontal: ;
// $navbar-padding-vertical: ;
// $navbar-default-border: ;

// dropdowns
$dropdown-link-color: $edx-blue-s1;
$dropdown-link-hover-color: $edx-blue-s2;

// tooltips
$tooltip-max-width: 300px;
$tooltip-color: $white;
$tooltip-bg: $black-t3;

// Footer
$footer-height: 57px;
$sock-height: 59px;
$footer-sock-height: $footer-height + $sock-height;

// gray box around description/information sections
$description-border-color: $edx-gray-l1;
$description-border: 1px solid $description-border-color;

// alerts
$alert-background-color: rgb(242, 242, 242);
$alert-error-color: rgb(195, 53, 59);
$alert-info-color: rgb(111, 160, 186);

// FontAwesome font directory
$fa-font-path: "/static/bower_components/font-awesome/fonts";
