/* ==========================================
   xBlog iTxGo🍃 - 深色主题
   style-dark.css
   
   在 style.css 之后引入本文件。
   双触发机制：
     ① 系统偏好  @media (prefers-color-scheme: dark)
     ② JS 手动   data-theme="dark" 或 class="dark-mode"
   ========================================== */

/* ==========================================================================
   PART 1 — CSS 变量覆盖
   所有使用变量的元素会自动跟随，无需额外写选择器。
   ========================================================================== */

/* ---- ① 跟随系统深色偏好 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 颜色系统 */
    --color-text-primary: #b8c4d4; /* 主文字：亮灰白 原亮度：#e2e8f0> #cbd5e1 > #b8c4d4 > #a8b6c8 */
    --color-text-secondary: #94a3b8; /* 次要文字：中灰蓝 */
    --color-text-tertiary: #64748b; /* 辅助文字：暗灰蓝 */
    --color-text-inverse: #0f1117; /* 反色文字：深底 */
    --color-accent: #4da3d4; /* 强调色：天蓝 */
    --color-accent-hover: #63b3ed; /* 强调色悬停：浅蓝 */
    --color-highlight: #f6d860; /* 高亮：黄（保持品牌色） */
    --color-highlightql: #38bdf8; /* 高亮浅蓝 */

    /* 背景色 (优化后的 Slate 蓝灰色阶，层次更分明) */
    --color-bg-page: #0b0d14; /* 页面底色：极深蓝黑 */
    --color-bg-card: #131620; /* 卡片主背景：沉稳深蓝灰 */
    --color-bg-light: #1a1e2b; /* 次级容器：比卡片明显亮一个层级，清晰可辨 */
    --color-bg-lighter: #232839; /* 按钮/标签背景 */
    --color-bg-hover: #2a3045; /* 悬停背景：柔和的交互反馈 */

    /* 边框和阴影 */
    --color-border: #252a3d;
    --color-border-light: #323850;

    /* 代码块变量 → 切换到深色组 */
    --itxgo-code-bg: var(--color-bg-card); 
    --itxgo-code-text: var(--itxgo-code-text-dark);
    --itxgo-btn-text: var(--itxgo-btn-text-dark);
    --itxgo-code-label: var(--itxgo-code-label-dark);
    --itxgo-scrollbar-thumb: var(--itxgo-scrollbar-thumb-dark);

    /* 代码块边框：原 #30363d 与背景 #30302e 亮度相近，提亮为 #4a5263 使边框可见 */
    --itxgo-border: #4a5263;

    /* 语法高亮 → 深色 */
    --token-comment: #94a3b8;
    --token-punctuation: #b8c4d4;
    --token-property: #38bdf8;
    --token-selector: #4ade80;
    --token-operator: #f87171;
    --token-keyword: #a78bfa;
    --token-function: #60a5fa;
    --token-variable: #fb923c;
  }
}

/* ---- ② JS 显式切换深色主题 ---- */
[data-theme="dark"],
.dark-mode,
.dark {
  /* 颜色系统 */
  --color-text-primary: #b8c4d4;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #0f1117;
  --color-accent: #4da3d4;
  --color-accent-hover: #63b3ed;
  --color-highlight: #f6d860;
  --color-highlightql: #38bdf8;

  /* 背景色 (优化后的 Slate 蓝灰色阶) */
  --color-bg-page: #0b0d14;
  --color-bg-card: #131620;
  --color-bg-light: #1a1e2b;
  --color-bg-lighter: #232839;
  --color-bg-hover: #2a3045;

  /* 边框 */
  --color-border: #252a3d;
  --color-border-light: #323850;

  /* 代码块 */
  --itxgo-code-bg: var(--color-bg-card); 
  --itxgo-code-text: var(--itxgo-code-text-dark);
  --itxgo-btn-text: var(--itxgo-btn-text-dark);
  --itxgo-code-label: var(--itxgo-code-label-dark);
  --itxgo-scrollbar-thumb: var(--itxgo-scrollbar-thumb-dark);

  /* 代码块边框 */
  --itxgo-border: #4a5263;

  /* 语法高亮 */
  --token-comment: #94a3b8;
  --token-punctuation: #b8c4d4;
  --token-property: #38bdf8;
  --token-selector: #4ade80;
  --token-operator: #f87171;
  --token-keyword: #a78bfa;
  --token-function: #60a5fa;
  --token-variable: #fb923c;
}

/* ==========================================================================
   PART 2 — 硬编码颜色覆盖
   style.css 中直接写死颜色值、无法通过变量自动适配的元素，在此逐一覆盖。
   每个 block 先写 media query 版，再写 JS class 版，保持双触发一致。
   ========================================================================== */

/* ------------------------------------------------------------------
   2-1  卡片容器背景
   原值：background-color: rgba(255, 255, 255, 0.95)
   选择器：.header-container, .footer-container,
           .sidebar-container, .article-container
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header-container,
  :root:not([data-theme="light"]) .footer-container,
  :root:not([data-theme="light"]) .sidebar-container,
  :root:not([data-theme="light"]) .article-container {
    background-color: rgba(19, 22, 32, 0.97); /* 对应 #131620 */
  }
}

[data-theme="dark"] .header-container,
[data-theme="dark"] .footer-container,
[data-theme="dark"] .sidebar-container,
[data-theme="dark"] .article-container,
.dark-mode .header-container,
.dark-mode .footer-container,
.dark-mode .sidebar-container,
.dark-mode .article-container {
  background-color: rgba(19, 22, 32, 0.97);
}

/* ------------------------------------------------------------------
   2-2  卡片容器三重阴影（::after 伪元素）
   原值：box-shadow: 0 0 0 11px #f5f5f5, 0 0 0 13px #fff, 0 3px 15px 4px rgba(0,0,0,.5)
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header-container::after,
  :root:not([data-theme="light"]) .footer-container::after,
  :root:not([data-theme="light"]) .sidebar-container::after,
  :root:not([data-theme="light"]) .article-container::after {
    box-shadow:
      0 0 0 11px #0e1119,
      /* 略亮于 page */ 0 0 0 13px #131620,
      /* 等于 card */ 0 3px 15px 4px rgba(0, 0, 0, 0.75);
  }
}

[data-theme="dark"] .header-container::after,
[data-theme="dark"] .footer-container::after,
[data-theme="dark"] .sidebar-container::after,
[data-theme="dark"] .article-container::after,
.dark-mode .header-container::after,
.dark-mode .footer-container::after,
.dark-mode .sidebar-container::after,
.dark-mode .article-container::after {
  box-shadow:
    0 0 0 11px #0e1119,
    0 0 0 13px #131620,
    0 3px 15px 4px rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------------------
   2-3  六边形纹理伪元素（::before）
   原值：mix-blend-mode: multiply — 在深色背景下会让纹理消失
   改为：screen 模式 + 降低 opacity
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header-container::before,
  :root:not([data-theme="light"]) .footer-container::before,
  :root:not([data-theme="light"]) .sidebar-container::before,
  :root:not([data-theme="light"]) .article-container::before,
  :root:not([data-theme="light"]) .user-dropdown::before,
  :root:not([data-theme="light"]) .modal-content::before {
    mix-blend-mode: screen;
    opacity: 0.05;
  }
}

[data-theme="dark"] .header-container::before,
[data-theme="dark"] .footer-container::before,
[data-theme="dark"] .sidebar-container::before,
[data-theme="dark"] .article-container::before,
[data-theme="dark"] .user-dropdown::before,
[data-theme="dark"] .modal-content::before,
.dark-mode .header-container::before,
.dark-mode .footer-container::before,
.dark-mode .sidebar-container::before,
.dark-mode .article-container::before,
.dark-mode .user-dropdown::before,
.dark-mode .modal-content::before {
  mix-blend-mode: screen;
  opacity: 0.05;
}

/* ------------------------------------------------------------------
   2-4  图片骨架屏
   原值：background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%)
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .article-content img.loading {
    background: linear-gradient(90deg, #1a1e2b 25%, #232839 37%, #1a1e2b 63%);
  }
}

[data-theme="dark"] .article-content img.loading,
.dark-mode .article-content img.loading {
  background: linear-gradient(90deg, #1a1e2b 25%, #232839 37%, #1a1e2b 63%);
}

/* ------------------------------------------------------------------
   2-5  灯箱
   原值（已在 style.css 中用 .dark-mode 适配，迁移至此并补全 media query）
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lightbox-overlay {
    background-color: rgba(8, 9, 14, 0.88);
  }
  :root:not([data-theme="light"]) .lightbox-overlay img {
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.85));
  }
}

[data-theme="dark"] .lightbox-overlay,
.dark-mode .lightbox-overlay {
  background-color: rgba(8, 9, 14, 0.88);
}

[data-theme="dark"] .lightbox-overlay img,
.dark-mode .lightbox-overlay img {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.85));
}

/* ------------------------------------------------------------------
   2-6  行内代码
   原值：background-color: rgba(88,166,255,0.1); color: #58a6ff
   深色下适当加强对比
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .article-content code:not(pre > code) {
    background-color: rgba(88, 166, 255, 0.14);
    color: #79b8ff;
  }
  :root:not([data-theme="light"]) .article-content code:not(pre > code):hover {
    background-color: rgba(88, 166, 255, 0.22);
  }
}

[data-theme="dark"] .article-content code:not(pre > code),
.dark-mode .article-content code:not(pre > code) {
  background-color: rgba(88, 166, 255, 0.14);
  color: #79b8ff;
}

[data-theme="dark"] .article-content code:not(pre > code):hover,
.dark-mode .article-content code:not(pre > code):hover {
  background-color: rgba(88, 166, 255, 0.22);
}

/* ------------------------------------------------------------------
   2-7  表格
   层次：table #131620 → th #1a1e2b(+5) → hover #2a3045(+14) → 外框/分隔 #232839
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table {
    background: #131620; /* 同卡片背景，融入卡片 */
    box-shadow: 0 0 0 1px #2a3045; /* 外框用悬停色，表格轮廓清晰 */
  }
  :root:not([data-theme="light"]) th {
    background: #1a1e2b; /* 与次级容器对齐 */
    color: #c8d3e8; /* 略亮于正文，强调表头 */
    border-bottom-color: #2a3045; /* 表头下分隔线，清晰可见 */
  }
  :root:not([data-theme="light"]) td {
    border-bottom-color: #232839; /* 行间/列间分隔线：介于次级和卡片之间 */
    border-right-color: #232839;
  }
  :root:not([data-theme="light"]) tbody tr:hover {
    background: #2a3045; /* 与悬停色对齐 */
  }
}

[data-theme="dark"] table,
.dark-mode table {
  background: #131620;
  box-shadow: 0 0 0 1px #2a3045;
}

[data-theme="dark"] th,
.dark-mode th {
  background: #1a1e2b;
  color: #c8d3e8;
  border-bottom-color: #2a3045;
}

[data-theme="dark"] td,
.dark-mode td {
  border-bottom-color: #232839;
  border-right-color: #232839;
}

[data-theme="dark"] tbody tr:hover,
.dark-mode tbody tr:hover {
  background: #2a3045;
}

/* ------------------------------------------------------------------
   2-8  分割线 hr
   原值（style.css 已有 media query）：background-color: #ddd / #444
   迁移至此，补全 JS 切换版，原文件中的 @media 块可删除
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) hr {
    background-color: #252a3d;
  }
}

[data-theme="dark"] hr,
.dark-mode hr {
  background-color: #252a3d;
}

/* ------------------------------------------------------------------
   2-9  通用表单输入框
   深色下需给 input/textarea/select 加深色背景，否则白底刺眼
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) form input[type="text"],
  :root:not([data-theme="light"]) form input[type="email"],
  :root:not([data-theme="light"]) form input[type="password"],
  :root:not([data-theme="light"]) form textarea,
  :root:not([data-theme="light"]) form select {
    background-color: #1a1e2b;
    color: var(--color-text-primary);
  }
}

[data-theme="dark"] form input[type="text"],
[data-theme="dark"] form input[type="email"],
[data-theme="dark"] form input[type="password"],
[data-theme="dark"] form textarea,
[data-theme="dark"] form select,
.dark-mode form input[type="text"],
.dark-mode form input[type="email"],
.dark-mode form input[type="password"],
.dark-mode form textarea,
.dark-mode form select {
  background-color: #1a1e2b;
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------
   2-10  搜索框
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .search-form input[type="text"] {
    background-color: var(--color-bg-lighter);
    color: var(--color-text-primary);
  }
  :root:not([data-theme="light"]) .search-form button[type="submit"] {
    color: #64748b;
  }
  :root:not([data-theme="light"]) .search-form:hover button[type="submit"],
  :root:not([data-theme="light"])
    .search-form:focus-within
    button[type="submit"] {
    color: #0f1117; /* hover 时按钮变高亮黄背景，图标用深色 */
  }
}

[data-theme="dark"] .search-form input[type="text"],
.dark-mode .search-form input[type="text"] {
  background-color: var(--color-bg-lighter);
  color: var(--color-text-primary);
}

[data-theme="dark"] .search-form button[type="submit"],
.dark-mode .search-form button[type="submit"] {
  color: #64748b;
}

[data-theme="dark"] .search-form:hover button[type="submit"],
[data-theme="dark"] .search-form:focus-within button[type="submit"],
.dark-mode .search-form:hover button[type="submit"],
.dark-mode .search-form:focus-within button[type="submit"] {
  color: #0f1117;
}

/* ------------------------------------------------------------------
   2-11  模态框内容背景
   原值：background-color: rgba(255, 255, 255, 1)
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-content {
    background-color: #131620;
  }
  /* 三重阴影同步 */
  :root:not([data-theme="light"]) .modal-content::after {
    box-shadow:
      0 0 0 11px #0e1119,
      0 0 0 13px #131620,
      0 3px 15px 4px rgba(0, 0, 0, 0.75);
  }
}

[data-theme="dark"] .modal-content,
.dark-mode .modal-content {
  background-color: #131620;
}

[data-theme="dark"] .modal-content::after,
.dark-mode .modal-content::after {
  box-shadow:
    0 0 0 11px #0e1119,
    0 0 0 13px #131620,
    0 3px 15px 4px rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------------------
   2-12  模态框输入框
   原值：border: 2px solid #ccc（硬编码）
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-content form input[type="text"],
  :root:not([data-theme="light"]) .modal-content form input[type="email"],
  :root:not([data-theme="light"]) .modal-content form input[type="password"],
  :root:not([data-theme="light"]) .modal-content form textarea,
  :root:not([data-theme="light"]) .modal-content form select {
    background-color: #1a1e2b;
    color: var(--color-text-primary);
    border-color: #323850;
  }
}

[data-theme="dark"] .modal-content form input[type="text"],
[data-theme="dark"] .modal-content form input[type="email"],
[data-theme="dark"] .modal-content form input[type="password"],
[data-theme="dark"] .modal-content form textarea,
[data-theme="dark"] .modal-content form select,
.dark-mode .modal-content form input[type="text"],
.dark-mode .modal-content form input[type="email"],
.dark-mode .modal-content form input[type="password"],
.dark-mode .modal-content form textarea,
.dark-mode .modal-content form select {
  background-color: #1a1e2b;
  color: var(--color-text-primary);
  border-color: #323850;
}

/* ------------------------------------------------------------------
   2-13  用户下拉菜单
   原值：background-color: var(--color-bg-card) ← 已是变量（自动适配）
   但显示态 ::after 阴影硬编码了 #f5f5f5 / #fff
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])
    .user-menu-container:hover
    .user-dropdown::after {
    box-shadow:
      0 0 0 11px #0e1119,
      0 0 0 13px #131620,
      0 3px 15px 4px rgba(0, 0, 0, 0.75);
  }
}

[data-theme="dark"] .user-menu-container:hover .user-dropdown::after,
.dark-mode .user-menu-container:hover .user-dropdown::after {
  box-shadow:
    0 0 0 11px #0e1119,
    0 0 0 13px #131620,
    0 3px 15px 4px rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------------------
   2-14  评论计数徽章边框
   原值：border: 2px solid white（白色边框在深色下过亮）
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge {
    border-color: #131620;
  }
}

[data-theme="dark"] .badge,
.dark-mode .badge {
  border-color: #131620;
}

/* ------------------------------------------------------------------
   2-15  滚动控制按钮
   原值：color: #bbb（浅灰）深色下对比度不足，用更低调的色
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scroll-btn {
    color: #3d4460;
  }
}

[data-theme="dark"] .scroll-btn,
.dark-mode .scroll-btn {
  color: #3d4460;
}

/* ------------------------------------------------------------------
   2-16  提示信息 .alert
   原值：.alert-success color #2d5a2d / bg #e6f4e6 / border #c3e6c3
         .alert-error  color #8b3a3a / bg #f8d7da / border #f1b0b7
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-success {
    color: #86efac;
    background-color: #14291e;
    border-color: #166534;
  }
  :root:not([data-theme="light"]) .alert-error {
    color: #fca5a5;
    background-color: #2d1414;
    border-color: #7f1d1d;
  }
}

[data-theme="dark"] .alert-success,
.dark-mode .alert-success {
  color: #86efac;
  background-color: #14291e;
  border-color: #166534;
}

[data-theme="dark"] .alert-error,
.dark-mode .alert-error {
  color: #fca5a5;
  background-color: #2d1414;
  border-color: #7f1d1d;
}

/* ------------------------------------------------------------------
   2-17  移动端降级渐变背景 body.no-webgl-bg
   原值：浅色冷绿调渐变
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.no-webgl-bg {
    background: linear-gradient(
      135deg,
      #0b0d14 0%,
      #0e1119 35%,
      #131620 65%,
      #0b0d14 100%
    );
  }
}

[data-theme="dark"] body.no-webgl-bg,
.dark-mode body.no-webgl-bg {
  background: linear-gradient(
    135deg,
    #0b0d14 0%,
    #0e1119 35%,
    #131620 65%,
    #0b0d14 100%
  );
}

/* ------------------------------------------------------------------
2-18  代码块折叠状态遮罩 (itxgo-collapsed)
原浅色模式依赖 var(--itxgo-code-bg) 生成渐变。
若深色模式下该变量解析异常，会导致遮罩消失。
此处显式指定深色背景色（使用 --color-bg-card）以确保渐变遮罩正常显示。
------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .article-content pre.itxgo-collapsed::after {
    background: linear-gradient(to bottom, transparent, var(--color-bg-card) 70%);
  }
}
[data-theme="dark"] .article-content pre.itxgo-collapsed::after,
.dark-mode .article-content pre.itxgo-collapsed::after {
  background: linear-gradient(to bottom, transparent, var(--color-bg-card) 70%);
}