/* =============================================================
   主题层 · theme.css
   -------------------------------------------------------------
   规则：
   1) 本文件只写「颜色 / 背景 / 描边」，不写任何布局与尺寸；
   2) 必须在 style.css 之后加载；
   3) 只在 <html class="themed"> 时生效 —— 默认主题完全不受影响；
   4) 新增主题：复制一个 html[data-theme="x"] 令牌块即可，不要再改 style.css。
   ============================================================= */

/* -------------------------------------------------------------
   1. 令牌（每套主题 40 个左右）
   ------------------------------------------------------------- */

/* 墨绿 × 铜橙 */
html[data-theme="academy"] {
  --navy-950: #081711;
  --navy-900: #0C2118;
  --navy-800: #113023;
  --navy-700: #16402F;
  --navy-600: #1B4F3A;

  --gold-100: #FAF0E6;
  --gold-200: #F3D6BB;
  --gold-300: #E9B98E;
  --gold-400: #DA9364;
  --gold-500: #C46A2B;
  --gold-600: #A55722;
  --gold-700: #85451B;
  --gold-grad: linear-gradient(120deg, #E9B98E 0%, #C46A2B 100%);
  --gold-glow: rgba(22, 64, 47, .35);

  --grad: linear-gradient(120deg, #16402F 0%, #3E8E68 100%);
  --grad-soft: linear-gradient(120deg, rgba(22, 64, 47, .08), rgba(62, 142, 104, .08));
  --grad-text: linear-gradient(120deg, #4FB183 0%, #B7E6C9 100%);

  --ink: #12241B;
  --muted: #4F6659;
  --muted-dark: #A9C3B4;
  --bg-light: #F3F7F4;
  --line: rgba(18, 36, 27, .10);
  --line-dark: rgba(233, 185, 142, .20);

  /* 主题层专用 */
  --accent: #C46A2B;
  --accent-strong: #A55722;
  --accent-soft: rgba(196, 106, 43, .12);
  --accent-line: rgba(196, 106, 43, .40);
  --on-accent: #2A1608;
  --tag-bg: linear-gradient(120deg, #F3D6BB, #DA9364);
  --tag-fg: #3A2210;
  --text-on-dark: #D9E7DF;
  --text-on-dark-strong: #FFFFFF;
  --text-on-dark-dim: #A9C3B4;
  --glass-a: rgba(17, 48, 35, .72);
  --glass-b: rgba(12, 33, 24, .58);
  --glass-border: rgba(233, 185, 142, .24);
  --nav-solid: rgba(8, 23, 17, .92);
  --surface-2: #F3F7F4;
  --surface-3: #E7EFE9;
  --bg-tint: linear-gradient(135deg, #0C2118 0%, #2C6448 55%, #3E8E68 100%);
  --bg-tint-soft: linear-gradient(135deg, #DCEBE1 0%, #C3DACB 100%);
  --bg-veil: linear-gradient(95deg, rgba(4, 14, 9, .84) 0%, rgba(6, 18, 12, .55) 52%, rgba(6, 18, 12, .15) 100%);
  --ring: rgba(196, 106, 43, .26);
}

/* 中国红 × 鎏金 */
html[data-theme="festive"] {
  --navy-950: #26060B;
  --navy-900: #380B12;
  --navy-800: #4A1019;
  --navy-700: #7A1520;
  --navy-600: #9A1D29;

  --gold-100: #FDF3E3;
  --gold-200: #F6DFB7;
  --gold-300: #EFC983;
  --gold-400: #D9A441;
  --gold-500: #C08A2E;
  --gold-600: #A97A24;
  --gold-700: #8F661C;
  --gold-grad: linear-gradient(120deg, #EFC983 0%, #D9A441 100%);
  --gold-glow: rgba(122, 21, 32, .35);

  --grad: linear-gradient(120deg, #7A1520 0%, #B7333C 100%);
  --grad-soft: linear-gradient(120deg, rgba(122, 21, 32, .08), rgba(183, 51, 60, .08));
  --grad-text: linear-gradient(120deg, #E2596A 0%, #F6D9A6 100%);

  --ink: #2A0B10;
  --muted: #6B4A50;
  --muted-dark: #D8A9AE;
  --bg-light: #FBF5F4;
  --line: rgba(42, 11, 16, .09);
  --line-dark: rgba(217, 164, 65, .24);

  --accent: #D9A441;
  --accent-strong: #A97A24;
  --accent-soft: rgba(217, 164, 65, .14);
  --accent-line: rgba(217, 164, 65, .42);
  --on-accent: #3A2408;
  --tag-bg: linear-gradient(120deg, #F6DFB7, #D9A441);
  --tag-fg: #3A2408;
  --text-on-dark: #F0D7DA;
  --text-on-dark-strong: #FFFFFF;
  --text-on-dark-dim: #D8A9AE;
  --glass-a: rgba(74, 16, 25, .72);
  --glass-b: rgba(38, 6, 11, .60);
  --glass-border: rgba(217, 164, 65, .26);
  --nav-solid: rgba(38, 6, 11, .93);
  --surface-2: #FBF5F4;
  --surface-3: #F3E6E5;
  --bg-tint: linear-gradient(135deg, #380B12 0%, #7A1520 55%, #B7333C 100%);
  --bg-tint-soft: linear-gradient(135deg, #F7E4E4 0%, #EBCFD0 100%);
  --bg-veil: linear-gradient(95deg, rgba(24, 3, 6, .85) 0%, rgba(38, 6, 11, .55) 52%, rgba(38, 6, 11, .15) 100%);
  --ring: rgba(217, 164, 65, .26);
}

/* 深紫 × 香槟金 */
html[data-theme="royal"] {
  --navy-950: #1C1030;
  --navy-900: #241540;
  --navy-800: #2D1B4E;
  --navy-700: #382260;
  --navy-600: #452D72;

  --gold-100: #FBF6EA;
  --gold-200: #F0E2C4;
  --gold-300: #E3CD9B;
  --gold-400: #C6A568;
  --gold-500: #B08F52;
  --gold-600: #96773F;
  --gold-700: #7C6132;
  --gold-grad: linear-gradient(120deg, #E8D3A8 0%, #C6A568 100%);
  --gold-glow: rgba(56, 34, 96, .35);

  --grad: linear-gradient(120deg, #382260 0%, #6C4BB8 100%);
  --grad-soft: linear-gradient(120deg, rgba(56, 34, 96, .08), rgba(108, 75, 184, .08));
  --grad-text: linear-gradient(120deg, #8B6BE0 0%, #EBD9B4 100%);

  --ink: #1B1233;
  --muted: #5D5476;
  --muted-dark: #BCAEDB;
  --bg-light: #F7F4FC;
  --line: rgba(27, 18, 51, .09);
  --line-dark: rgba(198, 165, 104, .24);

  --accent: #C6A568;
  --accent-strong: #96773F;
  --accent-soft: rgba(198, 165, 104, .14);
  --accent-line: rgba(198, 165, 104, .42);
  --on-accent: #2A1E08;
  --tag-bg: linear-gradient(120deg, #F0E2C4, #C6A568);
  --tag-fg: #2A1E08;
  --text-on-dark: #E2D9F2;
  --text-on-dark-strong: #FFFFFF;
  --text-on-dark-dim: #BCAEDB;
  --glass-a: rgba(56, 34, 96, .72);
  --glass-b: rgba(28, 16, 48, .60);
  --glass-border: rgba(198, 165, 104, .26);
  --nav-solid: rgba(28, 16, 48, .93);
  --surface-2: #F7F4FC;
  --surface-3: #ECE6F6;
  --bg-tint: linear-gradient(135deg, #241540 0%, #4B3183 55%, #6C4BB8 100%);
  --bg-tint-soft: linear-gradient(135deg, #EFEAF8 0%, #DCD2F0 100%);
  --bg-veil: linear-gradient(95deg, rgba(14, 8, 26, .85) 0%, rgba(28, 16, 48, .55) 52%, rgba(28, 16, 48, .15) 100%);
  --ring: rgba(198, 165, 104, .26);
}

/* 青蓝 × 活力橙 */
html[data-theme="ocean"] {
  --navy-950: #062028;
  --navy-900: #083040;
  --navy-800: #0A4256;
  --navy-700: #0D5570;
  --navy-600: #106A8C;

  --gold-100: #FDF1E4;
  --gold-200: #F8D9B8;
  --gold-300: #F3BC85;
  --gold-400: #EC9A4E;
  --gold-500: #E07B26;
  --gold-600: #BC6118;
  --gold-700: #974C11;
  --gold-grad: linear-gradient(120deg, #F3BC85 0%, #E07B26 100%);
  --gold-glow: rgba(13, 85, 112, .35);

  --grad: linear-gradient(120deg, #0D5570 0%, #2BA3C4 100%);
  --grad-soft: linear-gradient(120deg, rgba(13, 85, 112, .08), rgba(43, 163, 196, .08));
  --grad-text: linear-gradient(120deg, #2FB4D6 0%, #F3C08A 100%);

  --ink: #07232B;
  --muted: #4E6C74;
  --muted-dark: #9FC6D1;
  --bg-light: #F2F8FA;
  --line: rgba(7, 35, 43, .09);
  --line-dark: rgba(243, 188, 133, .22);

  --accent: #E07B26;
  --accent-strong: #BC6118;
  --accent-soft: rgba(224, 123, 38, .13);
  --accent-line: rgba(224, 123, 38, .40);
  --on-accent: #3A1A05;
  --tag-bg: linear-gradient(120deg, #F8D9B8, #EC9A4E);
  --tag-fg: #3A1A05;
  --text-on-dark: #D3EAF0;
  --text-on-dark-strong: #FFFFFF;
  --text-on-dark-dim: #9FC6D1;
  --glass-a: rgba(10, 66, 86, .72);
  --glass-b: rgba(6, 32, 40, .60);
  --glass-border: rgba(243, 188, 133, .26);
  --nav-solid: rgba(6, 32, 40, .93);
  --surface-2: #F2F8FA;
  --surface-3: #E3EFF3;
  --bg-tint: linear-gradient(135deg, #083040 0%, #136C8C 55%, #2BA3C4 100%);
  --bg-tint-soft: linear-gradient(135deg, #E3F1F5 0%, #CBE4EB 100%);
  --bg-veil: linear-gradient(95deg, rgba(3, 16, 20, .85) 0%, rgba(8, 48, 64, .55) 52%, rgba(8, 48, 64, .15) 100%);
  --ring: rgba(224, 123, 38, .26);
}

html.themed {
  --veil-soft: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 100%);
}

/* -------------------------------------------------------------
   2. 顶部导航 / 下拉 / 移动端菜单
   ------------------------------------------------------------- */
html.themed .nav.inner {
  background: linear-gradient(180deg, var(--nav-solid), color-mix(in srgb, var(--navy-950) 86%, transparent));
  border-bottom-color: var(--accent-line);
}
html.themed .nav.scrolled {
  background: var(--nav-solid);
  border-bottom-color: var(--accent-line);
}
html.themed .nav-menu a { color: var(--text-on-dark); }
html.themed .nav-menu > a,
html.themed .nav-menu > .nav-item > a { color: var(--text-on-dark) !important; }
html.themed .nav-menu > a:hover,
html.themed .nav-menu > a.active,
html.themed .nav-menu > .nav-item > a:hover,
html.themed .nav-menu > .nav-item > a.active {
  color: var(--text-on-dark-strong) !important;
  background: var(--accent-soft) !important;
}
html.themed .nav-phone { color: var(--text-on-dark-strong); }
html.themed .nav-phone small { color: var(--text-on-dark-dim); }
html.themed .nav-phone .ico {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--gold-300);
}
html.themed .nav-search {
  color: var(--text-on-dark);
  border-color: var(--accent-line);
}
html.themed .nav-search:hover {
  color: var(--text-on-dark-strong);
  border-color: var(--accent);
  background: var(--accent-soft);
}
html.themed .nav-drop {
  background: color-mix(in srgb, var(--navy-950) 95%, transparent);
  border-color: var(--accent-line);
}
html.themed .nav-drop a,
html.themed .nav-drop a:not(.nav-drop-all) { color: var(--text-on-dark) !important; }
html.themed .nav-drop a:hover,
html.themed .nav-drop a:not(.nav-drop-all):hover {
  color: var(--text-on-dark-strong) !important;
  background: var(--accent-soft) !important;
}
html.themed .nav-drop .nav-drop-all {
  color: var(--text-on-dark-strong) !important;
  border-bottom-color: var(--accent-line);
}
html.themed .nav-drop .nav-drop-all:hover { background: var(--accent-soft) !important; }
html.themed .nav-drop .nav-drop-all::after,
html.themed .nav-drop a:not(.nav-drop-all)::before { background: var(--grad); }

html.themed .mobile-menu { background: linear-gradient(170deg, var(--navy-900), var(--navy-950)); }
html.themed .mm-head,
html.themed .mm-foot,
html.themed .mm-search { border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
html.themed .mm-links a {
  color: var(--text-on-dark);
  border-bottom-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
html.themed .mm-links a:active,
html.themed .mm-links a:hover { background: var(--accent-soft); }
html.themed .mm-sub a { color: var(--text-on-dark-dim); }
html.themed .mm-tel small,
html.themed .mm-search input::placeholder { color: var(--text-on-dark-dim); }
html.themed .mm-search input {
  background: rgba(255, 255, 255, .07);
  border-color: var(--accent-line);
  color: var(--text-on-dark-strong);
}
html.themed .mm-search input:focus { border-color: var(--accent); }
html.themed .mm-search button { background: var(--grad); }

/* -------------------------------------------------------------
   3. 首屏（三屏背景统一走「主题色 + 颜色混合」）
   ------------------------------------------------------------- */
html.themed .hero { background: var(--navy-950); }
html.themed .hs-bg,
html.themed .hs-bg.custom {
  background-image: var(--bg-veil), var(--bg-tint), var(--bg-img, none);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color;
}
html.themed .hs-1 .hs-bg { --bg-img: url('img/hero-bg-1.jpg'); }
html.themed .hs-2 .hs-bg { --bg-img: url('img/hero-bg-2.jpg'); }
html.themed .hs-3 .hs-bg { --bg-img: url('img/hero-bg-3.jpg'); }

html.themed .hero-sub { color: var(--text-on-dark-dim); }
html.themed .hero-tag {
  color: var(--gold-300);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
html.themed .glass-card {
  background: linear-gradient(150deg, var(--glass-a), var(--glass-b));
  border-color: var(--glass-border);
}
html.themed .glass-card .gc-ico {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
html.themed .hero .glass-card p { color: var(--text-on-dark-dim); }
html.themed .scroll-cue { color: var(--text-on-dark-dim); }
html.themed .scroll-cue .mouse { border-color: var(--accent-line); }
html.themed .h-arrows .ha:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
html.themed .photo-frame { background: var(--navy-950); }
html.themed .photo-frame .pf-cap {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--navy-950) 88%, transparent));
}

/* -------------------------------------------------------------
   4. 区块背景（数据条 / 业务 / 委培 / 内页头图 / CTA / 页脚）
   ------------------------------------------------------------- */
html.themed #services {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-light) 58%, var(--surface-3) 100%);
}
html.themed .stats {
  --bg-img: url('img/stats-bg.jpg');
  background-image: var(--veil-soft), var(--bg-tint-soft), var(--bg-img);
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color;
}
html.themed .stats::after { background-image: none; }
html.themed .section.whitegold { background: var(--bg-light); }
html.themed .dark {
  background: radial-gradient(110% 90% at 70% 0%,
    color-mix(in srgb, var(--navy-700) 92%, #000) 0%,
    var(--navy-900) 46%, var(--navy-950) 100%);
}
html.themed .section.dark.has-bg {
  background-image: var(--bg-veil), var(--bg-tint), var(--bg-img);
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color;
}
html.themed .marquee { background: rgba(255, 255, 255, .02); }

html.themed .page-hero {
  --bg-img: url('img/page-hero-bg.jpg');
  background-image: var(--bg-veil), var(--bg-tint), var(--bg-img, none);
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color;
}
html.themed .page-hero .crumbs,
html.themed .page-hero .ph-desc { color: var(--text-on-dark-dim); }
html.themed .page-hero h1 { color: var(--text-on-dark-strong); }
html.themed .page-hero::after { background-image: none; }

html.themed .cta-band {
  --bg-img: url('img/cta-bg.jpg');
  background-image: var(--bg-veil), var(--bg-tint), var(--bg-img, none);
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color;
}
html.themed .cta-inner p { color: var(--text-on-dark-dim); }
html.themed .cta-phone .ring { color: var(--on-accent); }
html.themed .cta-phone b { color: var(--gold-200); }
html.themed .cta-phone span { color: var(--text-on-dark-dim); }
html.themed .cta-band::after { background-image: none; }

html.themed .footer { background: var(--navy-950); }
html.themed .footer::after { background-image: none; }
html.themed .qr .qr-img {
  background-image:
    linear-gradient(45deg, var(--navy-700) 25%, transparent 25%, transparent 75%, var(--navy-700) 75%),
    linear-gradient(45deg, var(--navy-700) 25%, transparent 25%, transparent 75%, var(--navy-700) 75%);
}

/* -------------------------------------------------------------
   5. 卡片 / 按钮 / 强调色
   ------------------------------------------------------------- */
html.themed .bento-card:hover { border-color: var(--accent-line); }
html.themed .bento-card .b-link,
html.themed .member .role,
html.themed .tl-item .tl-year,
html.themed .ph-eyebrow { color: var(--accent-strong); }
html.themed .bento-card .b-tags span {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-line);
}
html.themed .bento-card .b-ico { border-color: var(--accent-line); color: var(--accent-strong); }
html.themed .b2 { border-color: var(--accent-line); }
html.themed .b2 .b-tags span {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text-on-dark-strong);
}
html.themed .step.on { background: var(--accent-soft); }
html.themed .step.on .s-no { color: var(--on-accent); }
html.themed .adv-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
html.themed .avatar { border-color: var(--accent-line); }
html.themed .avatar::after {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 65%, transparent), transparent 45%) border-box;
}
html.themed .member:hover { border-color: var(--accent-line); }

html.themed .news-card .cover { background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); }
html.themed .news-card .cover .tag,
html.themed .v-badge { background: var(--tag-bg); color: var(--tag-fg); }
html.themed .news-card:hover { border-color: var(--accent-line); }
html.themed .news-card:hover h4 { color: var(--accent-strong); }

html.themed .ct-tabs { background: var(--surface-2); border-color: var(--line); }
html.themed .ct-tab { color: var(--muted); }
html.themed .ct-tab:hover { color: var(--accent-strong); }
html.themed .ct-tab.on { color: #fff; background: var(--grad); }
html.themed .ct-tab.on::after,
html.themed .ct-line { background: var(--grad); }
html.themed .filter-pill.on,
html.themed .pagination a.on { background: var(--grad); color: #fff; }
html.themed .filter-pill:hover,
html.themed .pagination a:hover { border-color: var(--accent-line); color: var(--accent-strong); }

html.themed .btn-ghost {
  color: var(--text-on-dark);
  border-color: var(--accent-line);
  background: rgba(255, 255, 255, .05);
}
html.themed .btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

html.themed .article-body .lead { background: linear-gradient(90deg, var(--accent-soft), transparent 80%); }
html.themed .article-body p,
html.themed .side-card ul li { color: var(--ink); }
html.themed .video-frame,
html.themed .video-frame video { background: var(--navy-950); }
html.themed .v-note {
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--navy-950) 62%, transparent);
  border-color: var(--accent-line);
}
html.themed .timeline::before { background: var(--gold-grad); }
html.themed .tl-item::before { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); }
html.themed .tl-item:hover::before { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
html.themed .about-visual .float-info .fi-ico {
  border-color: var(--accent-line);
  color: var(--accent-strong);
}
html.themed .dots-nav a.on { background: var(--grad); }
html.themed .dots-nav a .tip {
  color: var(--text-on-dark);
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--navy-950) 92%, transparent);
}
html.themed .contact-card::after,
html.themed .ph-eyebrow::before { background: var(--grad); }

/* 深色底上的标题渐变用更亮的一组，避免「深色叠深色」看不清
   注意：只能改 background-image，不能用 background 简写（会把 background-clip:text 重置掉） */
html.themed .grad-text,
html.themed .side-hotline b { background-image: var(--grad-text); }

/* 深色区里的次级文字统一走令牌，避免残留天蓝 */
html.themed .black .sec-desc,
html.themed .glass-card p,
html.themed .marquee-item { color: var(--text-on-dark-dim); }

/* -------------------------------------------------------------
   6. 兜底：不支持 mix-blend-mode 的浏览器用半透明蒙版
   ------------------------------------------------------------- */
@supports not (background-blend-mode: color) {
  html.themed .hs-bg,
  html.themed .hs-bg.custom,
  html.themed .page-hero,
  html.themed .cta-band,
  html.themed .section.dark.has-bg,
  html.themed .stats {
    background-image: linear-gradient(rgba(10, 16, 34, .72), rgba(6, 10, 24, .86)), var(--bg-img, none);
  }
}