/** blue 穹宇蓝 */
:root ,
// 不跟随主题走的添加default-theme类
.default-theme{
/* 主题色&功能色 开始 */

  // 品牌色
  --brand-color: #3289FB;
  // 品牌色 hover
  --brand-color-hover: #5298FC;
  // 品牌色 active
  --brand-color-active: #1B6FDB;
  // 品牌色disabled
  --brand-color-disabled: #B2D2FE;
  // 品牌色focus
  --brand-color-focus: #DCE9FE;
  // 品牌色light交互状态使用
  --brand-color-light: #ECF2FF;
  // 错误色
  --error-color: #FF4040;
  // 错误色 hover
  --error-color-hover: #FF7474;
  // 错误色 active
  --error-color-active: #DB3131;
  // 错误色 disabled
  --error-color-disabled: #FFB9B0;
  // 错误色 focus
  --error-color-focus: #FFD8D2;
  // 错误色 light交互状态使用
  --error-color-light: #FFF0ED;
  // 警示色
  --warning-color: #FF9000;
  // 警示色 hover
  --warning-color-hover: #FFA938;
  // 警示色 active
  --warning-color-active: #EA8A0E;
  // 警示色 disabled
  --warning-color-disabled: #FFC882;
  // 警示色 focus
  --warning-color-focus: #FFE2C2;
  // 警示色 light交互状态使用
  --warning-color-light: #FFF4E9;
  // 成功色
  --success-color: #1FBB79;
  // 成功色 hover
  --success-color-hover: #43C78F;
  // 成功色 active
  --success-color-active: #2BA471;
  // 成功色 disabled
  --success-color-disabled: #92DAB2;
  // 成功色 focus
  --success-color-focus: #C6F3D7;
  // 成功色 light交互状态使用
  --success-color-light: #E3F9E9;

  /* 主题色&功能色 结束 */


  /* 文字&图标色彩 开始 */

  // 主文本色
  --text-color-primary: #191919;
  // 次文本色
  --text-color-secondary: #666666;
  // 占位符文字色彩
  --text-color-placeholder: #999999;
  // 文字disabled态
  --text-color-disabled: #BDBDBD;
  // 文字反色色彩
  --text-color-anti: #FFFFFF;
  // 文字反色背景 透明度
  --text-color-anti-opacity: rgba(255, 255, 255, 0.24);
  // 主题色文字色彩
  --text-color-brand: var(--brand-color);
  // 链接文字
  --text-color-link: var(--brand-color);

  /* 文字&图标色彩 结束 */


  /* 中性色彩交互token 开始 */
  
  // 主要容器背景hover 次要层级页面背景hover
  --bg-color-container-hover: #F5F7FA;
  // 主要容器背景click 次要层级页面背景click
  --bg-color-container-active: #EBEEF5;
  // 次要容器背景hover
  --bg-color-secondarycontainer-hover: #F4F6FA;
  // 次要容器背景click
  --bg-color-secondarycontainer-active: #E1E5ED;
  // 组件背景hover 主要容器之上组件背景hover
  --bg-color-component-hover: #E1E5ED;
  //组件背景active 主要容器之上组件背景active
  --bg-color-component-active: #B8BECA;
  // 组件背景disabled 主要容器之上组件背景disabled
  --bg-color-component-disabled: #F4F6FA;

  /* 中性色彩交互token 结束 */



  /* 中性色彩 开始 */

  // 默认页面底层背景
  --bg-color-page: #F4F6FA;
  // 主要容器背景 次要层级页面背景
  --bg-color-container:#FFFFFF;
  // 次要容器背景
  --bg-color-secondarycontainer: #F5F7FA;
  // 组件背景 主要容器之上组件背景
  --bg-color-component: #EBEEF5;
  // 默认组件分割线
  --component-stroke: #EBEEF5;
  // 默认边框
  --component-border: #E1E5ED;

  /* 中性色彩 结束 */

  // Element Plus 颜色变量，统一使用自定义颜色
  --el-color-primary: var(--brand-color);
  --el-color-primary-light-3: var(--brand-color-hover);
  --el-color-primary-light-5: var(--brand-color-active);
  --el-color-primary-light-7: var(--brand-color-disabled);
  --el-color-primary-light-8: var(--brand-color-focus);
  --el-color-primary-light-9: var(--brand-color-light);
  --el-color-primary-dark-2: var(--brand-color-hover);
  
  --el-color-success: var(--success-color);
  --el-color-success-light-3: var(--success-color-hover);
  --el-color-success-light-5: var(--success-color-active);
  --el-color-success-light-7: var(--success-color-disabled);
  --el-color-success-light-8: var(--success-color-focus);
  --el-color-success-light-9: var(--success-color-light);
  --el-color-success-dark-2: var(--success-color-hover);
  
  --el-color-warning: var(--warning-color);
  --el-color-warning-light-3: var(--warning-color-hover);
  --el-color-warning-light-5: var(--warning-color-active);
  --el-color-warning-light-7: var(--warning-color-disabled);
  --el-color-warning-light-8: var(--warning-color-focus);
  --el-color-warning-light-9: var(--warning-color-light);
  --el-color-warning-dark-2: var(--warning-color-hover);
  
  --el-color-danger: var(--error-color);
  --el-color-danger-light-3: var(--error-color-hover);
  --el-color-danger-light-5: var(--error-color-active);
  --el-color-danger-light-7: var(--error-color-disabled);
  --el-color-danger-light-8: var(--error-color-focus);
  --el-color-danger-light-9: var(--error-color-light);
  --el-color-danger-dark-2: var(--error-color-hover);
  
  --el-color-error: var(--error-color);
  --el-color-error-light-3: var(--error-color-hover);
  --el-color-error-light-5: var(--error-color-active);
  --el-color-error-light-7: var(--error-color-disabled);
  --el-color-error-light-8: var(--error-color-focus);
  --el-color-error-light-9: var(--error-color-light);
  --el-color-error-dark-2: var(--error-color-hover);
  
  --el-color-info: var(--text-color-secondary);
  --el-color-info-light-3: var(--text-color-secondary);
  --el-color-info-light-5: var(--text-color-placeholder);
  --el-color-info-light-7: var(--text-color-disabled);
  --el-color-info-light-8: var(--text-color-disabled);
  --el-color-info-light-9: var(--text-color-disabled);
  --el-color-info-dark-2: var(--text-color-secondary);
  
//   --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
//   --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
//   --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
//   --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
  --el-bg-color-page: var(--bg-color-page);
  --el-bg-color: var(--bg-color-container);
  --el-bg-color-overlay: var(--bg-color-secondarycontainer);
  --el-text-color-primary: var(--text-color-primary);
  --el-text-color-regular: var(--text-color-primary);
  --el-text-color-secondary: var(--text-color-secondary);
  --el-text-color-placeholder: var(--text-color-placeholder);
  --el-text-color-disabled: var(--text-color-disabled);
  --el-border-color-darker: var(--component-border);
  --el-border-color-dark: var(--component-border);
  --el-border-color: var(--component-stroke);
  --el-border-color-light: var(--component-stroke);
  --el-border-color-lighter: var(--component-stroke);
  --el-border-color-extra-light: var(--component-stroke);
  --el-fill-color-darker: var(--bg-color-container-active);
  --el-fill-color-dark: var(--bg-color-secondarycontainer);
  --el-fill-color: var(--bg-color-component);
  --el-fill-color-light: var(--bg-color-component-hover);
  --el-fill-color-lighter: var(--bg-color-container-hover);
  --el-fill-color-extra-light: var(--bg-color-page);
  --el-fill-color-blank: transparent;
//   --el-mask-color: rgba(0, 0, 0, 0.8);
//   --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
  --el-menu-base-level-padding:8px;
  --el-menu-level-padding:25px;
  --el-menu-level:0;
  --el-menu-item-height:40px;
  --el-menu-hover-bg-color:var(--brand-color-light);
  --el-text-color-secondary:var(--brand-color);
  --el-menu-text-color:var(--text-color-secondary);
  --el-menu-active-color:var(--brand-color);
  --el-menu-active-background:var(--brand-color-light);
  --el-font-size-base: 0.875rem
}