//color
@blue-1: #e7f4fd;
@blue-2: #cfe9fc;
@blue-3: #a0d3f8;
@blue-4: #70bef5;
@blue-5: #40a8f2;
@blue-6: #108ee9;
@blue-7: #0d75bf;
@blue-8: #0c66a7;
@blue-9: #084977;
@blue-10: #073a5f;

@green-1: #e5f6ee;
@green-2: #cceedd;
@green-3: #99dcbb;
@green-4: #66cb98;
@green-5: #33b976;
@green-6: #00a854;
@green-7: #00994d;
@green-8: #008040;
@green-9: #006633;
@green-10: #004d26;

@red-1: #fdeae8;
@red-2: #fad4d1;
@red-3: #f8bfba;
@red-4: #f5aaa3;
@red-5: #ee6a5d;
@red-6: #ea4335;
@red-7: #e72918;
@red-8: #b92113;
@red-9: #a21d11;
@red-10: #8a190f;

@yellow-1: #fff8e6;
@yellow-2: #fef2cd;
@yellow-3: #fde59b;
@yellow-4: #fdde81;
@yellow-5: #fcca36;
@yellow-6: #f3b709;
@yellow-7: #c99703;
@yellow-8: #977202;
@yellow-9: #7e5f02;
@yellow-10: #644c02;

@orange-1: #fff1e6;
@orange-2: #ffe2cc;
@orange-3: #ffd4b3;
@orange-4: #ffb780;
@orange-5: #ff8b33;
@orange-6: #f56a30;
@orange-7: #cc5800;
@orange-8: #994200;
@orange-9: #803700;
@orange-10: #662c00;

@purple-1: #f5e9f7;
@purple-2: #ebd4ef;
@purple-3: #d7a9df;
@purple-4: #c47cd0;
@purple-5: #ad49be;
@purple-6: #9c27b0;
@purple-7: #862097;
@purple-8: #6f1c7d;
@purple-9: #60166d;
@purple-10: #51145c;

@pink-1: #fde8ef;
@pink-2: #fad1df;
@pink-3: #f8bace;
@pink-4: #ff84af;
@pink-5: #ee5d8e;
@pink-6: #e81e63;
@pink-7: #d01654;
@pink-8: #b9134a;
@pink-9: #a21141;
@pink-10: #8a0f38;

@cyan-1: #ebf8f9;
@cyan-2: #cfedf0;
@cyan-3: #a7dfe3;
@cyan-4: #76cdd3;
@cyan-5: #3db8c1;
@cyan-6: #00a2ae;
@cyan-7: #008997;
@cyan-8: #00707f;
@cyan-9: #005667;
@cyan-10: #003c4e;

@lemon-1: #fffdeb;
@lemon-2: #ffface;
@lemon-3: #fff7b1;
@lemon-4: #fff59d;
@lemon-5: #fff175;
@lemon-6: #ffeb3b;
@lemon-7: #f7e225;
@lemon-8: #e8d211;
@lemon-9: #d3bf0b;
@lemon-10: #c3b003;

@brown-1: #f5f1ef;
@brown-2: #ece3df;
@brown-3: #d9c6bf;
@brown-4: #c6aa9f;
@brown-5: #9f7160;
@brown-6: #795548;
@brown-7: #604439;
@brown-8: #503830;
@brown-9: #402d26;
@brown-10: #30221d;

@indigo-1: #eceef8;
@indigo-2: #d9ddf2;
@indigo-3: #c6cceb;
@indigo-4: #a1aade;
@indigo-5: #6877ca;
@indigo-6: #3f51b5;
@indigo-7: #354497;
@indigo-8: #2e3b84;
@indigo-9: #212a5e;
@indigo-10: #1b224b;

@lime-1: #f3f9ec;
@lime-2: #e6f2d9;
@lime-3: #daecc6;
@lime-4: #b5d98c;
@lime-5: #9ccc66;
@lime-6: #8bc24a;
@lime-7: #77ac39;
@lime-8: #699933;
@lime-9: #4f7326;
@lime-10: #426020;

@bluegray-1: #f0f3f5;
@bluegray-2: #d2dbe0;
@bluegray-3: #b4c3cb;
@bluegray-4: #96abb6;
@bluegray-5: #7893a1;
@bluegray-6: #607d8b;
@bluegray-7: #546c78;
@bluegray-8: #495f69;
@bluegray-9: #34444b;
@bluegray-10: #2a363c;

@default-white: #ffffff;
@default-black: #000000;

@default-blue: @blue-6;
@hover-blue: @blue-7;
@active-blue: @blue-8;

@nav-default-blue: @default-blue;
@nav-hover-blue: @hover-blue;
@nav-active-blue: @active-blue;

@default-green: @green-6;
@hover-green: @green-7;
@active-green: @green-8;

@default-red: @red-6;
@hover-red: @red-7;
@active-red: @red-8;

@default-yellow: @yellow-6;
@hover-yellow: @yellow-7;
@active-yellow: @yellow-8;

@gray-grade-1: #212121;
@gray-grade-2: #404040;
@gray-grade-3: #595959;
@gray-grade-4: #737373;
@gray-grade-5: #999999;
@gray-grade-6: #bfbfbf;
@gray-grade-7: #d9d9d9;
@gray-grade-8: #e9e9e9;
@gray-grade-9: #f5f5f5;

//font
@font-family: "Helvetica Neue","PingFang SC",Tahoma,"Microsoft Yahei";

@font-size-normal:       14px;
@font-size-xl:           24px;
@font-size-lg:           20px;
@font-size-sm:           12px;

@font-gray-normal:       @gray-grade-3;
@font-gray-light:        @gray-grade-5;
@font-gray-lightest:     @gray-grade-6;
@font-gray-dark:         @gray-grade-2;

@font-weight-normal:     400;
@font-weight-bold:       500;
@title-font-weight:      500;

.font(@font-size: @font-size-normal, @color:@font-gray-normal, @font-weight: @font-weight-normal) {
  font-family: @font-family;
  font-weight: @font-weight;
  font-size: @font-size;
  line-height: @font-size;
  color: @color;
}

.input-font(@font-size: @font-size-normal, @color:@font-gray-normal) {
  .font(@font-size, @color, @font-weight-bold);
}

//disabled
@disabled-font:          @font-gray-lightest;
@disabled-background:    @gray-grade-9;
@disabled-border-color:  rgba(191, 191, 191, 0.5);

//hover
@hover-background:       @blue-1;
@hover-border-color:     @default-blue;

//active
@active-background:      @gray-grade-9;

//highlight
@highlight-background:   @gray-grade-6;

//border
@border-color:        @gray-grade-7;
@border-base:         1px solid @border-color;
@border-radius-base:  3px;
@box-shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

//height
@component-height-lg: 32px;
@component-height-md: 28px;
@component-height-sm: 24px;
@line-height-base:    1.5;

//spacing
@spacing-within-item:   10px;
@spacing-between-item:  20px;

//z-index
@z-index-affix           : 10;
@z-index-back-top        : 10;
@z-index-modal-mask      : 1000;
@z-index-modal           : 1000;
@z-index-notification    : 1010;
@z-index-message         : 1010;
@z-index-popover         : 1030;
@z-index-picker          : 1050;
@z-index-dropdown        : 1050;
@z-index-tooltip         : 1060;

//input
@input-padding-both-side: 10px;
@input-width: 400px;

//overlay
@overlay-margin-top: 5px;
@overlay-item-padding-left: 10px;

//clear icon
@hover-clear-icon-bg: @gray-grade-9;
@clear-icon-color: @gray-grade-5;

//button
@button-width:           88px;
@button-border:          0;
@button-border-color:    @border-base;

//tab
@tab-height: 36px;
@tab-active-line-height: 2px;
@tab-line-height: @tab-height - @tab-active-line-height;
@icon-menu-active-bg: @blue-2;