@staticPath: "./";

// Sizes
@mobileMaxWidth:                      1240px;

// Header
@header-height:                       50px;
@header-color:                        hsl(194, 5%, 52%);
@header-background:                   white;
@header-button-color:                 hsl(194, 5%, 52%);
@header-button-hover-color:           #151515;
@header-button-hover-background:      hsl(207, 15%, 95%);

// Body
@body-background:                     white;
@body-pagination-background:          hsl(207, 15%, 95%);

// Sidebar
@sidebar-width:                       250px;
@sidebar-color:                       hsl(207, 15%, 80%);
@sidebar-background:                  hsl(207, 15%, 95%);

@sidebar-nested-padding:              10px;

@sidebar-search-padding:              6px;
@sidebar-search-background:           transparent;
@sidebar-search-input-border-color:   hsl(207, 15%, 80%);

@sidebar-divider-color:               hsl(207, 15%, 85%);

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

@sidebar-icon-color:                  @bar-progress-background;
@sidebar-link-completed:              hsl(207, 15%, 25%);
@sidebar-link-completed-weight:       normal;

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

// Progress Bar
@chapter-display:                     none;
@chapter-size:                        16px;

@progress-height:                     0px;

@bar-height:                          2px;
@bar-left:                            @sidebar-width;
@bar-right:                           0;
@bar-top:                             50px;
@bar-position:                        static;
@bar-background:                      white;
@bar-progress-background:             hsl(120, 60%, 50%);

// Basics of a navbar
@navbar-height:                       50px;
@navbar-margin-bottom:                @line-height-computed;
@navbar-default-border:               #d5d5d5;
@navbar-border-radius:                0px;
@navbar-padding-horizontal:           floor(@grid-gutter-width / 2);
@navbar-padding-vertical:             ((@navbar-height - @line-height-computed) / 2);

// Navbar brand label
@navbar-default-color:                #333;
@navbar-default-link-color:           #333;
@navbar-default-brand-color:          @navbar-default-link-color;
@navbar-default-brand-hover-color:    @navbar-default-link-color;
@navbar-default-brand-hover-bg:       transparent;

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

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


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

/*                                                       
,--------.,--.                                         
'--.  .--'|  ,---.  ,---. ,--,--,--. ,---.  ,---. .--. 
   |  |   |  .-.  || .-. :|        || .-. :(  .-' '--' 
   |  |   |  | |  |\   --.|  |  |  |\   --..-'  `).--. 
   `--'   `--' `--' `----'`--`--`--' `----'`----' '--' 
*/
// Header
@header-color-1:                        #AFA790;
@header-color-2:                        #7e888b;
@header-background-1:                   #ECE3C4;
@header-background-2:                   #1d1f21;
@header-button-color-1:                 #AFA790;
@header-button-color-2:                 #7e888b;
@header-button-hover-color-1:           #73553C;
@header-button-hover-color-2:           #C9C9C9;
@header-button-hover-background-1:      #E2DABE;
@header-button-hover-background-2:      #0B0D0E;

// Body
@body-background-1:                     #F3EACB;
@body-background-2:                     #1d1f21;
@body-pagination-background-1:          #FFFAEA;
@body-pagination-background-2:          #33404D;

// Sidebar
@sidebar-color-1:                       #AFA790;
@sidebar-color-2:                       hsl(207, 15%, 80%);
@sidebar-background-1:                  hsl(207, 15%, 95%);
@sidebar-background-2:                  #111111;

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

@sidebar-divider-color-1:               hsl(207, 15%, 85%);
@sidebar-divider-color-2:               #1d1f21;

@sidebar-link-color-1:                  #877F6A;
@sidebar-link-color-2:                  hsl(207, 15%, 50%);
@sidebar-link-background-1:             transparent;
@sidebar-link-background-2:             transparent;
@sidebar-link-hover-color-1:            #704214;
@sidebar-link-hover-color-2:            hsl(207, 100%, 50%);
@sidebar-link-hover-background-1:       transparent;
@sidebar-link-hover-background-2:       transparent;

@sidebar-icon-color-1:                  @bar-progress-background;
@sidebar-icon-color-2:                  @bar-progress-background;
@sidebar-link-completed-1:              hsl(207, 15%, 25%);
@sidebar-link-completed-2:              hsl(207, 15%, 25%);
@sidebar-link-completed-weight-1:       normal;
@sidebar-link-completed-weight-2:       normal;

// Page
@page-color-1:                     			#704214;
@page-color-2:                     			#a4b1b1;
@page-background-1:                     #F3EACB;
@page-background-2:                     #1d1f21;

@bar-background-1:                      #F3EACB;
@bar-background-2:                      #1d1f21;
@bar-progress-background-1:             #704214;
@bar-progress-background-2:             hsl(120, 60%, 50%);

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

// Navbar brand label
@navbar-default-color-1:                #333;
@navbar-default-color-2:                #333;
@navbar-default-link-color-1:           #333;
@navbar-default-link-color-2:           #333;
@navbar-default-brand-color-1:          @navbar-default-link-color;
@navbar-default-brand-color-2:          @navbar-default-link-color;
@navbar-default-brand-hover-color-1:    @navbar-default-link-color;
@navbar-default-brand-hover-color-2:    @navbar-default-link-color;
@navbar-default-brand-hover-bg-1:       transparent;
@navbar-default-brand-hover-bg-2:       transparent;