/* =============================================================
 * theme.css — 自动昼夜主题（深色覆盖层）
 * 触发：<html data-theme="dark">
 * 浅色为默认（:root 令牌见 tokens.css）。本文件须在所有样式之后加载。
 *
 * 规则：
 *  - 早上 06:00 ~ 18:00（含 06:00，不含 18:00）为浅色（白天）
 *  - 18:00 ~ 次日 06:00 为深色（黑夜）
 *  - 用户手动切换：临时覆盖，直到下一个自动切换时间点（06:00 / 18:00）恢复自动
 * ============================================================= */

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

/* 手动 / 跨边界切换时的平滑过渡（仅对常见表面启用，避免整页抖动） */
html.theme-anim body,
html.theme-anim .site-header,
html.theme-anim .site-header.is-scrolled,
html.theme-anim .card,
html.theme-anim .btn,
html.theme-anim .btn--light,
html.theme-anim .btn--ghost,
html.theme-anim .stats,
html.theme-anim .stats__item,
html.theme-anim .chip,
html.theme-anim .lang-switch,
html.theme-anim .theme-toggle,
html.theme-anim .field__input,
html.theme-anim .field__textarea,
html.theme-anim .plist__row,
html.theme-anim .solution-card__points li {
  transition: background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease) !important;
}

/* ===================== 深色令牌覆盖（苹果风）===================== */
[data-theme="dark"] {
  /* 品牌蓝：苹果 systemBlue（深色态更亮，保证对比）*/
  --brand: #0a84ff;
  --brand-2: #409cff;
  --brand-ink: #0a84ff;
  --brand-3: #8e8e93;
  --brand-grad: linear-gradient(180deg, #0a84ff 0%, #0060df 100%);
  --brand-grad-soft: #0b1f3a;

  /* 文字：近白 */
  --ink: #f5f5f7;
  --ink-2: #d6d6da;
  --ink-3: #a1a1a6;

  /* 分隔线：浅色发丝 */
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);

  /* 背景：纯黑底 + 抬升灰阶（苹果二级面 #1c1c1e）*/
  --bg: #000000;
  --bg-soft: #1c1c1e;
  --bg-warm: #0a0a0a;
  --bg-dark: #161618;
  --bg-dark-2: #2c2c2e;
  --on-dark: #f5f5f7;
  --on-dark-2: #a1a1a6;

  /* 玻璃质感：深色半透 */
  --glass: rgba(22, 22, 24, 0.72);
  --glass-border: rgba(255, 255, 255, 0.14);

  /* 阴影：加深、偏冷 */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.55);
  --sh-3: 0 10px 30px rgba(0, 0, 0, 0.6);
  --sh-glow: 0 0 0 1px rgba(10, 132, 255, 0.35);
  --sh-brand: 0 8px 24px rgba(10, 132, 255, 0.35);
}

/* ===================== 顶部导航（玻璃）===================== */
[data-theme="dark"] .site-header {
  background: var(--glass);
  border-bottom-color: transparent;
}
[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(22, 22, 24, 0.86);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .nav__link { color: var(--ink-2); }
[data-theme="dark"] .nav__link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .nav__link.is-active { color: var(--ink); }
[data-theme="dark"] .lang-switch { color: var(--ink-2); }
[data-theme="dark"] .lang-switch:hover { color: var(--brand); border-color: var(--brand); background: rgba(255, 255, 255, 0.06); }

/* 移动端抽屉 */
@media (max-width: 900px) {
  [data-theme="dark"] .nav {
    background: rgba(28, 28, 30, 0.98);
    border-bottom-color: var(--line);
  }
}

/* ===================== 按钮 ===================== */
[data-theme="dark"] .btn--ghost { color: var(--ink); }
[data-theme="dark"] .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ink-3); }
[data-theme="dark"] .btn--light { color: var(--ink); background: #1c1c1e; border-color: var(--line-strong); }
[data-theme="dark"] .btn--light:hover { background: #2c2c2e; border-color: var(--line-strong); }

/* ===================== 表单 ===================== */
[data-theme="dark"] .field__input,
[data-theme="dark"] .field__textarea {
  background: #1c1c1e;
  border-color: var(--line-strong);
  color: var(--ink);
}
[data-theme="dark"] .field__input:focus,
[data-theme="dark"] .field__textarea:focus {
  background: #232325;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.22);
}
[data-theme="dark"] .form__status--ok { color: #a9c8ff; }
[data-theme="dark"] .form__status--err { color: #ff9a9e; }

/* ===================== 图占位标签（产品名 chip）===================== */
/* 产品图片底色为白，深色下改用高不透明度深色底 + 近白文字，避免灰字被白底“吃掉” */
[data-theme="dark"] .figure__tag {
  background: rgba(10, 12, 16, 0.9);
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.18);
}

/* 产品卡悬停提示：深色下同样改为深底近白字，避免白底灰字 */
[data-theme="dark"] .pcard__media::after {
  background: rgba(10, 12, 16, 0.9);
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.18);
}

/* 产品卡：悬停浮出的信息面板（默认白底，深色下改深底，否则近白标题/文字看不清） */
[data-theme="dark"] .pcard__body {
  background: rgba(28, 28, 30, 0.92);
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* ===================== 主题切换按钮（苹果风图标）===================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 980px;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.theme-toggle:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--bg-soft);
}
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

/* 减少动效偏好：关闭切换过渡 */
@media (prefers-reduced-motion: reduce) {
  html.theme-anim body,
  html.theme-anim .site-header,
  html.theme-anim .card,
  html.theme-anim .btn,
  html.theme-anim .stats { transition: none !important; }
}