// Color abstraction hierarchy:
// 1. Hex code (#428bca)
// 2. Common color name (@blue)
// 3. Generic color descriptor (@accent-primary, @background-primary)
// --------
// 4. Generic usage descriptor (@input-background, @button-background)
// 5. Application-specific usage (@unread-label-background)

// Typography abstraction hierarchy
// 1. Font-face (Nylas-Pro)
// 2. Common name (@bold, @italic)
// 3. Generic font descriptor mixins (.bold, .italic, .h1, .h2)
// --------
// 4. Generic usage descriptor (.btn-text, .p-body)
// 5. Application-specific usage (.message-list-h1)


//=============================== Colors ===============================//
//== Color Definitions
@black:        #231f20;
@gray-base:    #0a0b0c;
@gray-darker:  lighten(@gray-base, 13.5%); // #222
@gray-dark:    lighten(@gray-base, 20%);   // #333
@gray:         lighten(@gray-base, 33.5%); // #555
@gray-light:   lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 92.5%); // #eee
@white:        #ffffff;

@blue-dark:    #3187e1;
@blue:         #419bf9;
@blue-light:   #009ec4;

//== Color Descriptors
@accent-primary:      @blue;
@accent-primary-dark: @blue-dark;

@background-primary:     @white;
@background-off-primary: #fdfdfd;
@background-secondary:   #f6f6f6;
@background-tertiary:    #6d7987;

@color-info:    @blue-dark;
@color-success: #5CB346;
@color-warning: #f0ad4e;
@color-error:   #d9534f;
@color-danger:  #d9534f;

@component-active-color: @accent-primary-dark;
@component-active-bg:    @background-primary;

@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
rgba(253,253,253,0.75) 100%);

@border-color-primary: darken(@background-primary, 10%);
@border-color-secondary: darken(@background-secondary, 10%);
@border-color-tertiary: darken(@background-tertiary, 10%);
@border-color-divider: @border-color-secondary;


//============================= Typography =============================//

// ----- Colors -----
@text-color:                     @black;
@text-color-subtle:              fadeout(@text-color, 20%);
@text-color-very-subtle:         fadeout(@text-color, 50%);
@text-color-inverse:             @white;
@text-color-inverse-subtle:      fadeout(@text-color-inverse, 20%);
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);

@text-color-heading: #434648;

@text-color-link:        @blue;
@text-color-link-hover:  @blue-dark;
@text-color-link-active: @blue-dark;

@text-color-selected:  @text-color-inverse;

@text-color-search-match: #fff000;
@text-color-search-current-match: #ff8b1a;

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

@font-family:             @font-family-sans-serif;
@font-family-heading:     @font-family-sans-serif;

// ----- Font Weights -----
@font-weight-thin:        200;
@font-weight-blond:       300;
@font-weight-normal:      400;
@font-weight-medium:      500;
@font-weight-semi-bold:   600;
@headings-font-weight:    600;

// ----- Font Sizes -----
@font-size-base:          14px;

@font-size-tiny:          @font-size-base * 0.75; // 10.5px
@font-size-smaller:       @font-size-base * 0.86; // 12px
@font-size-small:         @font-size-base * 0.93; // 13px
@font-size:               @font-size-base;        // 14px
@font-size-large:         @font-size-base * 1.14; // 16px
@font-size-larger:        @font-size-base * 1.29; // 18px

@font-size-h1:            @font-size-base * 1.71;  // 24px
@font-size-h2:            @font-size-base * 1.71;  // 24px
@font-size-h3:            @font-size-base * 1.43;  // 20px
@font-size-h4:            @font-size-base * 1.29;  // 18px
@font-size-h5:            @font-size-base;
@font-size-h6:            @font-size-base * 0.86;  // 12px

// ----- Line Height -----
@line-height-base:         1.5; // 22.5/15
@line-height-computed:     floor((@font-size-base * @line-height-base)); // ~20px
@line-height-heading:      1.1;


//============================== Spacing ===============================//
// Define common padding and border radius sizes and more. Values based on
// 14px text and 1.428 line-height (~20px to start).

@spacing-standard:          @font-size-base;

@spacing-quarter:           @spacing-standard * 0.25;
@spacing-half:              @spacing-standard * 0.5;
@spacing-three-quarters:    @spacing-standard * 0.75;
@spacing-double:            @spacing-standard * 2;

@padding-base-vertical:     5px;
@padding-base-horizontal:   12px;

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

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

@padding-xs-vertical:       1px;
@padding-xs-horizontal:     5px;

@line-height-large:         @line-height-computed * 1.3;
@line-height-small:         @line-height-computed * 0.95;

@border-radius-base:        3px;
@border-radius-large:       5px;
@border-radius-small:       2px;


//============================== Shadows ===============================//

@standard-shadow-color: rgba(0, 0, 0, 0.15);
@standard-shadow: 0 1px 4px 0 @standard-shadow-color;
@standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color;
@shadow-border: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color,
0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color;


//=============================== Buttons ==============================//

@btn-shadow: @standard-shadow;

@btn-default-bg-color:    darken(@background-primary, 0.5%);
@btn-default-text-color:  @text-color;

@btn-action-bg-color:     @color-success;
@btn-action-text-color:   @text-color;

@btn-emphasis-bg-color:   #5b90fb;
@btn-emphasis-text-color: @text-color-inverse;

@btn-danger-bg-color:     @color-danger;
@btn-danger-text-color:   @text-color-inverse;


//=============================== Dropdowns ============================//

@dropdown-default-bg-color:     @background-primary;
@dropdown-default-text-color:   @text-color;
@dropdown-default-border-color: fadeout(@border-color-primary, 10%);


//=============================== Inputs ===============================//

@input-bg:                       @white;
@input-bg-disabled:              @gray-lighter;

@input-border-color:         fadeout(@border-color-primary, 10%);
@input-border-color-blurred: desaturate(@input-border-color, 100%);

@input-font-size: 14px;


//=============================== Components ===========================//

//== Toolbar
@toolbar-background-color: darken(@white, 17.5%);

//== Account Sidebar
@panel-background-color:         @gray-lighter;
@source-list-bg:                 @panel-background-color;
@source-list-active-bg:          @panel-background-color;
@source-list-active-color:       @component-active-color;

//== Thread List (e.g, `.list-group-item`, `.list-item`)
@list-bg:                  @white;
@list-border:              #ddd;
@list-hover-bg:            darken(@list-bg, 4%);
@list-focused-color:       @list-bg;
@list-focused-bg:          @component-active-color;
@list-focused-border:      @list-focused-bg;
@list-selected-color:      inherit;
@list-selected-bg:         mix(@component-active-color, @list-bg, 17%);
@list-selected-border:     mix(@component-active-color, @list-bg, 50%);

//== Notifications
@background-color-info:    @blue-light;
@background-color-success: #00ac6f;
@background-color-warning: #ff4800;
@background-color-error:   #f15f4b;
@background-color-pending: #b4babd;

//== Menus
@menu-item-color-hover:    fade(@blue-light, 10%);
@menu-item-color-selected: @blue-light;
@menu-text-color-selected: @text-color-inverse;

//== Sizes
@disclosure-arrow-size: 12px;

@component-padding:       10px;
@component-icon-padding:  5px;
@component-icon-size:     16px;
@component-line-height:   25px;
@component-border-radius: 2px;


// Helpers for Specs - Do Not Remove
@spec-test-variable: rgb(152,123,0);