/* ==========================================================================
   节日 / 时令换肤引擎（零依赖，纯 CSS 变量 + 少量 JS 日期判断）
   ==========================================================================
   --------------------------------------------------------------------------
   为什么要做这个
   --------------------------------------------------------------------------
   业内常用的「节日换肤」有三种做法，本文件采用的是其中最克制的一种：

     ① 换首页 banner 图（最常见）—— 只改一张图，其他页面风格不变，
        反而显得像贴了个广告；
     ② 插春节吉祥物 / 灯笼 / 烟花（最廉价）—— designbycurio 的说法很准：
        「把这套风格做成一包红金贴纸，并不会自动产生节日视觉语言」；
     ③ 本文件：**只改配色与光效**（CSS 变量），不改结构、不加贴图、不动文案。

   依据是搜狐那篇讲的「在统一中求变化」：主标题、品牌标识、业务结构都不动，
   只让配色跟着季节走，用户能感到「新鲜但还是那家」。

   还有一个来自设计规范研究的关键点：**底色要深**。春节视觉之所以要暗底，
   是为了让灯光类元素真的「发亮」；如果整站铺红底，金色和红色就都糊了。
   所以本引擎只微调「深色区的冷暖与饱和度」，不把浅色区铺成节日色。

   --------------------------------------------------------------------------
   怎么用（改配色只需要动这一处）
   --------------------------------------------------------------------------
   每个节日一组变量，写在 [data-season="xxx"] 下。JS 只需要在 <html> 上
   设一个 data-season 属性，剩下的由 CSS 接管。

   可覆盖的变量：
     --accent        强调色（按钮、链接、图标）
     --accent-deep   强调色深态（hover 底、边框）
     --accent-soft   强调色浅态（背景块）
     --accent-ink    强调色上的文字色
     --glow-a        深色区装饰光的颜色 A（径向渐变用）
     --glow-b        深色区装饰光的颜色 B
     --glow-strength 装饰光强度（0 = 关闭，节日常态 1；可按行业调低）
     --season-tag    顶部提示条的文案（留空则不显示该条）

   --------------------------------------------------------------------------
   维护约定
   --------------------------------------------------------------------------
   1. 新增节日 = 在 CALENDAR（JS）加一条 + 在下面 CSS 加一段 [data-season]；
   2. 每年 11 月国务院办公厅发次年放假通知后，**更新 CALENDAR 里的日期**；
   3. 不要在节日里改品牌主色（--navy-*）——那是识别度，改了就「不像那家了」。
   ========================================================================== */


/* ==========================================================================
   1. 常态：所有季节共用的基线
   ========================================================================== */

:root {
  /* 常态装饰光：无节令时完全透明，等于原站配色不动。
     注意这两个值必须是合法颜色（不能留空），否则整条 background-image 失效。 */
  --glow-a: transparent;
  --glow-b: transparent;
  --glow-strength: .35;

  /* 常态强调色：必须给值！
     换肤时下面的 [data-season] 段会覆盖这三个变量。
     漏定义的后果（2026-10-22 踩过）：
     .btn--gold 的 background 变成 var(--accent) → 变量未定义 → 整条声明失效 →
     背景透明 → 深底上白字白底，按钮「消失」。
     所以常态这里要给出与本站主色一致的值，换肤时才被节令色替换。 */
  --accent: #C9A227;
  --accent-deep: #A9861A;
  --accent-soft: #F7EDCE;
  /* 强调色「当文字用」的专用档。
     为什么单独开一档：--accent-deep 是「hover 时的填充底色」，
     拿它当浅底上的文字色只有 2.94:1（#A9861A 压 #F7EDCE），不达 AA。
     这个档专供「浅底 + 强调文字」的场合（标签、链接、hover 文字），
     常态取 #7A6011（压 --accent-soft = 5.12:1 ✅）。
     换肤时各季节的 --accent-deep 本身就是深档（实测 5.3–9.5:1），
     所以换肤时这个值直接跟随 --accent-deep 即可。 */
  --accent-text: #7A6011;
}

/* ==========================================================================
   2. 节令皮肤
   --------------------------------------------------------------------------
   力度原则：节令越"重"（春节/国庆）光效越强；节气、淡季强度 ≤ 0.6。
   全部配色都保持"深底 + 一点亮色"，不做整站铺色。
   ========================================================================== */

/* ---------- 元旦：跨年，冷调蓝紫，克制 ---------- */
[data-season="newyear"] {
  --accent: #4A6FD4;
  --accent-deep: #35549F;
  /* 浅底强调文字色：压 --accent-soft 6.42:1 ✅ */
  --accent-text: #35549F;
  --accent-soft: #EEF2FC;
  /* 强调色上的文字色：白字 4.65:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(96, 132, 233, .30);
  --glow-b: rgba(150, 122, 226, .22);
  --glow-strength: .70;
}

/* ---------- 春节：朱红压深底，金只做点缀（本站九州本就是朱红主色，相容） ---------- */
[data-season="spring"] {
  --accent: #C8342A;
  --accent-deep: #9E241D;
  /* 浅底强调文字色：压 --accent-soft 6.82:1 ✅ */
  --accent-text: #9E241D;
  --accent-soft: #FCEEEC;
  /* 强调色上的文字色：白字 5.28:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(200, 52, 42, .34);
  --glow-b: rgba(214, 158, 62, .24);
  --glow-strength: 1;
}

/* ---------- 元宵：春意尾声，暖粉橙 ---------- */
[data-season="lantern"] {
  /* accent 加深一档：原值白字压不住（见 --accent-ink 注释） */
  --accent: #BD5634;
  --accent-deep: #A8451F;
  /* 浅底强调文字色：压 --accent-soft 5.32:1 ✅ */
  --accent-text: #A8451F;
  --accent-soft: #FDF0E9;
  /* 强调色上的文字色：白字 4.62:1（accent 已加深一档，原 #D2603A 只有 3.84:1） */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(210, 96, 58, .30);
  --glow-b: rgba(226, 168, 94, .20);
  --glow-strength: .85;
}

/* ---------- 清明 · 春分：青绿（生机、追思） ---------- */
[data-season="qingming"] {
  /* accent 加深一档：原值白字压不住（见 --accent-ink 注释） */
  --accent: #3A8263;
  --accent-deep: #2C6B50;
  /* 浅底强调文字色：压 --accent-soft 5.67:1 ✅ */
  --accent-text: #2C6B50;
  --accent-soft: #EBF5F0;
  /* 强调色上的文字色：白字 4.61:1（accent 已加深一档，原 #3E8C6A 只有 4.07:1） */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(62, 140, 106, .24);
  --glow-b: rgba(122, 168, 138, .18);
  --glow-strength: .55;
}

/* ---------- 劳动节：劳动绿 + 稳健蓝（服务业劳动节） ---------- */
[data-season="labour"] {
  --accent: #2F7D5B;
  --accent-deep: #205F44;
  /* 浅底强调文字色：压 --accent-soft 6.72:1 ✅ */
  --accent-text: #205F44;
  --accent-soft: #EAF4EF;
  /* 强调色上的文字色：白字 4.99:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(47, 125, 91, .24);
  --glow-b: rgba(72, 138, 178, .18);
  --glow-strength: .55;
}

/* ---------- 端午：艾草青绿 + 雄黄点缀 ---------- */
[data-season="duanwu"] {
  --accent: #3D8168;
  --accent-deep: #2A5F4C;
  /* 浅底强调文字色：压 --accent-soft 6.58:1 ✅ */
  --accent-text: #2A5F4C;
  --accent-soft: #EAF4EF;
  /* 强调色上的文字色：白字 4.63:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(61, 129, 104, .24);
  --glow-b: rgba(158, 168, 96, .18);
  --glow-strength: .58;
}

/* ---------- 七夕：柔紫（品牌业务属性贴合） ---------- */
[data-season="qixi"] {
  --accent: #7B5EA7;
  --accent-deep: #5E4480;
  /* 浅底强调文字色：压 --accent-soft 7.09:1 ✅ */
  --accent-text: #5E4480;
  --accent-soft: #F3EFF9;
  /* 强调色上的文字色：白字 5.25:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(123, 94, 167, .24);
  --glow-b: rgba(196, 154, 214, .18);
  --glow-strength: .55;
}

/* ---------- 中秋：月白 + 桂黄（团圆、丰收） ---------- */
[data-season="midautumn"] {
  /* accent 加深一档：原值白字压不住（见 --accent-ink 注释） */
  --accent: #946F1F;
  --accent-deep: #785913;
  /* 浅底强调文字色：压 --accent-soft 5.86:1 ✅ */
  --accent-text: #785913;
  --accent-soft: #FAF3E2;
  /* 强调色上的文字色：白字 4.61:1（accent 已加深一档，原 #9A7420 只有 4.29:1） */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(154, 116, 32, .26);
  --glow-b: rgba(198, 168, 106, .20);
  --glow-strength: .68;
}

/* ---------- 国庆：正红 + 金（本站主色体系，本期只小幅提亮） ---------- */
[data-season="national"] {
  --accent: #C1272D;
  --accent-deep: #961B20;
  /* 浅底强调文字色：压 --accent-soft 7.36:1 ✅ */
  --accent-text: #961B20;
  --accent-soft: #FCEBEB;
  /* 强调色上的文字色：白字 5.84:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(193, 39, 45, .32);
  --glow-b: rgba(212, 160, 60, .22);
  --glow-strength: .95;
}

/* ---------- 重阳：敬老暖橙（服务业温度） ---------- */
[data-season="chongyang"] {
  /* accent 加深一档：原值白字压不住（见 --accent-ink 注释） */
  --accent: #A9652A;
  --accent-deep: #8A4F1C;
  /* 浅底强调文字色：压 --accent-soft 5.85:1 ✅ */
  --accent-text: #8A4F1C;
  --accent-soft: #FBF1E5;
  /* 强调色上的文字色：白字 4.58:1（accent 已加深一档，原 #B26A2C 只有 4.21:1） */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(178, 106, 44, .24);
  --glow-b: rgba(200, 160, 110, .18);
  --glow-strength: .55;
}

/* ---------- 双十一：电商红橙（带一点促销冲击） ---------- */
[data-season="double11"] {
  --accent: #CF3F2E;
  --accent-deep: #A32A1D;
  /* 浅底强调文字色：压 --accent-soft 6.41:1 ✅ */
  --accent-text: #A32A1D;
  --accent-soft: #FDEEEC;
  /* 强调色上的文字色：白字 4.77:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(207, 63, 46, .34);
  --glow-b: rgba(226, 128, 40, .24);
  --glow-strength: .95;
}

/* ---------- 双十二 / 年末冲刺：靛蓝（冷静收尾） ---------- */
[data-season="yearend"] {
  --accent: #31568C;
  --accent-deep: #233E68;
  /* 浅底强调文字色：压 --accent-soft 9.45:1 ✅ */
  --accent-text: #233E68;
  --accent-soft: #EDF1F7;
  /* 强调色上的文字色：白字 7.39:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(49, 86, 140, .26);
  --glow-b: rgba(96, 130, 176, .18);
  --glow-strength: .58;
}

/* ---------- 冬至 · 腊八：深暖（岁末团圆） ---------- */
[data-season="dongzhi"] {
  --accent: #9C5A32;
  --accent-deep: #77401F;
  /* 浅底强调文字色：压 --accent-soft 7.31:1 ✅ */
  --accent-text: #77401F;
  --accent-soft: #FAEFE6;
  /* 强调色上的文字色：白字 5.35:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(156, 90, 50, .26);
  --glow-b: rgba(186, 134, 96, .18);
  --glow-strength: .58;
}

/* ---------- 毕业季 / 高考季（6 月）：不喜庆，改为"旺季"的暖黄 ---------- */
[data-season="gaokao"] {
  --accent: #8A6D1F;
  --accent-deep: #6B5416;
  /* 浅底强调文字色：压 --accent-soft 6.63:1 ✅ */
  --accent-text: #6B5416;
  --accent-soft: #FAF5E4;
  /* 强调色上的文字色：白字 4.90:1 */
  --accent-ink: #FFFFFF;
  --glow-a: rgba(138, 109, 31, .22);
  --glow-b: rgba(168, 148, 96, .16);
  --glow-strength: .50;
}


/* ==========================================================================
   3. 把变量接到实际元素上
   --------------------------------------------------------------------------
   换肤要"看得见但不出戏"，所以接的只有这几处：
     · hero 与页脚的深色底装饰光
     · 强调色的三处主要用法：金色按钮、浅底强调块、链接 hover

   ⚠️ 技术要点（踩过的坑）：
     1. **不要动 .hero::before** —— 它是网格纹理层（64px 方格 + 径向遮罩），
        覆盖它会毁掉首屏的质感。装饰光要接在 .hero 自身的 background 上。
     2. **必须用 background-image，不能用 background** —— 后者会把
        background-color 一起重置，hero 的深蓝底就丢了。
     3. 深色 section（.section--navy / --alt）如果也有装饰光，
        同样只覆盖 background-image 的第一层，不动其余图层。
   ========================================================================== */

/* hero 装饰光
   ⚠️ 关键坑：.hero 的深蓝底是 background 简写里 linear-gradient 那一层
      （不是 background-color），所以**只覆盖 background-image 会把底色一起丢掉**，
      整屏会变成白底 —— 这就是第一次实测首屏变浅粉的原因。
      正确做法是整段接管 background，并原样保留底部的品牌渐变层。
   常态（无 data-season）时 --glow-a/b 透明，等于原样不动。 */
.hero {
  background-image:
    radial-gradient(760px 340px at 82% -6%, var(--glow-a), transparent 62%),
    radial-gradient(560px 300px at 8% 108%, var(--glow-b), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
}

/* 页脚：底色是 background-color 简写，这里只加一层光，保留底色 */
.site-footer {
  background-image:
    radial-gradient(620px 240px at 88% -10%, var(--glow-a), transparent 64%);
  background-repeat: no-repeat;
}

/* 深色 section（如有）也吃一点光，让整站调性统一 */
.section--navy,
.section--alt.section--dark {
  background-image:
    radial-gradient(720px 320px at 78% 0%, var(--glow-a), transparent 66%);
  background-repeat: no-repeat;
}

/* 强调色接管：金色按钮、浅底强调块、文字链接 */
/* 换肤时才改按钮配色。
   注意：只在有 data-season 时才生效 —— 常态下按钮保持本站原样式，
   避免「变量未定义 → 整条 background 声明失效 → 白底白字按钮消失」。 */
[data-season] .btn--gold {
  background: var(--accent);
  border-color: var(--accent);
  /* 为什么用 --accent-ink 而不是固定 #fff：
     各季节的强调色明暗不同（最亮 #D2603A 已加深为 #BD5634），
     固定白字会在浅色强调上跌到 3.84:1。
     --accent-ink 由每个季节按实测对比度选定（见各季节定义处注释），
     保证「强调色上的文字」全部 ≥ 4.5:1。 */
  color: var(--accent-ink);
}
[data-season] .btn--gold:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--accent-ink);
}

/* 深底上的白描边次级按钮：换肤时也要跟着换强调色，
   否则深蓝描边在节日皮肤里显得突兀。
   （常态由 style.css 的 .btn--outline-light 兜底） */
[data-season] .btn--outline-light {
  border-color: var(--accent-ink);
}
[data-season] .btn--outline-light:hover {
  border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* 页脚深色区里，原来的金色 hover 改成强调色 hover */
[data-season] .footer-bottom a:hover {
  color: var(--accent);
}

/* 顶部节令提示条 */
.season-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 16px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.season-bar.is-on { display: flex; }
.season-bar__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}
.season-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .9;
}
.season-bar a:hover { opacity: 1; }

/* ==========================================================================
   4. 首页资讯位（最近写下的几篇）
   --------------------------------------------------------------------------
   为什么不是轮播图
   --------------------------------------------------------------------------
   业内实测（服务 120 余家上市公司的建站数据）：用户对首屏轮播的耐心只有 2–3 秒，
   轮播超过 4 张时主动看第二张的比例不足 13%，87% 直接跳过；精简到 2–3 张后
   跳出率下降约 47%。而 B2B 访客（财务总监、知识产权负责人）目标性极强，
   进站就是要找答案。

   所以资讯位用「三张并列卡片」而不是轮播：
     · 全部内容一次露出，不需要等待、不需要点击；
     · 每张卡片都是可点的，进入路径清晰；
     · 不占首屏黄金位，放在页面中后段（原则区之后、FAQ 之前）；
     · 移动端天然纵向堆叠，无需额外适配。
   ========================================================================== */

.home-news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.home-news__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 为什么：内边距统一 24px（规范 §1.3 卡片内边距统一） */
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* 为什么：卡片悬停只留「边框变色」这一个反馈（反面 8）。
     原来的「上浮 3px + 换大阴影 + 换渐变描边」是三件套，
     财务服务场景要的是「稳」，不是「到处都在动」。 */
  transition: border-color .25s var(--ease);
}
.home-news__card:hover {
  border-color: var(--color-brand);
}

.home-news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 为什么：12.5px 是半像素（字号阶梯只允许整数档），收到 var(--fs-xs)=12px */
  font-size: var(--fs-xs);
  /* 为什么：--ink-400 在白底只有 3.64:1，小字不达 AA；
     改 --color-text-muted（5.74:1）。 */
  color: var(--color-text-muted);
}
.home-news__tag {
  padding: 2px 9px;
  /* 为什么：胶囊圆角只保留给「状态标签/头像/进度条」三类语义元素，
     标签属于其中之一，保留。 */
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  /* 为什么用 --accent-text 而不是 --accent-deep：
     --accent-deep 是「hover 填充底」用的档，常态值 #A9861A 压
     --accent-soft 只有 2.94:1（实测不达 AA）。
     --accent-text 是专供「浅底 + 强调文字」的档位（见 :root 注释）。 */
  color: var(--accent-text);
  font-weight: 600;
}

.home-news__title {
  margin: 0;
  /* 为什么：18px 落到字号阶梯的 --fs-h3（20px）会变大，
     这里保持在 --fs-body 与 --fs-h3 之间的实际观感，
     归档到 --fs-h3 前的既有档位：用 var(--fs-body) + 字重区分层级。 */
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 600;
}
.home-news__title a {
  color: var(--ink-900);
  text-decoration: none;
  transition: color .2s var(--ease);
}
/* 标题下划线只在 hover 时出现，且用当前节令强调色 —— 换肤时也协调 */
.home-news__title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-news__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.home-news__more {
  margin-top: var(--sp-8);
  text-align: center;
}

/* ---------- 响应式：平板两列、手机一列 ----------
   断点跟随全站四档（规范 §1.5）：平板 ≤900px，手机 ≤640px */
@media (max-width: 900px) {
  .home-news { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-news { grid-template-columns: 1fr; gap: 16px; }
  .home-news__card { padding: 20px; }
  .home-news__title { font-size: 17px; }
}

/* 「看全部资讯」按钮在浅色区 —— btn--ghost 是为深色区设计的（白字白底），
   放到浅底上会白字白底看不见，所以这里覆盖成深色描边。 */
.home-news__more .btn--ghost {
  color: var(--ink-700);
  background: transparent;
  border-color: var(--line);
}
.home-news__more .btn--ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}


/* ==========================================================================
   5. 预热期（prewarm）—— 提前上线，但光效弱一档
   --------------------------------------------------------------------------
   为什么要分两段
   --------------------------------------------------------------------------
   业内做节日视觉的共识是「节前预热、节中高潮、节后收尾」三段递进。
   只在节日当天换肤有个现实问题：上班的人不会在除夕那天第一次打开你的网站，
   提前上线才能让"年味"在节前就铺开。

   预热期与峰值期的差别刻意做得很小 —— 只是光效弱、提示条措辞不同，
   品牌结构一点不动。用户感知是"网站开始有过节的气氛了"，
   而不是"网站被换了个皮"。
   ========================================================================== */

[data-season-phase="prewarm"] {
  /* 预热期光效统一压到 45% 左右 */
  --glow-strength: .45;
}

/* 预热期提示条：底色更浅、字号更小，不抢首屏 */
.season-bar--pre {
  padding: 5px 16px;
  font-size: 12.5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-deep) 78%, transparent),
    color-mix(in srgb, var(--accent) 88%, transparent));
}
.season-bar--pre .season-bar__dot {
  opacity: .55;
}

/* 不支持 color-mix 的浏览器（老 Safari）退回原色，功能不受影响 */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .season-bar--pre {
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  }
}