/* ============================================================
 * Yueli AI 深浅色主题（自动跟随系统 / 手动切换）
 * 由 scripts/generate-static-pages.js 复制到 public/assets/
 * 全站共享：深色覆盖层 + 主题切换按钮 + 语言切换按钮样式
 * ============================================================ */

/* ---------- 深色主题变量（参考 AlphaScout data-theme 机制） ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --brand: #4FB3FF;
  --brand-dark: #2E90FA;
  --brand-deep: #1E74CC;
  --border: #24344F;
  --bg-soft: #0D1526;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* ---------- 高频 Tailwind 类深色覆盖 ----------
 * 静态页无法使用 Tailwind dark: 变体，统一用 data-theme 前缀覆盖。 */
html[data-theme="dark"] body {
  background-color: #0D1526 !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .bg-white { background-color: #131E33 !important; }
html[data-theme="dark"] .bg-gray-50 { background-color: #0D1526 !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: #16233B !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: #1B2A44 !important; }
html[data-theme="dark"] .bg-gray-800 { background-color: #1B2A44 !important; }
html[data-theme="dark"] .bg-gray-900 { background-color: #0A101F !important; }
html[data-theme="dark"] .bg-black { background-color: #05080F !important; }
html[data-theme="dark"] .bg-blue-50 { background-color: #12233D !important; }

html[data-theme="dark"] .text-gray-900 { color: #F1F5F9 !important; }
html[data-theme="dark"] .text-gray-800 { color: #E2E8F0 !important; }
html[data-theme="dark"] .text-gray-700 { color: #CBD5E1 !important; }
html[data-theme="dark"] .text-gray-600 { color: #94A3B8 !important; }
html[data-theme="dark"] .text-gray-500 { color: #64748B !important; }
html[data-theme="dark"] .text-gray-400 { color: #56647A !important; }
html[data-theme="dark"] .text-gray-300 { color: #46536A !important; }

html[data-theme="dark"] .border-gray-100 { border-color: #1E2C44 !important; }
html[data-theme="dark"] .border-gray-200 { border-color: #243450 !important; }
html[data-theme="dark"] .border-gray-300 { border-color: #2C3D5C !important; }
html[data-theme="dark"] .border-gray-700 { border-color: #2C3D5C !important; }
html[data-theme="dark"] .border-gray-800 { border-color: #1E2C44 !important; }
html[data-theme="dark"] .border-white { border-color: #1E2C44 !important; }

/* ---------- 自定义组件深色覆盖 ---------- */
html[data-theme="dark"] .flat-card {
  background: #131E33;
  border-color: #1E2C44;
}
html[data-theme="dark"] .flat-card:hover {
  box-shadow: 0 16px 36px -16px rgba(79, 179, 255, 0.25);
  border-color: rgba(79, 179, 255, 0.4);
}
html[data-theme="dark"] .nav-link { color: #CBD5E1; }
html[data-theme="dark"] .nav-link:hover { color: var(--brand); }
html[data-theme="dark"] .mobile-menu { background-color: #0D1526; }

/* ---------- 主题切换按钮（sun/moon 互斥显示） ---------- */
#theme-toggle { position: relative; }
#theme-toggle .icon-sun { display: block; }
#theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] #theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] #theme-toggle .icon-moon { display: block; }

/* ---------- 移动端语言/主题按钮 ---------- */
.theme-mobile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.625rem;
  color: #374151;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.theme-mobile-toggle:hover {
  color: var(--brand);
  background-color: rgba(24, 146, 254, 0.08);
}
html[data-theme="dark"] .theme-mobile-toggle { color: #CBD5E1; }

/* ---------- 非深色模式下的透明按钮悬停 ---------- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  color: #374151;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle-btn:hover {
  color: var(--brand);
  background-color: rgba(24, 146, 254, 0.08);
}
html[data-theme="dark"] .theme-toggle-btn { color: #CBD5E1; }