// page Colors
@page-color-base: #f7f8fa;

// Color Palette
@black: #333333;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #dcdcdc;
@gray-3: #c8c9cc;
@gray-4: #999999;
@gray-5: #666666;
@gray-6: #f8f8f8;
@gray-7: #d8d8d8;
@red: #ec1500;
@red-light: #ec3333;
@red-dark: #ee0a24;
@orange: #faab0c;
@red-btn: #ff5d00;
@green: #07C160;

@grey-border: #f2f3f5;
// Gradient Colors
@gradient-red: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
@gradient-pink: linear-gradient(180deg, #fff7f0 0%, #ffe4dc 100%);
@primary-bg: {
  background-image: linear-gradient(269deg, #ff4b00 12%, #ff7705 86%);
  background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
};

@cherry-color-error: #dd524d;

@text-color-red: #e81800;
@text-color-light: #ff5a4b;
// Component Colors
@text-color: @black;
@text-grey: @gray-4;
@active-opacity: 0.8;
@disabled-opacity: 0.7;
@background-color: @gray-1;

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

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

// Padding
@padding-unit: 4px;
@padding-x: @padding-unit + 2;
@padding-xs: @padding-unit * 2;
@padding-sm: @padding-unit * 3;
@padding-md: @padding-unit * 4;
@padding-lg: @padding-unit * 5;
@padding-xl: @padding-unit * 8;
@padding-sd: @padding-xs + 4;

@font-color-disabled: #c0c4cc;
@font-color-dark: #333333;
@font-color-light: #909399;
@font-color-red: #f23e33;

// Font
@font-size-list: 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 52, 40;

.generate-text(15);
.generate-text(@n, @i: 1) when (@i =< @n) {
  @font: extract(@font-size-list, @i);
  .text-@{font} {
    font-size: @font + 0px;
    line-height: @font + 6px;
  }
  .generate-text(@n, @i + 1);
}

@font-weight-bold: 600;
@font-family: 'Helvetica Neue', Helvetica, Segoe UI, Arial,
  Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
@font-din: 'din';
@deep: ~'>>>';

// 页面内边距
@page-padding: @padding-sm;
@page-padding-lg: @padding-lg;

// ios底部防遮挡高度
@ios-bottom-height: 60px;

// 页面顶部header高度
@nav-bar-height: 48px;

@tab-bar-height: 50px;

/* 页面左右间距 */
@page-row-spacing: 15px;

/* 行为相关颜色 */
@color-primary: #fa436a;

// 灰色
// 主要操作按钮背景色
@background-primary: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
@background-coupon: linear-gradient(270deg, #f76b1c 0%, #ffc049 100%);

/*文字颜色*/
@font-color-dark: #333333;
@font-color-base: #606266;
@font-color-light: #909399;
@font-color-disabled: #c0c4cc;
@font-color-spec: #4399fc;
@font-color-search: #ec1500;
@font-color-red: #f23e33;
// @font-color-red: #EC3333;
@font-color-red: #f23e33;
// Font
@font-size-11: 11px;
@font-size-12: 12px;
@font-size-13: 14px;
@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-30: 30px;
@font-size-32: 32px;
@font-size-36: 36px;
// 边框
@border-sm: 2rpx;
@border-md: 4rpx;
@border-gray: #999;
@border-red: #ec1500;

/* 边框颜色 */
@border-color-dark: #dcdfe6;
@border-color-base: #e4e7ed;
@border-color-light: #ebeef5;
@border-color-search: #ec1500;
