/*******************************
         Site Settings
*******************************/

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

@imagePath : "../../themes/packages/default/assets/images";
@fontPath  : "../../themes/packages/default/assets/fonts";

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

@headerFont        : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont          : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@fontSmoothing     : antialiased;

@importGoogleFonts : true;
@googleFontName    : 'Lato';
@googleFontSizes   : '300,400,700,300italic,400italic,700italic';

/*-------------------
      Site Colors
--------------------*/

/*---  Colors  ---*/
@blue             : #3B83C0;
@green            : #5BBD72;
@orange           : #E07B53;
@pink             : #D9499A;
@purple           : #564F8A;
@red              : #D95C5C;
@teal             : #00B5AD;
@yellow           : #F2C61F;

@black            : #1B1C1D;
@grey             : #CCCCCC;
@white            : #FFFFFF;

/*---  Light Colors  ---*/
@lightBlue        : #54C8FF;
@lightGreen       : #2ECC40;
@lightOrange      : #FF851B;
@lightPink        : #FF8EDF;
@lightPurple      : #CDC6FF;
@lightRed         : #FF695E;
@lightTeal        : #6DFFFF;
@lightYellow      : #FFE21F;

@primaryColor     : @blue;
@secondaryColor   : @black;

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

@pageBackground      : #F7F7F7;
@lineHeight          : 1.33;

@pageOverflowX       : hidden;

@fontSize            : 14px;
@textColor           : rgba(0, 0, 0, 0.8);

@headerMargin        : 1em 0em 1rem;
@paragraphMargin     : 0em 0em 1em;

@linkColor           : #009FDA;
@linkUnderline       : none;
@linkHoverColor      : lighten( @linkColor, 5);

@highlightBackground : rgba(255, 255, 160, 0.4);
@highlightColor      : @textColor;

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

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

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

/* Used for differentiating neutrals */
@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));

/* Used for differentiating layers */
@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);


/*-------------------
        Grid
--------------------*/

@columnCount: 16;

/*-------------------
     Breakpoints
--------------------*/

@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 768px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1400px;
@widescreenMonitorBreakpoint : 1920px;


/*******************************
           Power-User
*******************************/

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

/* Max Width of Icon */
@iconWidth : 1.23em;

/*-------------------
       Easing
--------------------*/

@defaultEasing: ease;

/*---   Neutrals  ---*/
@fullBlack        : #000000;
@lightBlack       : #333333;
@darkGrey         : #AAAAAA;
@lightGrey        : #DCDDDE;
@offWhite         : #FAFAFA;
@darkWhite        : #F0F0F0;

/*--- Colored Backgrounds ---*/
@blueBackground   : #D3E4F3;
@greenBackground  : #DEF2E0;
@orangeBackground : #F7E5D6;
@pinkBackground   : #F9CEE6;
@purpleBackground : #E0DDF5;
@redBackground    : #F8D5D3;
@tealBackground   : #D2F5F5;
@yellowBackground : #FCF5D8;


/*--- Colored Text ---*/
@blueTextColor    : @blue;
@orangeTextColor  : @orange;
@pinkTextColor    : @pink;
@purpleTextColor  : @purple;
@redTextColor     : @red;
@greenTextColor   : #1EBC30; // Green is difficult to read
@tealTextColor    : #10A3A3; // Teal text is difficult to read
@yellowTextColor  : #B58105; // Yellow text is difficult to read

/*--- Colored Headers ---*/
@blueHeaderColor   : darken(@blueTextColor, 5);
@greenHeaderColor  : darken(@greenTextColor, 5);
@orangeHeaderColor : darken(@orangeTextColor, 5);
@pinkHeaderColor   : darken(@pinkTextColor, 5);
@purpleHeaderColor : darken(@purpleTextColor, 5);
@redHeaderColor    : darken(@redTextColor, 5);
@tealHeaderColor   : darken(@tealTextColor, 5);
@yellowHeaderColor : darken(@yellowTextColor, 5);


/*-------------------
    Emotive Colors
--------------------*/

/* Mood */
@positiveColor           : @green;
@negativeColor           : @red;

@positiveBackgroundColor : #E4F5DD;
@negativeBackgroundColor : #FAE8E8;

@positiveBorderColor     : #B7CAA7;
@negativeBorderColor     : #DBB1B1;

@positiveTextColor       : #3C763D;
@negativeTextColor       : #A94442;


/* Status */
@infoColor              : #31CCEC;
@warningColor           : #F2C037;
@successColor           : @positiveColor;
@errorColor             : @negativeColor;

@infoBackgroundColor    : #E5F6FB;
@warningBackgroundColor : #FCF8E3;

@infoBorderColor        : #AAD6DF;
@warningBorderColor     : #D3C4A5;
@warningTextColor       : #8A6D3B;

@infoTextColor          : #337B92;


/*-------------------
     Neutral Text
--------------------*/

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

@unselectedTextColor         : rgba(0, 0, 0, 0.4);
@hoveredTextColor            : rgba(0, 0, 0, 0.8);
@pressedTextColor            : rgba(0, 0, 0, 0.8);
@selectedTextColor           : rgba(0, 0, 0, 0.8);
@disabledTextColor           : rgba(0, 0, 0, 0.2);

@invertedTextColor           : rgba(255, 255, 255, 1);
@invertedLightTextColor      : rgba(255, 255, 255, 0.8);
@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
@invertedHoveredTextColor    : rgba(255, 255, 255, 1);
@invertedPressedTextColor    : rgba(255, 255, 255, 1);
@invertedSelectedTextColor   : rgba(255, 255, 255, 1);
@invertedDisabledTextColor   : rgba(255, 255, 255, 0.2);

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

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

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

@circularRadius                : 500rem;

@borderColor                   : rgba(0, 0, 0, 0.15);
@selectedBorderColor           : rgba(0, 0, 0, 0.2);

@solidBorderColor              : #DDDDDD;
@solidSelectedBorderColor      : #B0B0B0;

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

@solidWhiteBorderColor         : #555555;
@selectedSolidWhiteBorderColor : #999999;

/*-------------------
        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.2s;
@transitionEasing   : ease;


/*-------------------
    Derived Values
--------------------*/

/* Makes sure padded grid can fit at 320px */
@pageMinWidth        : (320px - (@fontSize * 3));

/* Used to match floats with text */
@lineHeightOffset    : ((@lineHeight - 1em) / 2);

/* Positive / Negative Dupes */
@successBackgroundColor : @positiveBackgroundColor;
@errorBackgroundColor   : @negativeBackgroundColor;
@successTextColor       : @positiveTextColor;
@errorTextColor         : @negativeTextColor;
@successBorderColor     : @positiveBorderColor;
@errorBorderColor       : @negativeBorderColor;

/* Header Colors */
@positiveHeaderColor : darken(@positiveTextColor, 5);
@negativeHeaderColor : darken(@negativeTextColor, 5);
@infoHeaderColor     : darken(@infoTextColor, 5);
@warningHeaderColor  : darken(@warningTextColor, 5);
@successHeaderColor  : darken(@successTextColor, 5);
@errorHeaderColor    : darken(@errorTextColor, 5);

/* Responsive */
@largestMobileScreen : (@tabletBreakpoint - 1px);
@largestTabletScreen : (@computerBreakpoint - 1px);

/* Columns */
@oneWide        : (1 / @columnCount * 100%);
@twoWide        : (2 / @columnCount * 100%);
@threeWide      : (3 / @columnCount * 100%);
@fourWide       : (4 / @columnCount * 100%);
@fiveWide       : (5 / @columnCount * 100%);
@sixWide        : (6 / @columnCount * 100%);
@sevenWide      : (7 / @columnCount * 100%);
@eightWide      : (8 / @columnCount * 100%);
@nineWide       : (9 / @columnCount * 100%);
@tenWide        : (10 / @columnCount * 100%);
@elevenWide     : (11 / @columnCount * 100%);
@twelveWide     : (12 / @columnCount * 100%);
@thirteenWide   : (13 / @columnCount * 100%);
@fourteenWide   : (14 / @columnCount * 100%);
@fifteenWide    : (15 / @columnCount * 100%);
@sixteenWide    : (16 / @columnCount * 100%);

@oneColumn      : (1 / 1 * 100%);
@twoColumn      : (1 / 2 * 100%);
@threeColumn    : (1 / 3 * 100%);
@fourColumn     : (1 / 4 * 100%);
@fiveColumn     : (1 / 5 * 100%);
@sixColumn      : (1 / 6 * 100%);
@sevenColumn    : (1 / 7 * 100%);
@eightColumn    : (1 / 8 * 100%);
@nineColumn     : (1 / 9 * 100%);
@tenColumn      : (1 / 10 * 100%);
@elevenColumn   : (1 / 11 * 100%);
@twelveColumn   : (1 / 12 * 100%);
@thirteenColumn : (1 / 13 * 100%);
@fourteenColumn : (1 / 14 * 100%);
@fifteenColumn  : (1 / 15 * 100%);
@sixteenColumn  : (1 / 16 * 100%);


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

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

@disabledOpacity: 0.3;

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

/*---  Colors  ---*/
@primaryColorHover    : lighten( @primaryColor, 3);
@secondaryColorHover  : lighten( @secondaryColor, 3);

@blueHover            : lighten( @blue, 3);
@greenHover           : lighten( @green, 3);
@orangeHover          : lighten( @orange, 3);
@pinkHover            : lighten( @pink, 3);
@purpleHover          : lighten( @purple, 3);
@redHover             : lighten( @red, 3);
@tealHover            : lighten( @teal, 3);
@yellowHover          : lighten( @yellow, 3);

@lightBlueHover       : lighten( @lightBlue, 3);
@lightGreenHover      : lighten( @lightGreen, 3);
@lightOrangeHover     : lighten( @lightOrange, 3);
@lightPinkHover       : lighten( @lightPink, 3);
@lightPurpleHover     : lighten( @lightPurple, 3);
@lightRedHover        : lighten( @lightRed, 3);
@lightTealHover       : lighten( @lightTeal, 3);
@lightYellowHover     : lighten( @lightYellow, 3);

/*---  Emotive  ---*/
@positiveColorHover   : lighten( @positiveColor, 3);
@negativeColorHover   : lighten( @negativeColor, 3);

/*---  Neutrals  ---*/
@fullBlackHover       : lighten( @fullBlack, 3);
@blackHover           : lighten( @black, 3);
@lightBlackHover      : lighten( @lightBlack, 3);

@lightGreyHover       : lighten( @lightGrey, 3);
@greyHover            : lighten( @grey, 3);
@darkGreyHover        : lighten( @darkGrey, 3);

@whiteHover           : lighten( @white, 3);
@offWhiteHover        : lighten( @offWhite, 3);
@darkWhiteHover       : lighten( @darkWhite, 3);

@facebookHoverColor   : lighten( @facebookColor, 3);
@twitterHoverColor    : lighten( @twitterColor, 3);
@googlePlusHoverColor : lighten( @googlePlusColor, 3);
@linkedInHoverColor   : lighten( @linkedInColor, 3);
@youtubeHoverColor    : lighten( @youtubeColor, 3);
@instagramHoverColor  : lighten( @instagramColor, 3);
@pinterestHoverColor  : lighten( @pinterestColor, 3);
@vkHoverColor         : lighten( @vkColor, 3);


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


/*---  Colors  ---*/
@primaryColorDown    : darken(@primaryColor, 5);
@secondaryColorDown  : darken(@secondaryColor, 5);

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

@lightBlueDown       : darken(@lightBlue, 5);
@lightGreenDown      : darken(@lightGreen, 5);
@lightOrangeDown     : darken(@lightOrange, 5);
@lightPinkDown       : darken(@lightPink, 5);
@lightPurpleDown     : darken(@lightPurple, 5);
@lightRedDown        : darken(@lightRed, 5);
@lightTealDown       : darken(@lightTeal, 5);
@lightYellowDown     : darken(@lightYellow, 5);

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

/*---  Neutrals  ---*/
@fullBlackDown       : darken(@fullBlack, 5);
@blackDown           : darken(@black, 5);
@lightBlackDown      : darken(@lightBlack, 5);

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

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

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


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

/*---  Standard  ---*/
@primaryColorActive    : darken(@primaryColor, 3);
@secondaryColorActive  : darken(@secondaryColor, 3);

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

@lightBlueActive       : darken(@lightBlue, 3);
@lightGreenActive      : darken(@lightGreen, 3);
@lightOrangeActive     : darken(@lightOrange, 3);
@lightPinkActive       : darken(@lightPink, 3);
@lightPurpleActive     : darken(@lightPurple, 3);
@lightRedActive        : darken(@lightRed, 3);
@lightTealActive       : darken(@lightTeal, 3);
@lightYellowActive     : darken(@lightYellow, 3);

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

/*---  Neutrals  ---*/
@fullBlackActive       : darken(@fullBlack, 3);
@blackActive           : darken(@black, 3);
@lightBlackActive      : darken(@lightBlack, 3);

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

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

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