/* Theme colors */
@veui-brand-color: #3998fc;
@veui-brand-color-1: shade(@veui-brand-color, 20%); // #2e7aca
@veui-brand-color-2: shade(@veui-brand-color, 10%); // #3389e3
@veui-brand-color-3: @veui-brand-color; // #3998fc
@veui-brand-color-4: tint(@veui-brand-color, 20%); // #61adfd
@veui-brand-color-5: tint(@veui-brand-color, 30%); // #74b7fd
@veui-brand-color-6: tint(@veui-brand-color, 40%); // #88c1fd
@veui-brand-color-7: tint(@veui-brand-color, 60%); // #b0d6fe
@veui-brand-color-8: tint(@veui-brand-color, 70%); // #c4e0fe
@veui-brand-color-9: tint(@veui-brand-color, 80%); // #d7eafe
@veui-brand-color-10: tint(@veui-brand-color, 90%); // #ebf5ff

/* Additional colors */

// Alert & error
@veui-alert-color: #ff5b5b;
@veui-alert-color-1: shade(@veui-alert-color, 20%); // #cc4949
@veui-alert-color-2: shade(@veui-alert-color, 10%); // #e65252
@veui-alert-color-3: @veui-alert-color; // #ff5b5b
@veui-alert-color-4: tint(@veui-alert-color, 20%); // #ff7c7c
@veui-alert-color-5: tint(@veui-alert-color, 30%); // #ff8c8c
@veui-alert-color-6: tint(@veui-alert-color, 40%); // #ff9d9d
@veui-alert-color-7: tint(@veui-alert-color, 60%); // #ffbdbd
@veui-alert-color-8: tint(@veui-alert-color, 70%); // #ffcece
@veui-alert-color-9: tint(@veui-alert-color, 80%); // #ffdede
@veui-alert-color-10: tint(@veui-alert-color, 90%); // #ffefef
@veui-error-color: @veui-alert-color;
@veui-error-color-1: @veui-alert-color-1; // #cc4949
@veui-error-color-2: @veui-alert-color-2; // #e65252
@veui-error-color-3: @veui-alert-color-3; // #ff5b5b
@veui-error-color-4: @veui-alert-color-4; // #ff7c7c
@veui-error-color-5: @veui-alert-color-5; // #ff8c8c
@veui-error-color-6: @veui-alert-color-6; // #ff9d9d
@veui-error-color-7: @veui-alert-color-7; // #ffbdbd
@veui-error-color-8: @veui-alert-color-8; // #ffcece
@veui-error-color-9: @veui-alert-color-9; // #ffdede
@veui-error-color-10: @veui-alert-color-10; // #ffefef

// Success
@veui-success-color: #5bc49f;
@veui-success-color-1: shade(@veui-success-color, 20%); // #499d7f
@veui-success-color-2: shade(@veui-success-color, 10%); // #52b08f
@veui-success-color-3: @veui-success-color; // #5bc49f
@veui-success-color-4: tint(@veui-success-color, 20%); // #7cd0b2
@veui-success-color-5: tint(@veui-success-color, 30%); // #8cd6bc
@veui-success-color-6: tint(@veui-success-color, 40%); // #9ddcc5
@veui-success-color-7: tint(@veui-success-color, 60%); // #bde7d9
@veui-success-color-8: tint(@veui-success-color, 70%); // #ceede2
@veui-success-color-9: tint(@veui-success-color, 80%); // #def3ec
@veui-success-color-10: tint(@veui-success-color, 90%); // #eff9f5

// Warning
@veui-warning-color: #fe9700;
@veui-warning-color-1: shade(@veui-warning-color, 20%); // #cb7900
@veui-warning-color-2: shade(@veui-warning-color, 10%); // #e58800
@veui-warning-color-3: @veui-warning-color; // #fe9700
@veui-warning-color-4: tint(@veui-warning-color, 20%); // #feac33
@veui-warning-color-5: tint(@veui-warning-color, 30%); // #feb64d
@veui-warning-color-6: tint(@veui-warning-color, 40%); // #fec166
@veui-warning-color-7: tint(@veui-warning-color, 60%); // #ffd599
@veui-warning-color-8: tint(@veui-warning-color, 70%); // #ffe0b3
@veui-warning-color-9: tint(@veui-warning-color, 80%); // #ffeacc
@veui-warning-color-10: tint(@veui-warning-color, 90%); // #fff5e6

// Info
@veui-info-color: #3998fc;
@veui-info-color-1: shade(@veui-info-color, 20%); // #2e7aca
@veui-info-color-2: shade(@veui-info-color, 10%); // #3389e3
@veui-info-color-3: @veui-info-color; // #3998fc
@veui-info-color-4: tint(@veui-info-color, 20%); // #61adfd
@veui-info-color-5: tint(@veui-info-color, 30%); // #74b7fd
@veui-info-color-6: tint(@veui-info-color, 40%); // #88c1fd
@veui-info-color-7: tint(@veui-info-color, 60%); // #b0d6fe
@veui-info-color-8: tint(@veui-info-color, 70%); // #c4e0fe
@veui-info-color-9: tint(@veui-info-color, 80%); // #d7eafe
@veui-info-color-10: tint(@veui-info-color, 90%); // #ebf5ff

/* Grayscale colors */
@veui-gray-color-1: #333;
@veui-gray-color-2: #666;
@veui-gray-color-3: #999;
@veui-gray-color-4: #b8b8b8;
@veui-gray-color-5: #dbdbdb;
@veui-gray-color-6: #e7e7e7;
@veui-gray-color-7: #eee;
@veui-gray-color-8: #f7f7f7;
@veui-gray-color-9: #fcfcfc;

/* Text colors */
@veui-text-color-strong: @veui-gray-color-1;
@veui-text-color-normal: @veui-gray-color-2;
@veui-text-color-weak: @veui-gray-color-3;
@veui-text-color-aux: @veui-gray-color-4;

/* Link colors */
@veui-link-color-strong: @veui-brand-color;
@veui-link-color-hover: @veui-brand-color-2;
@veui-link-color-active: @veui-brand-color-1;
@veui-link-color-normal: @veui-text-color-normal;
@veui-link-color-weak: @veui-text-color-weak;
@veui-link-color-aux: @veui-text-color-aux;

/* Autofill color */
@veui-autofill-color: #e8f0fe;

/* Font settings */
@veui-font-family: "Helvetica Neue", Arial, "PingFang SC", STHeiti,
  "Microsoft YaHei", SimHei, sans-serif;

@veui-font-size-large: 16px;
@veui-font-size-normal: 14px;
@veui-font-size-small: 12px;

@veui-line-height-normal: 1.5;
@veui-line-height-large: 2;

@veui-font-weight-normal: 400;
@veui-font-weight-bold: 500;
@veui-font-weight-extra-bold: 600;

/* Metrics */
@veui-height-large: 42px;
@veui-height-normal: 36px;
@veui-height-small: 32px;
@veui-height-tiny: 28px;
@veui-height-micro: 22px;
@veui-nav-bar-height: 70px;

@veui-width-field: 300px;
@veui-width-normal: 210px;
@veui-width-embed: 140px;

/* Form widths */
@veui-form-label-width: 120px;
@veui-field-gap: 30px;
@veui-form-operation-gap: 60px;

/* Transition duration */
@veui-transition-duration: 0.2s;

/* Prefix */
@veui-prefix: veui;
@veui-root-element: html;
@veui-overlay-element: veui-x-overlay;