/* ============================================================
   Sol 的小书房 · 基座
   昼夜两套颜色、纸纹、排版。所有页面共用。
   原则：轻、留白多、像纸和室内光，不像"网站"。
   ============================================================ */

/* ---------- 颜色：白天是纸和墙，夜晚是关了顶灯的房间 ---------- */
:root {
  --wall: #f4eee1;          /* 墙面，暖白 */
  --wall-deep: #ece4d2;     /* 墙脚、地面 */
  --paper: #fbf6ea;         /* 纸 */
  --paper-warm: #f7efdd;    /* 暖一点的纸 */
  --ink: #463c31;           /* 墨色，偏暖 */
  --ink-soft: #756855;
  --ink-faint: #a2937d;
  --line: rgba(70, 60, 49, .16);
  --pink: #e9c9c2;          /* 很浅的粉，胶带、细线 */
  --pink-deep: #c08a80;
  --wood: #a9835f;          /* 木 */
  --wood-deep: #8a6a4c;
  --glow: rgba(255, 214, 140, .55);  /* 灯光 */
  --sky: #cfdde4;
  --shadow: rgba(70, 55, 35, .18);
  --card-shadow: 0 1px 2px rgba(70,55,35,.08), 0 10px 28px -12px rgba(70,55,35,.25);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
}

[data-theme="night"] {
  --wall: #1f2631;          /* 夜里的墙，蓝灰 */
  --wall-deep: #1a212b;
  --paper: #2c3442;         /* 夜里的纸：灯光下的颜色 */
  --paper-warm: #333b49;
  --ink: #d9d2c3;
  --ink-soft: #a9a292;
  --ink-faint: #767166;
  --line: rgba(217, 210, 195, .14);
  --pink: #7a5a58;
  --pink-deep: #c79a92;
  --wood: #6e563e;
  --wood-deep: #584431;
  --glow: rgba(255, 205, 120, .5);
  --sky: #141a26;
  --shadow: rgba(0, 0, 0, .45);
  --card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.6);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--serif);
  background: var(--wall);
  color: var(--ink);
  line-height: 2;
  letter-spacing: .02em;
  min-height: 100vh;
  transition: background-color 1.2s ease, color 1.2s ease;
  overflow-x: hidden;
}

::selection { background: var(--pink); color: var(--ink); }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: inherit;
}

/* 纸纹：一层极细的噪点，让大面积颜色不死 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 一点点暗角，像房间而不是屏幕 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(120% 90% at 50% 40%, transparent 62%, var(--shadow) 130%);
  opacity: .35;
  transition: opacity 1.2s ease;
}
[data-theme="night"] body::after, body[data-theme="night"]::after { opacity: .55; }

/* ---------- 公共小件 ---------- */

/* 页眉：不喊口号，像门牌 */
.plaque {
  padding: 2.2rem clamp(1.2rem, 5vw, 4rem) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.plaque .home {
  font-size: .95rem;
  color: var(--ink-soft);
  transition: color .4s ease;
}
.plaque .home::before {
  content: "✦";
  color: var(--pink-deep);
  font-size: .8em;
  margin-right: .45em;
  opacity: .8;
}
.plaque .home:hover { color: var(--ink); }
.plaque .where {
  font-size: .85rem;
  color: var(--ink-faint);
}

/* 返回：像轻轻把门带上 */
.back {
  display: inline-block;
  font-size: .9rem;
  color: var(--ink-faint);
  padding: .4rem 0;
  transition: color .4s ease;
}
.back:hover { color: var(--ink); }

/* 昼夜切换的小灯（房间以外的页面用） */
.lamp-toggle {
  position: fixed;
  right: clamp(1rem, 4vw, 2.2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: var(--card-shadow);
  transition: box-shadow .45s ease, color .4s ease;
}
.lamp-toggle:hover {
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(70,55,35,.12), 0 16px 30px -12px var(--shadow);
}
.lamp-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.lamp-toggle:hover svg { transform: rotate(-12deg) scale(1.06); }

/* 段落里轻轻的强调 */
em { font-style: normal; color: var(--pink-deep); }

/* 手机上把灯放回页眉附近，不压住正文和纸片。 */
@media (max-width: 640px) {
  .lamp-toggle {
    position: absolute;
    top: 4.4rem;
    right: 1rem;
    bottom: auto;
    width: 36px;
    height: 36px;
  }
}

/* 动效克制：尊重减弱动态偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}