// ------------------------------------------------
//  Variables
// ------------------------------------------------


//== Base Colors

@black:                     #000;
@black-alt:                 #1f2125;
@white:                     #fff;
@white-alt:                 #f3f5f6;
@gray:                      #8d93a0;
@gray-dark:                 #51545b;
@gray-darker:               #262627;
@gray-blue:                 #eff1f5;
@gray-light:                #babfcc;
@gray-lighter:              #e9e9e9;

@green:                     #91d539;
@blue:                      #1ac6ff;
@pink:                      #ff5f9b;
@berry:                     #fe6760;
@orange:                    #fe4918;
@yellow:                    #ffc52a;

@red-light:                 #fae2e2;
@green-light:               #d8f0e4;
@blue-light:                #e2f6fa;
@yellow-light:              #faf3e2;

@red-dark:                  #ad5254;
@green-dark:                #68a74c;
@blue-dark:                 #4c95a4;
@yellow-dark:               #a68128;

@text-black:                @black;
@text-black-alt:            @black-alt;
@text-white:                @white;
@text-white-alt:            @white-alt;
@text-gray:                 @gray-dark;
@text-gray-dark:            @gray-darker;
@text-gray-light:           @gray-light;

@text-red:                  @red-dark;
@text-green:                @green-dark;
@text-blue:                 @blue-dark;
@text-yellow:               @yellow-dark;

@body-color:                @white;
@text-color:                @text-gray;
@text-alt-color:            @gray;
@text-base-color:           @base-color;

//== Typography

// Font family
@font-family-roboto:        "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
@font-family-pt-sans-ct:    "PT Sans Caption", Arial, "Helvetica Neue", Helvetica, sans-serif;
@font-family-fontawesome:   "Fontawesome";
@font-family-line-icons:    "line-icons";

@font-family-base:          @font-family-roboto;
@font-family-heading:       @font-family-pt-sans-ct;
@font-family-icons:         @font-family-fontawesome;
@font-family-icons-alt:     @font-family-line-icons;

// Font size
@font-size-large:           18px;
@font-size-big:             16px;
@font-size-base:            15px;
@font-size-small:           13px;
@font-size-thin:            11px;

@font-size-h1:              60px;
@font-size-h2:              50px;
@font-size-h3:              50px;
@font-size-h4:              40px;
@font-size-h5:              30px;
@font-size-h6:              20px;

// Font weight
@thin-weight:               100;
@light-weight:              300;
@normal-weight:             400;
@semibold-weight:           500;
@bold-weight:               700;


//== Media queries breakpoints

// Extra small screen / phone
@screen-2xs:                340px;
@screen-xs:                 480px;
@screen-xs-middle:          540px;
@screen-xs-min:             @screen-xs;
@screen-phone:              @screen-xs-min;

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

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

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

// 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);


//== Grid system

@grid-columns:              12; // Number of columns in the grid.
@grid-gutter-width:         30px; // Padding between columns. Gets divided in half for the left and right.
@grid-float-breakpoint:     @screen-sm-min; // Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); // Point at which the navbar begins collapsing.


//== Container sizes

// Small screen / tablet
@container-tablet:          (720px + @grid-gutter-width);
@container-sm:              @container-tablet;

// Medium screen / desktop
@container-desktop:         (940px + @grid-gutter-width);
@container-md:              @container-desktop;

// Large screen / wide desktop
@container-large-desktop:   (1140px + @grid-gutter-width);
@container-lg:              @container-large-desktop;


//== Paths

// Images base path
@img-path:                  '../img/';