/*******************************
        Global Variables
*******************************/

/*-------------------
        Paths
--------------------*/

@imagePath : "../themes/@{theme}/images";
@fontPath  : "../themes/@{theme}/fonts";

/*-------------------
       Page
--------------------*/

@bodyColor  : #FCFCFC;
@fontSize   : 15px;

/*-------------------
       Fonts
--------------------*/

@headerFont : 'Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;';
@pageFont   : 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;';

/*-------------------
       Icons
--------------------*/

/* Width of largest icon */
@iconWidth : 1.23em;

/*******************************
           BG Colors
*******************************/

@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
@transparentBlack       : rgba(0, 0, 0, 0.05);
@strongTransparentBlack : rgba(0, 0, 0, 0.10);

@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
@transparentWhite       : rgba(255, 255, 255, 0.05);
@strongTransparentWhite : rgba(255, 255, 255, 0.01);


/*******************************
             Colors
*******************************/

/*-------------------
     Background
--------------------*/

/*---  Colors  ---*/
@blue           : #6ECFF5;
@green          : #5BBD72;
@orange         : #E96633;
@pink           : #D9499A;
@purple         : #564F8A;
@red            : #D95C5C;
@teal           : #00B5AD;
@yellow         : #FFCB08;

@primaryColor   : @teal;
@secondaryColor : @black;
@tertiaryColor  : @orange;

/*---  Emotive  ---*/
@positiveColor  : @green;
@negativeColor  : @red;

@infoColor      : #E6F4F9;
@warningColor   : #96904D;
@errorColor     : #D95C5C;

/*---  Neutrals  ---*/
@darkBlack      : #232323;
@black          : #555555;
@lightBlack     : #999999;

@darkGrey       : #AAAAAA;
@grey           : #CCCCCC;
@lightGrey      : #DCDDDE;

@white          : #FFFFFF;
@offWhite       : #FAFAFA;
@darkWhite      : #F0F0F0;

/*-------------------
     Text Colors
--------------------*/

@darkTextColor     : rgba(0, 0, 0, 0.85);
@textColor         : rgba(0, 0, 0, 0.7);
@lightTextColor    : rgba(0, 0, 0, 0.4);

@selectedTextColor : rgba(0, 0, 0, 0.8);
@disabledTextColor : rgba(0, 0, 0, 0.2);

/*-------------------
     Brand Colors
--------------------*/

@facebookColor   : #3B579D;
@twitterColor    : #4092CC;
@googlePlusColor : #D34836;
@linkedInColor   : #1F88BE;
@youtubeColor    : #CC181E;
@instagramColor  : #49769C;
@pinterestColor  : #00ACED;

/*-------------------
      Borders
--------------------*/

@circularRadius           : 500rem;

@borderColor              : rgba(0, 0, 0, 0.1);
@selectedBorderColor      : rgba(0, 0, 0, 0.2);
@solidBorderColor         : #DDDDDD;

@whiteBorderColor         : rgba(255, 255, 255, 0.3);
@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);

/*-------------------
        Sizes
--------------------*/

@mini        : 0.7em;
@tiny        : 0.8em;
@small       : 0.875em;
@medium      : 1em;
@large       : 1.125em;
@big         : 1.25em;
@huge        : 1.375em;
@massive     : 1.5em;


/*-------------------
     Transitions
--------------------*/

@transitionDuration : 0.25s;
@transitionEasing   : ease;


/*******************************
           States
*******************************/

/*-------------------
      Disabled
--------------------*/

@disabledOpacity: 0.3;

/*-------------------
        Hover
--------------------*/

/*---  Colors  ---*/
@primaryColorHover    : darken( saturate(@primaryColor, 10), 5);
@secondaryColorHover  : darken( saturate(@secondaryColor, 10), 5);
@tertiaryColorHover   : darken( saturate(@tertiaryColor, 10), 5);

@blueHover            : darken( saturate(@blue, 10), 5);
@greenHover           : darken( saturate(@green, 10), 5);
@orangeHover          : darken( saturate(@orange, 10), 5);
@pinkHover            : darken( saturate(@pink, 10), 5);
@purpleHover          : darken( saturate(@purple, 10), 5);
@redHover             : darken( saturate(@red, 10), 5);
@tealHover            : darken( saturate(@teal, 10), 5);
@yellowHover          : darken( saturate(@yellow, 10), 5);

/*---  Emotive  ---*/
@positiveColorHover   : darken( saturate(@positiveColor, 10), 5);
@negativeColorHover   : darken( saturate(@negativeColor, 10), 5);

@infoColorHover       : darken( saturate(@infoColor, 10), 5);
@warningColorHover    : darken( saturate(@warningColor, 10), 5);
@errorColorHover      : darken( saturate(@errorColor, 10), 5);

/*---  Neutrals  ---*/
@darkBlackHover       : darken( saturate(@darkBlack, 10), 5);
@blackHover           : darken( saturate(@black, 10), 5);
@lightBlackHover      : darken( saturate(@lightBlack, 10), 5);

@lightGreyHover       : darken( saturate(@lightGrey, 10), 5);
@greyHover            : darken( saturate(@grey, 10), 5);
@darkGreyHover        : darken( saturate(@darkGrey, 10), 5);

@whiteHover           : darken( saturate(@white, 10), 5);
@offWhiteHover        : darken( saturate(@offWhite, 10), 5);
@darkWhiteHover       : darken( saturate(@darkWhite, 10), 5);

@facebookHoverColor   : darken( saturate(@facebookColor, 10), 5);
@twitterHoverColor    : darken( saturate(@twitterColor, 10), 5);
@googlePlusHoverColor : darken( saturate(@googlePlusColor, 10), 5);
@linkedInHoverColor   : darken( saturate(@linkedInColor, 10), 5);
@youtubeHoverColor    : darken( saturate(@youtubeColor, 10), 5);
@instagramHoverColor  : darken( saturate(@instagramColor, 10), 5);
@pinterestHoverColor  : darken( saturate(@pinterestColor, 10), 5);


/*-------------------
    Down (:active)
--------------------*/


/*---  Colors  ---*/
@primaryColorDown    : darken(@primaryColor, 15);
@secondaryColorDown  : darken(@secondaryColor, 15);
@tertiaryColorDown   : darken(@tertiaryColor, 15);

@blueDown            : darken(@blue, 15);
@greenDown           : darken(@green, 15);
@orangeDown          : darken(@orange, 15);
@pinkDown            : darken(@pink, 15);
@purpleDown          : darken(@purple, 15);
@redDown             : darken(@red, 15);
@tealDown            : darken(@teal, 15);
@yellowDown          : darken(@yellow, 15);

/*---  Emotive  ---*/
@positiveColorDown   : darken(@positiveColor, 15);
@negativeColorDown   : darken(@negativeColor, 15);

@infoColorDown       : darken(@infoColor, 15);
@warningColorDown    : darken(@warningColor, 15);
@errorColorDown      : darken(@errorColor, 15);

/*---  Neutrals  ---*/
@darkBlackDown       : darken(@darkBlack, 15);
@blackDown           : darken(@black, 15);
@lightBlackDown      : darken(@lightBlack, 15);

@lightGreyDown       : darken(@lightGrey, 15);
@greyDown            : darken(@grey, 15);
@darkGreyDown        : darken(@darkGrey, 15);

@whiteDown           : darken(@white, 15);
@offWhiteDown        : darken(@offWhite, 15);
@darkWhiteDown       : darken(@darkWhite, 15);

@facebookDownColor   : darken(@facebookColor, 15);
@twitterDownColor    : darken(@twitterColor, 15);
@googlePlusDownColor : darken(@googlePlusColor, 15);
@linkedInDownColor   : darken(@linkedInColor, 15);
@youtubeDownColor    : darken(@youtubeColor, 15);
@instagramDownColor  : darken(@instagramColor, 15);
@pinterestDownColor  : darken(@pinterestColor, 15);


/*-------------------
        Active
--------------------*/

/*---  Standard  ---*/
@primaryColorActive    : darken(@primaryColor, 10);
@secondaryColorActive  : darken(@secondaryColor, 10);
@tertiaryColorActive   : darken(@tertiaryColor, 10);

@blueActive            : darken(@blue, 10);
@greenActive           : darken(@green, 10);
@orangeActive          : darken(@orange, 10);
@pinkActive            : darken(@pink, 10);
@purpleActive          : darken(@purple, 10);
@redActive             : darken(@red, 10);
@tealActive            : darken(@teal, 10);
@yellowActive          : darken(@yellow, 10);

/*---  Emotive  ---*/
@positiveColorActive   : darken(@positiveColor, 10);
@negativeColorActive   : darken(@negativeColor, 10);

@infoColorActive       : darken(@infoColor, 10);
@warningColorActive    : darken(@warningColor, 10);
@errorColorActive      : darken(@errorColor, 10);

/*---  Neutrals  ---*/
@darkBlackActive       : darken(@darkBlack, 10);
@blackActive           : darken(@black, 10);
@lightBlackActive      : darken(@lightBlack, 10);

@lightGreyActive       : darken(@lightGrey, 10);
@greyActive            : darken(@grey, 10);
@darkGreyActive        : darken(@darkGrey, 10);

@whiteActive           : darken(@white, 10);
@offWhiteActive        : darken(@offWhite, 10);
@darkWhiteActive       : darken(@darkWhite, 10);

@facebookActiveColor   : darken(@facebookColor, 10);
@twitterActiveColor    : darken(@twitterColor, 10);
@googlePlusActiveColor : darken(@googlePlusColor, 10);
@linkedInActiveColor   : darken(@linkedInColor, 10);
@youtubeActiveColor    : darken(@youtubeColor, 10);
@instagramActiveColor  : darken(@instagramColor, 10);
@pinterestActiveColor  : darken(@pinterestColor, 10);