/* ============================================
   巴消消防 · 四季主题色板（Colors only）
   春生 夏长 秋收 冬藏 ｜ 按节气自动切换 + 手动选择
   ------------------------------------------------------------
   2026-10-13 苹果化第一版：颜色收敛至苹果灰阶
   2026-10-18 苹果化 v2（全量）：
     1. 颜色令牌与结构令牌彻底分离——本文件只管颜色，
        间距/圆角/字阶/动效统一由 style.css 提供。
     2. 边框改为「半透明发丝线」：浅色季 rgba(0,0,0,.09)，
        冬季 rgba(255,255,255,.10)，叠在任意底色上都自然。
     3. 文本四级重新校准对比度（AA）：正文 tertiary #6E6E73
        在纯白上约 5.7:1；冬季 tertiary #A1A1A6 在 #000 上约 8.6:1。
     4. 新增 --accent-text：强调色作正文文字时的可读变体
        （浅色季取 deep，冬季取 light），禁止再用 accent-light
        直接写正文——它在浅底上对比度不足。
     5. 新增 --shadow-hover / --ring / --bg-hover，供交互态统一取用。
   规则：业务样式不得出现硬编码色值，一律 var(--token)。
   ============================================ */

/* ===== 冬季 Winter · 深色（Apple Dark，默认） ===== */
:root,
[data-theme="winter"] {
  /* 底色 */
  --bg-body: #000000;
  --bg-topbar: #0A0A0A;
  --bg-alt: #0C0C0D;
  --bg-card: #1C1C1E;
  --bg-input: #1C1C1E;
  --bg-stats: #0A0A0A;
  --bg-footer: #0A0A0A;
  --bg-hover: #2A2A2D;

  /* 发丝线 */
  --border-base: rgba(255, 255, 255, .10);
  --border-light: rgba(255, 255, 255, .16);
  --border-input: rgba(255, 255, 255, .18);
  --border-strong: rgba(255, 255, 255, .26);

  /* 文本四级 */
  --text-primary: #F5F5F7;
  --text-secondary: #C7C7CC;
  --text-tertiary: #A1A1A6;
  --text-muted: #86868B;

  /* 强调色（品牌红） */
  --accent: #E5261F;
  --accent-rgb: 229, 38, 31;
  --accent-light: #FF7A70;
  --accent-deep: #C41E18;
  --accent-text: #FF8A80;
  --accent-soft: rgba(229, 38, 31, .14);
  --accent-border: rgba(229, 38, 31, .38);
  --accent-hover: rgba(229, 38, 31, .55);
  --ring: rgba(229, 38, 31, .45);
  --selection-bg: rgba(229, 38, 31, .30);

  /* 首屏 / CTA */
  --hero-start: #141414;
  --hero-end: #23110F;
  --cta-start: #A3120D;
  --cta-end: #E5261F;
  --cta-text: #FFE1DD;
  --btn-white-bg: #FFFFFF;
  --btn-white-color: #C8102E;

  /* 阴影 */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .50);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-dropdown: 0 24px 60px rgba(0, 0, 0, .65);
  --shadow-hover: 0 16px 44px rgba(0, 0, 0, .60);

  /* 浮窗 */
  --ai-float-bg: #E5261F;
  --ai-float-shadow: 0 10px 28px rgba(229, 38, 31, .40);

  --on-accent: #FFFFFF;
  --qr-paper: #FFFFFF;

  --season-name: "冬";
  --season-icon: "\2744";
}

/* ===== 春季 Spring · 3% 底色浸染 + 苹果灰阶 ===== */
[data-theme="spring"] {
  --bg-body: #F7FAF5;
  --bg-topbar: #F0F5EB;
  --bg-alt: #F2F6EF;
  --bg-card: #FFFFFF;
  --bg-input: #F4F8F1;
  --bg-stats: #F0F5EB;
  --bg-footer: #F0F4EA;
  --bg-hover: #F3F7EF;

  --border-base: rgba(29, 29, 31, .09);
  --border-light: rgba(29, 29, 31, .15);
  --border-input: rgba(29, 29, 31, .16);
  --border-strong: rgba(29, 29, 31, .22);

  --text-primary: #1D1D1F;
  --text-secondary: #424245;
  --text-tertiary: #6E6E73;
  --text-muted: #86868B;

  --accent: #2E7D32;
  --accent-rgb: 46, 125, 50;
  --accent-light: #66BB6A;
  --accent-deep: #1B5E20;
  --accent-text: #1B5E20;
  --accent-soft: rgba(46, 125, 50, .10);
  --accent-border: rgba(46, 125, 50, .30);
  --accent-hover: rgba(46, 125, 50, .48);
  --ring: rgba(46, 125, 50, .35);
  --selection-bg: rgba(46, 125, 50, .18);

  --hero-start: #F5FAF1;
  --hero-end: #E9F3E1;
  --cta-start: #1B5E20;
  --cta-end: #2E7D32;
  --cta-text: #EAF6E4;
  --btn-white-bg: #FFFFFF;
  --btn-white-color: #1B5E20;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-dropdown: 0 24px 60px rgba(0, 0, 0, .14);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, .10);

  --ai-float-bg: #2E7D32;
  --ai-float-shadow: 0 10px 28px rgba(46, 125, 50, .28);

  --on-accent: #FFFFFF;
  --qr-paper: #FFFFFF;

  --season-name: "春";
  --season-icon: "\1F33C";
}

/* ===== 夏季 Summer · 3% 底色浸染 + 苹果灰阶 ===== */
[data-theme="summer"] {
  --bg-body: #F5F9FB;
  --bg-topbar: #EDF4F8;
  --bg-alt: #EFF5F8;
  --bg-card: #FFFFFF;
  --bg-input: #F1F7FA;
  --bg-stats: #EDF4F8;
  --bg-footer: #EDF3F6;
  --bg-hover: #F0F6F9;

  --border-base: rgba(29, 29, 31, .09);
  --border-light: rgba(29, 29, 31, .15);
  --border-input: rgba(29, 29, 31, .16);
  --border-strong: rgba(29, 29, 31, .22);

  --text-primary: #1D1D1F;
  --text-secondary: #424245;
  --text-tertiary: #6E6E73;
  --text-muted: #86868B;

  --accent: #00838F;
  --accent-rgb: 0, 131, 143;
  --accent-light: #26C6DA;
  --accent-deep: #005F66;
  --accent-text: #005F66;
  --accent-soft: rgba(0, 131, 143, .10);
  --accent-border: rgba(0, 131, 143, .30);
  --accent-hover: rgba(0, 131, 143, .48);
  --ring: rgba(0, 131, 143, .35);
  --selection-bg: rgba(0, 131, 143, .18);

  --hero-start: #F4FAFC;
  --hero-end: #E6F2F6;
  --cta-start: #005F66;
  --cta-end: #00838F;
  --cta-text: #DFF6F9;
  --btn-white-bg: #FFFFFF;
  --btn-white-color: #005F66;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-dropdown: 0 24px 60px rgba(0, 0, 0, .14);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, .10);

  --ai-float-bg: #00838F;
  --ai-float-shadow: 0 10px 28px rgba(0, 131, 143, .28);

  --on-accent: #FFFFFF;
  --qr-paper: #FFFFFF;

  --season-name: "夏";
  --season-icon: "\2600";
}

/* ===== 秋季 Autumn · 3% 底色浸染 + 苹果灰阶 ===== */
[data-theme="autumn"] {
  --bg-body: #FBF8F3;
  --bg-topbar: #F6EFE2;
  --bg-alt: #F6F1E9;
  --bg-card: #FFFFFF;
  --bg-input: #F8F3EA;
  --bg-stats: #F6EFE2;
  --bg-footer: #F5EFE4;
  --bg-hover: #F7F1E7;

  --border-base: rgba(29, 29, 31, .09);
  --border-light: rgba(29, 29, 31, .15);
  --border-input: rgba(29, 29, 31, .16);
  --border-strong: rgba(29, 29, 31, .22);

  --text-primary: #1D1D1F;
  --text-secondary: #424245;
  --text-tertiary: #6E6E73;
  --text-muted: #86868B;

  --accent: #D84315;
  --accent-rgb: 216, 67, 21;
  --accent-light: #FF8F00;
  --accent-deep: #BF360C;
  --accent-text: #BF360C;
  --accent-soft: rgba(216, 67, 21, .10);
  --accent-border: rgba(216, 67, 21, .30);
  --accent-hover: rgba(216, 67, 21, .48);
  --ring: rgba(216, 67, 21, .35);
  --selection-bg: rgba(216, 67, 21, .18);

  --hero-start: #FCF8F2;
  --hero-end: #F6EBDB;
  --cta-start: #B93A0E;
  --cta-end: #E65100;
  --cta-text: #FFF2E2;
  --btn-white-bg: #FFFFFF;
  --btn-white-color: #BF360C;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-dropdown: 0 24px 60px rgba(0, 0, 0, .14);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, .10);

  --ai-float-bg: #D84315;
  --ai-float-shadow: 0 10px 28px rgba(216, 67, 21, .28);

  --on-accent: #FFFFFF;
  --qr-paper: #FFFFFF;

  --season-name: "秋";
  --season-icon: "\1F341";
}

/* ============================================
   季节切换器（悬浮圆钮 + 面板）
   ============================================ */
.season-switcher {
  position: fixed;
  left: 24px;
  bottom: 32px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.season-switcher .ss-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--accent-text);
  transition: transform var(--dur-fast, 200ms) var(--ease, ease),
              border-color var(--dur-fast, 200ms) var(--ease, ease);
}

.season-switcher .ss-toggle:hover {
  transform: scale(1.06);
  border-color: var(--border-strong);
}

.season-switcher .ss-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: 16px;
  padding: 6px;
  box-shadow: var(--shadow-dropdown);
  min-width: 148px;
}

.season-switcher .ss-panel.open { display: flex; }

.season-switcher .ss-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.season-switcher .ss-opt:hover { background: var(--bg-hover); }

.season-switcher .ss-opt.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

.season-switcher .ss-opt .ss-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.season-switcher .ss-opt .ss-label { font-weight: 500; }

.season-switcher .ss-opt .ss-desc {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.season-switcher .ss-auto {
  border-top: 1px solid var(--border-base);
  margin-top: 4px;
  padding-top: 4px;
}

.season-switcher .ss-auto .ss-opt {
  font-size: 12px;
  color: var(--text-muted);
}

/* 主题切换过渡：只挂在大面积容器上。
   注意：不要覆盖 .card / .btn / .ai-float 等交互组件的 transition，
   否则会吞掉它们的 hover 位移与阴影动效。 */
body, footer, .topbar, section, .hero, .cta, .stats {
  transition: background-color 400ms ease, border-color 400ms ease, color 300ms ease;
}

header {
  transition: background-color 400ms ease,
              border-color 400ms ease,
              box-shadow var(--dur-base, 350ms) var(--ease, ease);
}


/* 手机端收起手动季节切换器（季节仍按节气自动切换），
   避免与正文、AI 浮窗三方叠压；此处位于文件末尾，可覆盖上方基础规则 */
@media (max-width: 480px) {
  .season-switcher { display: none; }
}