// Breakpoints
// --------------------------------------------------

// Extra small screen
@screen-xs-min: 576px;

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

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

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

// Extra large screen
@screen-xl-min: 1400px;

// 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);
@screen-lg-max: (@screen-xl-min - 1);

//
// Breakpoints (@deprecated)
// --------------------------------------------------

@screen-xs:                  @screen-xs-min;
@screen-phone:               @screen-xs-min;
@screen-sm:                  @screen-sm-min;
@screen-tablet:              @screen-sm-min;
@screen-md:                  @screen-md-min;
@screen-desktop:             @screen-md-min;
@screen-lg:                  @screen-lg-min;
@screen-lg-desktop:          @screen-lg-min;

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

@font-family-sans-serif:  sans-serif;
@font-family-serif:       serif;
@font-family-monospace:   monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

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

@component-offset-horizontal: 180px;
@abbr-border-color:           @gray-light;
@headings-small-color:        @gray-light;
@blockquote-small-color:      @gray-light;
@blockquote-font-size:        (@font-size-base * 1.25);
@blockquote-border-color:     @gray-lighter;
@page-header-border-color:    @gray-lighter;
@dl-horizontal-offset:        @component-offset-horizontal;
@hr-border:                   @gray-lighter;

//
// Sizes
// --------------------------------------------------
@size-tiny:  50px;
@size-small: 100px;
@size-large: 200px;
@size-huge:  250px;
@size-giant: 350px;

//
// Colors
// --------------------------------------------------

@color-focus:            @color-grey-2;

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             #98A0A0;
@gray-lighter:           lighten(#000, 93.5%); // #eee

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

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

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

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

//
// New October UI Kit colors
//
@color-grey-1: #35425b;
@color-grey-2: #72809d;
@color-grey-3: #d7e1eA;
@color-grey-4: #f0f4f8;
@color-grey-3-light: #e9edf3;

@color-text-grey-1: #536061;
@color-text-grey-4: #5E6D8C;

@primary-darker: #5A5CEF;

@color-grey-6: #95A5A6;
@color-grey-6-darker: #899C9D;

@color-grey-7: #2C3E4F;
@color-alert: #FFD422;

@background-color-focus: rgba(215,225,234,0.7);
@background-color-focus-dark: rgba(215,225,234,0.2);
@outline-focus-shadow: ~"0 0 0px 2px rgba(0,0,0,0.15)";

@popup-border: 1px solid rgba(149, 165, 166, 0.2);
@box-shadow-z1: ~"-2px 2px 5px rgba(67, 86, 100, 0.12)";
@box-shadow-z2: ~"0 0 32px rgba(67, 86, 100, 0.2)";
@box-shadow-symmetrical-z2: ~"0 16px 32px rgba(67, 86, 100, 0.2)";

@mobile-dropdown-shadow: ~"0 0 10px rgba(0, 0, 0, 0.1)";

//
// General
// --------------------------------------------------
@padding-standard:          20px;

@padding-base-vertical:     8px;
@padding-base-horizontal:   13px;

@padding-large-vertical:    10px;
@padding-large-horizontal:  16px;

@padding-small-vertical:    5px;
@padding-small-horizontal:  10px;

@padding-xs-vertical:       3px;
@padding-xs-horizontal:     7px;

@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small:         1.5;

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

@component-active-color:    #fff;
@component-active-bg:       @brand-primary;

@caret-width-base:          4px;
@caret-width-large:         5px;

@overlay-box-shadow: ~"0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)";
@overlay-background: rgba(0, 0, 0, @backdrop-opacity);