/* fant组件库变量 */

/* 颜色
-------------------------- */
:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-transparent: transparent;

  --color-primary: #20A0FF;
  --color-primary-active: #1D90E6;
  --color-primary-hover: #4DB3FF;
  --color-primary-disabled: #90D0FF;
  --color-primary-background: #E9F6FF;

  --color-success: #58B929;
  --color-success-active: #4FA725;
  --color-success-hover: #79C754;
  --color-success-disabled: #ACDC94;
  --color-success-background: #EEF8EA;

  --color-danger: #DE3232;
  --color-danger-active: #C82D2D;
  --color-danger-hover: #E55B5B;
  --color-danger-disabled: #EF9999;
  --color-danger-background: #FCEBEB;

  --color-warning: #EF821E;
  --color-warning-active: #D7751B;
  --color-warning-hover: #F29B4B;
  --color-warning-disabled: #F6C08E;
  --color-warning-background: #FDF3E9;

  --color-info: #535770;
  --color-info-active: #4B4E65;
  --color-info-hover: #75798D;
  --color-info-disabled: #A9ABB8;
  --color-info-background: #EEEEF1;

  --color-link: #318BFF;
  --color-link-active: #2C7DE6;
  --color-link-hover: #5AA2FF;

  // 字体颜色 使用的场景比较模糊
  --font-color-primary: #1F375D; // 主要文字
  --font-color-regular: #4C5F7D; // 常规文字
  --font-color-secondary: #79879E; // 次要文字
  --font-color-placeholder: #A0ABBC; // 占位文字
  --font-color-disabled: #C5CBD6; // 禁用文字

  --background-1: #F0F2F6; // 背景1(按钮禁用等)
  --background-2: #F1F4F9; // 背景2(Hover等)
  --background-3: #F7F9FC; // 背景3(选项卡标签页背景等)

  // 边框
  --border-color: #D7DFEB;
  --border-solid: 1px solid var(--border-color); // 实线
  --border-dashed: 1px dashed var(--border-color); // 实线
  --border-radius-1: 2px; // 用于小尺寸控件，例如按钮等
  --border-radius-2: 4px; // 用于大尺寸控件，例如对话框等

  // shadow
  --shadow-1: 0 0px 4px rgba(166, 177, 245, 0.3); // 用于focus
  --shadow-2: 0 2px 6px rgba(31, 55, 93, 0.1); // 用于内容区

  // font
  --font-family: Helvetica Neue, Arial, Tahoma, PingFang SC, Hiragino，Microsoft YaHei;
  --font-size-1: 14px;
  --font-line-height-1: 20px;
  --font-size-2: 12px;
  --font-line-height-2: 16px;
  --font-weight-regular: 400; // regular
  --font-weight-medium: 500; // medium

  // z-index
  --index-normal: 1;
  --index-top: 1000;
  --index-popper: 2000;

  // Transition
  --all-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  --fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  --fade-linear-transition: opacity 200ms linear;
  --md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  --border-transition-base: border-color .2s cubic-bezier(.645, .045, .355, 1);
  --color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1);
}