/* ==================== 澜梦界花园 · CSS 设计令牌 ==================== */

:root {
  /* 核心色 */
  --fog: #6B938F;
  --fog-dark: #5A8580;
  --text: #FAF7F0;
  --text-soft: rgba(250, 247, 240, 0.6);
  --gold: #C9A86A;

  /* 花色 */
  --flower-tired: #FAF7F0;
  --flower-missing: #C9A86A;
  --flower-unfinished: #C8C8C8;
  --flower-gone: #A8C0D0;
  --flower-unclear: #6B938F;

  /* 背景 */
  --bg: #6B938F;
  --bg-deep: #5A8580;

  /* 字体 */
  --font-serif: "Noto Serif SC", "Source Han Serif CN", serif;
  --font-sans: "Noto Sans SC", "Source Han Sans CN", sans-serif;

  /* 字号 */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 22px;

  /* 间距 */
  --safe-top: 44px;
  --safe-bottom: 34px;
  --page-pad: 20px;

  /* 动画 */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;
}

/* 雾纹噪点背景 */
.fog-texture {
  position: relative;
}

.fog-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}