/* 默认 = 深色沉浸；[data-theme="light"] = 浅色东方 */
:root,
[data-theme="light"] {
  --bg: #0e1114;
  --bg-elevated: #161a1f;
  --bg-soft: #1c2229;
  --bg-rail: #0a0c0e;
  --paper: #ece8e1;
  --paper-dim: #c8c2b8;
  --text: #ece8e1;
  --text-secondary: #9a958c;
  --text-muted: #6a6660;
  --text-inverse: #0e1114;
  --accent: #7a9e8f;
  --accent-hover: #95b8aa;
  --accent-soft: rgba(122, 158, 143, 0.14);
  --accent-line: rgba(122, 158, 143, 0.35);
  --daiqing: #7a9e8f;
  --copper: #c4a574;
  --line: rgba(236, 232, 225, 0.1);
  --line-strong: rgba(236, 232, 225, 0.18);

  --font-display: "Syne", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", "Syne", sans-serif;
  --heading-tracking: -0.03em;
  --heading-lh: 1.05;
  --kicker-font: var(--font-display);
  --kicker-color: var(--accent);

  --btn-primary-bg: #ece8e1;
  --btn-primary-fg: #0e1114;
  --btn-primary-hover: #ffffff;
  --btn-primary-shadow: 0 14px 36px rgba(236, 232, 225, 0.22);
  --rail-cta-bg: #ece8e1;
  --rail-cta-fg: #0a0c0e;
  --rail-cta-hover: #ffffff;

  --float-nav-bg: rgba(22, 26, 31, 0.75);
  --topbar-bg: rgba(14, 17, 20, 0.9);
  --mobile-nav-bg: rgba(14, 17, 20, 0.98);

  --hero-bg:
    radial-gradient(ellipse 55% 50% at 75% 30%, rgba(122, 158, 143, 0.18), transparent 55%),
    radial-gradient(ellipse 40% 35% at 15% 70%, rgba(196, 165, 116, 0.08), transparent 50%),
    linear-gradient(160deg, #0e1114, #141a1c 50%, #0e1114);
  --page-x-bg:
    radial-gradient(ellipse 45% 50% at 90% 20%, rgba(122, 158, 143, 0.12), transparent 55%),
    linear-gradient(180deg, #0a0c0e, var(--bg));
  --visual-surface:
    radial-gradient(circle at 40% 40%, rgba(122, 158, 143, 0.25), transparent 55%),
    linear-gradient(145deg, #1c2428, #14181c);
  --visual-surface-alt:
    radial-gradient(circle at 35% 40%, rgba(122, 158, 143, 0.3), transparent 50%),
    linear-gradient(160deg, #1c2624, #12161a);
  --device-shell:
    radial-gradient(circle at 40% 30%, rgba(122, 158, 143, 0.22), transparent 50%),
    linear-gradient(165deg, #1a2226, #101418);
  --wm-stroke: rgba(236, 232, 225, 0.12);
  --wm-stroke-soft: rgba(236, 232, 225, 0.06);
  --vignette: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgba(8, 10, 12, 0.55) 100%);
  --glow: rgba(122, 158, 143, 0.14);
  --grain-opacity: 0.045;
  --grain-blend: overlay;
  --shadow-lux: 0 24px 60px rgba(0, 0, 0, 0.35);
  --finale-glow: rgba(122, 158, 143, 0.16);
  --map-stroke: %237a9e8f;
  --map-accent: %23c4a574;
}

[data-theme="dark"] {
  --bg: #f6f3ed;
  --bg-elevated: #fffcf7;
  --bg-soft: #f0ebe3;
  --bg-rail: #ebe6dc;
  --paper: #1a2a28;
  --paper-dim: #5c6b66;
  --text: #1a2a28;
  --text-secondary: #5c6b66;
  --text-muted: #87948e;
  --text-inverse: #f6f3ed;
  --accent: #2f6b4f;
  --accent-hover: #3d8260;
  --accent-soft: rgba(47, 107, 79, 0.1);
  --accent-line: rgba(47, 107, 79, 0.28);
  --daiqing: #2a4a5c;
  --copper: #8a7348;
  --line: rgba(26, 42, 40, 0.1);
  --line-strong: rgba(26, 42, 40, 0.16);

  --font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", sans-serif;
  --heading-tracking: 0.02em;
  --heading-lh: 1.12;
  --kicker-font: var(--font-body);
  --kicker-color: var(--daiqing);

  --btn-primary-bg: #2f6b4f;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #3d8260;
  --btn-primary-shadow: 0 14px 36px rgba(47, 107, 79, 0.22);
  --rail-cta-bg: #2f6b4f;
  --rail-cta-fg: #f6f3ed;
  --rail-cta-hover: #3d8260;

  --float-nav-bg: rgba(255, 252, 247, 0.88);
  --topbar-bg: rgba(246, 243, 237, 0.92);
  --mobile-nav-bg: rgba(255, 252, 247, 0.98);

  --hero-bg:
    radial-gradient(ellipse 55% 50% at 75% 30%, rgba(47, 107, 79, 0.12), transparent 55%),
    radial-gradient(ellipse 40% 35% at 15% 70%, rgba(138, 115, 72, 0.08), transparent 50%),
    linear-gradient(160deg, #f6f3ed, #fffcf7 50%, #f0ebe3);
  --page-x-bg:
    radial-gradient(ellipse 45% 50% at 90% 20%, rgba(47, 107, 79, 0.08), transparent 55%),
    linear-gradient(180deg, #ebe6dc, var(--bg));
  --visual-surface:
    radial-gradient(circle at 40% 40%, rgba(47, 107, 79, 0.14), transparent 55%),
    linear-gradient(145deg, #e8efe9, #f0ebe3);
  --visual-surface-alt:
    radial-gradient(circle at 35% 40%, rgba(47, 107, 79, 0.16), transparent 50%),
    linear-gradient(160deg, #e4ebe6, #ebe6dc);
  --device-shell:
    radial-gradient(circle at 40% 30%, rgba(47, 107, 79, 0.14), transparent 50%),
    linear-gradient(165deg, #2a4a5c, #1a2a28);
  --wm-stroke: rgba(42, 74, 92, 0.1);
  --wm-stroke-soft: rgba(42, 74, 92, 0.08);
  --vignette: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 45%, rgba(42, 74, 92, 0.08) 100%);
  --glow: rgba(47, 107, 79, 0.12);
  --grain-opacity: 0.035;
  --grain-blend: multiply;
  --shadow-lux: 0 20px 50px rgba(42, 74, 92, 0.1);
  --finale-glow: rgba(47, 107, 79, 0.1);
  --map-stroke: %232f6b4f;
  --map-accent: %238a7348;
}

:root {
  --rail: 5.5rem;
  --gutter: clamp(1.25rem, 3.5vw, 2.5rem);
  --header-h: 4rem;
  --page-top: 4.75rem;
  --page-bottom: 3rem;
  --hero-top: clamp(4.5rem, 9vh, 6rem);
  --hero-bottom: 4rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;
}

/* 主题切换过渡 */
html {
  color-scheme: dark;
}

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

body {
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}