/* ═══════════════════════════════════════════════════════════════════════════════
   全站第二套配色（2026-10-20）
   -----------------------------------------------------------------------------
   用户口径：「我打算做一个全站的两套变色，一套我们原来的，一套就是这个广场的颜色」

     · 原色（默认，无属性）           ＝ 深色近黑 / 冷白正文 / 紫强调（现在的样子，一个字没改）
     · 广场配色 `html[data-mode=light]` ＝ 白底 / 墨字 / 暖红强调（＝ /explore 那套 --xx-*）

   做法：**只覆盖令牌层**（--bg / --ink / --surface / --line / --theme …），
   组件几乎全部读这些变量 → 换令牌就换肤；再给几处**写死的深色**（导航下拉面板、
   站头文字阴影、页脚）补几条定向覆盖。**没有任何组件结构改动。**

   ⚠️ 加载处（两处，同一份文件）：
     · 自建页 —— `src/layouts/BaseLayout.astro` 里 <link>
     · 1,500+ 镜像页 —— `scripts/inject-chrome.mjs` 的注入块
   改这里两边一起变。切换按钮/记忆逻辑在 `public/_chrome/mode.js`。
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ 选择器为什么这么长：站点的深色令牌**不是只写在 `:root`**——
   `src/styles/xixi.css` 的 `.xixi`（挂在 body 上）又把 --bg/--ink/--muted/--line 等**重写了一遍**，
   而"body 上的声明"永远赢过"从 html 继承来的值"，**跟特异性无关**。
   所以必须把覆盖**直接打到 `.xixi` / `body.xixi` 这一层**，否则会出现
   "data-mode 已经变 light、按钮文字也变成白天，但页面还是黑的"（2026-10-20 实测踩过）。 */
html[data-mode='light'],
html[data-mode='light'] body.xixi,
html[data-mode='light'] .xixi,
html[data-mode='light'] body {
  /* ── 底色 / 面板（与 /explore 的 --xx-* 取同一组值）── */
  --bg: #ffffff;
  --bg-deep: #f7f7f7;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --surface-3: #f2f2f2;

  /* ── 正文三阶 ── */
  --ink: #1a1a1a;
  --ink-cool: #1a1a1a;
  --muted: #4b4b4b;
  --faint: #8a8a8a;

  /* ── 线 ── */
  --line: rgba(20, 20, 20, 0.1);
  --line-strong: rgba(20, 20, 20, 0.18);

  /* ── 强调色：广场那支暖红（不是小红书品牌红）── */
  --theme: #d94f6a;

  /* ── 熙熙基准皮肤的对外两色（镜像页那 49 个字面量类映射到的就是 --background/--foreground）── */
  --x-bg: #ffffff;
  --x-ink: #1a1a1a;
  --background: #ffffff;
  --foreground: #1a1a1a;

  /* ── 亮色下阴影要轻、玻璃要淡 ── */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .04);
  --elev-2: 0 4px 16px rgba(0, 0, 0, .08);
  --elev-3: 0 12px 40px rgba(0, 0, 0, .12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .10);

  color-scheme: light;
}

html[data-mode='light'],
html[data-mode='light'] body {
  background: var(--bg);
  color: var(--ink);
}

/* ── 站头：顶部本来完全透明（压在页面上），给文字阴影去掉（白底上黑阴影会糊）── */
html[data-mode='light'] .site-header { --header-text-shadow: none; }
html[data-mode='light'] .site-header.is-scrolled {
  background: color-mix(in srgb, #fff 82%, transparent);
  border-bottom-color: var(--line);
}
/* 下拉面板在 SiteHeader 里是写死的 rgba(10,10,10,.92) */
html[data-mode='light'] .nav-drop__panel {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--line-strong);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
html[data-mode='light'] .nav-drop__panel[hidden] { display: none; }
html[data-mode='light'] .user-dropdown,
html[data-mode='light'] .mobile-nav {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--line-strong);
}
html[data-mode='light'] .mobile-nav__backdrop { background: rgba(255, 255, 255, 0.6); }

/* ── 页脚：它有自己的深色底与视频罩 ── */
html[data-mode='light'] .site-footer { background: var(--surface-2); color: var(--ink); }

/* ── 表单/输入：深色主题下常用浅色描边，亮底上要变深 ── */
html[data-mode='light'] input,
html[data-mode='light'] textarea,
html[data-mode='light'] select {
  color: var(--ink);
  border-color: var(--line-strong);
}
html[data-mode='light'] input::placeholder,
html[data-mode='light'] textarea::placeholder { color: var(--faint); }

/* ── 主按钮：原来是"浅底深字"，亮底上要反过来 ── */
html[data-mode='light'] .btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
/* 站头那颗「开始旅程」：SiteHeader 里写死 `background:#fff; color:var(--bg)`
   → 亮色下 --bg 也是白，字就整颗不见了（2026-10-20 截图实测"右侧一个空白圆角块"） */
html[data-mode='light'] .register-link {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
html[data-mode='light'] .register-link:hover {
  background: color-mix(in srgb, var(--ink) 86%, #fff);
}

/* ── 切色按钮（站头里那颗，见 SiteHeader 的 .mode-switch）── */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.mode-switch:hover { color: var(--ink); border-color: var(--ink); }
.mode-switch__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0c0c0c 50%, #ffffff 50%);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  flex: 0 0 auto;
}
html[data-mode='light'] .mode-switch__dot {
  background: linear-gradient(135deg, #ffffff 50%, #1a1a1a 50%);
}
@media (max-width: 1100px) {
  .mode-switch__txt { display: none; }
  .mode-switch { padding: 0 9px; }
}