@charset "UTF-8";
/* ==========================================================================
 * theme.css — 主题层
 * 每套主题只通过 CSS 变量定义"外观"，布局/结构全部由 layout.css 负责。
 * 切换主题只需在 <html data-theme="xxx"> 上换一个值，无需改动任何结构代码。
 *
 * 变量契约（layout.css 只消费这些变量，不写死任何颜色）：
 *   --bg --bg-alt --surface --surface-2 --border --border-strong
 *   --text --text-soft --heading --on-primary --primary --primary-strong
 *   --primary-soft --accent --radius --radius-sm --radius-lg
 *   --shadow --shadow-lg --font-sans --font-display --sec-pad --container
 *   --nav-bg --nav-text --nav-border --hero-veil --grid-line
 *   --warn --warn-soft --warn-border --warn-text --mono
 *   --page-head-bg --page-head-fg --page-head-dim
 *
 * --text-soft 的取值约束：它要同时压在 bg / bg-alt / surface / surface-2 四种底色上
 * （表格表头、hover 行、卡片面都会用到），因此基准取「对最亮底色 >= 4.5:1」，
 * 实测取 4.6:1 留一点余量，同时保持比 --text 浅一层、层次不塌。
 *
 * 全局通用（4 套主题共用，不逐主题重复）：
 *   --mono            等宽字体栈，版本号 / 文件名 / 代码块用
 *   --warn-*          「即将开放」等提示态的琥珀色系，4 套主题各有取值
 *   --page-head-*     下载页标题区（三页共用一套结构，只换配色）
 *                     四套主题统一用 135° 渐变；minimal 是同色系暗色微渐变
 *                     （跨度刻意压到 #121212→#1c1c1c，只为形式统一，白字对比度全程 >= 17:1）
 * ========================================================================== */

:root {
  --container: 1200px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;
}

/* ============================ 1. 科技蓝 tech ============================ */
[data-theme="tech"] {
  --bg: #ffffff;
  --bg-alt: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #eef3fb;
  --border: #e3e9f2;
  --border-strong: #c9d6e8;
  --text: #4a5568;
  --text-soft: #646f7b;
  --heading: #0f2035;
  --on-primary: #ffffff;

  --primary: #1668ff;
  --primary-strong: #0b46c4;
  --primary-soft: rgba(22, 104, 255, .10);
  --accent: #00c2d1;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 2px 10px rgba(15, 32, 53, .06);
  --shadow-lg: 0 18px 40px rgba(15, 32, 53, .14);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --sec-pad: 88px;

  --nav-bg: rgba(255, 255, 255, .88);
  --nav-text: #33415c;
  --nav-border: #e3e9f2;
  --hero-veil: linear-gradient(180deg, rgba(8, 24, 48, .06) 0%, rgba(8, 24, 48, .32) 100%);
  --grid-line: transparent;

  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, .10);
  --warn-border: rgba(217, 119, 6, .32);
  --warn-text: #8a5300;

  --page-head-bg: linear-gradient(135deg, #0b2545 0%, #133a6b 45%, #1668ff 100%);
  --page-head-fg: #ffffff;
  --page-head-dim: rgba(255, 255, 255, .80);
}
[data-theme="tech"] .hero {
  background: linear-gradient(135deg, #0b2545 0%, #133a6b 45%, #1668ff 100%);
}
/* .section-title 的尺寸（font-size / 下划线宽高）与配色 4 套主题完全一致，
   已全部提到底层：尺寸在 layout.css 的 .section-title / ::after，
   下划线渐变也在 ::after。不在此处重复定义。 */
[data-theme="tech"] .card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

/* ============================ 2. 极简白 minimal ======================== */
[data-theme="minimal"] {
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --border: #e6e6e6;
  --border-strong: #111111;
  --text: #555555;
  --text-soft: #6f6f6f;
  --heading: #111111;
  --on-primary: #ffffff;

  --primary: #111111;
  --primary-strong: #000000;
  --primary-soft: rgba(17, 17, 17, .06);
  --accent: #d4401c;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: none;
  --shadow-lg: none;

  --font-sans: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --sec-pad: 88px;

  --nav-bg: rgba(255, 255, 255, .94);
  --nav-text: #111111;
  --nav-border: #e6e6e6;
  --hero-veil: linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .28) 100%);
  --grid-line: transparent;

  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, .08);
  --warn-border: rgba(180, 83, 9, .30);
  --warn-text: #8a5300;

  --page-head-bg: linear-gradient(135deg, #121212 0%, #161616 55%, #1c1c1c 100%);
  --page-head-fg: #ffffff;
  --page-head-dim: rgba(255, 255, 255, .78);
}
[data-theme="minimal"] .hero {
  background: #111111;
}
[data-theme="minimal"] .card {
  border-width: 1px;
  border-bottom: 2px solid transparent;
}
[data-theme="minimal"] .card:hover {
  border-bottom-color: var(--accent);
  transform: none;
}
[data-theme="minimal"] .stat-value,
[data-theme="minimal"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
}
[data-theme="minimal"] .btn-primary {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}
[data-theme="minimal"] .btn-primary:hover {
  background: #ffffff;
  color: #111111;
}

/* ========================== 3. 硬核黑 industrial ======================= */
/* 配色基调：深板岩灰蓝。原版是近黑（#080b11）+ 深色卡片面，底色与卡片
   面几乎同色，整页糊成一团黑、层次看不出来。这里把底色/面/边框整体上抬
   一档，保留工业深色气质，但三级层次（页底 → 卡片 → 图像区）能分辨。
   要继续调亮或调暗，只改下面这 5 个值即可（bg / bg-alt / surface / surface-2 / border）。 */
[data-theme="industrial"] {
  --bg: #161b24;
  --bg-alt: #1b212b;
  --surface: #222836;
  --surface-2: #2a313f;
  --border: #333c4c;
  --border-strong: #00e5ff;
  --text: #b9c6d6;
  --text-soft: #8e9bab;
  --heading: #f1f6ff;
  --on-primary: #05121a;

  --primary: #00e5ff;
  --primary-strong: #00b8cc;
  --primary-soft: rgba(0, 229, 255, .12);
  --accent: #ffb020;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: none;
  --shadow-lg: 0 0 0 1px var(--border-strong), 0 14px 34px rgba(0, 229, 255, .12);

  --font-sans: "SF Mono", "Cascadia Mono", Menlo, Consolas, "PingFang SC",
               "Microsoft YaHei", monospace;
  --font-display: var(--font-sans);
  --sec-pad: 88px;

  --nav-bg: rgba(22, 27, 36, .9);
  --nav-text: #c6d6e8;
  --nav-border: #333c4c;
  --hero-veil: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(22, 27, 36, .55) 100%);
  --grid-line: rgba(0, 229, 255, .05);

  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, .12);
  --warn-border: rgba(255, 176, 32, .38);
  --warn-text: #ffc46b;

  --page-head-bg: linear-gradient(135deg, #10151d 0%, #16212e 60%, #0b3a44 100%);
  --page-head-fg: #ffffff;
  --page-head-dim: rgba(226, 240, 255, .80);
}
[data-theme="industrial"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
[data-theme="industrial"] .hero {
  /* 注意：这个背景色平时**看不到** —— .hero-slide 用 position:absolute; inset:0 +
     object-fit:cover 把 hero 完全铺满，.hero-veil 又是 background:none（文字可读性
     靠 text-shadow）。所以它只是「图片加载失败/404 时的兜底底色」，不需要为了
     与其他主题的 page-head 渐变形式对齐而改成渐变。 */
  background: #10151d;
  /* 全出血下只保留上下描边，左右贴边不画。
     注意：这两条线会压在轮播图边缘上（图片同样铺满整个 hero）。 */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
[data-theme="industrial"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
      rgba(0, 229, 255, .05) 0px, rgba(0, 229, 255, .05) 1px,
      transparent 1px, transparent 4px);
  pointer-events: none;
}
/* 标题前缀 "//" 与下划线的尺寸已提为 4 套主题共用，定义在 layout.css 的
   .section-title / ::before / ::after —— 不要在此处再重复定义。 */
[data-theme="industrial"] .card {
  border: 1px solid var(--border);
  background: var(--surface);
}
[data-theme="industrial"] .card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
[data-theme="industrial"] .card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: 10px solid var(--primary);
  border-left: 10px solid transparent;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
[data-theme="industrial"] .card:hover::after { opacity: 1; }
[data-theme="industrial"] .eyebrow {
  font-family: var(--font-sans);
  letter-spacing: .22em;
  color: var(--primary);
}
[data-theme="industrial"] .btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-theme="industrial"] .btn-primary:hover {
  background: #5cf0ff;
  transform: none;
}
[data-theme="industrial"] .footer { border-top: 1px solid var(--border); }

/* ========================== 4. 极光渐变 aurora ========================= */
[data-theme="aurora"] {
  --bg: #f6f4ff;
  --bg-alt: #eef1ff;
  --surface: rgba(255, 255, 255, .72);
  --surface-2: rgba(255, 255, 255, .9);
  --border: rgba(109, 94, 252, .16);
  --border-strong: #6d5efc;
  --text: #4c4a63;
  --text-soft: #6d6a87;
  --heading: #1c1635;
  --on-primary: #ffffff;

  --primary: #6d5efc;
  --primary-strong: #4a37e0;
  --primary-soft: rgba(109, 94, 252, .12);
  --accent: #00cbb4;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 8px 26px rgba(66, 51, 168, .08);
  --shadow-lg: 0 24px 60px rgba(66, 51, 168, .20);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: var(--font-sans);
  --sec-pad: 88px;

  --nav-bg: rgba(255, 255, 255, .62);
  --nav-text: #342c5c;
  --nav-border: rgba(109, 94, 252, .14);
  --hero-veil: linear-gradient(180deg, rgba(28, 22, 53, .05) 0%, rgba(28, 22, 53, .30) 100%);
  --grid-line: transparent;

  --warn: #c2760c;
  --warn-soft: rgba(194, 118, 12, .10);
  --warn-border: rgba(194, 118, 12, .30);
  --warn-text: #9a5c05;

  --page-head-bg: linear-gradient(135deg, #4a37e0 0%, #6d5efc 40%, #00cbb4 100%);
  --page-head-fg: #ffffff;
  --page-head-dim: rgba(255, 255, 255, .86);
}
[data-theme="aurora"] body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 18% 20%, rgba(109, 94, 252, .34), transparent 70%),
    radial-gradient(38% 50% at 82% 12%, rgba(0, 203, 180, .30), transparent 70%),
    radial-gradient(46% 60% at 55% 0%, rgba(255, 138, 191, .24), transparent 72%);
  filter: blur(12px);
}
[data-theme="aurora"] .site-nav {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
[data-theme="aurora"] .hero {
  background: linear-gradient(120deg, #6d5efc 0%, #8b5cf6 38%, #00cbb4 100%);
}
[data-theme="aurora"] .card,
[data-theme="aurora"] .stat {
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  background: var(--surface);
}
[data-theme="aurora"] .card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
[data-theme="aurora"] .section-title {
  background: linear-gradient(96deg, #6d5efc, #00cbb4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* -webkit-text-fill-color 是**可继承**属性，上面的 transparent 会传给 ::before，
   不覆盖的话 "//" 前缀会被涂成透明、看不见。必须显式给回实色。
   下划线（::after）的渐变与 4 套主题一致，已提到底层，这里不重复定义。 */
[data-theme="aurora"] .section-title::before {
  -webkit-text-fill-color: var(--primary);
}