/* prettier-ignore */
:root,
:host {
  /* 1.1品牌色 */

  /* 品牌主色 */
  --tv-base-color-brand: #5e7ce0; // 主色黑/链接颜色

  --tv-base-color-brand-1: #f2f5fc;
  --tv-base-color-brand-2: #e9edfa; // 日期选择悬浮背景色 /提示-背景色
  --tv-base-color-brand-3: #beccfa; //  浅背景-悬浮色，开关组件“开”禁用背景色
  --tv-base-color-brand-4: #96adfa;
  --tv-base-color-brand-5: #7693f5;
  --tv-base-color-brand-6: #5e7ce0; // 辅助色， 文字按钮色、文字按钮悬浮色 /单选框选中悬浮/聚焦/激活小圆点填充色和边框色
  --tv-base-color-brand-7: #526ecc;
  --tv-base-color-brand-8: #465eb8;
  --tv-base-color-brand-9: #3c51a6;
  --tv-base-color-brand-10: #344899;
  --tv-base-color-brand-11: #2a3cb5;

  /* 1.2 中立色 */

  /* 公用灰色系，用于文本、图标、线条、背景色 */
  --tv-base-color-common-1: #ffffff; // 顶部导航背景色、 顶部导航下拉背景色/次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
  --tv-base-color-common-2: #f5f5f6; // 新区域组件-悬浮背景色
  --tv-base-color-common-3: #eef0f5; // 通用背景-页面背景色/ 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
  --tv-base-color-common-4: #dfe1e6; // 白色背景分割线 /禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
  --tv-base-color-common-5: #adb0b8; // 灰色标签背景色/轮播箭头悬浮色
  --tv-base-color-common-6: #8a8e99; // 开关组件“关”禁用背景色/ 禁用描边/ 灰色背景分割线
  --tv-base-color-common-7: #575d6c; // 选块悬浮色/页签禁用文字色/边框色（如下拉、输入框）/文字禁用/禁用图标
  --tv-base-color-common-8: #252b3a; // 弱化信息、说明文字
  --tv-base-color-common-9: #464c59; // 次要信息/图标默认/主色悬浮色、链接悬浮色/主要按钮-hover/Focus背景色
  --tv-base-color-common-10: #5c6173;
  --tv-base-color-common-11: #282b33; // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标/主要按钮-背景色
  --tv-base-color-common-12: #000000;

  /* 1.4 功能色 */
  --tv-base-color-success-1: #edfff9;
  --tv-base-color-success-2: #cffcee;
  --tv-base-color-success-3: #acf2dc; // 成功-按钮active、hover 颜色
  --tv-base-color-success-4: #8be8cb;
  --tv-base-color-success-5: #6ddebb;
  --tv-base-color-success-6: #50d4ab; // 成功-背景色/ 图标色/文本色 /进度条当前进度背景色
  --tv-base-color-success-7: #3ac295;
  --tv-base-color-success-8: #27b080;
  --tv-base-color-success-9: #169e6c;
  --tv-base-color-success-10: #088c58;
  --tv-base-color-success-11: #007a45;


  --tv-base-color-error-1: #ffeceb; // 
  --tv-base-color-error-2: #ffd7d6; //  错误-边框色 /背景色 /错误校验背景色
  --tv-base-color-error-3: #ffbab8; //  错误-图标色、校验边框色/、悬浮菜单背景色
  --tv-base-color-error-4: #ffa6a3; // 
  --tv-base-color-error-5: #ff8985; // 
  --tv-base-color-error-6: #f66e6a; //  错误-文本色/交易金额色 / 紧急告警色
  --tv-base-color-error-7: #df514e; // 
  --tv-base-color-error-8: #c83737; // 
  --tv-base-color-error-9: #b02121; // 
  --tv-base-color-error-10: #971111; // 
  --tv-base-color-error-11: #810404; // 
  --tv-base-color-error-12: #c7000b; // 
  --tv-base-color-error-13: #d64a52; //  错误-背景色/错误校验背景色
  --tv-base-color-error-14: #b12220; // 

  --tv-base-color-warn-1: #fff3e8;
  --tv-base-color-warn-2: #ffe1c7; // 告警-背景色/边框色（浅）
  --tv-base-color-warn-3: #ffd0a6;
  --tv-base-color-warn-4: #ffbf85;
  --tv-base-color-warn-5: #ffad63;
  --tv-base-color-warn-6: #fa9841; // 告警-图标色/深色背景 /重要告警色
  --tv-base-color-warn-7: #e37d29; // 优惠折扣功能色
  --tv-base-color-warn-8: #cc6414;
  --tv-base-color-warn-9: #b54e04;
  --tv-base-color-warn-10: #9e3f00;
  --tv-base-color-warn-11: #873400;

  --tv-base-color-warn-secondary-1: #ffb700; // 次要告警色 黄色系
  --tv-base-color-warn-secondary-2: #fac20a;

  --tv-base-color-info-1: #f0f7ff;
  --tv-base-color-info-2: #e9edfa; // 提示-背景色 / 边框色
  --tv-base-color-info-3: #beccfa; // 开关组件“开”禁用背景色
  --tv-base-color-info-4: #96adfa;
  --tv-base-color-info-5: #7693f5;
  --tv-base-color-info-6: #5e7ce0; //  提示-图标色 / 文本色
  --tv-base-color-info-7: #526ecc;
  --tv-base-color-info-8: #465eb8;
  --tv-base-color-info-9: #3c51a6;
  --tv-base-color-info-10: #344899;
  --tv-base-color-info-11: #2a3c85;


  /** 2. 公共色 **/

  /** 2.2 提示类型组件  ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、错误校验等场景 **/
  --tv-color-success-text: var(--tv-base-color-success-6); // #50d4ab #3ac295成功-文本色
  --tv-color-success-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色
  --tv-color-success-bg: var(--tv-base-color-success-6); //#50d4ab 成功-背景色(深)
  --tv-color-success-bg-1: var(--tv-base-color-success-1); // #edfff9 tag的light类型
  --tv-color-success-bg-light: var(--tv-base-color-success-1); // #edfff9 成功-背景色(浅)
  --tv-color-success-border: var(--tv-base-color-success-6); // #50d4ab 成功-边框色(深)
  --tv-color-success-border-light: var(--tv-base-color-success-3); // #acf2dc 成功-边框色（浅）
  --tv-color-success-border-1: var(--tv-base-color-success-3); // #acf2dc  tag的light类型
  --tv-color-success-icon: var(--tv-base-color-success-6); // #50d4ab 成功-图标色

  --tv-color-error-text: var(--tv-base-color-error-6); // #f66f6a 错误-文本色/交易金额色
  --tv-color-error-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色
  --tv-color-error-bg: var(--tv-base-color-error-6); // #f66f6a  错误-背景色(深)
  --tv-color-error-bg-light: var(--tv-base-color-error-1); // #ffeeed  错误-背景色(浅)/错误校验背景色
  --tv-color-error-bg-1: var(--tv-base-color-error-1); // #ffeeed tag的light类型
  --tv-color-error-border: var(--tv-base-color-error-6); // #f66f6a  错误-边框色(深)
  --tv-color-error-border-light: var(--tv-base-color-error-3); // #ffbcba  错误-边框色（浅）
  --tv-color-error-border-1: var(--tv-base-color-error-3); // #ffbcba tag的light类型
  --tv-color-error-icon: var(--tv-base-color-error-6); // #f66f6a   错误-图标色

  --tv-color-warn-text: var(--tv-base-color-warn-7); // #e37d29  告警-文本色
  --tv-color-warn-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色
  --tv-color-warn-bg: var(--tv-base-color-warn-6); // #fa9841  告警-背景色(深)
  --tv-color-warn-bg-light: var(--tv-base-color-warn-1); // #fff3e8 告警-背景色(浅)
  --tv-color-warn-bg-1: var(--tv-base-color-warn-1); // #fff3e8 tag的light类型
  --tv-color-warn-border: var(--tv-base-color-warn-6); // #fa9841  告警-边框色(深)
  --tv-color-warn-border-light: var(--tv-base-color-warn-3); // #ffd0a6 告警-边框色（浅）
  --tv-color-warn-border-1: var(--tv-base-color-warn-3); // #ffd0a6 tag的light类型
  --tv-color-warn-icon: var(--tv-base-color-warn-6); // #fa9841   告警-图标色

  --tv-color-info-text: var(--tv-base-color-info-7); // #526ecc 信息-文本色
  --tv-color-info-text-primary: var(--tv-base-color-common-8); // #252b3a 白色背景一级文本色
  --tv-color-info-text-1: var(--tv-base-color-info-7); // #526ecc  tag的light、plain类型
  --tv-color-info-bg: var(--tv-base-color-info-6); // #5e7ce0 信息-背景色(深)
  --tv-color-info-bg-light: #ebf6ff; // #ebf6ff 信息-背景色(浅) (规范token中的颜色，又不在这个蓝色系的色阶中，主题部分等设计师帮忙整改）
  --tv-color-info-bg-1: #ebf6ff; // #ebf6ff tag的light类型
  --tv-color-info-border: var(--tv-base-color-info-6); // #5e7ce0 信息-边框色(深)
  --tv-color-info-border-light: var(--tv-base-color-info-3); // #beccfa 信息-边框色（浅）
  --tv-color-info-border-1: var(--tv-base-color-info-3); // #beccfa tag的light类型
  --tv-color-info-icon: var(--tv-base-color-info-6); // #5e7ce0  信息-图标色

  /** 2.3 交互类型颜色---- Button组件、Badge 标记、Link 文字链接 **/

  /* 主要-primary */
  --tv-color-act-primary-text: var(--tv-base-color-brand-6); // #5e7ce0 主要文本色-1（品牌色）： 朴素/幽灵/纯文本/链接
  --tv-color-act-primary-text-hover: var(--tv-base-color-brand-6); // #5e7ce0 主要hover文本色-1
  --tv-color-act-primary-text-active: var(--tv-base-color-brand-6); // #5e7ce0 主要active文本色-1

  --tv-color-act-primary-text-inverse-tint: var(--tv-base-color-common-1); // #fff 主要文本色-2（白色）
  --tv-color-act-primary-text-inverse-tint-hover: var(--tv-base-color-common-1); // #fff 主要hover文本色-2（白色）
  --tv-color-act-primary-text-inverse-tint-active: var(--tv-base-color-common-1); // #fff 主要active文本色-2（白色）

  --tv-color-act-primary-bg: var(--tv-base-color-brand-6); // #5e7ce0 主要背景色-1（品牌色）: 默认
  --tv-color-act-primary-bg-hover: var(--tv-base-color-brand-5); // #7693f5  主要hover背景色-1
  --tv-color-act-primary-bg-active: var(--tv-base-color-brand-5); //#7693f5  主要active背景色-1

  --tv-color-act-primary-bg-white: var(--tv-base-color-brand-1); // #f2f5fc 主要背景色-2（白）：朴素
  --tv-color-act-primary-bg-white-hover: var(--tv-base-color-brand-6); // #5e7ce0 主要hover背景色-2（白色）： 朴素
  --tv-color-act-primary-bg-white-active: var(--tv-base-color-brand-6); //#5e7ce0 主要active背景色-2（白色）： 朴素

  --tv-color-act-primary-border: var(--tv-base-color-brand-6); // #5e7ce0 主要边框色-1 默认
  --tv-color-act-primary-border-hover: var(--tv-base-color-brand-5); //#7693f5  主要hover边框色-1
  --tv-color-act-primary-border-active: var(--tv-base-color-brand-5); //#7693f5  主要active边框色-1

  --tv-color-act-primary-border-light: var(--tv-base-color-brand-6); // #5e7ce0  幽灵/朴素 边框色-2
  --tv-color-act-primary-border-light-hover: var(--tv-base-color-brand-3); // #beccfa 朴素hover边框色-2.1
  --tv-color-act-primary-border-light-active: var(--tv-base-color-brand-3); // #beccfa 朴素active边框色-2.1
  --tv-color-act-primary-border-light-hover-1: var(--tv-base-color-brand-3); // #beccfa  幽灵hover边框色-2.2
  --tv-color-act-primary-border-light-active-1: var(--tv-base-color-brand-3); // #beccfa  幽灵active边框色-2.2

  --tv-color-act-primary-plain-text-hover: var(--tv-base-color-common-1); // #fff

  /* 成功-success */
  --tv-color-act-success-text: var(--tv-base-color-success-6); // #50d4ab 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
  --tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #50d4ab 成功hover文本色-1
  --tv-color-act-success-text-active: var(--tv-base-color-success-6); // #50d4ab 成功active文本色-1

  --tv-color-act-success-text-white: var(--tv-base-color-common-1); // #fff 成功文本色-2（白色）：默认
  --tv-color-act-success-text-white-hover: var(--tv-base-color-common-1); // #fff 成功hover文本色-2（白色）
  --tv-color-act-success-text-white-active: var(--tv-base-color-common-1); // #fff 成功active文本色-2（白色）

  --tv-color-act-success-bg: var(--tv-base-color-success-6); // #50d4ab 成功背景色-1（品牌色）：默认
  --tv-color-act-success-bg-hover: var(--tv-base-color-success-5); // #acf2dc  成功hover背景色-1
  --tv-color-act-success-bg-active: var(--tv-base-color-success-5); // #acf2dc  成功active背景色-1

  --tv-color-act-success-bg-light: var(--tv-base-color-success-1); //  #edf7df 成功背景色-1（品牌色）：朴素
  --tv-color-act-success-bg-light-hover: var(--tv-base-color-success-6); // #50d4ab 成功hover背景色-1
  --tv-color-act-success-bg-light-active: var(--tv-base-color-success-6); //  #50d4ab 成功active背景色-1

  --tv-color-act-success-border: var(--tv-base-color-success-6); // #50d4ab 成功边框色-1：默认 / 幽灵
  --tv-color-act-success-border-hover: var(--tv-base-color-success-5); //#edf7df  成功hover边框色-1.1
  --tv-color-act-success-border-active: var(--tv-base-color-success-5); //#edf7df  成功active边框色-1.1
  --tv-color-act-success-border-hover-1: var(--tv-base-color-success-2); // #daf2bb  成功hover边框色-1.2
  --tv-color-act-success-border-active-1: var(--tv-base-color-success-3); // #acf2dc  成功active边框色-1.2

  --tv-color-act-success-border-light: var(--tv-base-color-success-6); // #daf2bb  成功边框色-2:朴素
  --tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); //  #edf7df 成功hover边框色
  --tv-color-act-success-border-light-active: var(--tv-base-color-success-1); //  #edf7df 成功active边框色

  --tv-color-act-success-plain-text-hover: var(--tv-base-color-common-1); // #fff

  /* 告警-warning */
  --tv-color-act-warning-text: var(--tv-base-color-warn-7); // #e37d29   告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
  --tv-color-act-warning-text-hover: var(--tv-base-color-warn-7); // #e37d29  告警hover文本色-1
  --tv-color-act-warning-text-active: var(--tv-base-color-warn-7); // #e37d29  告警active文本色-1

  --tv-color-act-warning-text-white: var(--tv-base-color-common-1); // #fff 告警文本色-2（白色）：默认
  --tv-color-act-warning-text-white-hover: var(--tv-base-color-common-1); // #fff 告警hover文本色-2（白色）
  --tv-color-act-warning-text-white-active: var(--tv-base-color-common-1); // #fff 告警active文本色-2（白色）

  --tv-color-act-warning-bg: var(--tv-base-color-warn-6); // #ff8800  告警背景色-1（告警主色）：默认
  --tv-color-act-warning-bg-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover背景色-1
  --tv-color-act-warning-bg-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active背景色-1

  --tv-color-act-warning-bg-light: var(--tv-base-color-warn-1); // #fff4e8 告警背景色-1（告警主色衍生色）：朴素
  --tv-color-act-warning-bg-light-hover: var(--tv-base-color-warn-6); // #fa9841 告警hover背景色-1
  --tv-color-act-warning-bg-light-active: var(--tv-base-color-warn-6); // #fa9841 告警active背景色-1

  --tv-color-act-warning-border: var(--tv-base-color-warn-6); // #ff8800  告警边框色-1：默认 / 幽灵
  --tv-color-act-warning-border-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover边框色-1.1
  --tv-color-act-warning-border-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active边框色-1.1
  --tv-color-act-warning-border-hover-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵hover边框色-1.2
  --tv-color-act-warning-border-active-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵active边框色-1.2

  --tv-color-act-warning-border-light: var(--tv-base-color-warn-6); //#ffebd1 告警边框色-2：朴素
  --tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色
  --tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色

  --tv-color-act-warning-plain-text-hover: var(--tv-base-color-common-1); // #fff

  /* 危险-danger */
  --tv-color-act-danger-text: var(--tv-base-color-error-12); // #c7000b  危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
  --tv-color-act-danger-text-hover: var(--tv-base-color-error-12); // #c7000b  危险hover文本色-1
  --tv-color-act-danger-text-active: var(--tv-base-color-error-12); // #c7000b  危险active文本色-1

  --tv-color-act-danger-text-white: var(--tv-base-color-common-1); // #fff 危险文本色-2（白色）：默认
  --tv-color-act-danger-text-white-hover: var(--tv-base-color-common-1); // #fff 危险hover文本色-2（白色）
  --tv-color-act-danger-text-white-active: var(--tv-base-color-common-1); // #fff 危险active文本色-2（白色）

  --tv-color-act-danger-bg: var(--tv-base-color-error-12); // #c7000b  危险背景色-1（成功主色）：默认
  --tv-color-act-danger-bg-hover: var(--tv-base-color-error-13); // #d64a52  危险hover背景色-1
  --tv-color-act-danger-bg-active: var(--tv-base-color-error-14); // #b12220  危险active背景色-1

  --tv-color-act-danger-bg-light: var(--tv-base-color-error-1); // #fff1f0  危险背景色-2（成功主色衍生色）：朴素
  --tv-color-act-danger-bg-light-hover: var(--tv-base-color-error-12); // #c7000b  危险hover背景色-1
  --tv-color-act-danger-bg-light-active: var(--tv-base-color-error-12); // #c7000b  危险active背景色-1

  --tv-color-act-danger-border: var(--tv-base-color-error-12); // #c7000b  危险边框色-1：默认 / 幽灵
  --tv-color-act-danger-border-hover: var(--tv-base-color-error-13); // #d64a52 危险hover边框色-1.1
  --tv-color-act-danger-border-active: var(--tv-base-color-error-13); // #d64a52 危险active边框色-1.1
  --tv-color-act-danger-border-hover-1: var(--tv-base-color-error-3); // #ffbab8  危险hover边框色-1.2
  --tv-color-act-danger-border-active-1: var(--tv-base-color-error-3); //#ffbab8  危险active边框色-1.2

  --tv-color-act-danger-border-light: var(--tv-base-color-error-12); // #c7000b 危险边框色-2：朴素
  --tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #ffeceb  危险hover边框色
  --tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #ffeceb  危险active边框色

  --tv-color-act-danger-plain-text-hover: var(--tv-base-color-common-1); // #fff

  /* 信息-info */
  --tv-color-act-info-text: var(--tv-base-color-info-7); //  信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
  --tv-color-act-info-text-hover: var(--tv-base-color-info-7); // #5e7ce0 信息hover文本色-1
  --tv-color-act-info-text-active: var(--tv-base-color-info-7); // #5e7ce0 信息active文本色-1

  --tv-color-act-info-text-white: var(--tv-base-color-common-1); // #fff 信息文本色-2（白色）：默认
  --tv-color-act-info-text-white-hover: var(--tv-base-color-common-1); // #fff 信息hover文本色-2（白色）
  --tv-color-act-info-text-white-active: var(--tv-base-color-common-1); // #fff 信息active文本色-2（白色）

  --tv-color-act-info-bg: var(--tv-base-color-info-6); // 信息背景色-1（信息主色）：默认
  --tv-color-act-info-bg-hover: var(--tv-base-color-info-6); // #5e7ce0  信息hover背景色-1
  --tv-color-act-info-bg-active: var(--tv-base-color-info-6); // #5e7ce0  信息active背景色-1

  --tv-color-act-info-bg-light: var(--tv-base-color-info-1); // #f0f7ff 信息背景色-1（信息主色衍生色）：朴素
  --tv-color-act-info-bg-light-hover: var(--tv-base-color-info-6); // #526ecc  信息hover背景色-1
  --tv-color-act-info-bg-light-active: var(--tv-base-color-info-6); // #526ecc  信息active背景色-1

  --tv-color-act-info-border: var(--tv-base-color-brand-6); //  信息边框色-1：默认 / 幽灵
  --tv-color-act-info-border-hover: var(--tv-base-color-brand-6); //#5e7ce0  信息hover边框色-1.1
  --tv-color-act-info-border-active: var(--tv-base-color-brand-6); //#5e7ce0  信息active边框色-1.1
  --tv-color-act-info-border-hover-1: var(--tv-base-color-info-3); // #beccfa 信息hover边框色-1.2：幽灵
  --tv-color-act-info-border-active-1: var(--tv-base-color-info-3); // #beccfa 信息active边框色-1.2

  --tv-color-act-info-border-light: var(--tv-base-color-info-6); // 信息边框色-2：朴素
  --tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff  信息hover边框色
  --tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff  信息active边框色

  --tv-color-act-info-plain-text-hover: var(--tv-base-color-common-1); // #fff

  /** 2.4 文本色 **/
  --tv-color-text: var(--tv-base-color-common-8); // #252b3a 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
  --tv-color-text-secondary: var(--tv-base-color-common-7); // #575d6c  二级文本色-次要信息
  --tv-color-text-weaken: var(--tv-base-color-common-6); // #8a8e99 三级文本色-弱化信息、说明文字
  --tv-color-text-placeholder: var(--tv-base-color-common-5); // #adb0b8 占位文本色
  --tv-color-text-disabled: var(--tv-base-color-common-5); // #adb0b8  禁用文本色
  --tv-color-text-active: var(--tv-base-color-brand-7); // #526ecc 选中文本色 / 文本高亮色（搜索关键字高亮）
  --tv-color-text-important: var(--tv-base-color-error-7); // #df514e 重要文本色-文本_金额
  --tv-color-text-white: var(--tv-base-color-common-1); // #fff 深色背景上-文本色
  --tv-color-text-link: var(--tv-base-color-brand-7); // #526ecc 链接色（链接按钮）
  --tv-color-text-link-hover: var(--tv-base-color-brand-10); // #344899 链接悬浮色
  --tv-color-text-darbg: var(--tv-base-color-common-5); // 深色背景文本色，顶级导航/一级tab文本色

  --tv-color-plain-text-hover: var(--tv-base-color-brand-6); // #5e7ce0
  // -- 暗色新增 --
  --tv-color-text-control: var(--tv-base-color-common-8); // #252b3a 左侧导航默认文本色/主要图标按钮/主要图标+按钮
  --tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
  --tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色
  --tv-color-text-inverse-black: var(--tv-base-color-common-8); // #252b3a tooltip的light文字
  --tv-color-text-active-1: var(--tv-base-color-common-1); // #fff 卡片式tab页签激活文本色
  --tv-color-text-active-2: var(--tv-base-color-common-8); // #252b3a  tree选中文本色
  --tv-color-text-active-3: var(--tv-base-color-brand-7); // #526ecc tab页签激活色
  --tv-color-text-inverse-active: var(--tv-base-color-common-1); // #fff buttonGrounp激活色
  --tv-color-text-hover: var(--tv-base-color-brand-7); // #526ecc 片式tab页签悬浮文本色/深色背景卡片式链接悬浮色
  --tv-color-text-link-1: var(--tv-base-color-brand-7); // #526ecc  面包屑/主要链接
  --tv-color-text-link-1-hover: var(--tv-base-color-brand-10); // #344899 面包屑/主要链接悬浮色

  /** 2.5 图标色 **/
  --tv-color-icon: var(--tv-base-color-common-7); // #575d6c 默认图标色
  --tv-color-icon-hover: var(--tv-base-color-brand-6); // #5e7ce0 图标悬浮色
  --tv-color-icon-active: var(--tv-base-color-brand-6); // #5e7ce0 图标激活色
  --tv-color-icon-disabled: var(--tv-base-color-common-5); // #adb0b8  图标禁用色
  --tv-color-icon-checked-disabled: var(--tv-base-color-common-5); // #adb0b8 图标禁用色-1 checkbox选中且禁用
  --tv-color-icon-control: var(--tv-base-color-common-8); // #252b3a 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
  --tv-color-icon-control-active: var(--tv-base-color-brand-6); // #5e7ce0 控件图标激活色，主要在checkbox、radio图标激活场景
  --tv-color-icon-control-disabled: var(--tv-base-color-common-5); // #adb0b8 控件图标禁用色，主要在checkbox、radio图标激活场景
  --tv-color-icon-white: var(--tv-base-color-common-1); // #fff 深色背景白色图标
  --tv-color-icon-link: var(--tv-base-color-brand-7); // #526ecc 链接图标色
  --tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-2); // #fac20a 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
  // -- 暗色新增 --
  --tv-color-icon-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
  --tv-color-icon-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：按钮下拉线头


  /** 2.6 背景色 **/

  /* 2.6.1 常态 */
  --tv-color-bg: var(--tv-base-color-common-3); // #eef0f5  通用背景色 /选块的默认背景颜色、滑块手柄的背景颜色/表格表头/穿梭框头部背景颜色/下拉搜索的背景、折叠面板背景色
  --tv-color-bg-primary: var(--tv-base-color-brand); // #5e7ce0主要背景色（品牌色）：slider/step/流程图
  --tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色/下拉面板背景色
  --tv-color-bg-control: var(--tv-base-color-common-5); //  #adb0b8 单选/复选/开关/滑块默认背景色
  --tv-color-bg-control-unactive: var(--tv-base-color-common-5); // #adb0b8  开关组件-关闭状态-背景色
  --tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
  --tv-color-bg-gray-2: var(--tv-base-color-common-4); // #dfe1e6 灰色背景-2灰色标签背景色
  --tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
  --tv-color-bg-mask: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色
  --tv-color-bg-dark: var(--tv-base-color-common-9); // #464c59 深色背景色 顶部导航/ 深色tab


  /* 2.6.2 禁用 */
  --tv-color-bg-disabled: var(--tv-base-color-common-2); // #f5f5f6 禁用背景色
  --tv-color-bg-disabled-control-checked: var(--tv-base-color-common-4); // #dbdbdb 深色背景禁用色，控件选中状态下的禁用背景色
  --tv-color-bg-disabled-control-unactive: var(--tv-base-color-common-4); // #dfe1e6 开关组件“关”禁用背景色
  --tv-color-bg-disabled-control-active: var(--tv-base-color-brand-3); // #beccfa  深色背景禁用色，开关组件“开”禁用背景色

  /* 2.6.3 悬浮 */
  --tv-color-bg-hover: var(--tv-base-color-brand-1); // #f2f5fc 浅背景-悬浮色
  --tv-color-bg-hover-primary: var(--tv-base-color-common-10); // #5c6173 一级tab页签背景-悬浮色 /分页hover背景颜色 /灰色悬浮背景色：表格悬浮、下拉悬浮、左侧导航悬浮
  --tv-color-bg-hover-secondary: var(--tv-base-color-common-1); // #fff 次要背景色悬浮色 / 穿梭框头部/折叠面板背景色
  --tv-color-bg-hover-1: var(--tv-base-color-brand-1); // #f2f5fc  浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色
  --tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
  --tv-color-bg-hover-dark: var(--tv-base-color-common-10); // #5c6173 深色背景悬浮色

  /* 2.6.4 active/选中 */
  --tv-color-bg-active: var(--tv-base-color-brand-1); // #5e7ce0  分页选中背景色/左侧导航选中背景色
  --tv-color-bg-active-control: var(--tv-base-color-brand); // #5e7ce0 主色蓝，单选/复选选中背景色、开关开的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色
  --tv-color-bg-active-primary: var(--tv-base-color-brand); // #5e7ce0 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色
  --tv-color-bg-active-secondary: var(--tv-base-color-common-1); // #fff 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
  --tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); //  #5e7ce0 时间选择选中背景色
  --tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色
  --tv-color-bg-active-dark: var(--tv-base-color-common-3); // #eef0f5 深色背景色激活色

  // -- 暗色新增 -- 
  --tv-color-bg-2: var(--tv-base-color-common-1); // #fff下拉面板/tip的normal背景色
  --tv-color-bg-3: var(--tv-base-color-common-1); //  #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景
  --tv-color-bg-4: var(--tv-base-color-common-5); // #adb0b8 时间线实心圆点
  --tv-color-bg-progressbar: var(--tv-base-color-success-6); // #50d4ab step当前进度背景色
  --tv-color-bg-active-emphasize-1: var(--tv-base-color-brand); // #5e7ce0 下拉选中背景色、tab二级选中背景色
  --tv-color-bg-container-hover: var(--tv-base-color-common-1); // #fff 卡片选中悬浮背景色（区块背景）
  --tv-color-bg-hover-3: var(--tv-base-color-brand-1); // #f2f5fc 日期悬浮
  --tv-color-bg-hover-4: var(--tv-base-color-brand-1); // #f2f5fc 表格悬浮/下拉悬浮/左侧导航悬浮
  --tv-color-bg-active-primary-1: var(--tv-base-color-brand-5); // #7693f5 主要按钮悬浮
  --tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色
  --tv-color-bg-active-control-1: var(--tv-base-color-brand-3); // #beccfa radio 选中禁用色
  --tv-color-bg-5: var(--tv-base-color-common-4); // #dfe1e6轮播指示器背景色
  --tv-color-bg-5-active: var(--tv-base-color-brand); // #5e7ce0  轮播指示器激活背景色
  --tv-color-bg-inverse-tint-1: var(--tv-base-color-common-1); // #fff 图片工具栏背景色
  --tv-color-bg-disabled-control: var(--tv-base-color-common-5); // #adb0b8滑块高亮部分禁用色
  --tv-color-bg-inverse-disabled: var(--tv-base-color-common-5); // #adb0b8 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#adb0b8）
  --tv-color-bg-dark-1:var(--tv-base-color-common-9); // #464c59 tip的dark背景色

  /** 2.7 边框色/分割线颜色 **/

  /* 2.7.1 边框 */
  --tv-color-border: var(--tv-base-color-common-5); // #adb0b8  线条-正常色
  --tv-color-border-hover: var(--tv-base-color-common-7); // #575d6c 线条悬浮色
  --tv-color-border-active: var(--tv-base-color-brand); // #5e7ce0 线条active色
  --tv-color-border-active-control: var(--tv-base-color-brand-6); //  #5e7ce0 主色蓝，单选/复选选中的边框色
  --tv-color-border-disabled: var(--tv-base-color-common-4); // #dfe1e6 线条禁用色
  --tv-color-border-secondary: var(--tv-base-color-common-5); // #adb0b8 线条-次要色：次要按钮边框默认色
  --tv-color-border-ghost: var(--tv-base-color-common-5); // #adb0b8  
  --tv-color-border-ghost-active: var(--tv-base-color-common-4); // #dbdbdb  

  /* 2.7.2 分割线 */
  --tv-color-border-divider: var(--tv-base-color-common-4); // #dfe1e6 分割线1（较长分割线场景）
  --tv-color-border-divider-short: var(--tv-base-color-common-4); // #dfe1e6 分割线2（较短分割线场景）
  // -- 暗色新增 --
  --tv-color-border-secondary-hover: var(--tv-base-color-brand); //  #5e7ce0次要按钮边框悬浮色
  --tv-color-border-container: var(--tv-base-color-common-5); // #adb0b8 卡片选择默认边框
  --tv-color-border-container-hover: var(--tv-base-color-common-1); // #fff 卡片选择悬浮边框
  --tv-color-border-container-active: var(--tv-base-color-brand); //  #5e7ce0 卡片选择选中边框
  --tv-color-border-inverse-tint: var(--tv-base-color-common-1); // #fff tag边框
  --tv-color-border-1: var(--tv-base-color-common-4); // #dfe1e6 滑块圆圈描边

  /**  3. 字体变量 **/

  /* 3.1 字体家族 -- 【组件内不要指定】 */
  --tv-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'; // 默认中文
  --tv-font-family-1: 'Arial', 'San Francisco', 'Helvetica'; // 数字 / 英文

  /* 3.2 字号 */
  --tv-font-size-sm: 12px; // 辅助文本
  --tv-font-size-md: 14px; // 正文，默认字体尺寸
  --tv-font-size-lg: 16px;
  --tv-font-size-xl: 18px;
  --tv-font-size-xxl: 20px;
  --tv-font-size-default: var(--tv-font-size-sm);

  --tv-font-size-heading-xs: 16px; // 卡片标题
  --tv-font-size-heading-sm: 18px; // 页面标题
  --tv-font-size-heading-md: 20px; // 弹窗标题、数字
  --tv-font-size-heading-lg: 24px; // 数字、面额
  --tv-font-size-heading-xl: 32px; // 数字、面额

  /** 3.3 行高 */

  --tv-line-height-number: 1.5;

  /* 3.4 字重 */
  --tv-font-weight-thin: 200;
  --tv-font-weight-regular: 400; // 默认值：nomal
  --tv-font-weight-bold: 600;

  /** 4. 圆角变量 **/
  --tv-border-radius-xs: 2px;
  --tv-border-radius-sm: 2px;
  --tv-border-radius-md: 2px; // 默认
  --tv-border-radius-lg: 4px;
  --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。 
  --tv-border-radius-brand: 2px; // 品牌相关。用于圆角，按钮、分页等场景 

  /** 5. 边框  **/
  --tv-border-width: 1px;

  /** 6. 间距变量 space  ----margin、padding、top、 left 、 right、bottom **/
  --tv-space-base: 4px;
  --tv-space-xs: 2px;
  --tv-space-sm: var(--tv-space-base);
  --tv-space-md: calc(var(--tv-space-base) * 2);
  --tv-space-lg: calc(var(--tv-space-base) * 3);
  --tv-space-xl: calc(var(--tv-space-base) * 4);
  --tv-space-xxl: calc(var(--tv-space-base) * 5); // 内容块之间的间距
  --tv-space-xxxl: calc(var(--tv-space-base) * 8); // 容器与容器内容的间距
  --tv-space-table-x: 2px; // 表格单元格水平间距基准
  --tv-space-table-y: 1px; // 表格单元格垂直间距基准

  /** 7. 尺寸变量 size **/

  /** 尺寸系数 calc */
  --tv-size-base: 4px;

  /** 7.1 表单类组件的 height */
  --tv-size-height-xs: 24px; // mini 尺寸
  --tv-size-height-sm: 24px; // small 尺寸
  --tv-size-height-md: 28px; // medium 尺寸 - 默认
  --tv-size-height-lg: 32px; // large 尺寸
  --tv-size-height-xl: 36px; //  xLarge 尺寸

  /** 7.2 图标大小 width, height **/
  --tv-icon-size: 14px;

  /** 8. 阴影变量 box-shadow **/
  --tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); //  页面布局容器组件（layout-section）阴影
  --tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); //  页面布局容器组件（layout-section）阴影
  --tv-shadow-cell-left: -5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影
  --tv-shadow-cell-right: 5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影

  --tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层
  --tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航
  --tv-shadow-1-left: -1px 0 4px 0 rgba(0, 0, 0, 0.08);
  --tv-shadow-1-right: 1px 0 4px 0 rgba(0, 0, 0, 0.08); // 手风琴（leftmenu）

  --tv-shadow-2-up: 0 -2px 8px 0 rgba(0, 0, 0, 0.16);
  --tv-shadow-2-down: 0 2px 8px 0 rgba(0, 0, 0, 0.16); // tips提示、扩展视图
  --tv-shadow-2-left: -2px 0 8px 0 rgba(0, 0, 0, 0.16);
  --tv-shadow-2-right: 2px 0 8px 0 rgba(0, 0, 0, 0.16);

  --tv-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.08);
  --tv-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 卡片hover/选中、下拉面板
  --tv-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.08);
  --tv-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.08);

  --tv-shadow-4-up: 0 -8px 40px 0 rgba(0, 0, 0, 0.16);
  --tv-shadow-4-down: 0 8px 40px 0 rgba(0, 0, 0, 0.16); // 弹窗、气泡确认框
  --tv-shadow-4-left: -8px 0 40px 0 rgba(0, 0, 0, 0.16); // 右侧抽屉
  --tv-shadow-4-right: 8px 0 40px 0 rgba(0, 0, 0, 0.16);

  /** 9. 滚动条变量 **/
  --tv-size-scrollbar-width: 8px; // 滚动条宽度
  --tv-size-scrollbar-height: 8px; // 滚动条高度
  --tv-border-radius-scrollbar-thumb: 4px; // 滑块圆角
  --tv-color-bg-scrollbar-thumb: var(--tv-base-color-common-6); // #dbdbdb 滑块背景色
  --tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #dbdbdb 滑块hover背景色
  --tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #dbdbdb 滑块active背景色
  --tv-color-bg-scrollbar-track: var(--tv-base-color-common-1); // #fff 轨道背景色
}