// stylelint-disable scss/at-function-named-arguments
$_bg-page: #f6f8fc;
$_bg-page-dark: #151a30;

@use 'sass:color';

html {
  --my-bg-color-page: #{$_bg-page};
  --my-box-shadow-fill: 0 0 10px #e3e9f6;
  --my-bg-color-hover: #{var(--el-fill-color)};
  // 动态的
  --my-change-1x-size: 1px; // 根据 globalSize 动态改变大小 small————1px， default————2px， large————3px
  --my-change-2x-size: 2px; // 根据 globalSize 动态改变大小 small————2px， default————4px， large————6px
  --my-change-3x-size: 3px; // 根据 globalSize 动态改变大小 small————3px， default————6px， large————9px
  --my-change-4x-size: 4px; // 根据 globalSize 动态改变大小 small————4px， default————8px， large————12px
  --my-change-base8-4x-space-width: calc(var(--my-change-4x-size) + 4px);
  --my-change-base12-2x-size: calc(var(--my-change-2x-size) + 10px);
  // 紫色
  --el-color-violet: #b464f6;
  --el-color-violet-light-3: #cb93f9;
  --el-color-violet-light-5: #dab2fb;
  --el-color-violet-light-7: #e9d1fc;
  --el-color-violet-light-8: #f0e0fd;
  --el-color-violet-light-9: #f8f0fe;
  --el-color-violet-dark-2: #9050c5;

  // 青色
  --el-color-cyan: #15d7d4;
  --el-color-cyan-light-3: #5be3e1;
  --el-color-cyan-light-5: #8aebea;
  --el-color-cyan-light-7: #b9f3f2;
  --el-color-cyan-light-8: #d0f7f6;
  --el-color-cyan-light-9: #e8fbfb;
  // 蓝色
  --el-color-blue: #409eff;
  --el-color-blue-light-3: #79bbff;
  --el-color-blue-light-5: #a0cfff;
  --el-color-blue-light-7: #c6e2ff;
  --el-color-blue-light-8: #d9ecff;
  --el-color-blue-light-9: #ecf5ff;
  --el-color-blue-dark-2: #337ecc;

  // 黄色
  --el-color-yellow: #fa6f2a;
  --el-color-yellow-light-3: #fd8d59;
  --el-color-yellow-light-5: #ffab88;
  --el-color-yellow-light-7: #ffc9b7;
  --el-color-yellow-light-8: #ffe7e5;
  --el-color-yellow-light-9: #f9f7f6;
  --el-color-blue-yellow-dark-2: #ca7246;
}

html.dark {
  --my-bg-color-page: #{$_bg-page-dark};
  --my-box-shadow-fill: 0 0 10px #13172d;
  --my-bg-color-hover: #{color.scale($_bg-page-dark, $lightness: 16%)};
  // 紫色
  --el-color-violet: #8e41cc;
  --el-color-violet-light-3: #6e3aa4;
  --el-color-violet-light-5: #583689;
  --el-color-violet-light-7: #42326e;
  --el-color-violet-light-8: #382f60;
  --el-color-violet-light-9: #2d2d53;
  --el-color-violet-dark-2: #a567d6;

  // 青色
  --el-color-cyan: #1ebab8;
  --el-color-cyan-light-3: #1f8f96;
  --el-color-cyan-light-5: #20737f;
  --el-color-cyan-light-7: #215668;
  --el-color-cyan-light-8: #21485c;
  --el-color-cyan-light-9: #223951;
  --el-color-cyan-dark-2: #4bc8c6;

  // 蓝色
  --el-color-blue: #409eff;
  --el-color-blue-light-3: #3375b9;
  --el-color-blue-light-5: #2a598a;
  --el-color-blue-light-7: #213d5b;
  --el-color-blue-light-8: #1d3043;
  --el-color-blue-light-9: #18222c;
  --el-color-blue-dark-2: #66b1ff;

  // 黄色
  --el-color-yellow: #d45a1d;
  --el-color-yellow-light-3: #a84b2e;
  --el-color-yellow-light-5: #7d3c3f;
  --el-color-yellow-light-7: #522d4f;
  --el-color-yellow-light-8: #271e36;
  --el-color-yellow-light-9: #151a30;
  --el-color-blue-yellow-dark-2: #aa6542;
}
