/* =========================================================
   base.css — Reset + 排版 + 背景纹理
   背景策略：
     · light：苹果风 mesh gradient（柔和光斑）+ 淡灰网格
     · dark：黑底 + 星空 SVG
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--bg);
  min-height: 100vh;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ---------- 浅色模式：莫兰迪 mesh gradient（4 个柔和光斑） ---------- */
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 55% 45% at 12% 12%,  rgba(216, 197, 192, 0.55), transparent 60%),  /* 灰粉 */
    radial-gradient(ellipse 50% 40% at 88% 18%,  rgba(168, 184, 196, 0.50), transparent 60%),  /* 灰蓝 */
    radial-gradient(ellipse 55% 45% at 15% 88%,  rgba(168, 196, 176, 0.50), transparent 60%),  /* 灰绿 */
    radial-gradient(ellipse 50% 40% at 85% 85%,  rgba(212, 200, 168, 0.50), transparent 60%);  /* 灰黄 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---------- 浅色背景：网格（叠在 mesh gradient 上，加深可见度） ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(60, 55, 48, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60, 55, 48, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  transition: opacity 0.4s ease;
}

/* ---------- 暗色背景：星空（独立 SVG，不平铺） ---------- */
[data-theme="dark"] body::before {
  background-image: url("../img/stars.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

a    { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
::selection { background: var(--brand-bg); color: var(--brand-ink); }

/* ---------- 排版 ---------- */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- 容器 ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* ---------- Page 切换动画 ---------- */
.page { animation: pageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
[hidden] { display: none !important; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   全局滚动条（极细 6px，精致）
   ========================================================= */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 55, 48, 0.25) transparent;
}
[data-theme="dark"] * {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(60, 55, 48, 0.25);
  border-radius: 3px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 55, 48, 0.45);
}
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}