@staticPath: ".";

// Font sizes
@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor(@font-size-base * @line-height-base);

// Sizes
@mobileMaxWidth:                      1240px;

// Header
@header-height:                       50px;
@header-color:                        hsl(194, 5%, 52%);
@header-background:                   transparent;
@header-border:                       rgba(0, 0, 0, 0.07);
@header-button-color:                 #ccc;
@header-button-hover-color:           #444;
@header-button-hover-background:      none;

// Navigation
@navigation-color:                    @header-button-color;
@navigation-hover-color:              @header-button-hover-color;

// Body
@body-background:                     white;

// Sidebar
@sidebar-width:                       300px;
@sidebar-breakpoint:                  600px;
@sidebar-color:                       hsl(207, 15%, 25%);
@sidebar-background:                  #fafafa;
@sidebar-border-right:                1px solid @header-border;

@sidebar-nested-padding:              20px;

@sidebar-search-padding:              6px;
@sidebar-search-background:           transparent;
@sidebar-search-input-background:     transparent;
@sidebar-search-input-border-color:   transparent;

@sidebar-divider-color:               @header-border;

@sidebar-link-color:                  @sidebar-color;
@sidebar-link-background:             transparent;
@sidebar-link-hover-color:            hsl(207, 100%, 50%);
@sidebar-link-hover-background:       transparent;

@sidebar-icon-color:                  hsl(120, 60%, 50%);
@sidebar-link-completed:              @sidebar-link-color;
@sidebar-link-completed-weight:       normal;

// Page
@page-color:                          black;
@page-background:                     @body-background;

// Content
@content-line-height:                 1.6;
@content-color:                       #333333;

// Dropdown
@dropdown-zindex:                     100;
@dropdown-divider-color:              @sidebar-divider-color;
@dropdown-background:                 @sidebar-background;
@dropdown-button-color:               darken(@header-button-color, 15%);
@dropdown-border-color:               @sidebar-divider-color;
@dropdown-button-hover-color:         @header-button-hover-color;

// Buttons
@button-background:                   #eee;
@button-color:                        #666;
@button-hover-color:                  #444;

// States and alerts
@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%);

// Border Radius
@border-radius-base:                  1px;
@border-radius-large:                 3px;
@border-radius-small:                 1px;

// Fonts
@font-family-serif:                   "Merriweather", Georgia, serif;
@font-family-sans:                    "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-base:                    @font-family-sans;
@headings-font-family:                inherit;

@FontPath:                            '@{staticPath}/fonts';
@fa-font-path:                        "@{FontPath}/fontawesome";

@s-font-size:                         1.2rem;
@m-font-size:                         1.4rem;
@l-font-size:                         1.6rem;
@xl-font-size:                        2.2rem;
@xxl-font-size:                       4.0rem;
@default-font-size:                   @l-font-size;

/*
,--------.,--.
'--.  .--'|  ,---.  ,---. ,--,--,--. ,---.  ,---. .--.
   |  |   |  .-.  || .-. :|        || .-. :(  .-' '--'
   |  |   |  | |  |\   --.|  |  |  |\   --..-'  `).--.
   `--'   `--' `--' `----'`--`--`--' `----'`----' '--'
*/
// Header
@header-color-1:                        #AFA790;
@header-color-2:                        #7e888b;
@header-background-1:                   transparent;
@header-background-2:                   transparent;
@header-button-color-1:                 #AFA790;
@header-button-color-2:                 hsl(230, 17%, 28%);
@header-button-hover-color-1:           #73553C;
@header-button-hover-color-2:           hsl(60, 100%, 98%);
@header-button-hover-background-1:      none;
@header-button-hover-background-2:      none;
@header-dropdown-background-1:          @sidebar-background-1;
@header-dropdown-background-2:          @sidebar-background-2;

// Body
@body-background-1:                     #F3EACB;
@body-background-2:                     hsl(228, 21%, 14%);

// Sidebar
@sidebar-transition-duration:           250ms;
@sidebar-color-1:                       #AFA790;
@sidebar-color-2:                       hsl(226, 20%, 78%);
@sidebar-background-1:                  #111;
@sidebar-background-2:                  hsl(229, 20%, 22%);
@sidebar-border-right-1:                @sidebar-border-right;
@sidebar-border-right-2:                none;

@sidebar-search-background-1:           transparent;
@sidebar-search-background-2:           transparent;
@sidebar-search-input-border-color-1:   transparent;
@sidebar-search-input-border-color-2:   transparent;

@sidebar-divider-color-1:               @sidebar-divider-color;
@sidebar-divider-color-2:               hsl(230, 19%, 19%);

@sidebar-link-color-1:                  #877F6A;
@sidebar-link-color-2:                  hsl(226, 22%, 80%);
@sidebar-link-background-1:             transparent;
@sidebar-link-background-2:             transparent;
@sidebar-link-weight-1:                 normal;
@sidebar-link-weight-2:                 600;
@sidebar-link-hover-color-1:            #704214;
@sidebar-link-hover-color-2:            hsl(240, 5%, 96%);
@sidebar-link-hover-background-1:       transparent;
@sidebar-link-hover-background-2:       hsl(233, 19%, 18%);
@sidebar-link-hover-weight-1:           normal;
@sidebar-link-hover-weight-2:           600;

@sidebar-icon-color-1:                  hsl(120, 60%, 50%);
@sidebar-icon-color-2:                  @sidebar-icon-color-1;
@sidebar-link-completed-1:              @sidebar-link-color-1;
@sidebar-link-completed-2:              hsl(227, 13%, 44%);
@sidebar-link-completed-weight-1:       normal;
@sidebar-link-completed-weight-2:       600;

// Dropdown
@dropdown-divider-color-1:              @sidebar-divider-color-1;
@dropdown-divider-color-2:              @sidebar-divider-color-2;
@dropdown-border-color-1:               @sidebar-divider-color-1;
@dropdown-border-color-2:               @sidebar-divider-color-2;
@dropdown-background-1:                 @sidebar-background-1;
@dropdown-background-2:                 @sidebar-background-2;

@dropdown-button-color-1:               @header-button-color-1;
@dropdown-button-color-2:               hsl(228, 13%, 44%);
@dropdown-button-hover-color-1:         @header-button-hover-color-1;
@dropdown-button-hover-color-2:         hsl(240, 5%, 96%);

// Page
@page-color-1:                          #704214;
@page-color-2:                          hsl(214, 29%, 80%);
@page-background-1:                     @body-background-1;
@page-background-2:                     @body-background-2;

@page-link-color-1:                     inherit;
@page-link-color-2:                     hsl(193, 61%, 53%);

@page-heading-color-1:                  inherit;
@page-heading-color-2:                  hsl(60, 100%, 99%);
@page-heading-border-color-1:           inherit;
@page-heading-border-color-2:           hsl(230, 17%, 26%);
@page-h6-color-1:                       inherit;
@page-h6-color-2:                       hsl(230, 17%, 26%);

@page-hr-color-1:                       inherit;
@page-hr-color-2:                       hsl(230, 17%, 26%);

@page-blockquote-border-color-1:        inherit;
@page-blockquote-border-color-2:        hsl(230, 17%, 26%);

@page-pre-color-1:                      #657b83;
@page-pre-color-2:                      hsl(206, 43%, 73%);
@page-pre-background-1:                 #fdf6e3;
@page-pre-background-2:                 hsl(229, 20%, 22%);
@page-pre-border-color-1:               darken(#fdf6e3, 15%);
@page-pre-border-color-2:               hsl(229, 20%, 22%);
@page-highlight-background-1:           inherit;
@page-highlight-background-2:           hsl(233, 18%, 19%);

@page-table-header-border-color-1:      darken(#fdf6e3, 25%);
@page-table-header-border-color-2:      hsl(230, 17%, 28%);
@page-table-row-border-color-1:         #444;
@page-table-row-border-color-2:         hsl(230, 17%, 28%);
@page-table-row-color-1:                inherit;
@page-table-row-color-2:                hsl(216, 24%, 77%);
@page-table-row-background-1:           #fdf6e3;
@page-table-row-background-2:           hsl(229, 19%, 22%);
@page-table-row-odd-background-1:       darken(#fdf6e3, 5%);
@page-table-row-odd-background-2:       hsl(229, 17%, 25%);

// Page Bar
@bar-background-1:                      @page-background-1;
@bar-background-2:                      @page-background-2;

// Navigation
@navigation-color-1:                    @header-button-color-1;
@navigation-color-2:                    hsl(224, 19%, 27%);
@navigation-hover-color-1:              @header-button-hover-color-1;
@navigation-hover-color-2:              hsl(60, 100%, 98%);

// Basics of a navbar
@navbar-default-border-1:               #d5d5d5;
@navbar-default-border-2:               #d5d5d5;