/* ------------------------------------
 * Default Theme - Dark Mode
 *
 * 通过 [data-theme="dark"] 属性切换
 * 优先级：用户手动切换 > 系统偏好
 * --------------------------------- */

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: #1a1a1a;
  color: #c9c9c9;
}

[data-theme="dark"] a {
  color: #6e8de0;
}
[data-theme="dark"] a:hover,
[data-theme="dark"] a:active {
  color: #c9c9c9;
}

/* 代码块 */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: #2a2a2a;
}
[data-theme="dark"] code {
  color: #e57373;
}
[data-theme="dark"] pre code {
  color: #c9c9c9;
}

/* 引用 */
[data-theme="dark"] blockquote {
  border-left-color: #444;
  color: #999;
}

/* 表格 */
[data-theme="dark"] table {
  border-color: #333;
}
[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: #333;
}
[data-theme="dark"] table th {
  background: #2a2a2a;
}

/* 表单 */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea {
  background-color: #2a2a2a;
  border-color: #444;
  color: #c9c9c9;
}
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="url"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus {
  border-color: #6e8de0;
}

/* 链接下划线颜色 */
[data-theme="dark"] .post-meta a,
[data-theme="dark"] .post-content a,
[data-theme="dark"] .widget a,
[data-theme="dark"] .comment-content a {
  border-bottom-color: #444;
}
[data-theme="dark"] .post-meta a:hover,
[data-theme="dark"] .post-content a:hover,
[data-theme="dark"] .widget a:hover,
[data-theme="dark"] .comment-content a:hover {
  border-bottom-color: transparent;
}

/* Header */
[data-theme="dark"] #header {
  border-bottom-color: #333;
}
[data-theme="dark"] #logo {
  color: #e0e0e0;
}
[data-theme="dark"] .description {
  color: #888;
}

/* 导航菜单 */
[data-theme="dark"] #nav-menu a {
  border-color: #333;
  color: #c9c9c9;
}
[data-theme="dark"] #nav-menu a:hover,
[data-theme="dark"] #nav-menu .current {
  background: #2a2a2a;
}

/* 文章列表 */
[data-theme="dark"] .post {
  border-bottom-color: #333;
}
[data-theme="dark"] .post-title {
  color: #e0e0e0;
}
[data-theme="dark"] .post-title a {
  color: #e0e0e0;
}
[data-theme="dark"] .post-meta {
  color: #888;
}
[data-theme="dark"] .post-meta li {
  border-left-color: #333;
}

/* 上下篇 */
[data-theme="dark"] .post-near {
  color: #888;
}

/* 归档标题 */
[data-theme="dark"] .archive-title {
  color: #888;
}

/* 分页 */
[data-theme="dark"] .page-navigator a:hover {
  background: #2a2a2a;
}
[data-theme="dark"] .page-navigator .current a {
  color: #c9c9c9;
  background: #2a2a2a;
}

/* 评论 */
[data-theme="dark"] .comment-list li {
  border-color: #333;
}
[data-theme="dark"] .comment-list li.comment-level-odd {
  background: #222;
}
[data-theme="dark"] .comment-list li.comment-level-even {
  background: #1a1a1a;
}
[data-theme="dark"] .comment-list li.comment-by-author {
  background: #2a2618;
}
[data-theme="dark"] .comment-list .respond {
  border-top-color: #333;
}
[data-theme="dark"] .comment-meta a {
  color: #888;
}
[data-theme="dark"] .comment-author {
  color: #c9c9c9;
}

/* 侧边栏 */
[data-theme="dark"] #secondary {
  color: #c9c9c9;
}

/* Footer */
[data-theme="dark"] #footer {
  color: #888;
}

/* 内容区图片链接背景 */
[data-theme="dark"] .post-content a img,
[data-theme="dark"] .comment-content a img {
  background: #1a1a1a;
}
[data-theme="dark"] .post-content hr,
[data-theme="dark"] .comment-content hr {
  border-color: #444;
}

/* ------------------------------------
 * 主题切换按钮
 * --------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid #EEE;
  border-radius: 4px;
  background: transparent;
  color: #444;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.theme-toggle:hover {
  background: #F6F6F6;
}
.theme-toggle:focus {
  outline: 2px solid #3354AA;
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
/* 默认显示太阳图标（浅色模式下点击切换到深色） */
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle {
  border-color: #444;
  color: #c9c9c9;
}
[data-theme="dark"] .theme-toggle:hover {
  background: #2a2a2a;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* ------------------------------------
 * 返回顶部按钮
 * --------------------------------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #EEE;
  border-radius: 50%;
  background: #FFF;
  color: #444;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s,
              background-color 0.2s, color 0.2s, border-color 0.2s;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: #F6F6F6;
  border-color: #ddd;
}
.back-to-top:focus {
  outline: 2px solid #3354AA;
  outline-offset: 2px;
}
.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

[data-theme="dark"] .back-to-top {
  background: #2a2a2a;
  border-color: #444;
  color: #c9c9c9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .back-to-top:hover {
  background: #333;
  border-color: #555;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
  .theme-toggle {
    width: 32px;
    height: 32px;
  }
}

/* 尊重系统偏好：未手动设置时跟随系统 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) body {
    background-color: #1a1a1a;
    color: #c9c9c9;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) a {
    color: #6e8de0;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) a:hover,
  :root:not([data-theme="light"]):not([data-theme="dark"]) a:active {
    color: #c9c9c9;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) #header {
    border-bottom-color: #333;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) #logo {
    color: #e0e0e0;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .description {
    color: #888;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) #nav-menu a {
    border-color: #333;
    color: #c9c9c9;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) #nav-menu a:hover,
  :root:not([data-theme="light"]):not([data-theme="dark"]) #nav-menu .current {
    background: #2a2a2a;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .post {
    border-bottom-color: #333;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .post-title,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .post-title a {
    color: #e0e0e0;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .post-meta {
    color: #888;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .post-meta li {
    border-left-color: #333;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) #footer {
    color: #888;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) pre,
  :root:not([data-theme="light"]):not([data-theme="dark"]) code {
    background: #2a2a2a;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) pre code {
    color: #c9c9c9;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .comment-list li {
    border-color: #333;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .comment-list li.comment-level-odd {
    background: #222;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .comment-list li.comment-level-even {
    background: #1a1a1a;
  }
  /* 系统暗色时，按钮显示太阳图标 */
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun {
    display: block;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon {
    display: none;
  }
}