@import url('./design-tokens.css');

/* 所有正文与关键文字对比度必须 >= 4.5:1；重要信息与小字优先 >= 7:1 */

body {
  background:
    radial-gradient(circle at top left, rgba(201, 169, 110, 0.08), transparent 24%),
    linear-gradient(180deg, #fbf8f2 0%, var(--color-bg-primary) 52%, #f2ece1 100%) !important;
  color: var(--color-text-primary) !important;
}

body::before {
  opacity: 0.62 !important;
}

.site-header {
  background: rgba(251, 248, 242, 0.74) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(23, 60, 52, 0.08) !important;
  box-shadow: none !important;
}

.site-header.scrolled {
  background: rgba(251, 248, 242, 0.88) !important;
  box-shadow: var(--shadow-1) !important;
}

.logo-text strong {
  font-family: var(--font-heading-en) !important;
  letter-spacing: 0.18em !important;
}

.logo-text span {
  color: var(--color-text-secondary) !important;
}

.nav-links a {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(31, 31, 28, 0.74) !important;
}

.nav-links a::before,
.nav-links a::after {
  display: none !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-brand) !important;
  background: rgba(23, 60, 52, 0.06) !important;
  border-color: rgba(23, 60, 52, 0.08) !important;
  transform: none !important;
}

.search-toggle,
.header-cta,
.button,
.button-secondary,
.button-ghost,
.chip {
  box-shadow: none !important;
}

.header-cta,
.button {
  background: linear-gradient(135deg, var(--color-brand) 0%, #295245 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.button-secondary {
  background: rgba(23, 60, 52, 0.08) !important;
  color: var(--color-brand) !important;
  border: 1px solid rgba(23, 60, 52, 0.12) !important;
}

.button-ghost {
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--color-brand) !important;
  border: 1px solid rgba(23, 60, 52, 0.1) !important;
}

.header-cta:hover,
.button:hover,
.button-secondary:hover,
.button-ghost:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-1) !important;
}

.hero,
.page-hero {
  position: relative;
  min-height: auto !important;
  border-radius: 0 0 46px 46px !important;
}

.hero::before,
.page-hero::before {
  background:
    linear-gradient(180deg, rgba(7, 19, 14, 0.26), rgba(7, 19, 14, 0.78)),
    linear-gradient(118deg, rgba(10, 34, 23, 0.95) 0%, rgba(10, 34, 23, 0.62) 44%, rgba(10, 34, 23, 0.22) 100%) !important;
}

.hero-inner,
.page-hero .container {
  padding-top: 104px !important;
  padding-bottom: 82px !important;
}

.hero-grid,
.page-hero-grid {
  gap: 32px !important;
  align-items: end !important;
}

.hero-content h1,
.page-hero h1,
.detail-hero h1 {
  font-family: var(--font-heading-cn) !important;
  font-size: clamp(3.1rem, 6vw, 6.2rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.05em !important;
}

.hero-content p,
.page-hero p,
.detail-hero p {
  max-width: 680px !important;
  color: rgba(255, 255, 255, 0.84) !important;
  line-height: 1.88 !important;
}

.hero-kicker,
.section-kicker,
.eyebrow,
.planner-kicker {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.hero-aside-stack,
.planner-hero-note,
.page-hero-panel,
.glass-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.section {
  padding: 80px 0 !important;
}

.section.alt {
  background: rgba(255, 255, 255, 0.44) !important;
}

.section-head {
  margin-bottom: 24px !important;
  align-items: end !important;
}

.section-head h2,
.large-manifesto h2 {
  font-family: var(--font-heading-cn) !important;
  color: var(--color-brand) !important;
  line-height: 1.08 !important;
}

.section-head p,
.large-manifesto p,
.footer-col p,
.timeline-item p,
.card-body p,
.info-box p,
.form-card p {
  color: var(--color-text-secondary) !important;
}

.card-grid {
  gap: 20px !important;
}

.card,
.quote-card,
.info-box,
.form-card,
.faq-item,
.partner-card,
.qr-card,
.planner-panel,
.mode-card,
.step-card,
.form-shell,
.preview-shell,
.day-card,
.export-modal,
.contact-note,
.trust-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 248, 242, 0.92)) !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
  box-shadow: none !important;
}

.card {
  border-radius: 24px !important;
  overflow: clip !important;
}

.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-2) !important;
  border-color: rgba(23, 60, 52, 0.14) !important;
}

.card-media,
.landscape-media,
.tall-media,
.profile-media {
  min-height: auto !important;
  aspect-ratio: 4 / 3 !important;
}

.card-media::after,
.landscape-media::after,
.tall-media::after,
.profile-media::after {
  background: linear-gradient(180deg, rgba(12, 32, 23, 0.08), rgba(12, 32, 23, 0.46)) !important;
}

.card-badge,
.article-tag,
.detail-pill,
.pill {
  box-shadow: none !important;
}

.card-body {
  padding: 22px 22px 24px !important;
  gap: 10px !important;
}

.card-body h3,
.quote-card h3,
.form-card h3,
.info-box h3,
.qr-card h3 {
  font-family: var(--font-heading-cn) !important;
  color: var(--color-brand) !important;
}

.price-line,
.timeline,
.detail-summary,
.overview-grid,
.contact-grid,
.faq-grid,
.footer-grid {
  gap: 20px !important;
}

.manifesto-card,
.cta-band,
.timeline-item,
.detail-hero-note,
.detail-highlight,
.detail-stats,
.detail-block,
.starred-card,
.starred-toolbar,
.starred-detail-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 236, 0.92)) !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
  box-shadow: none !important;
}

.cta-band,
.manifesto-card {
  border-radius: 28px !important;
}

.timeline-item {
  border-radius: 22px !important;
  padding: 24px !important;
}

.timeline-day {
  background: rgba(23, 60, 52, 0.06) !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
  color: var(--color-brand) !important;
  box-shadow: none !important;
}

.footer {
  background: linear-gradient(180deg, #123226 0%, #0d261d 100%) !important;
}

.footer-bottom,
.footer-links a,
.footer-col h4 {
  color: rgba(255, 255, 255, 0.86) !important;
}

.footer-links a:hover {
  color: #fff !important;
}

body[data-page="home"] .hero {
  min-height: 78vh !important;
}

body[data-page="home"] .hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr) !important;
}

body[data-page="home"] .ai-entry-card {
  border-radius: 32px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(15, 57, 37, 0.97), rgba(32, 91, 64, 0.94)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-page="home"] .ai-entry-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr) !important;
  gap: 26px !important;
  align-items: end !important;
}

body[data-page="home"] .ai-entry-content h2 {
  font-family: var(--font-heading-cn) !important;
  font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
  line-height: 1.06 !important;
}

body[data-page="home"] .ai-entry-actions {
  gap: 10px !important;
}

body[data-page="planner"] .planner-shell {
  padding-top: 28px !important;
}

body[data-page="planner"] .planner-hero {
  padding: 54px 48px !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 84% 16%, rgba(201, 169, 110, 0.18), transparent 18%),
    linear-gradient(135deg, rgba(15, 57, 37, 0.98), rgba(27, 77, 54, 0.94)) !important;
}

body[data-page="planner"] .planner-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr) !important;
}

body[data-page="planner"] .planner-main {
  margin-top: 22px !important;
}

body[data-page="planner"] .planner-panel,
body[data-page="planner"] .step-card,
body[data-page="planner"] .form-shell,
body[data-page="planner"] .preview-shell {
  border-radius: 24px !important;
  padding: 30px !important;
}

body[data-page="planner"] .landing-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-page="planner"] .mode-card {
  padding: 30px !important;
  border-radius: 20px !important;
}

body[data-page="planner"] .planner-entry-row {
  margin-top: 22px !important;
  gap: 12px !important;
}

body[data-page="planner"] .planner-entry-hints {
  margin-top: 10px !important;
  color: var(--color-text-secondary) !important;
}

body[data-page="planner"] .trust-band {
  margin-top: 18px !important;
  padding: 18px 20px !important;
  background: rgba(247, 244, 236, 0.9) !important;
}

body[data-page="planner"] .preview-head {
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(23, 60, 52, 0.08) !important;
}

body[data-page="planner"] .preview-actions {
  position: sticky !important;
  top: 84px !important;
  z-index: 7 !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  border-radius: 22px !important;
  background: rgba(251, 248, 242, 0.9) !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
  backdrop-filter: blur(12px);
}

body[data-page="planner"] .planner-action-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-page="planner"] .planner-action-card {
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgba(247, 244, 236, 0.94) !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
}

body[data-page="planner"] .day-stack {
  gap: 16px !important;
}

body[data-page="planner"] .day-card {
  border-radius: 20px !important;
  overflow: clip !important;
}

body[data-page="planner"] .day-summary {
  padding: 18px 22px !important;
  background: rgba(247, 244, 236, 0.8) !important;
}

body[data-page="planner"] .day-body {
  padding: 0 22px 22px !important;
}

body[data-page="planner"] .segment-card,
body[data-page="planner"] .budget-card,
body[data-page="planner"] .tips-card {
  border-radius: 18px !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

body[data-page="planner"] .loading-shell,
body[data-page="planner"] .refine-progress-panel {
  border-radius: 28px !important;
}

body[data-page="hotels"] .hero,
body[data-page="experiences"] .hero,
body[data-page="destinations"] .hero,
body[data-page="about"] .hero,
body[data-page="contact"] .hero,
body[data-page="journal"] .hero,
body[data-page="privacy"] .hero {
  min-height: 62vh !important;
}

body[data-page="hotels"] .hero-grid,
body[data-page="experiences"] .hero-grid,
body[data-page="destinations"] .hero-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr) !important;
}

body[data-page="hotels"] .card-grid,
body[data-page="experiences"] .card-grid,
body[data-page="destinations"] .card-grid {
  gap: 20px !important;
}

body[data-page="starred"] .page-hero .hero-card,
body[data-page="starred"] .starred-toolbar,
body[data-page="starred"] .starred-card,
body[data-page="starred"] .starred-detail-panel {
  border-radius: 24px !important;
}

.detail-route-bar {
  margin-top: -22px !important;
  border-radius: 20px !important;
  background: rgba(251, 248, 242, 0.94) !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
  box-shadow: var(--shadow-2) !important;
}

.detail-route-bar__title {
  color: var(--color-brand) !important;
  font-family: var(--font-heading-cn) !important;
}

.detail-route-bar__hint {
  color: var(--color-text-secondary) !important;
}

.detail-route-btn {
  background: linear-gradient(135deg, var(--color-brand), #2c5a4a) !important;
  box-shadow: none !important;
}

.detail-route-btn:hover {
  box-shadow: var(--shadow-1) !important;
}

.hotel-ai-float,
.hotel-ai-result-modal__panel {
  border-radius: 26px !important;
  background: var(--surface-panel) !important;
  border: 1px solid rgba(23, 60, 52, 0.08) !important;
  box-shadow: var(--shadow-2) !important;
}

.hotel-ai-float__btn,
.hotel-ai-result__cta a {
  background: var(--interactive-primary) !important;
  box-shadow: none !important;
}

.hotel-ai-float__btn:hover,
.hotel-ai-result__cta a:hover {
  box-shadow: var(--shadow-1) !important;
}

.timeline {
  gap: 18px !important;
}

.timeline-item,
.detail-day,
.detail-budget,
.detail-tip-box {
  border-radius: 22px !important;
}

.hero-card,
.manifesto-card,
.ai-entry-card,
.starred-toolbar,
.starred-card,
.starred-detail-panel {
  box-shadow: var(--shadow-2) !important;
}

@media (max-width: 1024px) {
  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-page="planner"] .planner-action-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .hero,
  .page-hero {
    border-radius: 0 0 30px 30px !important;
  }

  .hero-inner,
  .page-hero .container {
    padding-top: 92px !important;
    padding-bottom: 60px !important;
  }

  .hero-grid,
  .page-hero-grid,
  body[data-page="home"] .ai-entry-layout,
  body[data-page="planner"] .landing-grid {
    grid-template-columns: 1fr !important;
  }

  .section {
    padding: 64px 0 !important;
  }

  .card-grid,
  .card-grid.four,
  .card-grid.two {
    grid-template-columns: 1fr !important;
  }

  body[data-page="planner"] .planner-panel,
  body[data-page="planner"] .step-card,
  body[data-page="planner"] .form-shell,
  body[data-page="planner"] .preview-shell {
    padding: 22px !important;
  }

  body[data-page="planner"] .preview-actions {
    top: 74px !important;
    padding: 12px !important;
  }

  .detail-route-bar {
    width: min(calc(100% - 32px), var(--container, 1220px)) !important;
  }
}