:root {
  --header-height: 72px;
  /* 🎨 基础色 */
  /* 主色 */
  --color-primary: #d89e60;
  /* 主色 20%透明 */
  --color-primary-opacity-2: #d89e6033;
  /* 辅助色1 */
  --color-secondary: #f8b310;
  /* 辅助色2 */
  --color-tertiary: #fda538;
  /* 辅助色3 */
  --color-quaternary: #009b3a;
  /* 透明色 */
  --color-transparent: #ffffff99;
  /* 背景色 */
  --color-background: #f5f3f3;
  /* 成功提示颜色 */
  --color-success: #1ce447;
  /* 错误提示颜色 */
  --color-error: #c33c3c;

  /* 📝 文字颜色（层级） */
  /* 一级文字颜色 */
  --color-text-primary: #333333;
  /* 二级文字颜色 */
  --color-text-secondary: #8f8f8f;
  /* 三级文字颜色 */
  --color-text-tertiary: #cccccd;

  /* ❗ 状态提示色 */
  /* 错误提示 */
  --color-text-error: #c33c3c;
  /* 错误提示背景 */
  --color-background-error: #3a222e;
  /* 正确提示 */
  --color-text-success: #1ce447;
  /* 正确提示背景 */
  --color-background-success: #223a2b;

  /* 📥 输入框样式 */
  /* 输入框颜色1 */
  --color-input-background: #dfdfdf;
  /* 输入框描边（边框） */
  --color-input-border: #ffffff;

  /* 🔽 下拉相关 */
  /* 下拉选项框 */
  --color-dropdown-background: #e4e3e3;
  /* 首页推广下拉 */
  --color-dropdown-homepage-promo-gradient: #c38441;

  /* 💬 弹窗 */
  /* 弹窗背景色 */
  --color-modal-background: #eeecec;
  /* 弹窗渐变 */
  --color-modal-gradient: linear-gradient(180deg, #ffffff 0%, #e9e8e6 100%);

  /* 📱 底部 Tab 栏 */
  /* 底部tab栏颜色 */
  --color-tabbar-background: #fafaf9;
  /* 底部tab栏未激活颜色 */
  --color-tabbar-inactive: #c0bbbb;

  /* 问号规则 */
  --color-faq: #1c68e2;

  /* 🌈 特殊场景 */
  /* 代理背景 */
  --color-background-agent-gradient: linear-gradient(180deg, #d1914d 0%, #b08140 100%);

  /* 导航栏 */
  --color-topbar: #24262c;

  /* 新版首页代理顶部栏 */
  --color-head-adv-v2: #90352b;

  /* 按钮文字颜色 */
  --color-btn-text: #ffffff;

  /* 充值按钮可用状态颜色 */
  --color-recharge-btn: #f5f3f3;

  /* 充值按钮边框-可用状态颜色 */
  --color-recharge-btn-border: #ddd6ca;

  /* 充值按钮禁用状态颜色 */
  --color-recharge-btn-disabled: #c7c7c7;

  /* 充值按钮选择状态颜色 */
  --color-recharge-btn-active: #e04242;

  /* 充值按钮触发状态颜色 */
  --color-recharge-emit-text: var(--color-btn-text);

  /* 新版侧边栏-vip */
  /* 对应figma——侧边栏banner1 */
  --color-side-bar-vip: linear-gradient(90deg, #d09331 0%, #e9b876 100%);

  /* 新版侧边栏-agent */
  /* 对应figma——侧边栏banner2 */
  --color-side-bar-agent: linear-gradient(270deg, #e3ac65 0%, #c97d2c 100%);

  --font-family: Geogrotesque Wide;

  /* *************** 以下是跟业务相关的配置色 *************** */
  /* VIP光边 */
  --vip-light-line: #d89e60;

  /***************** 额外处理的颜色 *****************/
  /* 注册按钮的字体颜色 */
  --color-register-btn-text: var(--color-btn-text);
  /* 登录按钮的字体颜色*/
  --color-login-btn-text: var(--color-primary);

  /* 登录按钮的字体颜色*/
  --color-head-adv-text: var(--color-btn-text);

  /* 查看全部的字体颜色  搜索.viewAll mobile.vue */
  --color-game-viewall-text: var(--color-text-primary);

  /* 侧边栏下拉banner字体颜色  搜索sideBarMobile.vue,还有sideBarPc.vue .item-text*/
  --color-side-bar-banner-text: var(--color-btn-text);
  /* 侧边栏菜单展开的激活状态，字体颜色 */
  --color-side-bar-menu-active: var(--color-btn-text);
  /* 侧边栏箭头滤镜，因为用的是图片。加filter */
  --color-side-bar-arrow-filter: brightness(0);

  /**
   * 促销详情页 查看详情按钮的svg颜色 搜索.viewDetails 看下面的svg
   */
  --color-events-view-details-svg: var(--color-btn-text);

  /* 登录模块的阴影 */
  --shadow-login-item: none;
  --shadow-login-active-item: none;
  --shadow-login-tab-wrapper: none;
  --shadow-login-close: none;
  --shadow-topbar-wallet: none;
  --shadow-common-close: none;

  /** vip卡片背景颜色 userCenterBody .m-nav-user-vip **/
  --color-vip-card-background: #51555b;

  /* 现vip等级字体颜色 userCenterBody和vipCard .current-level-tag .now  .bubble .curExp*/
  --color-vip-level-text: var(--color-btn-text);

  /** pc-vip 点击充值跳转卡片 vipPc.vue .toRecharge-text **/
  --color-to-recharge-text: var(--color-btn-text);

  /** h5-vip 卡片信息的升级提示 搜索 .upgrade-tips **/
  --color-upgrade-tips: var(--color-transparent);

  /* 激活的transaction navItem颜色 .nav-item 以及对应的svg  */
  --color-transaction-nav-item-active: var(--color-btn-text);

  /* 活动的标题字体颜色  .activity-status > .title 和 .reward-footer > .txt  还有 .reward-box > .title 以及 .rule-box > .title */
  --color-activity-title: var(--color-text-primary);

  /** 活动 返还活动的背景 搜索 .loss-dialog__body **/
  --color-activity-loss-bg: #dfdfdf;

  /* 代理的文本 Profile.vue .section-stat .tips-note>span*/
  --color-agent-text: var(--color-text-primary);

  --color-agent-tips-text: var(--color-text-primary);

  /** 任务中心领取按钮 rewardCenter.vue .claim-box **/
  --color-claim-box-btn: var(--color-btn-text);

  /** 个人中心 背景颜色 **/
  --color-profile-background: var(--color-background);

  /** 个人中心 弹窗标题背景颜色 SelfExclusion.vue **/
  --color-profile-modal-title-bg: var(--color-modal-background);

  /** 个人中心 弹窗标题字体颜色 SelfExclusion.vue **/
  --color-profile-modal-title-text: var(--color-text-primary);

  --color-disabled-text: var(--color-text-primary);

  /** 历史记录 tab激活颜色 myGames/index.vue .menu-wrapper > div > .active **/
  --color-history-tab-active: var(--color-btn-text);

  /** 充值弹窗 金额的背景颜色 LegalTender.vue .m-deposit-amout-btn-black **/
  --color-recharge-amount-bg: var(--color-recharge-btn-active);

  /* 首页 悬浮按钮活动 倒计时奖金的颜色 */
  --color-homepage-float-btn-countdown: linear-gradient(to bottom, #ffd11b, #ff9b06);

  /** pc端推出登录的字体颜色 */
  --color-logout-tips-text: var(--color-text-primary);

  /* 白色皮肤特有： */
  /* spalsh背景色 */
  --color-splash-background: #ffffff;
  /* spalsh 轨道背景色 */
  --color-splash-track-background: #cccccc;
  /* spalsh 滑块颜色 */
  --color-splash-slider-color: #d89e60;

  /**站内信 背景图 */
  --color-mail-bg: url(@/assets/mail/home_bg_light.png);

  --color-promotion-btn-bg: var(--color-btn-text);
}