//
// Variables
// --------------------------------------------------

// == Colors
//
//##

// Color swatches
@turquoise:                 #1abc9c;
@green-sea:                 #16a085;

@emerald:                   #2ecc71;
@nephritis:                 #27ae60;

@peter-river:               #3498db;
@belize-hole:               #2980b9;

@amethyst:                  #9b59b6;
@wisteria:                  #8e44ad;

@wet-asphalt:               #34495e;
@midnight-blue:             #2c3e50;

@sun-flower:                #f1c40f;
@orange:                    #f39c12;

@carrot:                    #e67e22;
@pumpkin:                   #d35400;

@alizarin:                  #e74c3c;
@pomegranate:               #c0392b;

@clouds:                    #ecf0f1;
@silver:                    #bdc3c7;

@concrete:                  #95a5a6;
@asbestos:                  #7f8c8d;

// Grays
@gray:                      @concrete;
@gray-light:                @silver;
@inverse:                   white;

// Brand colors
@brand-primary:             @wet-asphalt;
@brand-secondary:           @turquoise;
@brand-success:             @emerald;
@brand-warning:             @sun-flower;
@brand-danger:              @alizarin;
@brand-info:                @peter-river;


//== Scaffolding
//
//## Settings for some of the most global styles.

@body-bg:                   #fff;
@text-color:                @brand-primary;

//** Global textual link color.
@link-color:                @green-sea;
@link-hover-color:          @turquoise;


//== Typography
//
//## Font, line-height for body text, headings, and more.

@font-family-base:          "Lato", Helvetica, Arial, sans-serif;
@font-family-demo:          "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-monospace:     Monaco, Menlo, Consolas, "Courier New", monospace;
@font-size-base:            18px;

@local-font-path:               "../fonts/lato/";
@local-font-name:               "lato-regular";
@local-font-svg-id:             "latoregular";
@local-font-name-light:         "lato-light";
@local-font-svg-id-light:       "latolight";
@local-font-name-black:         "lato-black";
@local-font-svg-id-black:       "latoblack";
@local-font-name-bold:          "lato-bold";
@local-font-svg-id-bold:        "latobold";
@local-font-name-italic:        "lato-italic";
@local-font-svg-id-italic:      "latoitalic";
@local-font-name-bold-italic:   "lato-bolditalic";
@local-font-svg-id-bold-italic: "latobold-italic";

@font-size-h1:              floor(@font-size-base * 3.444); // ~62px
@font-size-h2:              ceil(@font-size-base * 2.889); // ~52px
@font-size-h3:              ceil(@font-size-base * 2.222); // ~40px
@font-size-h4:              ceil(@font-size-base * 1.611); // ~29px
@font-size-h5:              floor(@font-size-base * 1.556); // ~28px
@font-size-h6:              ceil(@font-size-base * 1.333); // ~24px

@line-height-base:          1.72222; // 31/18
@line-height-computed:      floor(@font-size-base * @line-height-base); // ~31px

@headings-font-family:      inherit;
@headings-font-weight:      700;
@headings-line-height:      1.1;
@headings-color:            inherit;


//== Iconography
//

//** Icon sizes for use in components
@icon-normal:               16px;
@icon-medium:               18px;
@icon-large:                32px;


//== Components
//
//## Define common padding and border radius sizes and more.

//** Default font-size in components
@component-font-size-base:  ceil(@font-size-base * 0.833); // ~15px

// Border-radius
@border-radius-base:        4px;
@border-radius-large:       6px;
@border-radius-small:       3px;


//== Buttons
//
//## For each of Flat UI's buttons, define text, background, font size and height.

@btn-font-size-base:         @component-font-size-base;
@btn-font-size-xs:           ceil(@component-font-size-base * 0.80);   // ~12px
@btn-font-size-sm:           floor(@component-font-size-base * 0.867); // ~13px
@btn-font-size-lg:           ceil(@component-font-size-base * 1.133);  // ~17px
@btn-font-size-hg:           floor(@component-font-size-base * 1.467); // ~22px

@btn-line-height-base:       1.4;   // ~21px
@btn-line-height-hg:         1.227; // ~27px
@btn-line-height-lg:         1.471; // ~25px
@btn-line-height-sm:         1.385; // ~16px
@btn-line-height-xs:         1.083; // ~13px

@btn-social-font-size-base:   floor(@component-font-size-base * 0.867); // ~13px
@btn-social-line-height-base: 1.077;  // ~14px

@btn-font-weight:            normal;

@btn-default-color:          @inverse;
@btn-default-bg:             @gray-light;
@btn-hover-bg:               mix(@gray-light, white, 80%);
@btn-active-bg:              mix(@gray-light, black, 85%);

@btn-primary-hover-bg:       mix(@brand-secondary, white, 80%);
@btn-primary-active-bg:      mix(@brand-secondary, black, 85%);

@btn-info-hover-bg:          mix(@brand-info, white, 80%);
@btn-info-active-bg:         mix(@brand-info, black, 85%);

@btn-success-hover-bg:       mix(@brand-success, white, 80%);
@btn-success-active-bg:      mix(@brand-success, black, 85%);

@btn-danger-hover-bg:        mix(@brand-danger, white, 80%);
@btn-danger-active-bg:       mix(@brand-danger, black, 85%);

@btn-warning-hover-bg:       overlay(@brand-warning, darken(white, 37.5%));
@btn-warning-active-bg:      mix(@brand-warning, black, 85%);

@btn-inverse-hover-bg:       overlay(@brand-primary, darken(white, 37.5%));
@btn-inverse-active-bg:      mix(@brand-primary, black, 85%);

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


//== Forms
//
//##

@input-font-size-base:      @component-font-size-base;
@input-font-size-small:     floor(@component-font-size-base * 0.867); // ~13px
@input-font-size-large:     ceil(@component-font-size-base * 1.133); // ~17px
@input-font-size-huge:      floor(@component-font-size-base * 1.467); // ~22px

@input-line-height-base:    1.467; // ~22px
@input-line-height-small:   1.462; // ~19px
@input-line-height-large:   1.235; // ~21px
@input-line-height-huge:    1.318; // ~29px

@input-icon-font-size:      ceil(@component-font-size-base * 1.333);  // ~20px

@input-bg:                  @inverse;
@input-bg-disabled:         mix(@gray, white, 10%);

@input-height-small:        35px;
@input-height-base:         41px;
@input-height-large:        45px;
@input-height-huge:         53px;

@input-border-radius:       @border-radius-large;

@legend-color:              inherit;


//== Forms
//
//##

@input-font-size-base:      @component-font-size-base;
@input-font-size-small:     floor(@component-font-size-base * 0.867); // ~13px
@input-font-size-large:     ceil(@component-font-size-base * 1.133); // ~17px
@input-font-size-huge:      floor(@component-font-size-base * 1.467); // ~22px

@input-line-height-base:    1.467; // ~22px
@input-line-height-small:   1.462; // ~19px
@input-line-height-large:   1.235; // ~21px
@input-line-height-huge:    1.318; // ~29px

@input-icon-font-size:      ceil(@component-font-size-base * 1.333);  // ~20px

@input-bg:                  @inverse;
@input-bg-disabled:         mix(@gray, white, 10%);

@input-height-small:        35px;
@input-height-base:         41px;
@input-height-large:        45px;
@input-height-huge:         53px;

@input-border-radius:       @border-radius-large;

@legend-color:              inherit;


//== Pagination
//
//##

@pagination-color:           mix(@brand-primary, white, 20%);


//== Pager
//
//##

@pager-padding:              9px 15px 10px;


//== Navbar
//
//##

// Basics of a navbar
@zindex-navbar:              1000;
@zindex-navbar-fixed:        1030;
@navbar-height-base:         53px;
@navbar-height-large:        76px;
@navbar-input-line-height:   1.4; // ~21px
@navbar-margin-bottom:       @line-height-computed;
@navbar-border-radius:       @border-radius-large;

@navbar-default-bg:          saturate(spin(tint(@brand-primary, 91%), -18), 2%);

// Navbar links
@navbar-default-link-color:           @brand-primary;
@navbar-default-link-hover-color:     @brand-secondary;
@navbar-default-link-hover-bg:        transparent;
@navbar-default-link-active-color:    @brand-secondary;
@navbar-default-link-active-bg:       transparent;
@navbar-default-link-disabled-color:  #ccc;
@navbar-default-link-disabled-bg:     transparent;

// Navbar nav carets
@navbar-default-caret-color:          @navbar-default-link-color;
@navbar-default-caret-hover-color:    @navbar-default-link-hover-color;
@navbar-default-caret-active-color:   @navbar-default-link-active-color;

// Navbar brand label
@navbar-default-brand-color:          @navbar-default-link-color;
@navbar-default-brand-hover-color:    @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg:       transparent;

// Navbar toggle
@navbar-default-toggle-color:         @navbar-default-link-color;
@navbar-default-toggle-hover-color:   @navbar-default-link-hover-color;

// Navbar form
@navbar-default-form-placeholder:     spin(tint(@brand-primary, 60%), 2);
@navbar-default-form-icon:            desaturate(tint(@brand-primary, 45%), 2%);
@navbar-default-form-border:          shade(@navbar-default-bg, 3%);


// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-divider:              darken(@brand-primary, 3%);

// Reset inverted navbar basics
@navbar-inverse-color:                @inverse;
@navbar-inverse-bg:                   @brand-primary;
@navbar-inverse-border:               darken(@navbar-inverse-bg, 10%);

// Inverted navbar links
@navbar-inverse-link-color:           @inverse;
@navbar-inverse-link-hover-color:     @brand-secondary;
@navbar-inverse-link-hover-bg:        transparent;
@navbar-inverse-link-active-color:    @navbar-inverse-link-color;
@navbar-inverse-link-active-bg:       @brand-secondary;
@navbar-inverse-link-disabled-color:  #444;
@navbar-inverse-link-disabled-bg:     transparent;

// Navbar nav carets
@navbar-inverse-caret-color:          lighten(desaturate(@brand-primary, 7%), 9%);
@navbar-inverse-caret-hover-color:    @navbar-inverse-link-hover-color;
@navbar-inverse-caret-active-color:   @navbar-inverse-link-active-color;

// Inverted navbar brand label
@navbar-inverse-brand-color:          @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color:    @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg:       transparent;

// Inverted navbar toggle
@navbar-inverse-toggle-color:         @navbar-inverse-link-color;
@navbar-inverse-toggle-hover-color:   @navbar-inverse-link-hover-color;

// Navbar form
@navbar-inverse-form-bg:              darken(@brand-primary, 6%);
@navbar-inverse-form-placeholder:     desaturate(lighten(@brand-primary, 13%), 7%);
@navbar-inverse-form-icon:            desaturate(lighten(@brand-primary, 13%), 6%);
@navbar-inverse-form-border:          @navbar-inverse-divider;

// Dropdown menu
@navbar-inverse-dropdown-arrow:             @navbar-inverse-bg;
@navbar-inverse-dropdown-bg:                @navbar-inverse-bg;
@navbar-inverse-dropdown-link-color:        mix(@navbar-inverse-bg, @navbar-inverse-color, 15%);
@navbar-inverse-dropdown-link-hover-color:  @inverse;
@navbar-inverse-dropdown-link-hover-bg:     @brand-secondary;


//== Dropdown Menu
//
//##

@dropdown-background:        mix(@inverse, @brand-primary, 94%);


//== Iconbar
//
//##

@iconbar-background:         mix(@brand-primary, black, 85%);


//== Progress bars
//
//##

@progress-height:            12px;


//== Slider
//
//##

@slider-height:              12px;
@slider-value-font-size:     floor(@component-font-size-base * 0.867); // ~13px;

@slider-handle-bg:           mix(@brand-secondary, black, 85%);
@slider-handle-hover-bg:     mix(@brand-secondary, white, 80%);
@slider-handle-active-bg:    mix(@brand-secondary, black, 85%);

@slider-range-bg:            @brand-secondary;

@slider-segment-bg:          mix(desaturate(@brand-primary, 15%), white, 20%);


//== Switch
//
//##

@switch-border-radius:       30px;
@switch-width:               80px;


//== Thumbnails
//
//##

//** Padding around the thumbnail image
@thumbnail-padding:           4px;
//** Thumbnail background color
@thumbnail-bg:                @body-bg;
//** Thumbnail border color
@thumbnail-border:            @gray-light;
//** Thumbnail border radius
@thumbnail-border-radius:     @border-radius-large;

//** Custom text color for thumbnail captions
@thumbnail-caption-color:     @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding:   9px;


//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

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

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

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

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

// 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 system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:                12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:           30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:       @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max:   (@grid-float-breakpoint - 1);

// Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

@state-success-text:          @brand-success;
@state-success-bg:            #dff0d8;
@state-success-border:        darken(spin(@state-success-bg, -10), 5%);

@state-info-text:             @brand-info;
@state-info-bg:               #d9edf7;
@state-info-border:           darken(spin(@state-info-bg, -10), 7%);

@state-warning-text:          @brand-warning;
@state-warning-bg:            #fcf8e3;
@state-warning-border:        darken(spin(@state-warning-bg, -10), 5%);

@state-danger-text:           @brand-danger;
@state-danger-bg:             #f2dede;
@state-danger-border:         darken(spin(@state-danger-bg, -10), 5%);


// Code
//
//##

@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;

@kbd-color:                   @inverse;
@kbd-bg:                      @brand-primary;

@pre-bg:                      @inverse;
@pre-color:                   inherit;
@pre-border-color:            mix(@brand-primary, @inverse, 12%);
@pre-scrollable-max-height:   340px;
@pre-border-radius:           @border-radius-large;


// Type
//
//##

//** Text muted color
@text-muted:                  @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color:           @gray-light;
//** Headings small color
@headings-small-color:        mix(@brand-primary, @inverse, 12%);
//** Blockquote small color
@blockquote-small-color:      inherit;
//** Blockquote border color
@blockquote-border-color:     mix(@brand-primary, @inverse, 12%);
//** Page header border color
@page-header-border-color:    mix(@brand-primary, @inverse, 12%);


// Miscellaneous
//
//##

//** Hr border color
@hr-border:                   mix(@brand-primary, @inverse, 63%);

//** Horizontal forms & lists
@component-offset-horizontal: 180px;