/* 浅色模式默认值 */
:root {
  color-scheme: light;
  --page-bg: #ffffff;
  --card-bg-start: #fafafa;
  --card-bg-end: #ebebeb;
  --title-color: #353535;
  --text-color: #353535;
  --secondary-text: #767676;
  --code-bg: #f6f8fa;
  --border-color: #eaecef;
  --shadow-main: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
  --button-border: #a5dc86;
  --button-text: #a5dc86;
  --button-hover-bg: #a5dc86;

  --success-text: #52c41a;
  --warn-text: #faad14;
  --error-text: #ff4d4f;
  --info-text: #227af5;
  --success-bg: #f6ffed;
  --warn-bg: #fffbe6;
  --error-bg: #fff2f0;
  --info-bg: #e6f4ff;

  /* 浅色模式默认值 */
  --bg-gradient-start: #fff;
  --bg-gradient-end: #d7d7d7;
  --text-primary: #888;
  --border-color: #dedede;
  --link-color: #1677ff;
}

/* 深色模式覆盖 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page-bg: #1a1a1a;
    --card-bg-start: #2d2d2d;
    --card-bg-end: #1a1a1a;
    --title-color: #e0e0e0;
    --text-color: #cccccc;
    --secondary-text: #909090;
    --code-bg: #30363d;
    --border-color: #404040;
    --shadow-main: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
    --button-border: #6a9955;
    --button-text: #6a9955;
    --button-hover-bg: #6a9955;

    --success-text: #49aa19;
    --warn-text: #d89614;
    --error-text: #dc4446;
    --info-text: #1668dc;
    --success-bg: #162312;
    --warn-bg: #2b2111;
    --error-bg: #2c1618;
    --info-bg: #111a2c;

    --bg-gradient-start: #1a1a1a;
    --bg-gradient-end: #2d2d2d;
    --text-primary: #aaa;
    --border-color: #444;
    --link-color: #4dabff;
  }
}

body.dark-theme {
  color-scheme: dark;
  --page-bg: #1a1a1a;
  --card-bg-start: #2d2d2d;
  --card-bg-end: #1a1a1a;
  --title-color: #e0e0e0;
  --text-color: #cccccc;
  --secondary-text: #909090;
  --code-bg: #30363d;
  --border-color: #404040;
  --shadow-main: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
  --button-border: #6a9955;
  --button-text: #6a9955;
  --button-hover-bg: #6a9955;

  --success-text: #49aa19;
  --warn-text: #d89614;
  --error-text: #dc4446;
  --info-text: #1668dc;
  --success-bg: #162312;
  --warn-bg: #2b2111;
  --error-bg: #2c1618;
  --info-bg: #111a2c;

  --bg-gradient-start: #1a1a1a;
  --bg-gradient-end: #2d2d2d;
  --text-primary: #aaa;
  --border-color: #444;
  --link-color: #4dabff;
}

body.light-theme {
  color-scheme: light;
  --page-bg: #ffffff;
  --card-bg-start: #fafafa;
  --card-bg-end: #ebebeb;
  --title-color: #353535;
  --text-color: #353535;
  --secondary-text: #767676;
  --code-bg: #f6f8fa;
  --border-color: #eaecef;
  --shadow-main: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
  --button-border: #a5dc86;
  --button-text: #a5dc86;
  --button-hover-bg: #a5dc86;

  --success-text: #52c41a;
  --warn-text: #faad14;
  --error-text: #ff4d4f;
  --info-text: #227af5;
  --success-bg: #f6ffed;
  --warn-bg: #fffbe6;
  --error-bg: #fff2f0;
  --info-bg: #e6f4ff;

  --bg-gradient-start: #fff;
  --bg-gradient-end: #d7d7d7;
  --text-primary: #888;
  --border-color: #dedede;
  --link-color: #1677ff;
}

body {
  --font-family: system-ui, 'Microsoft YaHei', sans-serif;
  font-family: var(--font-family);
  background-color: var(--page-bg);
  color: var(--text-color);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease;
}

button {
  border: none;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
  color: var(--secondary-text);
  padding: 3px 6px;
  display: flex;
  align-items: center;
}

button:hover {
  background-color: var(--border-color);
}

.icon {
  fill: var(--secondary-text) !important;
  transition: all 0.3s ease;
  width: 1.5rem;
}
.icon-small {
  width: 1rem;
}
.icon-success {
  fill: var(--success-text) !important;
}
.icon-info {
  fill: var(--info-text) !important;
}
.icon-warn {
  fill: var(--warn-text) !important;
}
.icon-error {
  fill: var(--error-text) !important;
}
#toolbar {
  position: fixed;
  top: 15px;
  left: 15px;
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 15px;
  transition: all 0.3s ease;
  background-color: var(--card-bg-start);
  flex-direction: column;
  height: fit-content;
  box-shadow: var(--shadow-main);
}
#toolbar:hover {
  box-shadow: var(--shadow-hover);
}