/* 全局基础样式：所有取值均引用 tokens.css，本文件不出现字面颜色与字体名 */

/* ========== 1) Reset基础 ========== */
* {
  box-sizing: border-box;
}

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  line-height: 1.6;
  /* 滚动条保持浏览器默认样式，不做装饰处理 */
}

/* ========== 2) 水墨晕染背景 ========== */
.ink-bg {
  position: fixed;
  inset: 0;
  /* 令牌值为正数，背景层须落在内容之下 */
  z-index: calc(var(--z-base) * -1);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, var(--ink-glow-1), transparent 50%),
    radial-gradient(ellipse at 80% 70%, var(--ink-glow-2), transparent 50%),
    radial-gradient(ellipse at 50% 50%, var(--ink-glow-3), transparent 60%),
    /* 底部压深一档：靛蓝暗调托住上方的暖金，避免整页只呈现"深蓝黑+金"两色 */
    radial-gradient(ellipse at 50% 115%, var(--color-bg-deep), transparent 70%),
    var(--color-bg);
  animation: ink-breathe var(--dur-breath) ease-in-out infinite;
}

@keyframes ink-breathe {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

/* ========== 3) 字体层级 ========== */
.subtitle {
  font-family: var(--font-kai);
  color: var(--color-text-dim);
  font-size: var(--fs-3);
  letter-spacing: 0.2em;
  text-align: center;
}

h1,
h2,
h3 {
  font-family: var(--font-kai);
  color: var(--color-gold);
}

p {
  font-family: var(--font-song);
  color: var(--color-text);
}

a {
  color: var(--color-gold);
  text-decoration: none;
}

a:hover {
  text-shadow: var(--shadow-gold);
}

/* ========== 4) 降低动效降级 ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ink-bg {
    animation: none;
  }
}