/* ==========================================================================
   theme.css · 「月下雾图书馆」主题层
   --------------------------------------------------------------------------
   设计令牌 + 全局氛围 + 通用装饰组件。app.css / admin.css 共用。
   index.html 中在 app.css、admin.css 之后引入，用 :root 覆盖基础色板。
   资源路径约定见 docs/美术风格.md。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 字体 */
  --mh-font-display: "Georgia", "Times New Roman", "KaiTi", "STKaiti", "Kaiti SC", "楷体", serif;
  --mh-font-reading: "Georgia", "KaiTi", "STKaiti", "Kaiti SC", serif;
  --mh-tracking-wide: 0.22em;

  /* 金 / 玫瑰 / 月光紫 */
  --mh-gold: #a9772a;
  --mh-gold-bright: #d8ae55;
  --mh-gold-soft: rgba(169, 119, 42, 0.13);
  --mh-gold-line: rgba(169, 119, 42, 0.38);
  --mh-rose: #b5606d;
  --mh-rose-soft: rgba(181, 96, 109, 0.12);
  --mh-violet: #6f55b8;
  --mh-violet-soft: rgba(111, 85, 184, 0.12);

  /* 氛围光 */
  --mh-glow-warm: rgba(216, 174, 85, 0.16);
  --mh-glow-cool: rgba(111, 85, 184, 0.13);
  --mh-glass-bg: rgba(255, 253, 248, 0.68);
  --mh-glass-border: rgba(169, 119, 42, 0.22);
  --mh-glass-blur: blur(18px) saturate(1.18);

  /* 纹理 */
  --mh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");

  /* 图像（离线打包，路径固定） */
  --mh-img-hero: url("/assets/img/hero-stars.jpg");
  --mh-img-moon: url("/assets/img/hero-moon.jpg");
  --mh-img-library: url("/assets/img/bg-library.jpg");
  --mh-img-forest: url("/assets/img/bg-forest.jpg");
  --mh-img-paper: url("/assets/img/paper-texture.jpg");
  --mh-img-portrait: url("/assets/img/portrait-main.webp");
  --mh-img-face: url("/assets/img/portrait-face.webp");

  /* 影 */
  --mh-shadow-soft: 0 10px 30px rgba(74, 58, 102, 0.10), 0 2px 6px rgba(74, 58, 102, 0.05);
  --mh-shadow-lift: 0 18px 44px rgba(74, 58, 102, 0.16), 0 3px 10px rgba(74, 58, 102, 0.08);
  --mh-shadow-gold: 0 0 0 1px rgba(169, 119, 42, 0.18), 0 8px 28px rgba(169, 119, 42, 0.12);
  --mh-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --mh-radius-ornate: 18px;
  --mh-ease: cubic-bezier(0.22, 0.72, 0.28, 1);

  /* 主题色板：浅色 · 羊皮纸与月光（覆盖 app.css 基础令牌） */
  --bg: #f6f1e7;
  --bg-elevated: #fffdf8;
  --bg-sunken: #efe7d8;
  --bg-subtle: #faf6ee;
  --bg-hover: #f2ebdd;
  --bg-active: #ebe2d0;
  --text: #2a2435;
  --text-2: #665d78;
  --text-3: #8d839c;
  --text-4: #b0a7bb;
  --border: #e5dccd;
  --border-strong: #d5c9b7;
  --brand: #6f55b8;
  --brand-hover: #5d44a4;
  --brand-soft: rgba(111, 85, 184, 0.10);
  --brand-soft-2: rgba(111, 85, 184, 0.18);
  --brand-border: rgba(111, 85, 184, 0.34);
  --danger: #bf4f57;
  --danger-soft: rgba(191, 79, 87, 0.10);
  --danger-border: rgba(191, 79, 87, 0.30);
  --success: #2f8a63;
  --success-soft: rgba(47, 138, 99, 0.11);
  --warning: #a97522;
  --warning-soft: rgba(169, 117, 34, 0.12);
  --info: #4a7fb8;
  --canvas-bg: #f2ebdd;
  --canvas-dot: #ddd2bf;
  --edge: #c9bda8;
  --edge-hot: #9d8ac9;
  --overlay: rgba(42, 36, 53, 0.42);
  --shadow-sm: 0 1px 2px rgba(74, 58, 102, 0.07), 0 1px 1px rgba(74, 58, 102, 0.04);
  --shadow-md: 0 6px 18px rgba(74, 58, 102, 0.09), 0 1px 3px rgba(74, 58, 102, 0.05);
  --shadow-lg: 0 22px 56px rgba(74, 58, 102, 0.18), 0 4px 14px rgba(74, 58, 102, 0.07);
  --focus-ring: 0 0 0 3px rgba(111, 85, 184, 0.26);
  --mark-bg: rgba(232, 190, 92, 0.35);
  --mark-text: #6b4708;
}

[data-theme="dark"] {
  --mh-gold: #e0bd74;
  --mh-gold-bright: #f0d18e;
  --mh-gold-soft: rgba(224, 189, 116, 0.13);
  --mh-gold-line: rgba(224, 189, 116, 0.34);
  --mh-rose: #e5a0ab;
  --mh-rose-soft: rgba(229, 160, 171, 0.12);
  --mh-violet: #b39cf5;
  --mh-violet-soft: rgba(179, 156, 245, 0.13);

  --mh-glow-warm: rgba(224, 189, 116, 0.12);
  --mh-glow-cool: rgba(179, 156, 245, 0.16);
  --mh-glass-bg: rgba(24, 19, 34, 0.62);
  --mh-glass-border: rgba(224, 189, 116, 0.18);
  --mh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E");

  --mh-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.24);
  --mh-shadow-lift: 0 22px 54px rgba(0, 0, 0, 0.46), 0 4px 12px rgba(0, 0, 0, 0.3);
  --mh-shadow-gold: 0 0 0 1px rgba(224, 189, 116, 0.2), 0 8px 30px rgba(224, 189, 116, 0.1);
  --mh-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* 深夜天文台 */
  --bg: #131019;
  --bg-elevated: #1c1725;
  --bg-sunken: #0e0b13;
  --bg-subtle: #1a1523;
  --bg-hover: #221b2e;
  --bg-active: #2a2138;
  --text: #efe9f7;
  --text-2: #bdb2cc;
  --text-3: #9084a3;
  --text-4: #6f6480;
  --border: #2c2439;
  --border-strong: #3b3050;
  --brand: #b39cf5;
  --brand-hover: #c7b4ff;
  --brand-soft: rgba(179, 156, 245, 0.14);
  --brand-soft-2: rgba(179, 156, 245, 0.22);
  --brand-border: rgba(179, 156, 245, 0.4);
  --danger: #f08a8a;
  --danger-soft: rgba(240, 138, 138, 0.12);
  --danger-border: rgba(240, 138, 138, 0.32);
  --success: #63d6a6;
  --success-soft: rgba(99, 214, 166, 0.12);
  --warning: #e8c172;
  --warning-soft: rgba(232, 193, 114, 0.12);
  --info: #8db4f2;
  --canvas-bg: #0d0a12;
  --canvas-dot: #241d30;
  --edge: #332a44;
  --edge-hot: #6b56a0;
  --overlay: rgba(6, 3, 10, 0.64);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 7px 20px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.55), 0 5px 16px rgba(0, 0, 0, 0.32);
  --focus-ring: 0 0 0 3px rgba(179, 156, 245, 0.32);
  --mark-bg: rgba(224, 189, 116, 0.28);
  --mark-text: #f5dfae;
}

/* ---------- 2. 全局氛围 ---------- */
html {
  background-color: var(--bg);
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 760px at 82% -14%, var(--mh-glow-warm), transparent 62%),
    radial-gradient(980px 680px at -8% 6%, var(--mh-glow-cool), transparent 60%),
    var(--mh-grain);
  background-attachment: fixed, fixed, fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(216, 174, 85, 0.38);
  color: var(--text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--mh-gold-line) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mh-gold-line), var(--border-strong));
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--mh-gold), var(--brand));
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}

/* ---------- 3. 通用装饰组件 ---------- */
.mh-display {
  font-family: var(--mh-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mh-reading {
  font-family: var(--mh-font-reading);
}

.mh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--mh-tracking-wide);
  text-transform: uppercase;
  color: var(--mh-gold);
}

.mh-eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mh-gold-line));
}

.mh-rule-star {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mh-gold);
  font-size: 11px;
  user-select: none;
}

.mh-rule-star::before,
.mh-rule-star::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mh-gold-line), transparent);
}

.mh-card-ornate {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--mh-radius-ornate);
  box-shadow: var(--mh-shadow-soft), var(--mh-shadow-inner);
}

[data-theme="dark"] .mh-card-ornate {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%),
    var(--bg-elevated);
}

.mh-card-ornate::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mh-gold-line), transparent);
  pointer-events: none;
}

.mh-glass {
  background: var(--mh-glass-bg);
  border: 1px solid var(--mh-glass-border);
  -webkit-backdrop-filter: var(--mh-glass-blur);
  backdrop-filter: var(--mh-glass-blur);
}

.mh-portrait-frame {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--mh-gold-bright),
    rgba(216, 174, 85, 0.15) 24%,
    var(--mh-gold) 48%,
    rgba(111, 85, 184, 0.35) 70%,
    var(--mh-gold-bright)
  );
  box-shadow: 0 6px 20px rgba(169, 119, 42, 0.22);
}

.mh-portrait-frame > img,
.mh-portrait-frame > svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  background: var(--bg-subtle);
}

.mh-portrait-arch {
  position: relative;
  overflow: hidden;
  border-radius: 50% 50% 16px 16px / 44% 44% 16px 16px;
  border: 1px solid var(--mh-gold-line);
  box-shadow: var(--mh-shadow-soft), 0 0 0 4px var(--mh-gold-soft);
}

.mh-portrait-arch > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.mh-art-hero {
  background-image:
    linear-gradient(100deg, var(--bg) 0%, rgba(255, 255, 255, 0) 58%),
    var(--mh-img-hero);
  background-size: cover, cover;
  background-position: center, center 38%;
}

[data-theme="dark"] .mh-art-hero {
  background-image:
    linear-gradient(100deg, var(--bg) 0%, rgba(19, 16, 25, 0.35) 52%, rgba(19, 16, 25, 0) 82%),
    var(--mh-img-hero);
}

.mh-art-library {
  background-image:
    linear-gradient(180deg, rgba(19, 16, 25, 0.12), rgba(19, 16, 25, 0.55)),
    var(--mh-img-library);
  background-size: cover;
  background-position: center;
}

.mh-photo-fade {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

.mh-starfield {
  background-image:
    radial-gradient(1.2px 1.2px at 18% 24%, rgba(240, 209, 142, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(240, 209, 142, 0.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 41% 63%, rgba(199, 180, 255, 0.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 86% 57%, rgba(240, 209, 142, 0.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 62% 88%, rgba(199, 180, 255, 0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 8% 78%, rgba(240, 209, 142, 0.55), transparent 60%);
}

.mh-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  background: radial-gradient(circle, var(--mh-glow-warm), transparent 70%);
}

.mh-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--mh-gold-line) 50%, var(--border-strong) 80%, transparent);
}

.mh-gold-text {
  color: var(--mh-gold);
}

.mh-link-gold {
  color: var(--mh-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--mh-ease), color 160ms var(--mh-ease);
}

.mh-link-gold:hover {
  color: var(--mh-gold-bright);
  border-bottom-color: var(--mh-gold-line);
}

/* ---------- 4. 动效 ---------- */
@keyframes mh-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes mh-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes mh-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -12px, 0) scale(1.05); }
}

@keyframes mh-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mh-shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

.mh-anim-float { animation: mh-float 9s ease-in-out infinite; }
.mh-anim-twinkle { animation: mh-twinkle 4.5s ease-in-out infinite; }
.mh-anim-drift { animation: mh-drift 16s ease-in-out infinite; }
.mh-anim-rise { animation: mh-rise 420ms var(--mh-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .mh-anim-float,
  .mh-anim-twinkle,
  .mh-anim-drift,
  .mh-anim-rise {
    animation: none !important;
  }
}

/* ==========================================================================
   5. 公共视图扩展令牌 · 月光台灯 / 羊皮纸 / 星图（只追加，不动上文）
   仅供 app.css 的公共界面使用；admin 视图继续使用原有令牌。
   ========================================================================== */
:root {
  /* 可读性优先的墨色阶梯：--mh-ink-soft 对羊皮纸 ≥ 6.5:1，--mh-ink-faint ≥ 4.8:1 */
  --mh-ink-soft: #5b5268;
  --mh-ink-faint: #6f6579;
  --mh-gold-ink: #8a5f1f;
  --mh-gold-rule: rgba(169, 119, 42, 0.30);
  --mh-gold-glow: rgba(169, 119, 42, 0.14);
  --mh-paper: #fbf7ee;
  --mh-paper-deep: #f1e8d7;
  --mh-seal: #4c3a78;
  --mh-seal-2: #6a51a8;
  --mh-seal-ink: #fdf8ec;
  --mh-canvas-veil: rgba(246, 241, 231, 0.62);
  --mh-vignette: rgba(74, 58, 102, 0.10);
  --mh-night: #0d0a12;
  --mh-star: rgba(169, 119, 42, 0.38);
  --mh-star-cool: rgba(111, 85, 184, 0.24);
  --mh-sheet-top: rgba(255, 255, 255, 0.55);
  --mh-sheet-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 30px -18px rgba(74, 58, 102, 0.5);

  /* 装饰图像（离线手绘 SVG） */
  --mh-decor-sigil: url("/assets/decor/sigil-moon-star.svg");
  --mh-decor-corner: url("/assets/decor/corner-flourish.svg");
  --mh-decor-phases: url("/assets/decor/moon-phases.svg");
  --mh-decor-constellation: url("/assets/decor/constellation.svg");
  --mh-decor-divider: url("/assets/decor/divider-star.svg");
  --mh-decor-empty: url("/assets/decor/empty-constellation.svg");
  --mh-decor-empty-detail: url("/assets/decor/empty-detail.svg");
  --mh-decor-hat: url("/assets/decor/witch-hat.svg");
  --mh-decor-moon: url("/assets/decor/moon-crescent.svg");
}

[data-theme="dark"] {
  --mh-ink-soft: #c3b8d2;
  --mh-ink-faint: #a99dbd;
  --mh-gold-ink: #e0bd74;
  --mh-gold-rule: rgba(224, 189, 116, 0.30);
  --mh-gold-glow: rgba(224, 189, 116, 0.15);
  --mh-paper: #1c1725;
  --mh-paper-deep: #141019;
  --mh-seal: #211a30;
  --mh-seal-2: #3a2d55;
  --mh-seal-ink: #f0d18e;
  --mh-canvas-veil: rgba(13, 10, 18, 0.55);
  --mh-vignette: rgba(0, 0, 0, 0.48);
  --mh-night: #0d0a12;
  --mh-star: rgba(224, 189, 116, 0.45);
  --mh-star-cool: rgba(179, 156, 245, 0.34);
  --mh-sheet-top: rgba(255, 255, 255, 0.05);
  --mh-sheet-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.85);
}

/* 小号烫金字（可读性达标的金色文字，用于 eyebrow / 标签） */
.mh-gold-ink {
  color: var(--mh-gold-ink);
}

.mh-eyebrow-ink {
  color: var(--mh-gold-ink);
}

.mh-eyebrow-ink::before {
  background: linear-gradient(90deg, transparent, var(--mh-gold-rule));
}