//
// Component:       Variables
// Description:     Defines all color and style related values as variables
//                  to allow easy customization for the most common cases.
//
// ========================================================================


// Global variables
// ========================================================================

//
// Breakpoints
//
@breakpoint-small:                              480px;
@breakpoint-medium:                             768px;
@breakpoint-large:                              960px;
@breakpoint-xlarge:                             1220px;

@breakpoint-mini-max:                           (@breakpoint-small - 1);
@breakpoint-small-max:                          (@breakpoint-medium - 1);
@breakpoint-medium-max:                         (@breakpoint-large - 1);
@breakpoint-large-max:                          (@breakpoint-xlarge - 1);

//
// Component: Variables
//
// ========================================================================


// Global variables
// ========================================================================

//
// Text
//

@global-color:                                  #56585c;
@global-dark-color:                             #d3d4da;
@global-muted-color:                            #f9fafc;
@global-text-shadow:                            #fff;

@global-link-color:                             #409eff;
@global-link-hover-color:                       #409eff;

@global-contrast-color:                         #fff;
@global-contrast-text-shadow:                   rgba(0,0,0,0.1);

@global-font-size:                              14px;
@global-line-height:                            24px;

//
// Backgrounds & Borders
//

@global-background:                             #fff;
@global-dark-background:                        #20272e;
@global-border:                                 #e3e7f1;
@global-dark-border:                            #4f5154;
@global-border-radius:                          4px;

@global-default-background:                     #fff;
@global-default-hover-background:               #fff;
@global-default-active-background:              #f9fafc;

@global-muted-background:                       #8291af;
@global-primary-background:                     #409eff;
@global-success-background:                     #0dbf7f;
@global-warning-background:                     #ffd04b;
@global-danger-background:                      #f56c6c;

//
// Shadow
//

@global-box-shadow:                             0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);;

//
// Spacings
//

@global-margin-mini:                            4px;
@global-margin-small:                           8px;
@global-margin:                                 16px;
@global-margin-large:                           32px;
@global-padding-mini:                           8px;
@global-padding-small:                          16px;
@global-padding:                                24px;
@global-padding-large:                          32px;
@global-grid-gutter:                            24px;
@global-grid-gutter-large:                      32px;

//
// Controls
//

@global-height:                                 32px;
@global-height-mini:                            16px;
@global-height-small:                           24px;
@global-height-large:                           48px;

//
// Z-index
//

@global-z-index:                                1000;