/**
* @stylesheet variables.less Variables
* @parent Styles.theme 0
* @hide article
* @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.
**/

/**
* @styles color-palette Color Palette
*
* @description
* Variables used to define the site's color palette.
* @iframe demos/color-palette.html 630
**/
@night: @gray-base;
@darkSkies: @gray-darker;
@thunderStorm: @gray-dark;
@cloud: @gray-light;
@haze: lighten(@gray-light, 10);
@fog: @gray-lighter;
@clear: #ffffff;

@nigthRain: #165489;
@rain: #3781A4;
@sunrise: #f7f8c3;
@sunset: #d9534f;
@puddle: @brand-primary;


 // Site custom variables
@logoColor: @puddle;


// Variables used to define color on text elements.

@colorHeader: @puddle;
@colorLinks: darken(@puddle, 10%);
@colorCode: @sunrise;
@colorNav: @darkSkies;
@colorSignature: @darkSkies;
@fontColorParamsReturns: @fog;
@colorTags: @night;
@colorParamsReturns: @darkSkies;
@headerHeight: 54px;
@footerHeight: 160px;


@sidebarBackground: lighten(@puddle, 5);


// 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-full-doc-css.svg";
@logoFooter: "../img/logo-grey.svg";
@logoWidth: 170px;


@containerWidth: 1000px;
@contentWidth: 700px;
