/* stylelint-disable declaration-block-no-duplicate-custom-properties */
// 定义前缀
@--css-prefix: tard;

:root, page {
  // color base
  // 品牌色，用于常规商品价格、功能按钮、促销活动等
  --color-primary: #FF2929;

  // color function
  // 功能色，用于成功/通过等正向反馈
  --color-success: #13CE66;
  // 功能色，用于失败/警告等负向反馈
  --color-error: #FF4949;
  // 功能色，用于提示/警示等需要引起用户注意的场景
  --color-warning: #FFC82C;
  // 功能色，用于标识其他场景
  --color-info: #78A4FA;
  // 非常规用色，用于页面遮罩等
  --color-black: #000000;
  // 主内容用色，用于常规标题内容、细文浏览、按钮文字及图标引导
  --color-grey-0: #333333;
  // 次要内容用色，用于次级标题内容、属性标示、非主要信息引导及常规按钮边框等
  --color-grey-1: #999999;
  // 特殊内容用色，用于无货标签文字、特殊不可点击按钮等
  --color-grey-2: #CCCCCC;
  // 辅助内容用色，用于页面分割线、分割底色、选项按钮常规底色等 #EBEBEB
  --color-grey-3: #EFEFEF;
  // 非常规用色，用于文字反白等
  --color-white: #FFFFFF;

  // Text Color
  // 文字的基本色
  --color-text: var(--color-grey-0);

  // 辅助色
  --color-text-secondary: var(--color-grey-1);
  --color-text-placeholder: var(--color-grey-2);
  --color-text-disabled: var(--color-grey-2);

  // overlay(@overlay-bg-color)
  --color-overlay: rgba(0, 0, 0, .65);

  // 边框颜色
  --color-border-base: var(--color-grey-3);
  --color-border-light: mix(#FFFFFF, #EFEFEF, 30%);

  // 图标颜色
  --color-icon-base: var(--color-grey-2);

  // opacity
  --opacity-active: .8;
  --opacity-disabled: .3;
  --zindex-common: 1000;

  // ease
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);

  // Font
  --font-size-xs: 20px; // 非常用字号，用于标签
  --font-size-s: 22px;
  --font-size-sm: 24px; // 用于辅助信息
  --font-size-base: 28px; // 常用字号
  --font-size-lg: 32px; // 常规标题
  --font-size-xl: 36px; // 大标题
  --font-size-xxl: 40px; // 用于大号的数字
  --font-size-xxxl: 48px;
  --font-size-xxxxl: 60px;
  --font-size-max: 72px;

  // 水平间距
  --spacing-h-sm: 6px;
  --spacing-h-md: 16px;
  --spacing-h-lg: 24px;
  --spacing-h-xl: 36px;

  // 垂直间距
  --spacing-v-xs: 6px;
  --spacing-v-sm: 12px;
  --spacing-v-md: 18px;
  --spacing-v-lg: 24px;
  --spacing-v-xl: 30px;

  // Border Radius
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-hg: 20px;
  --border-radius-circle: 50%;

  // Line Height
  --line-height-base: 1; // 单行
  --line-height-: 1.2;
  --line-height-en: 1.3; // 英文多行
  --line-height-zh: 1.5; // 中文多行
  --line-height-lg: 2;

  // font family
  // 基本字体
  --family-base: -apple-system,
    blinkmacsystemfont,
    "Helvetica Neue",
    helvetica,
    segoe ui,
    arial,
    roboto,
    "PingFang SC",
    "miui",
    "Hiragino Sans GB",
    "Microsoft Yahei",
    sans-serif;
  // 数字字体
  --family-integer: arial, helvetica, sans-senif, microsoft yahei;

  // overlay
  --overlay-bg-color: rgba(0, 0, 0, .65);
}