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

// Global values
// --------------------------------------------------

//
// Color Swatches
// --------------------------------------------------

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

@emerland:      				#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:         @emerland;
@brand-warning:         @sun-flower;
@brand-danger:          @alizarin;
@brand-info:            @peter-river;

// Social colors
@social-pinterest:   #cb2028;
@social-linkedin:    #0072b5;
@social-stumbleupon: #ed4a13;
@social-googleplus:  #2d2d2d;
@social-facebook:    #2f4b93;
@social-twitter:     #00bdef;

// Scaffolding
// -------------------------

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

// Links
// -------------------------

@link-color:       			@green-sea;
@link-hover-color: 			@turquoise;

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

@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;

@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:          ceil(@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:  @font-family-base;
@headings-font-weight:  700;
@headings-line-height:  1.1;
@headings-color:        inherit;


// Icons
// -------------------------
@icon-normal: 16px;
@icon-medium: 18px;
@icon-large:  32px;

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

/// Resposive
// -------------------------

@rwd-container-space: 20px;



// COMPONENT VARIABLES
// --------------------------------------------------


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


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

@table-bg-active: 			lighten(@brand-primary, 69.4%);
@table-border-color:    mix(@gray, white, 16.5%);
@table-success:   			mix(@brand-success, white, 9%);
@table-danger:    			mix(@brand-danger, white, 9%);
@table-warning:   			mix(@brand-warning, white, 9%);
@table-info:      			mix(@brand-info, white, 9%);

// Form controls
// -------------------------
@input-font-size-base:		 @component-font-size-base;
@input-font-size-sm:	     floor(@component-font-size-base * 0.867); // ~13px
@input-font-size-lg:	     ceil(@component-font-size-base * 1.133); // ~17px
@input-font-size-hg:	     floor(@component-font-size-base * 1.467); // ~22px

@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;


// Datepicker
// -------------------------

@datepicker-border-radius: @border-radius-large;


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

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


// Pager
// -------------------------

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

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

@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;


// Navs
// -------------------------

@nav-tabs-border-width:  2px;
@nav-tabs-border-color:  mix(@brand-primary, white, 15%);
@nav-tabs-color:         mix(@brand-primary, white, 63%);
@nav-tabs-active-color:  mix(@brand-primary, white, 63%);
@nav-tabs-hover-color:   @brand-secondary;
@nav-border-radius:      6px;
@nav-item-border-radius: @nav-border-radius - @nav-tabs-border-width;
@nav-open-zindex:        1001;
@nav-list-gap:           13px;


// Navbar
// -------------------------

@navbar-link-space:    20px;
@navbar-sublink-space: 9px;


// Dropdown Menu
// -------------------------

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


// Iconbar
// -------------------------

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


// Progress/slider
// -------------------------

@progress-height: 12px;


// Dialog
// -------------------------

@dialog-font-size: floor(@component-font-size-base * 1.067); // ~16px
@dialog-padding: 16px 0 20px;


// Alerts
// -------------------------

@alert-bg:     mix(@brand-primary, white, 3%);
@alert-border: mix(@brand-primary, white, 10%);


// Switch
// -------------------------

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


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

@modal-backdrop-bg: 			 		mix(@brand-primary, black, 70%);
@modal-content-bg: 						lighten(@brand-primary, 69.4%);
@modal-content-border-radius: 7px;
@modal-content-border-color:  mix(@brand-primary, white, 10%);
@modal-content-box-shadow: 		-14px 14px 0 0 rgba(0,0,0,.35);
@modal-footer-bg:   					mix(@brand-primary, white, 10%);
@zindex-modal-background:  		1040;
@zindex-modal:             		1050;

// Carousel
// -------------------------

@carousel-background: mix(@brand-primary, black, 70%);
@carousel-controls-background: @midnight-blue;


// Labels
// -------------------------
@label-link-hover-color:      @inverse;

@label-default-bg:            mix(@inverse, @brand-primary, 90%);
@label-default-bg-hover: 			mix(@inverse, @brand-primary, 85%);
@label-default-text-color: 		mix(@brand-primary, @inverse, 65%);

@label-inverse-bg:            mix(@inverse, @brand-primary, 10%);
@label-inverse-bg-hover: 			mix(@brand-primary, @inverse, 45%);

@label-primary-bg: 						@brand-secondary;
@label-primary-bg-hover: 			mix(@brand-secondary, black, 85%);

@label-success-bg: 						@brand-success;
@label-success-bg-hover: 			mix(@brand-success, black, 85%);

@label-info-bg: 							@brand-info;
@label-info-bg-hover: 				mix(@brand-info, black, 85%);

@label-warning-bg: 						@brand-warning;
@label-warning-bg-hover: 			mix(@brand-warning, black, 85%);

@label-important-bg: 					@brand-danger;
@label-important-bg-hover: 		mix(@brand-danger, black, 85%);


// Badges
// -------------------------
@badge-color:                 @inverse;
@badge-link-hover-color:      @inverse;
@badge-bg:                    mix(@brand-primary, white, 19%);

@badge-active-color:          mix(@brand-primary, white, 50%);
@badge-active-bg:             @inverse;

@badge-font-weight:           normal;
@badge-line-height:           1.615; // ~21px
@badge-border-radius:         @border-radius-base;


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

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

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-sm-min;


// Form states and 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;

@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:                  @gray-light;
@abbr-border-color:           @gray-light;
@headings-small-color:        mix(@brand-primary, @inverse, 12%);
@blockquote-small-color:      inherit;
@blockquote-border-color:     mix(@brand-primary, @inverse, 12%);
@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;