/* §5.3：沿用历史版本 2 的琥珀色阶，仅替换配色变量。 */
@media screen {
  :root[data-style="amber"][data-theme="dark"] {
    --bg: #0b0908;
    --surface: #141110;
    --surface-raised: #1b1715;
    --line: #332c27;
    --line-strong: #4a4038;
    --text: #f7f1e8;
    --muted: #b3a89b;
    --subtle: #928779;
    --accent: #ffb648;
    --accent-strong: #ffcf7a;
    --accent-soft: rgba(255, 182, 72, 0.12);
    --accent-contrast: #1a1105;
    --header-surface: rgba(11, 9, 8, 0.9);
    --hero-glow: rgba(255, 182, 72, 0.045);
    --hover-surface: rgba(255, 255, 255, 0.04);
    --focus-ring: var(--accent);
    --count-surface: rgba(255, 255, 255, 0.07);
    --count-active-surface: rgba(0, 0, 0, 0.18);
    --theme-sky: #3b2a18;
    --theme-sun: #ffcf94;
    --theme-cloud: #fff8ee;
    --theme-moon: #ffb648;
    --theme-starlight: #ffe9c2;
    --theme-night: #1a1208;
    --theme-night-horizon: #2e2114;
    --theme-night-rim: #4a3722;
    --theme-night-hover: #8a6a44;
    --theme-night-halo: rgba(255, 182, 72, 0.12);
    --theme-night-shadow: rgba(26, 18, 8, 0.18);
  }

  :root[data-style="amber"]:not([data-theme="dark"]) {
    --line-strong: #c9bcaa;
    --accent-contrast: #fffdf8;
    --hero-glow: rgba(255, 182, 72, 0.1);
    --theme-sky: #3b2a18;
    --theme-sun: #e8890a;
    --theme-cloud: #fff8ee;
    --theme-moon: #ffb648;
    --theme-starlight: #ffe9c2;
    --theme-night: #1a1208;
    --theme-night-horizon: #2e2114;
    --theme-night-rim: #4a3722;
    --theme-night-hover: #8a6a44;
    --theme-night-halo: rgba(255, 182, 72, 0.12);
    --theme-night-shadow: rgba(26, 18, 8, 0.18);
    --bg-app: #faf6ee;
    --bg-panel: #fffdf8;
    --bg-panel-subtle: #f4efe6;
    --bg-hover: #f6efe0;
    --line-soft: #e8dfd2;
    --line-mid: #dbd0c0;
    --text-main: #241a0f;
    --text-sub: #5f5345;
    --text-faint: #776a59;
    --theme-day-sky: #ffd9a0;
    --theme-day-horizon: #fff0d0;
    --theme-day-halo: rgba(255, 190, 90, 0.2);
    --brand-highlight: #ffb648;
    --brand-ink: #241a0f;
    --accent-hover: #3a2a18;
  }

  :root[data-style="amber"][data-view="reader"][data-theme="dark"] {
    --bg: #0b0908;
    --surface: #141110;
    --surface-raised: #1b1715;
    --line: #332c27;
    --line-strong: #4a4038;
    --text: #f7f1e8;
    --muted: #b3a89b;
    --subtle: #928779;
    --accent: #ffb648;
    --accent-soft: rgba(255, 182, 72, 0.12);
    --accent-contrast: #1a1105;
    --header-surface: rgba(11, 9, 8, 0.9);
    --hero-glow: rgba(255, 182, 72, 0.045);
    --grid-line: rgba(250, 247, 241, 0.015);
    --body-text: #e4dbcd;
    --content-surface: rgba(20, 17, 16, 0.94);
    --outline-surface: rgba(20, 17, 16, 0.92);
    --content-shadow: rgba(0, 0, 0, 0.2);
    --code-text: #ffd38f;
    --code-surface: #080604;
    --table-heading: rgba(255, 182, 72, 0.08);
    --table-stripe: rgba(250, 247, 241, 0.02);
    --hover-surface: rgba(250, 247, 241, 0.035);
    --focus-ring: var(--accent);
    --theme-sky: #3b2a18;
    --theme-sun: #ffcf94;
    --theme-cloud: #fff8ee;
    --theme-moon: #ffb648;
    --theme-starlight: #ffe9c2;
    --theme-night: #1a1208;
    --theme-night-horizon: #2e2114;
    --theme-night-rim: #4a3722;
    --theme-night-hover: #8a6a44;
    --theme-night-halo: rgba(255, 182, 72, 0.12);
    --theme-night-shadow: rgba(26, 18, 8, 0.18);
    --danger: #ff5c7a;
  }

  :root[data-style="amber"][data-view="reader"]:not([data-theme="dark"]) {
    --line-strong: #c9bcaa;
    --accent-contrast: #fffdf8;
    --hero-glow: rgba(255, 182, 72, 0.1);
    --content-shadow: rgba(52, 42, 32, 0.06);
    --theme-sky: #3b2a18;
    --theme-sun: #e8890a;
    --theme-cloud: #fff8ee;
    --theme-moon: #ffb648;
    --theme-starlight: #ffe9c2;
    --theme-night: #1a1208;
    --theme-night-horizon: #2e2114;
    --theme-night-rim: #4a3722;
    --theme-night-hover: #8a6a44;
    --theme-night-halo: rgba(255, 182, 72, 0.12);
    --theme-night-shadow: rgba(26, 18, 8, 0.18);
    --danger: #c01f3c;
    --bg-app: #faf6ee;
    --bg-panel: #fffdf8;
    --bg-panel-subtle: #f4efe6;
    --bg-hover: #f6efe0;
    --line-soft: #e8dfd2;
    --line-mid: #dbd0c0;
    --text-main: #241a0f;
    --text-sub: #5f5345;
    --text-faint: #776a59;
    --theme-day-sky: #ffd9a0;
    --theme-day-horizon: #fff0d0;
    --theme-day-halo: rgba(255, 190, 90, 0.2);
    --brand-highlight: #ffb648;
    --brand-ink: #241a0f;
    --accent-hover: #3a2a18;
  }

}

/* §2.4、§5.7：单个方形色块显示当前配色，点击切换风格。 */
.style-toggle {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.style-toggle::before {
  content: "";
  width: 24px;
  height: 24px;
  background: #c8ff4a;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

:root[data-style="amber"] .style-toggle::before { background: #ffb648; }

.style-toggle:hover::before { box-shadow: 0 0 0 3px var(--accent-soft); }

.style-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

body,
.site-header,
.metrics-panel,
.empty-state,
.resource-tabs,
.markdown-body,
.outline-panel {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

@media (max-width: 720px) {
  .header-inner { height: auto; min-height: 68px; padding: 12px 0; flex-wrap: wrap; }
  .header-actions { margin-left: auto; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; }
}