// Color Palette
@black: #000;
@white: #fff;
@gray-1: #D3D3D3;
@gray-2: #C4C4C4;
@gray-3: #D7D7D7;
@gray-4: #F9F9F9;
@gray-5: #F2F2F2;
@gray-6: #F6F6F6;
@gray-7: #f4f4f6;
@gray-8: #E3E3E3;
@gray-9: #CCCCCC;
@red: #FC5A5A;

@auxiliary-1: #385AD3;
@auxiliary-2: #5D76E6;
@auxiliary-3: #8872FB;
@auxiliary-4: #C0A9FF;
@auxiliary-5: #00C381;
@auxiliary-6: #F17B55;
@auxiliary-7: #FFAB00;
@auxiliary-8: #F8E71C;
@auxiliary-9: #FC86B4;
@auxiliary-10: #58C2E2;

// Gradient Colors
@gradient-blue: linear-gradient(227deg, #6468FF 0%, #3470FF 100%);

// Component Colors
@color-primary: #3470ff;
@color-danger: #f67172;
@color-success: #3daf30;
@color-hover: #f9f9f9;
@color-warning: #e6a23c;

@color-text-primary: #333333;
@color-text-regular: #606266;
@color-text-secondary: #858598;
@color-text-placeholder: @gray-1;

@shadow-color-primary: rgb(52, 112, 255, 0.5);

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

// Font
@font-size-xs: 12px;
@font-size-sm: 14px;
@font-size-md: 16px;
@font-size-lg: 24px;
@font-size-xl: 30px;
@font-weight-bold: 550;
@font-weight-normal: 400;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;

// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;

// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;