/* ==========================================================================
   设计 token 起始模板（STARTING TEMPLATE）
   - 这是通用起点，不是任何站点的最终值：请先写项目 DESIGN.md，再按它修改本文件。
   - 默认给出「深色工业」一套 + 注释里的「瓷白编辑」替代值；只保留一套。
   - 所有颜色 / 字体只在 :root 声明，组件里不写裸 hex 与 font-family。
   - 改完用 WCAG 公式重算对比度并写进 DESIGN.md（正文 ≥4.5:1，大字/控件边界/焦点 ≥3:1）。
   ========================================================================== */

:root {
  color-scheme: dark;                 /* 亮色方案改 light */

  /* ---- 表面（2–3 层）---- */
  --paper:   #0e1114;                 /* 页面底   | 瓷白方案: #F4F5F2 */
  --surface: #151a1f;                 /* 证明条/输入区 | #FFFFFF 或 #EEF0EC */
  --panel:   #1b2229;                 /* 交替区块 | #E8EBE7 */

  /* ---- 文字（3 档）---- */
  --ink:   #e8eaec;                   /* 标题/主要信息 | #13212A */
  --body:  #bcc3ca;                   /* 正文 | #13212A */
  --muted: #9aa5af;                   /* 辅助 | #55626A */

  /* ---- 结构 ---- */
  --rule:    rgba(255,255,255,.10);   /* 装饰细线，不承担控件边界 | rgba(19,33,42,.16) */
  --control: #697680;                 /* 输入框/菜单按钮边界，需 ≥3:1 | #55626A */

  /* ---- 唯一强调色 ---- */
  --accent:       #ff914d;            /* CTA、链接、激活、焦点、关键数字 | #1F5F73 */
  --accent-hover: #ffa970;            /* 同色相明度变化 */
  --on-accent:    #0e1114;            /* 主按钮文字（浅强调色上用深字）| #F4F5F2 */

  /* ---- 状态（只表状态，不作装饰；不单靠颜色）---- */
  --error:   var(--accent);
  --success: var(--ink);
  --todo-bg: #F1E4C0;                 /* 【待填】标记底色，只用于待确认项 */

  /* ---- 字体（系统栈，不下载字体）---- */
  --sans: "Helvetica Neue", Arial, ui-sans-serif, system-ui, -apple-system,
          "PingFang SC", "Hiragino Sans GB", "HarmonyOS Sans SC", "Microsoft YaHei",
          "Noto Sans CJK SC", "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --serif: "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif; /* 编辑风标题可选 */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* 只用于真实技术数据/测量值 */

  /* ---- 字号档（固定档位，不留随意数值）---- */
  --text-xs: .75rem;   /* 12 */
  --text-sm: .875rem;  /* 14 */
  --text-base: 1rem;   /* 16 正文 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.25rem;  /* 20 */
  --text-2xl: 1.5rem;  /* 24 */
  --text-3xl: 2rem;    /* 32 */
  --text-4xl: 3rem;    /* 48 */
  --text-display: clamp(2.2rem, 4.8vw, 4rem);   /* 首页 H1，按 DESIGN.md 调；手机另设 28–40px */
  --text-section: clamp(1.75rem, 3.2vw, 2.6rem);
  --leading-body: 1.7;
  --leading-heading: 1.15;
  --measure: 72ch;     /* 中文正文可改 38em */

  /* ---- 间距档 ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px; --s40: 160px;
  --section-gap: var(--s24);           /* 编辑/奢华风: clamp(96px, 12vw, 160px) */

  /* ---- 网格 ---- */
  --container: 1280px;                 /* 1240–1280 */
  --gutter: 32px;
  --grid: repeat(12, minmax(0, 1fr));
  --page-inline: clamp(20px, 5vw, 48px);

  /* ---- 形状与层次（边框或阴影二选一）---- */
  --radius-0: 0; --radius-1: 2px; --radius-dialog: 4px;   /* SaaS 方向可改 6–8px */
  --shadow-header: 0 1px 0 var(--rule), 0 8px 24px rgba(0,0,0,.18);

  /* ---- 动效 ---- */
  --dur-fast: 150ms; --dur-base: 220ms; --dur-reveal: 600ms; --dur-hero: 900ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --reveal-distance: 20px;             /* ≤20px */

  /* ---- 触控 ---- */
  --tap: 44px; --tap-primary: 48px;
}

@media (max-width: 768px) {
  :root { --gutter: 16px; --section-gap: var(--s16); }
}

/* ---- 基础 ---- */
html, body { overflow-x: clip; }               /* 不用 hidden / 100vw */
body { margin: 0; background: var(--paper); color: var(--body); font: 400 var(--text-base)/var(--leading-body) var(--sans); }
h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: var(--leading-heading); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
p { max-width: var(--measure); text-wrap: pretty; }
.wrap { width: min(var(--container), calc(100% - 2 * var(--page-inline))); margin-inline: auto; }
.grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--gutter); }
.mono, .count { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:lang(zh-CN) h1, :lang(ja) h1 { letter-spacing: 0; line-height: 1.25; }

/* ---- 浏览器表面主题化 ---- */
::selection { background: var(--accent); color: var(--on-accent); }
html { accent-color: var(--accent); caret-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- 按钮 ---- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-primary); padding: var(--s3) var(--s6);
  border-radius: var(--radius-1); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.button:hover { background: var(--accent-hover); }
.button:active { transform: translateY(1px); }
@media (max-width: 768px) { .button { width: 100%; } }

/* ---- 无障碍工具类 ---- */
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- 渐进增强显现：只有脚本标记 .is-pending 后才隐藏 ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.is-pending) { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .js .reveal.is-pending { opacity: 0; transform: translateY(var(--reveal-distance)); }
  .js .reveal.reveal-immediate { transition: none; }
}
/* 截图/静止模式 */
html.is-static .reveal, html[data-static] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- 减少动态：全部关闭、全部可见 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal.is-pending { opacity: 1; transform: none; }
}
@media print { .js .reveal { opacity: 1 !important; transform: none !important; } }

/* ---- 图片 ---- */
img { max-width: 100%; height: auto; }
.image-frame { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-1); }
.image-frame img { display: block; width: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .image-frame:hover img { transform: scale(1.04); } }

/* ---- 装饰氛围图（无文字/品牌/人物）---- */
.has-atmo { position: relative; isolation: isolate; }
.atmo-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.atmo-bg img { width: 100%; height: 100%; object-fit: cover; }
.atmo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,17,20,.92), rgba(14,17,20,.84)); } /* 遮罩保 AA */

/* ---- 【待填】标记 ---- */
.todo { background: var(--todo-bg); color: #13212A; border-radius: 2px; padding: 0 .25em; text-decoration: underline dashed 1px; }

/* ---- 手机安全区示例 ---- */
@media (max-width: 768px) {
  .mobile-bar { position: fixed; inset: auto 0 0; padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  body.has-mobile-bar { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  html.has-mobile-bar { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  input, select, textarea { font-size: 16px; }   /* 防 iOS 聚焦放大 */
}