:root {
  /* --- 重新映射核心变量为深色版 --- */
  --color-primary: var(--color-primary-dark);
  --color-text: var(--color-text-dark);
  --color-background: var(--color-background-dark);
  --color-background-code: var(--color-background-code-dark);
  --color-background-blockquote: var(--color-background-blockquote-dark);
  --color-border-blockquote: var(--color-border-blockquote-dark);
  
  /* 手动补充深色模式下的边框颜色 (main.css 中未定义对应的 dark 变量) */
  --color-border: #333333;
  --color-text-muted: #888888;
}

/* 告诉浏览器这个页面现在是深色的 (自动变黑滚动条等) */
html {
  color-scheme: dark;
}

/* --- 体验优化 --- */
/* 图片在深色背景下通常太亮，稍微降低亮度，鼠标悬停时恢复 */
img {
  opacity: 0.85;
  transition: opacity 0.3s ease-in-out;
}
img:hover {
  opacity: 1;
}

/* --- 修复深色模式下的菜单高亮 --- */
/* 逻辑：浅色模式是“黑底白字”，深色模式我们改成“浅灰底黑字” */
.sidebar nav a.active {
  background: #e0e0e0 !important; /* 浅灰色背景，醒目但不刺眼 */
  color: #000000 !important;      /* 黑色文字 */
}

/* 鼠标悬停在已激活菜单时的效果 */
.sidebar nav a.active:hover {
  background: #ffffff !important; /* 悬停时变更亮 */
  color: #000000 !important;
}

/* --- 修复深色模式下的图标颜色 --- */
/* 原理：把黑色的图标图片进行“反相”，变成白色 */
.social-icons img, 
.icon-style {
  filter: invert(1) brightness(1.5);
}

/* --- 修复后的深色模式翻页样式 --- */
/* 注意：这里去掉了 .dark-mode 前缀，直接让它跟随 :root 的变量变化 */

/* 深色模式适配 */
.post-nav {
    border-color: #2a2a2a;
    background-color: transparent !important;
}

.post-nav-item {
    background-color: transparent !important;
}

.post-nav-item.prev {
    border-right-color: #2a2a2a;
}

.nav-label { color: #666; }
.nav-title { color: #ccc; }

/* 深色模式下的划过效果 */
.post-nav-item:hover {
    background-color: #252525 !important;
}

.post-nav-item .nav-title {
    background-image: linear-gradient(transparent 70%, rgba(255, 243, 212, 0.1) 0);
}

.post-nav-item:hover .nav-title {
    color: #ffffff;
    background-size: 100% 100%;
}

/* ======================================================
   深色模式适配：文章列表页与归档页
   ====================================================== */

/* 1. 基础文字颜色调整 */
.list-title, 
.archive-year, 
.post-title a, 
.archive-list li a {
    color: #e0e0e0; /* 浅灰色文字，防止纯白刺眼 */
}


.list-subtitle {
    color: #888;
}
/* 2. 副标题、日期与摘要 */

.post-meta, 
.post-summary,
.archive-list time {
    color: #a0a0a0; /* 较暗的灰色 */
}

/* 3. 统计信息中的高亮文字 */
.list-subtitle strong {
    color: #ffffff;
}

.list-subtitle span {
    color: #d1d1d1;
}

/* 4. 核心：标题划过效果适配 */
/* 在深色模式下，我们将黄色底色稍微调暗或增加一点透明度，避免视觉冲击太强 */
.post-title a, 
.archive-list li a {
    background-image: linear-gradient(transparent 70%, rgba(255, 243, 212, 0.15) 0);
}

/* 悬停时的状态 */
.post-item:hover .post-title a, 
.archive-list li:hover a {
    color: #ffffff;
    background-size: 100% 100%;
}

/* 5. 分割线处理（如果有的话） */
.post-item {
    border-color: #333; /* 极暗的线 */
}

.archive-list li {
    border-color: #2a2a2a;
}

/* 6. 阅读更多箭头 */
.read-more {
    color: #ff6b6b; /* 稍亮的红色，在深色背景下更醒目 */
}

/* 7. 草稿标签 */
.draft-label {
    background: #444;
    color: #bbb;
}

/* 深色模式：分页按钮适配 */
.pagination {
    border-top-color: #2a2a2a; /* 调暗分割线 */
}

.pagination a {
    color: #e0e0e0;
    /* 深色模式下底色透明度调低 */
    background-image: linear-gradient(transparent 70%, rgba(255, 243, 212, 0.15) 0);
}

.pagination a:hover {
    color: #ffffff;
    background-size: 100% 100%;
}

.post-title { color: #e0e0e0; }
.post-meta { color: #888; }
.content { color: #a0a0a0; }
.post-nav { border-color: #2a2a2a; }

/* 深色模式：极其柔和的文字与线 */
.post-footer-divider {
    color: #555; /* 文字变暗 */
}

.post-footer-divider::before,
.post-footer-divider::after {
    /* 线条变为深灰色，不再刺眼 */
    background-image: linear-gradient(to right, #333 50%, rgba(255,255,255,0) 0%) !important;
}