/* ===========================================================
   Global light / dark theme
   - 开关：html[data-theme="dark"]
   - 首屏无闪烁：<head> 里的内联脚本在渲染前就写好 data-theme
   - 绝大多数组件走 CSS 变量；少数硬编码色值在这里单独兜底
   =========================================================== */

/* ---------- Dark tokens ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #FF6A55;
  --color-primary-rgb: 255, 106, 85;
  --color-primary-dark: #E74B3B;
  --color-primary-bg: rgba(255, 106, 85, 0.16);

  --color-bg: #0E1015;
  --c-panel: #171A21;
  --color-surface: #1C2029;
  --color-surface-2: #232833;

  --color-text: #E8EAF0;               /* gray-100 级正文 */
  --color-text-strong: #F3F4F7;
  --color-text-secondary: #C7CBD4;
  --color-text-muted: #9AA1AD;
  --color-text-light: #7C838F;
  --color-text-faint: #565E6B;
  --color-border: #2A2F3A;
  --color-border-strong: #3A4150;

  --shadow-dropdown: 0 14px 30px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, .55);
}

/* ---------- 主题切换按钮 ---------- */
.theme-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text-muted); transition: color .15s, border-color .15s, background .15s;
}
.theme-switch svg { width: 17px; height: 17px; }
.theme-switch:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* 深色顶栏（子页面）上的版本 */
.nav-header--site .theme-switch {
  border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .78);
}
.nav-header--site .theme-switch:hover {
  color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16);
}
/* 首页透明顶栏上的版本 */
.nav-header.is-transparent .theme-switch {
  border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .85);
}
/* 首页侧边悬浮栏里的版本 */
.float-bar .theme-switch {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-panel); color: #555; border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
html[data-theme="dark"] .float-bar .theme-switch { color: #C7CBD4; }
.float-bar .theme-switch:hover { color: var(--color-primary); }

/* 图标显隐：亮色显示月亮（点它进暗色），暗色显示太阳 */
.theme-switch .ico-sun { display: none; }
html[data-theme="dark"] .theme-switch .ico-sun { display: block; }
html[data-theme="dark"] .theme-switch .ico-moon { display: none; }

/* ---------- 硬编码色值兜底 ---------- */
html[data-theme="dark"] .site-footer { background: #12151B; color: #9AA1AD; }
html[data-theme="dark"] .footer-col h4,
html[data-theme="dark"] .footer-col h2 { color: #E8EAF0; }
html[data-theme="dark"] .footer-col a,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-bottom a { color: #7C838F; }
html[data-theme="dark"] .footer-desc { color: #7C838F; }
html[data-theme="dark"] .footer-social a { background: #2A2F3A; color: #C7CBD4; }
html[data-theme="dark"] .footer-social a:hover { background: var(--color-primary); color: #fff; }

/* 渐变/深色 hero 在两种主题下都不变，这里只处理"浅底 + 深字"的块 */
html[data-theme="dark"] .order-item .status.paid { background: rgba(7, 148, 85, .18); color: #4ADE80; }
html[data-theme="dark"] .order-item .status.pending { background: rgba(181, 71, 8, .2); color: #FBBF24; }
html[data-theme="dark"] .upload-drop { background: var(--color-surface); }
html[data-theme="dark"] .empty-state { color: var(--color-text-muted); }
html[data-theme="dark"] .hero { background: #05070A; }
html[data-theme="dark"] .nav-header { background: var(--c-panel); border-bottom-color: var(--color-border); }
html[data-theme="dark"] .nav-header.is-transparent {
  background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 100%);
}
/* 吸顶态毛玻璃在暗色下要偏深，否则背后文字会透出 */
html[data-theme="dark"] .square-nav.is-stuck {
  background: rgba(14, 16, 21, .7);
  border-bottom-color: #2A2F3A;
}
/* 合并态顶栏在暗色下必须保持透明（与亮色一致）：
   底色由下方 .square-nav.is-stuck 的暗色毛玻璃提供。
   若写成实心底色(var(--c-panel))，因顶栏 z-index(1000) 高于 square-nav(z-index 20)，
   会盖住栏目标签文字，导致暗色模式下吸顶导航文字看不见/看不清。 */
html[data-theme="dark"] .nav-header.is-solid.is-merged { background: transparent; border-bottom-color: transparent; }
html[data-theme="dark"] .header-search form { background: var(--color-surface-2); }
html[data-theme="dark"] .header-search input { color: var(--color-text); }
html[data-theme="dark"] .hero-cap h2 { text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }

/* 表单控件 */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: var(--c-panel); color: var(--color-text); border-color: var(--color-border); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--color-text-light); }

/* 代码/引用块等 */
html[data-theme="dark"] blockquote { color: var(--color-text-muted); }
html[data-theme="dark"] .article-body { color: var(--color-text-secondary); }
html[data-theme="dark"] .article-body p { color: var(--color-text-secondary); }

/* 图片/封面在暗色下稍稍压暗，避免刺眼 */
html[data-theme="dark"] .work-card .thumb img,
html[data-theme="dark"] .rank-thumb img,
html[data-theme="dark"] .ce-thumb img { opacity: .92; }

/* 少数浅色硬编码文字色在暗底上偏灰，统一交给 token */
html[data-theme="dark"] .feed-loading { color: var(--color-text-muted); }
html[data-theme="dark"] .stat-pill { color: var(--color-text-muted); }
html[data-theme="dark"] .hero-cap .cap-author { color: rgba(255, 255, 255, .92); }

/* 首页侧边悬浮栏：所有图标（不只是主题开关）在暗色下都要转亮 */
html[data-theme="dark"] .float-bar button,
html[data-theme="dark"] .float-bar a { color: #C7CBD4; }
html[data-theme="dark"] .float-bar button:hover,
html[data-theme="dark"] .float-bar a:hover { color: var(--color-primary); }
/* 主色圆底按钮(.fb-hot)上的图标必须是白色，否则浅色图标压在浅色主色上 */
html[data-theme="dark"] .float-bar .fb-hot { color: #fff; }
/* 空状态的装饰图标 */
html[data-theme="dark"] .empty-state .ico { color: var(--color-text-light); }
/* 顶栏在暗色下所有图标统一走 token（防止个别规则写死深色） */
html[data-theme="dark"] .act-bell,
html[data-theme="dark"] .header-search .s-icon,
html[data-theme="dark"] .header-search .s-ai,
html[data-theme="dark"] .nav-toggle { color: var(--color-text); }
html[data-theme="dark"] .nav-header.is-transparent .act-bell,
html[data-theme="dark"] .nav-header.is-transparent .header-search .s-icon,
html[data-theme="dark"] .nav-header.is-transparent .nav-toggle { color: rgba(255, 255, 255, .8); }
html[data-theme="dark"] .nav-header.is-solid.is-merged .header-search .s-icon { color: var(--color-text); }