@color--white: #FFF;
@color--black: #000;

@color--off-white: #F7F9FA;
@color--gray-lighter: #E4E7EC;
@color--gray-light: #CACED8;
@color--gray: #A8B0BC;
@color--gray-dark: #656D79;

@color--blue: #60BEEC;
@color--blue-dark: #2A86C8;

@color--purple: #8C6DAF;
@color--purple-dark: #623E97;

@color--yellow-light: #FDFFBF;
@color--yellow: #FBEF5A;
@color--yellow-dark: #F1C719;

@color--red: #CC2434;
@color--pink: #EF5D74;

@color--orange: #F9A74B;
@color--orange-dark: #F06922;

@color--green: #8CC759;
@color--green-dark: #5EBA47;

/* Branded colors */

@color--facebook-blue: #3B5998;
@color--twitter-blue: #4099FF;
@color--linkedin-blue: #4875B4;
@color--instagram-blue: #125688;


/**
 * Set background color for an element if the given background color is darkder than gray
 * invert color of text to white.
 */
.background--color(@c: @color--off-white) {
  background-color: @c;

  & when (lightness(@c) < lightness(@color--gray)) {
    color: @color--white;
  }

  & when not (lightness(@c) < lightness(@color--gray)) {
    color: @color--black;
  }
}


// main background
.background {
  .background--color;
}

.background--dark {
  .background--color(@color--gray-dark)
}