/** @namespace*/
/** @unit */
/** @color */
/** @text-color */
/** @border */
/** @shadow */
/** @dark */
/* @color */
/* @text-color */
/* @border */
/* @shadow */
/** @gap */
/** @radius */
/** @font-size */
/** @color */
.bg-primary {
  background-color: #409eff;
}
:where(html.dark) .bg-primary {
  background: #bd93f9;
}

.bg-success {
  background-color: #67c23a;
}
:where(html.dark) .bg-success {
  background: #50fa7b;
}

.bg-warning {
  background-color: #e6a23c;
}
:where(html.dark) .bg-warning {
  background: #f1fa8c;
}

.bg-danger {
  background-color: #f56c6c;
}
:where(html.dark) .bg-danger {
  background: #ff5555;
}

.bg-info {
  background-color: #909399;
}
:where(html.dark) .bg-info {
  background: #8be9fd;
}

.bg-page {
  background-color: #f2f3f5;
}
:where(html.dark) .bg-page {
  background: #282a36;
}

/** @text-color */
:where(html.dark) .text-primary {
  color: #f8f8f2;
}

.color-primary {
  color: #409eff;
}
:where(html.dark) .color-primary {
  color: #bd93f9;
}

.color-regular {
  color: #606266;
}
:where(html.dark) .color-regular {
  color: #e0e0e0;
}

.color-secondary {
  color: #909399;
}
:where(html.dark) .color-secondary {
  color: #bfbfbf;
}

.color-placeholder {
  color: #a8abb2;
}
:where(html.dark) .color-placeholder {
  color: #6272a4;
}

.color-disabled {
  color: #c0c4cc;
}
:where(html.dark) .color-disabled {
  color: #44475a;
}

/** @border */
.border-darker {
  border-color: #cdd0d6;
}
:where(html.dark) .border-darker {
  border-color: #44475a;
}

.border-dark {
  border-color: #d4d7de;
}
:where(html.dark) .border-dark {
  border-color: #505361;
}

.border-base {
  border-color: #dcdfe6;
}
:where(html.dark) .border-base {
  border-color: #6272a4;
}

.border-light {
  border-color: #e4e7ed;
}
:where(html.dark) .border-light {
  border-color: #707382;
}

.border-lighter {
  border-color: #ebeef5;
}
:where(html.dark) .border-lighter {
  border-color: #808394;
}

.border-extra-light {
  border-color: #f2f6fc;
}
:where(html.dark) .border-extra-light {
  border-color: #9093a4;
}

/** @radius */
.radius-small {
  border-radius: 2px;
}

.radius-large {
  border-radius: 4px;
}

.radius-round {
  border-radius: 20px;
}

/** @shadow */
.basic-shadow {
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
}
:where(html.dark) .basic-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.light-shadow {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
:where(html.dark) .light-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.lighter-shadow {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
}
:where(html.dark) .lighter-shadow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.dark-shadow {
  box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
}
:where(html.dark) .dark-shadow {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
}

.hover-basic-shadow:hover {
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
}
:where(html.dark) .hover-basic-shadow:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hover-light-shadow:hover {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
:where(html.dark) .hover-light-shadow:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.hover-lighter-shadow:hover {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
}
:where(html.dark) .hover-lighter-shadow:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.hover-dark-shadow:hover {
  box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
}
:where(html.dark) .hover-dark-shadow:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
}

/** @font-family */
* {
  font-family: "PingFang SC", "Microsoft Yahei";
}

.font-base {
  font-family: "PingFang SC", "Microsoft Yahei";
}

.font-kaiti {
  font-family: "STKaiti", "KaiTi";
}

.font-ms {
  font-family: "Comic Sans MS";
}

/*# sourceMappingURL=theme.css.map */