// Color Palette
@black: #333333;
@white: #fff;

@gray-1: #F6F7FA;
@gray-2: #D5D8DE;
@gray-3: #D0CFCF;
@gray-4: #999999;
@gray-5: #666666;
@gray-6: #333333;
@red: #F94C4C;
@blue: #787EFF;
@blue-light: #858AFF;
@orange: #FF9500;
@orange-dark: #FF6702;
@orange-light: #FFC842;
@green: #6EA372;
@green-light: #8FC894;
@brown: #ddb984;

// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
@text-color: @black;
@text-grey: @gray-4;
@text-lightgrey: @gray-3;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: #F6F3F7;
@background-color-light: #FFFEFF;

@line-height-sm: 16px;
@line-height-md: 22px;
@line-height-lg: 24px;

// Border
@border-width-base: 1px;
@border-radius-sm: 8px;
@border-radius-md: 14px;
@border-radius-lg: 16px;
@border-radius-lx: 20px;
@border-radius-max: 999px;

// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 5;
@padding-xl: @padding-base * 8;

// Font
@font-size-11: 11px;
@font-size-12: 12px;
@font-size-14: 14px;
@font-size-16: 16px;
@font-size-18: 18px;
@font-size-20: 20px;
@font-size-26: 26px;
@font-size-28: 28px;
@font-size-32: 32px;
@font-weight-bold: 700;
@font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
@base-font-family: @font-family;

// Button
@button-mini-font-size: @font-size-12;

@button-small-height: 28px;
@button-small-min-width: 48px;
@button-small-line-height: 28px;

@button-large-height: 50px;
@button-large-line-height: 50px;

@button-default-height: 36px;
@button-default-line-height: 36px;
@button-default-font-size: @font-size-12;
@button-default-color: @text-color;
@button-default-background-color: @gray-1;
@button-default-border-color: @gray-1;

@button-primary-color: @blue;
@button-primary-background-color: #f4f5ff;
@button-primary-border-color: #f4f5ff;

@button-warning-color: @black;
@button-warning-background-color: @orange-light;
@button-warning-border-color: @orange-light;

@button-border-width: @border-width-base;
@button-border-radius: @border-radius-sm;
@button-plain-background-color: @white;
@button-plain-border-color: @blue;

// Tag
@tag-color: @white;
@tag-font-size: @font-size-11;
@tag-border-radius: 8px 2px 8px 2px;

@tag-default-background-color: @brown;
@tag-default-color: @white;
@tag-primary-background-color: @blue-light;
@tag-primary-color: @white;
@tag-success-background-color: @green-light;
@tag-success-color: @white;
@tag-danger-background-color: @orange-dark;
@tag-danger-color: @white;
@tag-warning-background-color: @orange-light;
@tag-warning-color: @black;

// Tag-light
@tag-default-light-background-color: #f3f2f1;
@tag-default-light-color: @brown;
@tag-primary-light-background-color: #f6e8ff;
@tag-primary-light-color: @blue-light;
@tag-success-light-background-color: #f3f2f1;
@tag-success-light-color: @green-light;
@tag-danger-light-background-color: #ffd8bf;
@tag-danger-light-color: @orange-dark;
@tag-warning-light-background-color: #ffeab7;
@tag-warning-light-color: #eaad1a;

// User color
@user-background-color: #F4F4F4;
@user-module-background-color: #FFFFFF;

@deep: ~">>>";

