@primaryColor     : @pink;
@secondaryColor   : @grey;
@red              : #DB2828;
@orange           : #F2711C;
@yellow           : #FBBD08;
@olive            : #B5CC18;
@green            : #21BA45;
@teal             : #00B5AD;
@blue             : #2185D0;
@violet           : #6435C9;
@purple           : #A333C8;
@pink             : #E03997;
@brown            : #A5673F;
@grey             : #767676;
@black            : #212121;
@botfront-blue    : #011E56;
@botfront-grey-bg : #f4f4f5;
@shortcut-key     : #bbb;
@light-grey       : #999;

@basic-colors: 
    red @red,
    orange @orange,
    yellow @yellow,
    olive @olive,
    green @green,
    teal @teal,
    blue @blue,
    violet @violet,
    purple @purple,
    pink @pink,
    brown @brown,
    grey @grey,
    black @black,
    botfront-blue @botfront-blue,
    light-grey @light-grey;

@emSize          : 14px;
@fontFamily      : Be Vietnam, sans-serif;

@microSize       : (10 / 14);
@miniSize        : (11 / 14);
@tinySize        : (12 / 14);
@smallSize       : (13 / 14);
@mediumSize      : (14 / 14);
@largeSize       : (16 / 14);
@bigSize         : (18 / 14);
@hugeSize        : (20 / 14);
@massiveSize     : (24 / 14);

@micro           : unit( round(@microSize * @emSize) / @emSize, rem);
@mini            : unit( round(@miniSize * @emSize) / @emSize, rem);
@tiny            : unit( round(@tinySize * @emSize) / @emSize, rem);
@small           : unit( round(@smallSize * @emSize) / @emSize, rem);
@medium          : unit( round(@mediumSize * @emSize) / @emSize, rem);
@large           : unit( round(@largeSize * @emSize) / @emSize, rem);
@big             : unit( round(@bigSize * @emSize) / @emSize, rem);
@huge            : unit( round(@hugeSize * @emSize) / @emSize, rem);
@massive         : unit( round(@massiveSize * @emSize) / @emSize, rem);

@relative8px  : unit( (8 / @emSize), em);
@relative9px  : unit( (9 / @emSize), em);
@relative10px : unit( (10 / @emSize), em);
@relative11px : unit( (11 / @emSize), em);
@relative12px : unit( (12 / @emSize), em);
@relative13px : unit( (13 / @emSize), em);
@relative14px : unit( (14 / @emSize), em);
@relative15px : unit( (15 / @emSize), em);
@relative16px : unit( (16 / @emSize), em);
@relative17px : unit( (17 / @emSize), em);
@relative18px : unit( (18 / @emSize), em);

@text-sizes:
    micro @micro,
    mini @mini,
    tiny @tiny,
    small @small,
    medium @medium,
    large @large,
    big @big,
    huge @huge,
    massive @massive;
