@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600;700&display=swap');

:root {
  /* Brand palette: 寻人启事 × 杨浦工业复古 */
  --vjug-paper: #E8DCC0;
  --vjug-paper-dark: #D8C9A8;
  --vjug-card: #F2E9D8;
  --vjug-ink: #1C1A17;
  --vjug-seal: #A8403A;
  --vjug-stamp: #C0392B;
  --vjug-rope: #B89B6E;

  /* Wuxing palette（与 wuxing.json 一致） */
  --vjug-wood: #3A7D44;
  --vjug-fire: #D1495B;
  --vjug-earth: #C8923B;
  --vjug-metal: #9AA7B0;
  --vjug-water: #3B82C4;

  --vjug-text-primary: #1C1A17;
  --vjug-text-secondary: #5B5145;
  --vjug-text-muted: #7D7264;

  --vjug-radius-small: 4px;
  --vjug-radius-medium: 8px;
  --vjug-radius-large: 12px;
  --vjug-radius-full: 9999px;

  --vjug-font-heading: 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --vjug-font-display: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', cursive;
  --vjug-font-body: 'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', serif;

  --vjug-text-xs: 12px;
  --vjug-text-sm: 14px;
  --vjug-text-md: 16px;
  --vjug-text-lg: 20px;
  --vjug-text-xl: 28px;
  --vjug-text-xxl: 40px;
  --vjug-text-poster: 56px;

  --vjug-ease: cubic-bezier(.22, 1, .36, 1);
  --vjug-draw-duration: 1800ms;

  --vjug-shadow-card: 0 4px 16px rgba(28, 26, 23, 0.14);
  --vjug-shadow-seal: 0 2px 6px rgba(168, 64, 58, 0.25);
}

/* Base typography */
body { background: var(--vjug-paper); color: var(--vjug-ink); }
.font-display { font-family: var(--vjug-font-display); }
.font-heading { font-family: var(--vjug-font-heading); }
.font-body { font-family: var(--vjug-font-body); }
.text-xs { font-size: var(--vjug-text-xs); }
.text-sm { font-size: var(--vjug-text-sm); }
.text-md { font-size: var(--vjug-text-md); }
.text-lg { font-size: var(--vjug-text-lg); }
.text-xl { font-size: var(--vjug-text-xl); }
.text-xxl { font-size: var(--vjug-text-xxl); }
.text-poster { font-size: var(--vjug-text-poster); }

/* Paper texture background */
.bg-paper {
  background-color: var(--vjug-paper);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(139, 119, 86, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 119, 86, 0.06) 0%, transparent 40%);
}

/* Riveted metal frame */
.rivet-frame {
  border: 3px solid var(--vjug-metal);
  border-radius: var(--vjug-radius-small);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), var(--vjug-shadow-card);
}
.rivet-frame::before, .rivet-frame::after,
.rivet-frame > .rivet-bottom-left, .rivet-frame > .rivet-bottom-right {
  content: ''; position: absolute; width: 8px; height: 8px;
  background: var(--vjug-metal); border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.rivet-frame::before { top: 6px; left: 6px; }
.rivet-frame::after { top: 6px; right: 6px; }
.rivet-frame > .rivet-bottom-left { bottom: 6px; left: 6px; }
.rivet-frame > .rivet-bottom-right { bottom: 6px; right: 6px; }

/* Red seal stamp */
.seal-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--vjug-stamp); color: var(--vjug-stamp);
  font-family: var(--vjug-font-display); border-radius: var(--vjug-radius-small);
  transform: rotate(-4deg); box-shadow: var(--vjug-shadow-seal);
}

/* Missing-poster card */
.poster-card {
  background: var(--vjug-card); border: 2px solid var(--vjug-ink);
  border-radius: var(--vjug-radius-small); box-shadow: var(--vjug-shadow-card);
}
.ink-underline { border-bottom: 2px solid var(--vjug-ink); }

/* Wuxing color utilities */
.text-wood { color: var(--vjug-wood); }
.text-fire { color: var(--vjug-fire); }
.text-earth { color: var(--vjug-earth); }
.text-metal { color: var(--vjug-metal); }
.text-water { color: var(--vjug-water); }
.bg-wood { background-color: var(--vjug-wood); }
.bg-fire { background-color: var(--vjug-fire); }
.bg-earth { background-color: var(--vjug-earth); }
.bg-metal { background-color: var(--vjug-metal); }
.bg-water { background-color: var(--vjug-water); }

/* CTA buttons */
.btn-primary {
  background: var(--vjug-seal); color: #fff;
  font-family: var(--vjug-font-heading); font-weight: 700;
  border: 2px solid var(--vjug-ink); border-radius: var(--vjug-radius-medium);
  box-shadow: 0 4px 0 var(--vjug-ink);
  transition: transform 150ms var(--vjug-ease), box-shadow 150ms var(--vjug-ease);
}
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--vjug-ink); }
.btn-secondary {
  background: var(--vjug-card); color: var(--vjug-ink);
  font-family: var(--vjug-font-heading); font-weight: 700;
  border: 2px solid var(--vjug-ink); border-radius: var(--vjug-radius-medium);
  box-shadow: 0 3px 0 var(--vjug-ink);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }