/* ============================================================
   设计令牌 —— 配色方案（palette）× 明暗强度（theme）
   所有颜色都集中在 --xxx 变量里，改一处即全站生效。
   ============================================================ */
:root {
  color-scheme: light;

  --card: rgba(255, 255, 255, 0.7);
  --card-solid: #ffffff;
  --shadow: 0 10px 30px rgba(120, 150, 200, 0.1);
  --radius: 18px;

  --ui-font: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --quote-font: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", Georgia, serif;
}

/* 无衬线正文模式 */
:root[data-font="sans"] {
  --quote-font: var(--ui-font);
}

/* ============================================================
   配色方案 1：紫罗兰（默认）—— 主色 #A764C1
   ============================================================ */
:root,
:root[data-palette="violet"] {
  --bg: #faf7fd;
  --glow-a: #f0e4f9;
  --glow-b: #e9ecfb;
  --deco-a: rgba(167, 100, 193, 0.14);
  --deco-b: rgba(143, 184, 232, 0.16);

  --ink: #3e2f4d;
  --ink-soft: #8a7b99;
  --ink-faint: #b3a7bf;

  --line: rgba(167, 100, 193, 0.18);
  --accent: #a764c1;
  --accent-2: #8fb8e8;
  --accent-ink: #8a47a5;
  --mark: #d9bee8;
  --tint: #f3e9f9;
}

/* 配色方案 2：天蓝淡紫（初版风格） */
:root[data-palette="sky"] {
  --bg: #f7f9ff;
  --glow-a: #e9f2ff;
  --glow-b: #f2ecff;
  --deco-a: rgba(185, 168, 232, 0.16);
  --deco-b: rgba(143, 184, 232, 0.18);

  --ink: #33415c;
  --ink-soft: #7a87a3;
  --ink-faint: #a9b3c7;

  --line: rgba(120, 150, 200, 0.16);
  --accent: #8fb8e8;
  --accent-2: #b9a8e8;
  --accent-ink: #4f76b0;
  --mark: #cfc3f2;
  --tint: #eef3ff;
}

/* 配色方案 3：青竹 */
:root[data-palette="forest"] {
  --bg: #f6fbf9;
  --glow-a: #e3f4ee;
  --glow-b: #e9f1fa;
  --deco-a: rgba(100, 180, 155, 0.14);
  --deco-b: rgba(143, 184, 232, 0.14);

  --ink: #2e4a45;
  --ink-soft: #7c948e;
  --ink-faint: #a9bdb8;

  --line: rgba(90, 160, 140, 0.18);
  --accent: #64b49b;
  --accent-2: #8fb8e8;
  --accent-ink: #2f7a62;
  --mark: #bee0d4;
  --tint: #e8f5f0;
}

/* 配色方案 4：暖粉 */
:root[data-palette="rose"] {
  --bg: #fdf8f9;
  --glow-a: #fbe7ec;
  --glow-b: #f1eafb;
  --deco-a: rgba(214, 120, 150, 0.13);
  --deco-b: rgba(185, 168, 232, 0.14);

  --ink: #4a3038;
  --ink-soft: #977e86;
  --ink-faint: #c2aeb5;

  --line: rgba(200, 130, 155, 0.18);
  --accent: #d0789a;
  --accent-2: #b9a8e8;
  --accent-ink: #b2516f;
  --mark: #efc9d6;
  --tint: #fbe9ef;
}

/* ============================================================
   明暗强度：极致护眼（在所选配色基础上进一步降低亮度与对比）
   ============================================================ */
:root[data-palette="violet"][data-theme="eye"],
:root[data-theme="eye"]:not([data-palette]) {
  --bg: #f1ecf6;
  --glow-a: #e6dcef;
  --glow-b: #e4e8f4;
  --ink: #4b3f59;
  --ink-soft: #8b8195;
  --ink-faint: #b0a8b9;
  --line: rgba(150, 110, 175, 0.2);
  --mark: #cfbedd;
  --tint: #ede6f2;
  --shadow: 0 8px 24px rgba(120, 110, 150, 0.1);
}

:root[data-palette="sky"][data-theme="eye"] {
  --bg: #eef1f7;
  --glow-a: #e6ecf6;
  --glow-b: #ece9f5;
  --ink: #46536e;
  --ink-soft: #7c879e;
  --ink-faint: #a3acc0;
  --line: rgba(110, 130, 170, 0.2);
  --mark: #c6c9db;
  --tint: #e9eef7;
  --shadow: 0 8px 24px rgba(110, 130, 170, 0.1);
}

:root[data-palette="forest"][data-theme="eye"] {
  --bg: #edf4f2;
  --glow-a: #e0efe9;
  --glow-b: #e4ebf3;
  --ink: #3b534e;
  --ink-soft: #7b908b;
  --ink-faint: #a6b8b3;
  --line: rgba(90, 150, 132, 0.2);
  --mark: #bcd3cb;
  --tint: #e4efea;
  --shadow: 0 8px 24px rgba(90, 140, 126, 0.1);
}

:root[data-palette="rose"][data-theme="eye"] {
  --bg: #f6eff1;
  --glow-a: #f0dee4;
  --glow-b: #ede7f4;
  --ink: #55414a;
  --ink-soft: #94808a;
  --ink-faint: #bca9b1;
  --line: rgba(190, 130, 155, 0.2);
  --mark: #e0c4ce;
  --tint: #f3e4e9;
  --shadow: 0 8px 24px rgba(150, 110, 125, 0.1);
}

/* ============================================================
   基础样式
   ============================================================ */
* {
  box-sizing: border-box;
}

/* 关键：作者样式里的 display 会盖掉浏览器默认的 [hidden]{display:none}，
   必须显式声明，否则 JS 设了 hidden 的元素依然会显示出来。 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--ui-font);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 通用按钮：安静、无多余动效 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5em 1.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-solid);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn:hover {
  background: var(--tint);
  border-color: var(--accent);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-ink));
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-ink), var(--accent));
}
.btn-ghost {
  background: transparent;
}
.btn-danger {
  color: #a2405f;
}
.btn-danger:hover {
  background: #fdf2f6;
  border-color: rgba(200, 130, 160, 0.35);
}
.btn-sm {
  padding: 0.3em 0.8em;
  font-size: 0.9em;
}

.tag {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--tint);
  color: var(--accent-ink);
  font-size: 0.82em;
  letter-spacing: 0.04em;
}
.tag-muted {
  background: rgba(150, 155, 175, 0.12);
  color: var(--ink-soft);
}

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