/*
 * 三峡旅游网 PC 全站主题规范
 *
 * 只统一视觉令牌、组件状态和各详情页的色彩层级；
 * 不触碰 API、线路、报名、支付、订单查询等业务逻辑。
 */

:root {
  /* 页面层级 */
  --sx-canvas: #F2EEE4;
  --sx-paper: #FBF9F3;
  --sx-paper-soft: #F7F3EA;
  --sx-paper-green: #EFF5F1;
  --sx-line: #D9D0BF;

  /* 文本层级 */
  --sx-ink: #1C302C;
  --sx-soot: #495750;
  --sx-mist: #76817A;

  /* 品牌与功能色 */
  --sx-pine: #1E6253;
  --sx-pine-dark: #164B40;
  --sx-pine-soft: #E4F0EA;
  --sx-inkblue: #294A59;
  --sx-footer: #355866;
  --sx-gold: #AE7A35;
  --sx-gold-soft: #F3E6D1;
  --sx-clay: #B64936;
  --sx-clay-dark: #923A2B;
  --sx-focus: #B64936;

  --sx-shadow: 0 10px 28px rgba(36, 53, 47, .07);
}

html { background: var(--sx-canvas); }

body,
body[class*="bg-[#EFEBE0]"] {
  background-color: var(--sx-canvas) !important;
  color: var(--sx-ink);
}

/* Tailwind 语义工具类：首页与子页都使用同一组，而不是按页面各自重定义。 */
.bg-paper { background-color: var(--sx-paper) !important; }
.bg-inkblue { background-color: var(--sx-inkblue) !important; }
.bg-pine { background-color: var(--sx-pine) !important; }
.bg-gold { background-color: var(--sx-gold) !important; }
.bg-cinnabar { background-color: var(--sx-clay) !important; }
.bg-celadon { background-color: var(--sx-pine-soft) !important; }
.bg-apricot { background-color: #F5E7D8 !important; }
.bg-rice { background-color: var(--sx-gold-soft) !important; }

[class*="bg-[#FBFAF6]"],
[class*="bg-[#F8F5ED]"],
[class*="bg-[#F5F1EB]"] { background-color: var(--sx-paper) !important; }

.text-ink { color: var(--sx-ink) !important; }
.text-soot { color: var(--sx-soot) !important; }
.text-mist { color: var(--sx-mist) !important; }
.text-pine { color: var(--sx-pine) !important; }
.text-gold { color: var(--sx-gold) !important; }
.text-cinnabar { color: var(--sx-clay) !important; }

.border-line { border-color: var(--sx-line) !important; }
.border-pine { border-color: var(--sx-pine) !important; }
.border-gold { border-color: var(--sx-gold) !important; }
.divide-line > :not([hidden]) ~ :not([hidden]) { border-color: var(--sx-line) !important; }

.hover\:text-pine:hover { color: var(--sx-pine) !important; }
.hover\:bg-\[\#24483A\]:hover { background-color: var(--sx-pine-dark) !important; }
.hover\:bg-\[\#9E7535\]:hover { background-color: #8D6229 !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: 3px;
}

input.border-line:focus,
select.border-line:focus,
textarea.border-line:focus {
  border-color: var(--sx-pine) !important;
  box-shadow: 0 0 0 3px rgba(30, 98, 83, .12);
}

/* 统一顶部、卡片与按钮的可读性。 */
header.bg-paper { background-color: rgba(251, 249, 243, .98) !important; }
header.border-line { border-color: var(--sx-line) !important; }

.card-hover {
  border-color: var(--sx-line) !important;
  background-color: var(--sx-paper) !important;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.card-hover:hover {
  border-color: rgba(30, 98, 83, .56) !important;
  background-color: #FFFDF8 !important;
  box-shadow: var(--sx-shadow);
}

a.bg-pine,
button.bg-pine {
  background-color: var(--sx-pine) !important;
}

a.bg-pine:hover,
button.bg-pine:hover {
  background-color: var(--sx-pine-dark) !important;
}

a.bg-cinnabar,
button.bg-cinnabar {
  background-color: var(--sx-clay) !important;
}

a.bg-cinnabar:hover,
button.bg-cinnabar:hover {
  background-color: var(--sx-clay-dark) !important;
}

/* 首页：暖象牙为底、松绿为主、朱砂仅承担转化操作、金色只承担提示。 */
.home-page { background-color: var(--sx-canvas) !important; }
.home-page main > section[aria-labelledby]::before {
  background-color: rgba(251, 249, 243, .62);
  border-color: rgba(217, 208, 191, .58);
}
.home-page section[aria-labelledby="way-title"]::before {
  background-color: var(--sx-paper-green);
  border-color: #D5E3DA;
}
.home-page section[aria-labelledby="guide-title"] > .mt-6.grid > .col-span-5 > div {
  background-color: var(--sx-gold-soft);
  border-color: #DEC7A6;
}
.home-page .theme-card:not(.theme-card--portal) > img { opacity: .12 !important; }
.home-page .theme-card--portal > img.theme-card-art {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
.home-page section[aria-labelledby="theme-title"] > .grid > .theme-card:nth-child(1) { background-color: #F3E6D5 !important; }
.home-page section[aria-labelledby="theme-title"] > .grid > .theme-card:nth-child(2) { background-color: #E8F1EC !important; }
.home-page section[aria-labelledby="theme-title"] > .grid > .theme-card:nth-child(3) { background-color: #F6F0E5 !important; }
.home-page section[aria-labelledby="theme-title"] > .grid > .theme-card:nth-child(4) { background-color: #E7EFED !important; }
.home-page section[aria-labelledby="service-title"] > .mt-6.grid > .col-span-7,
.home-page #serviceGrid > a {
  background-color: var(--sx-paper) !important;
  border-color: var(--sx-line) !important;
}
.home-page #serviceGrid > a { border-top-color: #8AB1A5 !important; }
.home-page #serviceGrid > a:hover { border-top-color: var(--sx-gold) !important; }

/* 列表页、搜索页、资讯页：内容卡片与筛选器采用与首页一致的留白和层级。 */
.list-page-hero,
.list-page-empty { background-color: var(--sx-paper) !important; }
.list-page-filter { background-color: var(--sx-paper-soft) !important; }
.list-page-filter select,
.list-page-filter input { border-color: var(--sx-line) !important; }
.list-page-filter button:focus-visible,
.list-page-filter select:focus-visible,
.list-page-filter input:focus-visible { outline-color: var(--sx-focus) !important; }
.chip.is-active { background-color: var(--sx-pine) !important; border-color: var(--sx-pine) !important; color: #FFF !important; }

/* 目的地和线路详情：保留现有真实数据结构，仅把视觉变量收敛到全站主题。 */
:root {
  --sx-detail-brand: var(--sx-pine);
  --sx-detail-brand-dark: var(--sx-pine-dark);
  --sx-detail-accent: var(--sx-clay);
  --sx-detail-ink: var(--sx-ink);
  --sx-detail-muted: var(--sx-mist);
  --sx-detail-line: var(--sx-line);
  --sx-detail-soft: var(--sx-paper-soft);
  --sx-detail-shadow: var(--sx-shadow);

  --product-brand: var(--sx-pine);
  --product-brand-dark: var(--sx-pine-dark);
  --product-accent: var(--sx-clay);
  --product-ink: var(--sx-ink);
  --product-muted: var(--sx-mist);
  --product-line: var(--sx-line);
  --product-soft: var(--sx-paper-soft);
  --product-paper: var(--sx-paper);
  --product-shadow: var(--sx-shadow);
}

body:has(#placeDetail),
body:has(#routeDetail),
body:has(#productDetailContent) { background: var(--sx-canvas) !important; }

.detail-route-summary,
.detail-route-overview,
.detail-route-notes,
.detail-route-action,
.detail-related,
.detail-content-panel,
.detail-info-panel,
.detail-media-schedule-panel,
.prod_calendar,
.product-loading,
.product-error { background-color: var(--sx-paper) !important; border-color: var(--sx-line) !important; }

.detail-info-aside,
.detail-tabs,
.legacy-detail-section,
.legacy-site-row { border-color: var(--sx-line) !important; }

.detail-tabs { background-color: var(--sx-paper) !important; }
.prod_calendar th { background-color: var(--sx-paper-soft) !important; }
.prod_calendar td.calendar-available { background-color: #F8FCF9 !important; }
.prod_calendar td.calendar-available.is-selected { background-color: var(--sx-pine-soft) !important; }

/* 报名页仍然使用顺达的真实报名、支付和订单代码；这里只统一外壳和操作色。 */
body:has(.booking-page) { background-color: var(--sx-canvas) !important; color: var(--sx-ink); }
.booking-page { background-color: var(--sx-paper) !important; }
.booking-page .div_toggle { border-bottom-color: var(--sx-line) !important; background: linear-gradient(180deg, #FFFDF8, var(--sx-paper-soft)) !important; }
.booking-page .div_toggle > .icon { background-color: var(--sx-gold) !important; }
.booking-page .div_toggle > .title { border-bottom-color: var(--sx-line) !important; color: var(--sx-ink) !important; }
.booking-page .rec_form { border-color: var(--sx-line) !important; background-color: #FFFDF8 !important; }
.booking-page .rec_form:focus { border-color: var(--sx-pine) !important; box-shadow: 0 0 0 3px rgba(30, 98, 83, .12); }
.booking-page .table_line_1 tr.row_2 { background-color: var(--sx-paper-soft) !important; }
.booking-page .legacy-booking-bottom.div_bottom_bm_button,
.booking-page .legacy-booking-bottom.div_bottom_bm_button .main { background-color: var(--sx-paper) !important; }
.booking-page .legacy-booking-bottom .booking-submit { background-color: var(--sx-clay) !important; }
.booking-page .legacy-booking-bottom .booking-submit:hover { background-color: var(--sx-clay-dark) !important; }

/* 页脚与顶部深色条是同一色系；版权区比主体更深一阶。 */
footer { background-color: var(--sx-footer) !important; }
footer > .frame > .mt-10 { background-color: var(--sx-inkblue) !important; }