@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --wv-pref-bg: rgba(244, 244, 245, 0.95);
  --wv-pref-border: rgba(24, 24, 27, 0.14);
  --wv-pref-text: #141414;
  --wv-pref-hover: rgba(0, 0, 0, 0.04);
  --wv-pref-ring: rgba(24, 24, 27, 0.22);
  --wv-font-cn-title: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --wv-font-luxe: "Playfair Display", "Cormorant Garamond", "Times New Roman", serif;
  --wv-font-body: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --body-font-family: var(--wv-font-body);
}

body,
button,
input,
textarea,
select,
.custom-form .form-control,
.custom-form .form-select,
.custom-form .form-floating > label,
.cc-login-page,
.cc-login-page .cc-input,
.cc-login-page .cc-form-field label,
.cc-login-page .cc-login-head p,
.cc-login-page .cc-signup-note,
.cc-login-page .cc-form-meta,
.cc-login-page .cc-field-error,
.cc-login-page .cc-form-error,
body[data-page="backend"],
body[data-page="backend"] .label,
body[data-page="backend"] .user,
body[data-page="backend"] .btn {
  font-family: var(--wv-font-body);
}

/* Utility classes for Tailwind/JSX markup when needed */
.font-cn-title {
  font-family: var(--wv-font-cn-title) !important;
}

.font-luxe-serif,
.font-luxe-numeric {
  font-family: var(--wv-font-luxe) !important;
  font-variant-numeric: lining-nums tabular-nums;
}

.font-ui-body {
  font-family: var(--wv-font-body) !important;
}

/* 中文主标题：强制使用思源宋/宋体体系 */
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] .membership-display-title,
html[lang="zh-CN"] .valley-manifesto h1,
html[lang="zh-CN"] .valley-tier-card h2,
html[lang="zh-CN"] .valley-payment-panel-head h3,
html[lang="zh-CN"] .membership-price-wrap h4,
html[lang="zh-CN"] .cc-login-head h1,
html[lang="zh-CN"] body[data-page="backend"] .brand,
html[lang="zh-CN"] body[data-page="backend"] h2 {
  font-family: var(--wv-font-cn-title) !important;
  letter-spacing: 0.01em;
}

/* 金额与英文字母重点区域：Playfair/Cormorant */
.membership-price-wrap h4,
.membership-table-shell thead th,
.valley-tier-card h2,
.valley-tier-index,
.valley-tier-meta p strong,
.valley-payment-plan-name,
.valley-payment-plan-amount,
.valley-summary-row strong,
body[data-page="backend"] .value,
body[data-page="backend"] .brand,
html[lang="en"] .cc-login-head h1 {
  font-family: var(--wv-font-luxe) !important;
  font-variant-numeric: lining-nums tabular-nums;
}

body[data-theme="dark"] {
  --wv-pref-bg: rgba(34, 39, 49, 0.95);
  --wv-pref-border: rgba(255, 255, 255, 0.18);
  --wv-pref-text: #f5f7fb;
  --wv-pref-hover: rgba(255, 255, 255, 0.1);
  --wv-pref-ring: rgba(255, 255, 255, 0.24);
}

.language-switcher {
  width: auto !important;
  min-width: 0 !important;
}

.language-switcher .language-trigger,
.language-switcher .language-menu {
  display: none !important;
}

.wv-pref-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wv-pref-btn {
  height: 34px;
  border: 1px solid var(--wv-pref-border);
  border-radius: 999px;
  background: var(--wv-pref-bg);
  color: var(--wv-pref-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wv-pref-btn:hover {
  background: var(--wv-pref-hover);
}

.wv-pref-btn:active {
  transform: translateY(1px);
}

.wv-pref-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wv-pref-ring);
}

.wv-lang-btn {
  min-width: 78px;
}

.wv-pref-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wv-pref-icon svg,
.wv-theme-icons svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wv-lang-label {
  font-size: 14px;
  font-weight: 600;
}

.wv-theme-btn {
  min-width: 54px;
  padding: 0 9px;
}

.wv-theme-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wv-theme-icons .wv-theme-sun {
  opacity: 0.55;
}

body[data-theme="dark"] .wv-theme-icons .wv-theme-sun {
  opacity: 1;
}

body[data-theme="dark"] .wv-theme-icons .wv-theme-moon {
  opacity: 0.55;
}

.wv-floating-preferences {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1500;
}

.cc-login-page .wv-floating-preferences,
body[data-page="backend"] .wv-floating-preferences {
  top: 16px;
  right: 16px;
}

@media (max-width: 575px) {
  .wv-floating-preferences {
    top: 10px;
    right: 10px;
  }

  .wv-pref-btn {
    height: 32px;
  }

  .wv-lang-btn {
    min-width: 72px;
    padding: 0 9px;
  }
}

/* -------- Dark mode: main template pages -------- */
body[data-theme="dark"] {
  background-color: #0f1218;
  color: #e8edf5;
}

body[data-theme="dark"] p,
body[data-theme="dark"] ul li,
body[data-theme="dark"] .text-secondary,
body[data-theme="dark"] .membership-note,
body[data-theme="dark"] .valley-tier-note,
body[data-theme="dark"] .valley-purchase-note,
body[data-theme="dark"] .purchase-copy,
body[data-theme="dark"] .contact-link {
  color: #a9b4c4 !important;
}

body[data-theme="dark"] .section-bg,
body[data-theme="dark"] .membership-section,
body[data-theme="dark"] .events-section,
body[data-theme="dark"] .contact-section,
body[data-theme="dark"] .about-section,
body[data-theme="dark"] .site-footer,
body[data-theme="dark"] .section-bg-image,
body[data-theme="dark"] .membership-purchase-main,
body[data-theme="dark"] .member-portal-main {
  background-color: #111722 !important;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-theme="dark"] .membership-price-wrap h4,
body[data-theme="dark"] .valley-section-title,
body[data-theme="dark"] .navbar-brand-text,
body[data-theme="dark"] .site-footer-title,
body[data-theme="dark"] .custom-block-info .events-title {
  color: #f1f5fb !important;
}

body[data-theme="dark"] .navbar {
  background: rgba(11, 15, 22, 0.84) !important;
  backdrop-filter: blur(8px);
}

body[data-theme="dark"] .sticky-wrapper.is-sticky .navbar {
  background: rgba(11, 15, 22, 0.96) !important;
}

body[data-theme="dark"] .navbar .navbar-brand,
body[data-theme="dark"] .navbar .navbar-brand:hover,
body[data-theme="dark"] .navbar-nav .nav-link,
body[data-theme="dark"] .dropdown-item {
  color: #e8edf5 !important;
}

body[data-theme="dark"] .navbar-brand-image {
  filter: brightness(0) invert(1) !important;
}

body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .offcanvas,
body[data-theme="dark"] .custom-block,
body[data-theme="dark"] .section-bg-image-block,
body[data-theme="dark"] .membership-form,
body[data-theme="dark"] .contact-form,
body[data-theme="dark"] .membership-price-wrap,
body[data-theme="dark"] .valley-tier-card,
body[data-theme="dark"] .valley-payment-entry,
body[data-theme="dark"] .valley-payment-summary,
body[data-theme="dark"] .contact-info-item,
body[data-theme="dark"] .member-login-form-body {
  background: #17202d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e8edf5 !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .dropdown-menu::before {
  border-bottom-color: #17202d !important;
}

body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] .custom-form input,
body[data-theme="dark"] .custom-form textarea {
  background: #0f1622 !important;
  color: #e8edf5 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body[data-theme="dark"] .form-floating > label,
body[data-theme="dark"] label,
body[data-theme="dark"] .custom-block-span,
body[data-theme="dark"] .table th,
body[data-theme="dark"] .table td {
  color: #c5cfdb !important;
}

body[data-theme="dark"] .table,
body[data-theme="dark"] .table tr,
body[data-theme="dark"] .table tbody,
body[data-theme="dark"] .table thead {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body[data-theme="dark"] .custom-btn,
body[data-theme="dark"] .member-submit-btn,
body[data-theme="dark"] .valley-primary-btn,
body[data-theme="dark"] .valley-tier-cta {
  background: #d8c3a5 !important;
  color: #1f2a1a !important;
  border-color: #d8c3a5 !important;
}

body[data-theme="dark"] .custom-border-btn,
body[data-theme="dark"] .member-google-btn,
body[data-theme="dark"] .valley-secondary-btn {
  background: transparent !important;
  color: #e8edf5 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body[data-theme="dark"] .valley-tier-card.is-active {
  border-color: #d8c3a5 !important;
  box-shadow: 0 0 0 1px #d8c3a5 inset;
}

body[data-theme="dark"] .site-footer svg path,
body[data-theme="dark"] .hero-section > svg path,
body[data-theme="dark"] .hero-section .container + svg path,
body[data-theme="dark"] .section-bg-image > svg path,
body[data-theme="dark"] .section-bg-image .container + svg path {
  fill: #111722 !important;
}

/* -------- Dark mode: login/signup -------- */
body.cc-login-page[data-theme="dark"] {
  --background: 222 30% 7%;
  --foreground: 210 20% 95%;
  --muted-foreground: 215 14% 70%;
  --border: 216 18% 22%;
  --input: 216 18% 22%;
  --ring: 42 44% 69%;
  --primary: 42 44% 69%;
  --primary-foreground: 225 20% 15%;
  --destructive: 0 70% 62%;
  --left-text: 210 20% 95%;
  --left-link: 210 20% 78%;
  --left-chip: 0 0% 100% / 0.16;
  --left-grid: 0 0% 100% / 0.06;
  --left-glow-top: 220 20% 60% / 0.3;
  --left-glow-bottom: 230 20% 75% / 0.22;
}

body.cc-login-page[data-theme="dark"] .cc-login-visual {
  background: linear-gradient(135deg, #2f3542 0%, #222936 52%, #181f2a 100%);
}

body.cc-login-page[data-theme="dark"] .cc-hover-button {
  background: #121926;
  border-color: rgba(255, 255, 255, 0.16);
}

body.cc-login-page[data-theme="dark"] .cc-hover-button-secondary {
  background: #182232;
}

/* -------- Dark mode: backend -------- */
body[data-page="backend"][data-theme="dark"] {
  --bg: #0f131b;
  --card: #151b26;
  --text: #edf2fa;
  --muted: #97a3b8;
  --line: #2d3748;
  --btn: #edf2fa;
  --btnText: #111827;
}

body[data-page="backend"][data-theme="dark"] .pill {
  background: rgba(216, 195, 165, 0.18);
  color: #f0d9bf;
}