/* =========================================================================
 * 全站主题变量（白天 / 黑夜）
 * =========================================================================
 *
 * 变量定义在 :root（= 黑夜）和 html[data-theme="light"]（= 白天）上。
 * 切换主题时只换 html[data-theme] 的值，所有用 var() 的地方自动跟着变，
 * 不用给每个元素写两套样式。
 *
 * 命名用**带横线**的形式（--bg-2 / --text-dim / --accent-2），
 * 和 style.css / admin.css 里已有的约定一致。
 * 落地页（landing.html）自己有一套内联变量（--bg2 / --dim …），
 * 那是它自己的，不受这个文件影响 —— 但两边共用同一个
 * localStorage key（mc_theme），选择是同步的。
 *
 * 亮色不是把暗色反过来 —— 背景用微暖的白，文字用深灰蓝，
 * 对比度按 WCAG AA 调过（正文 >= 7:1，次要文字 >= 4.5:1）。
 */

:root,
html[data-theme="dark"] {
  --bg: #0e1116;
  --bg-2: #161b22;
  --bg-3: #1c2330;
  --line: #2a3240;
  --text: #e6edf3;
  --text-dim: #8b98a9;
  --accent: #4c9aff;
  --accent-2: #58e6a9;
  --warn: #ffb454;
  --danger: #ff6b6b;
  --ok: #58e6a9;

  /* 派生色（半透明叠加/阴影）—— 亮色下要换掉，否则会脏 */
  --accent-soft: rgba(76, 154, 255, .14);
  --accent-softer: rgba(76, 154, 255, .08);
  --ok-soft: rgba(88, 230, 169, .14);
  --warn-soft: rgba(255, 180, 84, .13);
  --danger-soft: rgba(255, 107, 107, .15);
  --shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .25);
  --overlay: rgba(0, 0, 0, .5);
  --input-bg: #0e1116;
  --scrollbar: #2a3240;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f7f9fc;
  --bg-2: #ffffff;
  --bg-3: #eef2f8;
  --line: #dde3ec;
  --text: #16202e;
  /* 次要文字：#5b6779 在白底上只有 5.3:1，小字号（11–12px）读起来费劲。
     调到 #4a5666（约 7:1），小字也清楚。 */
  --text-dim: #4a5666;
  --accent: #1f6feb;
  --accent-2: #0f9d58;
  --warn: #b26a00;
  --danger: #d1372c;
  --ok: #0f9d58;

  --accent-soft: rgba(31, 111, 235, .10);
  --accent-softer: rgba(31, 111, 235, .06);
  --ok-soft: rgba(15, 157, 88, .12);
  --warn-soft: rgba(178, 106, 0, .12);
  --danger-soft: rgba(209, 55, 44, .10);
  --shadow: 0 8px 30px rgba(22, 32, 46, .12);
  --shadow-sm: 0 2px 12px rgba(22, 32, 46, .08);
  --overlay: rgba(22, 32, 46, .38);
  --input-bg: #ffffff;
  --scrollbar: #c6cfdd;
  color-scheme: light;
}

/* 切换时的过渡 —— 只给颜色/背景加过渡，别给布局加（会卡） */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color .26s ease, color .26s ease,
              border-color .26s ease, box-shadow .26s ease !important;
}

/* 主题切换器 */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-2);
}
.theme-switch button {
  width: 30px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.theme-switch button:hover { color: var(--text); background: var(--bg-3); }
.theme-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.theme-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 亮色下把写死的深色修正掉。
   —— 原则是**优先改变量**，这里只处理那些历史上直接写死的、
      变量覆盖不到的少数几处。 */
html[data-theme="light"] .dot.ok {
  box-shadow: 0 0 0 3px rgba(15, 157, 88, .15);
}
html[data-theme="light"] .badge.ok {
  border-color: rgba(15, 157, 88, .35);
}
html[data-theme="light"] .modal-back,
html[data-theme="light"] .mc-modal {
  background: var(--overlay);
}
html[data-theme="light"] code,
html[data-theme="light"] pre {
  background: var(--bg-3);
}

/* 滚动条（亮色下默认的浅色滚动条在深色界面里很扎眼） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: content-box; }