/* CSS Variables */

/* Theme colors */

@themeColor: #37bde7;
@themeSecondary: darken(@themeColor, 5%);
@themeHeader: darken(@themeColor, 20%);
@linkColorDark: multiply(darken(@themeColor, 20%), @grayLight);
@linkColorDarkSaturated: multiply(darken(saturate(@themeColor, 100%), 30%), @grayLight);

/* cms-specific */

@headerColor: @themeColor;

@cmsColorPrimary: #31c659;
@cmsColorSecondary: #f7931e;

@cmsColorBlue: #3F8CD8;
@cmsColorGreen: #28C31B;

@postColor:#46d7f2;
@eventColor:#31c659;


/* post date-label colors */

@labelLightBlue: #46d7f2;
@labelGreen: #1aa17b;
@labelMagenta: #d0a8d9;
@labelBlue: #1069d4;
@labelLightGreen: #31c659;
@labelYellow: #e1da31;
@labelRed: #e35445;

@ss-max-margin: 20px;
@ss-min-margin: @ss-max-margin / 2;
@ss-max-padding: 20px;
@ss-min-padding: @ss-max-padding / 2;

/* mixins to set button link colors according to themeColor lightness */

.buttonLinkColor (@a) when (lightness(@a) >= 50%) {
  color: multiply(@gray, @themeColor);
  text-shadow: 0 1px 0px rgba(255,255,255,0.7);
}

.buttonLinkHoverColor (@a) when (lightness(@a) >= 50%) {
  color: multiply(@grayDarker, @themeColor);
  text-shadow: 0 0 1px rgba(255,255,255,0.5);
}

.buttonLinkColor (@a) when (lightness(@a) < 50%) {
  color: white;
}

/* mixins to set link color according to themeColor lightness and saturation */

.linkColor (@a) when (lightness(@a) >= 70%) and (saturation(@a) >= 50%){
  color: @linkColorDark;
  &:hover {
    color: darken(@linkColorDark, 15%);
  }
}

.linkColor (@a) when (lightness(@a) >= 70%) and (saturation(@a) < 50%) {
  color: @linkColorDarkSaturated;
  &:hover {
    color: darken(@linkColorDarkSaturated, 15%);
  }
}

.linkColor (@a) when (lightness(@a) < 70%) {
  color: @themeColor;
    &:hover {
    color: darken(@themeColor, 15%);
  }
}
