//
// Variables
// ==============================




// Colours
// ------------------------------


@react-blue:              #00d8ff;
@ios-blue:                #007aff;
@keystone-blue:           #1385e5;
@elemental-turquoise:     #31adb8;

@brand-primary:           @elemental-turquoise;
@app-primary:             @keystone-blue;

@app-danger:              #d64242;
@app-info:                #0090e0;
@app-success:             #34c240;
@app-warning:             #fa9f47;

@gray-base:               #000;
@gray-darker:             #222;
@gray-dark:               #333;
@gray:                    #666;
@gray-light:              #999;
@gray-lighter:            #eee;

@body-bg:                 #fdfdfd;
@text-color:              @gray-dark;
@heading-color:           @gray-darker;

@link-color:              @app-primary;
@link-hover-color:        lighten(@link-color, 10%);




// Typography
// ------------------------------

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@line-height-base:        1.4;

@link-hover-decoration:    underline;

@font-size-base:              14px;
@font-size-xs:              0.8rem;
@font-size-sm:              0.9rem;
@font-size-lg:             1.25rem;

@font-weight-bold:             500;

@code-text-color:              #333;
@code-bg-color:                darken(@body-bg, 1%);
@code-border-color:            darken(@body-bg, 12%);




// Spacing
// ------------------------------

@spacing-xxs:              0.125em;
@spacing-xs:                0.25em;
@spacing-sm:                 0.5em;
@spacing-md:                   1em;
@spacing-lg:                   2em;
@spacing-xl:                   5em;


// used on inputs and buttons

@component-line-height:      2.3em;
@component-height:           2.4em;
@component-padding:            1em;




// Images
// ------------------------------

@thumbnail-bg-color:           white;
@thumbnail-gutter-width:       4px;
@thumbnail-bg-hover-color:     @thumbnail-bg-color;
@thumbnail-border-color:       @input-border-color;
@thumbnail-border-hover-color: @link-color;




// Blank State
// ------------------------------

@blankstate-bg:                 darken(@body-bg, 4%);
@blankstate-color:              @gray-light;
@blankstate-border-radius:      @border-radius-base;
@blankstate-padding-vertical:   @spacing-xl;
@blankstate-padding-horizontal: @spacing-lg;




// Forms
// ------------------------------

@form-animation-duration:    280ms;

@form-label-color:            #777;
@form-label-width:            180px;
@form-help-color:             @form-label-color;

@input-bg-color:              white;
@input-bg-disabled:           darken(@input-bg-color, 3%);
@input-placeholder-color:     #aaa;

@input-border-color:          #ccc;
@input-border-color-hover:    darken(@input-border-color, 10%);
@input-border-color-focus:    @app-primary;

@input-padding-horizontal:    .75em;
@input-noedit-width:          180px;

@control-disabled-color:      @gray-light;




// Buttons
// ------------------------------


@button-font-weight:                500;

@button-padding-horizontal:         1em;

@button-default-color:              @app-primary;
@button-default-border:             mix(@app-primary, @body-bg, 60%);
@button-default-disabled-bg:        darken(@body-bg, 4%);

@button-primary-color:              @app-primary;
@button-primary-bg:                 @app-primary;
@button-primary-border:             mix(@button-primary-bg, @body-bg, 60%);

@button-success-color:              @app-success;
@button-success-bg:                 @app-success;
@button-success-border:             mix(@button-success-bg, @body-bg, 60%);

@button-warning-color:              @app-warning;
@button-warning-bg:                 @app-warning;
@button-warning-border:             mix(@button-warning-bg, @body-bg, 60%);

@button-danger-color:               @app-danger;
@button-danger-bg:                  @app-danger;
@button-danger-border:              mix(@button-danger-bg, @body-bg, 60%);

@button-link-disabled-color:        @gray-light;




// Tags
// ------------------------------


@pill-default-color:                 @gray;

@pill-primary-color:                 @app-primary;
@pill-info-color:                    @app-info;
@pill-success-color:                 @app-success;
@pill-warning-color:                 @app-warning;
@pill-danger-color:                  @app-danger;




// Dropdowns
// ------------------------------

@dropdown-bg:                    white;
@dropdown-divider-bg:            #e5e5e5;

@dropdown-caret-width:           .33em;

@dropdown-link-color:            @text-color;
@dropdown-link-hover-color:      mix(@link-color, @text-color, 60%);
@dropdown-link-hover-bg:         mix(@link-color, @dropdown-bg, 10%);

@dropdown-link-active-color:     white;
@dropdown-link-active-bg:        @app-primary;

@dropdown-link-disabled-color:   @gray-light;
@dropdown-header-color:          @gray-light;
@dropdown-menu-height:           360px; // totally arbitrary, just looks right




// Modals
// ------------------------------

@modal-bg:                    white;
@modal-backdrop-bg:           rgba(0, 0, 0, 0.5);
@modal-padding-vertical:      20px;
@modal-padding-horizontal:    20px;
@modal-body-height:           400px;

@modal-width-small:           320px;
@modal-width-medium:          640px;
@modal-width-large:           960px;




// Pagination
// -------------------------

@pagination-color:                     @gray;

@pagination-hover-bg:                  white;
@pagination-hover-border:              rgba(0, 0, 0, 0.1);
@pagination-hover-color:               @gray;

@pagination-active-bg:                 rgba(0, 0, 0, 0.05);
@pagination-active-border:             transparent;
@pagination-active-color:              @gray;

@pagination-disabled-bg:               transparent;
@pagination-disabled-color:            @gray-light;




// Cards
// ------------------------------

@card-bg-color: white;




// Z-Index List
// ------------------------------

@zindex-dropdown:                100;
@zindex-dropdown-button:         @zindex-dropdown + 1;
@zindex-dropdown-backdrop:       @zindex-dropdown - 1;
@zindex-modal:                   110;
@zindex-modal-backdrop:          @zindex-modal - 1;




// Tables
// ------------------------------

@table-padding:                 .66em;
@table-border-color:            rgba(0,0,0,0.06);
@table-sort-arrow-width:        4px;
@table-selected-row-bg:         #fffef5;
@table-selected-row-color:      inherit;





// Misc
// ------------------------------

@border-radius-lg:            .5em;
@border-radius-base:          .3em;
@border-radius-sm:            .125em;

@spinner-dot-bg:               @gray-light;
@spinner-dot-size:             8px;
@spinner-dot-size-sm:          @spinner-dot-size / 2;
@spinner-dot-size-lg:          @spinner-dot-size * 2;




// Media queries breakpoints
// ------------------------------

// Extra small screen / phone
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);




// Grid
// ------------------------------

@grid-columns:              12;
@grid-gutter-width:         20px;
@grid-float-breakpoint:     @screen-sm-min;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);




// Container sizes
// ------------------------------

// Small screen / tablet
@container-tablet:             (720px + @grid-gutter-width);
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            (940px + @grid-gutter-width);
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      (1140px + @grid-gutter-width);
@container-lg:                 @container-large-desktop;




// ==============================
// Complementary Modules
// ==============================




// Date Select
// http://jedwatson.github.io/react-date-select
// ------------------------------


// @DateSelect-bg:                         #fafafa;
@DateSelect-primary:                    @app-primary;
// @DateSelect-text-color:                 #333333;
// @DateSelect-backdrop-bg:                rgba(0, 0, 0, 0.5);

// @DateSelect-header-bg:                  desaturate(@DateSelect-primary, 10%);
// @DateSelect-footer-bg:                  darken(@DateSelect-bg, 5%);
// @DateSelect-footer-border:              darken(@DateSelect-bg, 15%);
// @DateSelect-footer-color:               #666;

// @DateSelect-selected-day-bg:            @DateSelect-primary;
// @DateSelect-selected-day-color:         white;
// @DateSelect-current-day-bg:             darken(@DateSelect-bg, 3%);
// @DateSelect-current-day-border:         darken(@DateSelect-bg, 15%);

// @DateSelect-legend-color:               #999;
// @DateSelect-range-color:                #666;