/* 红白黑主题：默认浅色，深色按系统偏好或用户选择启用。 */
:root {
  color-scheme: light;
  --bg: #FAF9F6;
  --bg-soft: #EEECE8;
  --surface: #FFFDFB;
  --ink: #242222;
  --ink-soft: #575250;
  --ink-faint: #77706C;
  --accent: #B73832;
  --accent-soft: rgba(183, 56, 50, 0.055);
  --line: #E2DDD8;
  --nav-bg: rgba(250, 249, 246, 0.88);
  --button-bg: #B73832;
  --button-hover: #9D2D28;
  --button-ink: #FFF9F5;
  --sphere-line: 121, 110, 106;
}

:root[data-theme="red-dark"] {
  color-scheme: dark;
  --bg: #191818;
  --bg-soft: #2B2827;
  --surface: #211F1F;
  --ink: #F2EEEA;
  --ink-soft: #C1B9B4;
  --ink-faint: #A49993;
  --accent: #EB8178;
  --accent-soft: rgba(235, 129, 120, 0.075);
  --line: #393332;
  --nav-bg: rgba(25, 24, 24, 0.9);
  --button-bg: #B73832;
  --button-hover: #A22F2A;
  --button-ink: #FFF9F5;
  --sphere-line: 174, 157, 148;
}

/* 项目是独立品牌卡片，在所有主题下保留原来的蓝白、朱砂纸色。 */
.feat-knowme,
.feat-xb {
  color-scheme: light;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --ink-faint: #8B8680;
  color: var(--ink);
}

/* 导航中的明暗切换：图标表示点击后的模式。 */
.nav-inner { gap: 28px; }
.nav-logo { flex-shrink: 0; }
.nav-links { margin-left: auto; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-icon-sun { display: none; }
[data-theme="red-dark"] .theme-icon-sun { display: block; }
[data-theme="red-dark"] .theme-icon-moon { display: none; }
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* 中性底色保持层次，红色用于强调和动作。 */
[data-theme^="red-"] body::before { opacity: 0.022; }
[data-theme^="red-"] body::after { background: none; }
[data-theme="red-dark"] body::before { mix-blend-mode: soft-light; opacity: 0.035; }
[data-theme^="red-"] .nav { background: var(--nav-bg); }
[data-theme^="red-"] ::selection { background: var(--accent); color: var(--bg); }
[data-theme^="red-"] .hero-eyebrow::before { background: var(--accent); }
[data-theme^="red-"] .hero-photo,
[data-theme^="red-"] .portrait { background: var(--surface); }
[data-theme^="red-"] .ch-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px -20px rgba(30, 22, 20, 0.16);
}
[data-theme^="red-"] .ch-card:hover { border-color: var(--row-hover); }
[data-theme^="red-"] .m-btn:hover { background: var(--button-hover); color: var(--button-ink); }
/* X 的黑色标识在深色表面使用品牌的白色版本。 */
[data-theme="red-dark"] .ch-card { --row-hover: var(--brand-color-dark, var(--brand-color, var(--accent))); }
[data-theme^="red-"] .m-anchor { color: var(--accent); border-bottom: 1px solid var(--accent); }
[data-theme="red-dark"] .modal-overlay { background: rgba(8, 6, 6, 0.65); }
[data-theme="red-dark"] .modal-card { background: var(--surface); }
/* 文字链接在不改变段落排版的前提下，提供清晰的可点击提示。 */
.about-story-link {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 180ms ease;
}
.about-story-link:hover { text-decoration-style: solid; }

@media (max-width: 1080px) {
  .nav-links { gap: 16px; }
}
@media (max-width: 420px) {
  .nav-inner { gap: 8px; padding-inline: 16px; }
  .nav-logo { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}