/**
* @stylesheet variables.less Variables
* @parent Styles.theme 0
*
* @description 
* Variables hold all sorts of site-wide visual configurations. This site has color palettes, logo images, and font declarations set, which are demo'd throughout this live style guide.
**/

// Variables used to set the font appearance.

@defaultFontFamily: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
@defaultFontWeight: 300;


/**
* @styles color-palette Color Palette
* 
* @description
* Variables used to define the site's color palette.
* @iframe demos/color-palette.html 630
**/
@night: #000000; 
@darkSkies: #484848; 
@thunderStorm: #706f70;  
@cloud: #999999; 
@haze: #cccccc;  
@fog: #eae9e9; 
@clear: #ffffff; 
@nigthRain: #165489;
@rain: #1f54c6; 
@sunrise: #f7f8c3; 
@sunset: #d9534f;


// Variables used to define color on text elements.

@colorHeader: @darkSkies;
@colorLinks: @rain;
@colorCode: @sunrise;
@colorNav: @darkSkies;
@colorSignature: @darkSkies;
@fontColorParamsReturns: @fog;


// Variables used to set the color on containers and other elements.

@pageBackground: @fog;
@sidebarBackground: @haze;
@colorTags: @darkSkies;
@footerHeight: 80px;
@headerHeight: 54px;
@colorParamsReturns: @darkSkies;


// Variables used to set the color on code syntax.

@pp-bg: @fog;

@str-color: #dd1144;
@kwd-color: #333333;
@com-color: #999988;
@type-color: #445588;
@lit-color: #445588;
@pun-color: #333333;
@opn-color: #333333;
@clo-color: #333333;
@tag-color: #navy;
@atn-color: #teal;
@atv-color: #dd1144;
@dec-color: #333333;
@var-color: #teal;
@fun-color: #990000;


// Variables used to set the color on elements when printed or projected.

@str-color-pp: #006600;
@kwd-color-pp: #006;
@com-color-pp: #600;
@typ-color-pp: #404;
@lit-color-pp: #004444;
@pun-color-pp: #444400;
@opn-color-pp: #444400;
@clo-color-pp: #444400;
@tag-color-pp: #006;
@atn-color-pp:  #440044;
@atv-color-pp: #006600;


// Variables used to set a logo on the header and on the footer

@logo: "../img/logo.png";
@logoFooter: "../img/logo-grey.svg";
@logoWidth: 170px;


body .brand {
  background-size: 120px;
}