/* ============================================================
   设计令牌 —— 配色方案（palette）× 明暗强度（theme）× 字体
   所有可调项都是 CSS 变量，由 display.js 从后台配置写入。
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- 字体栈（全部为系统字体，零下载） ---- */
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", "STSong", Georgia, serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-kai: "Kaiti SC", "KaiTi", "STKaiti", "楷体", "AR PL UKai CN", serif;
  --font-fangsong: "FangSong", "STFangsong", "仿宋", "AR PL UMing CN", serif;
  --font-round: "Yuanti SC", "YouYuan", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --font-en-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;

  /* 默认：正文宋体，界面黑体，出处跟随正文 */
  --quote-font: var(--font-serif);
  --attrib-font: var(--quote-font);
  --ui-font: var(--font-sans);

  /* ---- 排版默认值 ---- */
  --quote-weight: 500;
  --quote-tracking: 0.03em;
  --quote-leading: 1.42;

  /* ---- 尺寸基准：以 1920×1080 为设计基准，等比缩放到任意屏幕 ---- */
  --scale: 1;
  --u: calc(max(0.55px, min(100vw / 1920, 100vh / 1080)) * var(--scale));

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

/* 正文 / 出处 / 界面字体（取值来自白名单枚举，前端用 data-* 属性切换） */
:root[data-quote-font="serif"] { --quote-font: var(--font-serif); }
:root[data-quote-font="sans"] { --quote-font: var(--font-sans); }
:root[data-quote-font="kai"] { --quote-font: var(--font-kai); }
:root[data-quote-font="fangsong"] { --quote-font: var(--font-fangsong); }
:root[data-quote-font="round"] { --quote-font: var(--font-round); }
:root[data-quote-font="en-serif"] { --quote-font: var(--font-en-serif); }
:root[data-quote-font="mono"] { --quote-font: var(--font-mono); }

:root[data-attrib-font="inherit"] { --attrib-font: var(--quote-font); }
:root[data-attrib-font="serif"] { --attrib-font: var(--font-serif); }
:root[data-attrib-font="sans"] { --attrib-font: var(--font-sans); }
:root[data-attrib-font="kai"] { --attrib-font: var(--font-kai); }

:root[data-chrome-font="sans"] { --ui-font: var(--font-sans); }
:root[data-chrome-font="serif"] { --ui-font: var(--font-serif); }
:root[data-chrome-font="round"] { --ui-font: var(--font-round); }

/* ============================================================
   配色方案 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;
}

/* 配色方案 5：自定义（真实颜色由 display.js 以行内变量注入，这里只是兜底） */
:root[data-palette="custom"] {
  --bg: #faf7fd;
  --ink: #3e2f4d;
  --accent: #a764c1;
}

/* ============================================================
   明暗强度：极致护眼（在所选配色基础上进一步降低亮度与对比）
   ============================================================ */
: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} */
[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;
  }
}