/* ==========================================
   xBlog - 深色主题
   assets/style-dark.css
   在 style-light.css 之后引入。
   双触发：① @media (prefers-color-scheme: dark) ② data-theme="dark" / .dark-mode
   ========================================== */

/* ========== PART 1 — CSS 变量覆盖 ========== */

/* ---- ① 跟随系统深色偏好 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 颜色系统 */
    --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;

    /* 背景色 */
    --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: #131620;
    --shadow-card-dark:
      0 0 0 11px #0b0d14,
      0 0 0 13px #131620,
      0 4px 20px 4px rgba(0, 0, 0, 0.6);

    /* 代码块变量 → 切换到深色组 */
    --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;
  }
}

/* ---- ② 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;

  /* 背景色 */
  --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: #131620;
  --shadow-card-dark:
    0 0 0 11px #0b0d14,
    0 0 0 13px #131620,
    0 4px 20px 4px rgba(0, 0, 0, 0.6);

  /* 代码块 */
  --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 — 硬编码颜色覆盖（每项先 media 版，再 class 版） ========== */

/* 2-1 卡片容器背景 */
@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);
  }
}

[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 卡片容器三重阴影（见 --shadow-card-dark） */
@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:
      var(--shadow-card-dark);
  }
}

[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:
    var(--shadow-card-dark);
}

/* 2-3 六边形纹理：multiply → screen，降低不透明度 */
@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 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='34.64'%3E%3Cg stroke='%23fff' stroke-width='1.1' stroke-opacity='0.18'%3E%3Cline x1='30.0' y1='34.64' x2='10.0' y2='34.64'%2F%3E%3Cline x1='10.0' y1='34.64' x2='0.0' y2='17.32'%2F%3E%3Cline x1='0.0' y1='17.32' x2='10.0' y2='0.0'%2F%3E%3Cline x1='10.0' y1='0.0' x2='30.0' y2='0.0'%2F%3E%3Cline x1='70.0' y1='0.0' x2='60.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='40.0' y2='17.32'%2F%3E%3Cline x1='40.0' y1='17.32' x2='30.0' y2='0.0'%2F%3E%3Cline x1='30.0' y1='34.64' x2='40.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='70.0' y2='34.64'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mix-blend-mode: screen;
    opacity: 0.18;
  }
}

[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 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='34.64'%3E%3Cg stroke='%23fff' stroke-width='1.1' stroke-opacity='0.18'%3E%3Cline x1='30.0' y1='34.64' x2='10.0' y2='34.64'%2F%3E%3Cline x1='10.0' y1='34.64' x2='0.0' y2='17.32'%2F%3E%3Cline x1='0.0' y1='17.32' x2='10.0' y2='0.0'%2F%3E%3Cline x1='10.0' y1='0.0' x2='30.0' y2='0.0'%2F%3E%3Cline x1='70.0' y1='0.0' x2='60.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='40.0' y2='17.32'%2F%3E%3Cline x1='40.0' y1='17.32' x2='30.0' y2='0.0'%2F%3E%3Cline x1='30.0' y1='34.64' x2='40.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='70.0' y2='34.64'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mix-blend-mode: screen;
  opacity: 0.18;
}

/* 2-4 图片骨架屏 */
@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 灯箱 */
@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 行内代码 */
@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 表格 */
@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 */
@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 通用表单输入框 */
@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;
  }
}

[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 模态框内容背景与阴影 */
@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:
      var(--shadow-card-dark);
  }
}

[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:
    var(--shadow-card-dark);
}

/* 2-12 模态框输入框 */
@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: var(--color-border);
  }

  :root:not([data-theme="light"]) .modal-content form input[type="text"]:focus,
  :root:not([data-theme="light"]) .modal-content form input[type="email"]:focus,
  :root:not([data-theme="light"]) .modal-content form input[type="password"]:focus,
  :root:not([data-theme="light"]) .modal-content form textarea:focus,
  :root:not([data-theme="light"]) .modal-content form select:focus {
    outline: none;
    border-color: #ffcc22;
  }
}

[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: var(--color-border);
}

[data-theme="dark"] .modal-content form input[type="text"]:focus,
[data-theme="dark"] .modal-content form input[type="email"]:focus,
[data-theme="dark"] .modal-content form input[type="password"]:focus,
[data-theme="dark"] .modal-content form textarea:focus,
[data-theme="dark"] .modal-content form select:focus,
.dark-mode .modal-content form input[type="text"]:focus,
.dark-mode .modal-content form input[type="email"]:focus,
.dark-mode .modal-content form input[type="password"]:focus,
.dark-mode .modal-content form textarea:focus,
.dark-mode .modal-content form select:focus {
  outline: none;
  border-color: #ffcc22;
}

/* 2-13 用户下拉菜单阴影 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])
    .user-menu-container:hover
    .user-dropdown::after {
    box-shadow:
      var(--shadow-card-dark);
  }
}

[data-theme="dark"] .user-menu-container:hover .user-dropdown::after,
.dark-mode .user-menu-container:hover .user-dropdown::after {
  box-shadow:
    var(--shadow-card-dark);
}

/* 2-14 评论计数徽章边框 */
@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 滚动控制按钮 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scroll-btn {
    color: var(--color-text-tertiary);
  }
}

[data-theme="dark"] .scroll-btn,
.dark-mode .scroll-btn {
  color: var(--color-text-tertiary);
}

/* 2-16 提示信息 alert */
@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 代码块折叠状态遮罩 */
@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%);
}