@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             lighten(#000, 60%);   // #999
@gray-lighter:           lighten(#000, 93.5%); // #eee

@brand-primary :#21c2f8;
@brand-primary-border: darken(@brand-primary, 10);
@brand-primary-color :#fff;
@brand-primary-hover: lighten(@brand-primary, 3);
@brand-primary-hover-border: darken(@brand-primary-hover, 3);
@brand-primary-hover-color: @brand-primary-color;

@brand-disabled :@gray-light;
@brand-disabled-border: darken(@brand-disabled, 3);
@brand-disabled-color :#fff;

@brand-success :#7ad03a;
@brand-success-border: darken(@brand-success, 10);
@brand-success-color :darken(@brand-success, 23);

@brand-warning :#fbeba4;
@brand-warning-border: darken(@brand-warning, 10);
@brand-warning-color :darken(@brand-warning, 45);
@brand-warning-hover: lighten(@brand-warning, 3);
@brand-warning-hover-border: darken(@brand-warning-hover, 3);
@brand-warning-hover-color: @brand-warning-color;


@brand-critical: #FB61A8;
@brand-critical-border: darken(@brand-critical, 10);
@brand-critical-color : lighten(@brand-critical, 40);
@brand-critical-hover: lighten(@brand-critical, 3);
@brand-critical-hover-border: darken(@brand-critical-hover, 3);
@brand-critical-hover-color: @brand-critical-color;