// 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);

// FIXME: copy-and-pasted from the edx-pattern-library. Delete me when we import it via sass.
// colors: palettes
$palette-primary-dark: rgba(6, 86, 131, 100);
$palette-primary-base: rgba(0, 117, 180, 100);
$palette-primary-accent: rgba(41, 145, 195, 100);
$palette-primary-back: rgba(204, 227, 240, 100);
$palette-primary-x-back: rgba(242, 248, 251, 100);
$palette-secondary-dark: rgba(152, 44, 98, 100);
$palette-secondary-base: rgba(194, 56, 125, 100);
$palette-secondary-accent: rgba(224, 155, 190, 100);
$palette-secondary-back: rgba(243, 215, 229, 100);
$palette-secondary-x-back: rgba(252, 245, 248, 100);
$palette-grayscale-dark: rgba(17, 17, 17, 100);
$palette-grayscale-base: rgba(65, 65, 65, 100);
$palette-grayscale-accent: rgba(160, 160, 160, 100);
$palette-grayscale-back: rgba(217, 217, 217, 100);
$palette-grayscale-x-back: rgba(245, 245, 245, 100);
$palette-success-text: $green;
$palette-success-accent: lighten($green, 5%);
$palette-success-back: desaturate(lighten($green, 70%), 45%);
$palette-error-text: $red;
$palette-error-accent: lighten($red, 5%);
$palette-error-back: lighten($red, 60%);
$palette-warning-accent: $yellow;
$palette-warning-back: lighten($yellow, 40%);
$palette-information-text: $blue;
$palette-information-accent: lighten($blue, 5%);
$palette-information-back: lighten($blue, 58%);

// edx-centric colors
$edx-blue: $palette-primary-base;
$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: $palette-secondary-base;
$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: $palette-grayscale-base;
$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: $palette-success-text;
$color-warning: $palette-warning-accent;
$color-error: $palette-error-text;
$color-status: $palette-information-text;
$color-input: $blue-s1;
$color-create: $palette-success-text;
$color-delete: $palette-error-text;
$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: $palette-primary-accent;
$link-hover-color: $palette-primary-base;

// 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;
$navbar-default-link-color: $edx-gray;
$navbar-default-link-hover-color: $palette-primary-accent;
$navbar-default-link-hover-bg: transparent;
$navbar-default-link-active-color: $palette-primary-accent;
$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: $gray-l2;
$description-border: 1px solid $description-border-color;

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

$navbar-padding: 30px;
