/* =========================================================
   NexVault 设计令牌
   浅色为默认；深色两种来源：系统偏好（未手动选择时）和 html[data-theme="dark"]（手动选择）。
   组件只引用这里的变量，主题与区块底色的差异全部收敛在变量层。
   断点（媒体查询里不能用变量，在样式表中直接写数值）：1440 / 1024 / 900（手机菜单）/ 768 / 375
   ========================================================= */

:root {
  color-scheme: light;

  /* --- 颜色：页面与卡片 --- */
  --ground: #ffffff;           /* 页面底色 */
  --ground-alt: #f5f5f7;       /* 交替区块底色 */
  --surface: #f5f5f7;          /* 白底区块上的卡片 */
  --surface-2: #ffffff;        /* 卡片里的二级底：行、输入框、标签（次要文字在上面 5.1:1） */
  --surface-3: #d2d2d7;        /* 进度轨道、未点亮的签名圆点、禁用 */
  --ink: #1d1d1f;              /* 主文字 */
  --muted: #6e6e73;            /* 次要文字 */
  --line: rgba(0, 0, 0, 0.1);  /* 仅用于顶栏底边和列表分隔 */

  /* --- 颜色：唯一的强调色（品牌绿） --- */
  --accent: #0b7f5b;           /* 主按钮底色、选中态 */
  --accent-hover: #096b4d;
  --accent-ink: #ffffff;       /* 主按钮上的文字，5.0:1 */
  --accent-text: #08724f;      /* 文字链接、强调文字，白底 5.9:1 */
  --accent-soft: rgba(11, 127, 91, 0.1);

  --danger: #c03535;

  /* --- 颜色：顶栏、遮罩、浮层 --- */
  --header-bg: rgba(255, 255, 255, 0.72);
  --menu-bg: #ffffff;          /* 下拉菜单、弹窗、手机菜单 */
  --hover-tint: rgba(0, 0, 0, 0.06);  /* 图标按钮、菜单项的悬停底 */
  --scrim: rgba(0, 0, 0, 0.48);
  --video-scrim: rgba(0, 0, 0, 0.88);

  /* --- 主题相关的显示开关 --- */
  --logo-dark: none;
  --logo-light: block;
  --icon-moon: block;
  --icon-sun: none;

  /* --- 字体：只调用系统字体，不打包字体文件 --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;

  /* --- 字号：首屏 56–80，区块标题 40–48，正文 17 --- */
  --fs-hero: clamp(40px, 3.9vw, 56px);   /* 两栏首屏：左栏放得下 10 个汉字一行 */
  --fs-h2: clamp(32px, 3.4vw, 48px);
  --fs-h3: 21px;
  --fs-lead: clamp(19px, 1.5vw, 21px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --lh-body: 1.5;
  --lh-tight: 1.07;
  --ls-display: -0.03em;       /* 大标题略收紧 */
  --ls-heading: -0.02em;

  /* --- 间距与版心 --- */
  --gutter: clamp(22px, 4vw, 40px);
  --section-y: clamp(72px, 11vw, 160px);   /* 1440 → 158px，1024 → 112px，375 → 72px */
  --content: 1200px;                       /* 宽内容：演示、架构图、表单 */
  --content-narrow: 980px;                 /* 文字为主的内容 */
  --header-h: 48px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* --- 圆角 --- */
  --r-control: 12px;           /* 输入框、列表行、小标签 */
  --r-card: 18px;              /* 卡片 */
  --r-panel: 24px;             /* 大面板 */
  --r-pill: 980px;             /* 按钮 */

  /* --- 阴影：只给真正浮起来的东西（下拉菜单、弹窗、手机菜单） --- */
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.14);

  /* --- 动效 --- */
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  --dur-press: 140ms;
  --dur-hover: 300ms;
  --dur-ui: 240ms;
  --dur-reveal: 800ms;
  --reveal-y: 24px;
  --hover-scale: 1.02;

  /* --- 层级 --- */
  --z-header: 20;
  --z-menu: 30;
  --z-modal: 100;
}

/* 繁体中文换成繁体字形的系统字体 */
html[lang="zh-TW"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", "Helvetica Neue", "Microsoft JhengHei", Arial, sans-serif;
}

/* --- 深色：跟随系统（访客没有手动选择时） --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #000000; --ground-alt: #161617;
    --surface: #1d1d1f; --surface-2: #2c2c2e; --surface-3: #48484a;
    --ink: #f5f5f7; --muted: #a1a1a6; --line: rgba(255, 255, 255, 0.14);
    --accent: #10b981; --accent-hover: #34d399; --accent-ink: #00170f; --accent-text: #3ddca4;
    --accent-soft: rgba(16, 185, 129, 0.16); --danger: #ff8a80;
    --header-bg: rgba(22, 22, 23, 0.8); --menu-bg: #1d1d1f; --hover-tint: rgba(255, 255, 255, 0.1); --scrim: rgba(0, 0, 0, 0.64); --video-scrim: rgba(0, 0, 0, 0.92);
    --logo-dark: block; --logo-light: none; --icon-moon: none; --icon-sun: block;
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.56);
  }
}

/* --- 深色：手动选择 --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #000000; --ground-alt: #161617;
  --surface: #1d1d1f; --surface-2: #2c2c2e; --surface-3: #48484a;
  --ink: #f5f5f7; --muted: #a1a1a6; --line: rgba(255, 255, 255, 0.14);
  --accent: #10b981; --accent-hover: #34d399; --accent-ink: #00170f; --accent-text: #3ddca4;
  --accent-soft: rgba(16, 185, 129, 0.16); --danger: #ff8a80;
  --header-bg: rgba(22, 22, 23, 0.8); --menu-bg: #1d1d1f; --hover-tint: rgba(255, 255, 255, 0.1); --scrim: rgba(0, 0, 0, 0.64); --video-scrim: rgba(0, 0, 0, 0.92);
  --logo-dark: block; --logo-light: none; --icon-moon: none; --icon-sun: block;
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.56);
}

/* =========================================================
   区块底色：区块内部重新定义卡片用的层级，卡片在任何底色上都能分出层次
   ========================================================= */

/* 灰底区块：卡片改为白色 */
.section--alt {
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #d2d2d7;
  background: var(--ground-alt);
}

/* 深色章节：浅色主题下全站唯一的深色区块 */
.section--dark {
  color-scheme: dark;
  --ground: #000000;
  --surface: #1d1d1f; --surface-2: #2c2c2e; --surface-3: #48484a;
  --ink: #f5f5f7; --muted: #a1a1a6; --line: rgba(255, 255, 255, 0.14);
  --accent: #10b981; --accent-hover: #34d399; --accent-ink: #00170f; --accent-text: #3ddca4;
  --accent-soft: rgba(16, 185, 129, 0.16);
  background: var(--ground);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section--alt { --surface: #1d1d1f; --surface-2: #2c2c2e; --surface-3: #48484a; }
  :root:not([data-theme="light"]) .section--dark { --ground: #1d1d1f; --surface: #2c2c2e; --surface-2: #3a3a3c; --surface-3: #545456; }
}
:root[data-theme="dark"] .section--alt { --surface: #1d1d1f; --surface-2: #2c2c2e; --surface-3: #48484a; }
:root[data-theme="dark"] .section--dark { --ground: #1d1d1f; --surface: #2c2c2e; --surface-2: #3a3a3c; --surface-3: #545456; }