/* =========================================================
   base.css — 设计 Token / 重置 / 排版 / 工具类
   零外部依赖：字体全部走系统字体栈（不引 Google Fonts）
   ========================================================= */

:root {
  /* 品牌色 —— 橙色主调：活力 + 亲和
     主色 #C6470A：压在白底 4.87:1、白字压其上 4.87:1，双向过 WCAG AA */
  --brand-50:  #FFF4EC;
  --brand-100: #FFE2CC;
  --brand-300: #FDBA74;
  --brand-500: #EA580C;  /* 焦点环 / 图标 / 装饰条 */
  --brand-600: #C6470A;  /* 主色：按钮底、链接、强调文字 */
  --brand-700: #9E3707;  /* hover 加深 */
  --brand-ink: #9E3707;  /* 亮底上的品牌文字，不随暗色模式变浅 */

  /* 品牌底色上的前景色（按钮 / CTA / 徽标文字） */
  --on-brand:  #FFFFFF;

  /* 点缀色 —— 用于数据、勾选、状态（橙青互补，仅小面积点缀） */
  --accent-50:  #E6F4F1;
  --accent-500: #0F7B6C;
  --accent-600: #0B5F53;
  /* 青绿底上的前景色（暗色模式下 accent 会提亮，白字同样会糊） */
  --on-accent:  #FFFFFF;

  /* 语义色 */
  --danger-500: #C0392B;
  --success-500:#2E7D52;
  --warning-500:#B26A00;

  /* 中性色（浅色主题，微暖调以贴合橙色，避免冷灰压不住橙） */
  --bg:        #FFFFFF;
  --bg-soft:   #FBF7F3;
  --surface:   #FFFFFF;
  --surface-2: #F4EDE7;
  --text:      #1B1714;
  --text-2:    #524A43;
  --text-3:    #7A6E64;
  --border:    #EBE0D7;
  --border-2:  #D8C9BB;

  /* 尺寸 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --container: 1200px;
  --header-h: 68px;

  /* 阴影 —— 只有两档，克制使用 */
  --shadow-1: 0 1px 2px rgba(60, 35, 15, .06), 0 1px 3px rgba(60, 35, 15, .05);
  --shadow-2: 0 6px 24px rgba(60, 35, 15, .12);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* 暗色主题 */
[data-theme="dark"] {
  /* 暗色下品牌色整体提亮，保证深色背景上的可读性 */
  --brand-50:  #2E1708;
  --brand-100: #45230D;
  --brand-300: #FB923C;
  --brand-500: #F97316;
  --brand-600: #FB923C;
  --brand-700: #FDBA74;
  --brand-ink: #7C2D12;

  /* 暗色下品牌底更亮，前景必须换成深色字，否则白字会糊成一团 */
  --on-brand:  #1B1006;

  --accent-50:  #12332E;
  --accent-500: #3FBFA8;
  --accent-600: #63D3BF;
  --on-accent:  #08221E;

  --bg:        #12100E;
  --bg-soft:   #1A1614;
  --surface:   #1C1815;
  --surface-2: #262019;
  --text:      #F6F0EA;
  --text-2:    #BCB2A8;
  --text-3:    #8C8178;
  --border:    #332C26;
  --border-2:  #453C34;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------
   品牌色变体：亮橙（仅用于对比，非默认）
   用法：<html data-brand="bright">，或 URL 加 ?brand=bright（会记住到 localStorage）
   已知代价：#EA580C 压白底仅 3.56:1，13–15px 小字与正文不过 WCAG AA
   定稿后：删掉本段，把选定色板写回上面的 :root / [data-theme="dark"]
   --------------------------------------------------------- */
:root[data-brand="bright"] {
  --brand-50:  #FFF1E6;
  --brand-100: #FFDCC0;
  --brand-300: #FDBA74;
  --brand-500: #F97316;
  --brand-600: #EA580C;   /* 亮橙主色 */
  --brand-700: #C2410C;
  --brand-ink: #C2410C;
  --on-brand:  #FFFFFF;
}
[data-theme="dark"][data-brand="bright"] {
  --brand-50:  #33200E;
  --brand-100: #4A2A12;
  --brand-300: #FDBA74;
  --brand-500: #FB923C;
  --brand-600: #F97316;
  --brand-700: #FB923C;
  --brand-ink: #7C2D12;
  --on-brand:  #1B1006;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 3px; }

/* ---------- 排版 ---------- */
h1, .t-h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
h2, .t-h2 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h3, .t-h3 { font-size: clamp(19px, 2.2vw, 25px); line-height: 1.35; font-weight: 600; }
h4, .t-h4 { font-size: 17px; line-height: 1.4; font-weight: 600; }
.t-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-2); line-height: 1.75; }
.t-body { font-size: 15px; color: var(--text-2); }
.t-small { font-size: 13px; color: var(--text-3); }
.t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- 布局工具 ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
@media (max-width: 640px) { .container { padding-inline: var(--sp-4); } }
.section { padding-block: clamp(48px, 7vw, 96px); }
.section--soft { background: var(--bg-soft); }
/* 小屏隐藏（≤640）：把只在桌面成立的补充说明收起来，避免手机窄行压出一个字的孤行 */
@media (max-width: 640px) { .u-hide-sm { display: none; } }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grid { display: grid; gap: var(--sp-5); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .g-4 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--brand-600); color: var(--on-brand); padding: 10px 18px;
  border-radius: var(--r-sm); transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 区块标题（统一节奏） ---------- */
.sec-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head__eyebrow {
  display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-600); font-weight: 600; margin-bottom: var(--sp-2);
}
[data-theme="dark"] .sec-head__eyebrow { color: var(--brand-500); }
.sec-head__sub { margin-top: var(--sp-3); color: var(--text-2); font-size: 16px; }
.sec-head__bar { width: 44px; height: 3px; background: var(--brand-600); margin: var(--sp-3) auto 0; border-radius: 2px; }
/* 无副标题的区块：标题与短横线之间补一口气 */
.sec-head--nosub .sec-head__bar { margin-top: 20px; }

/* ---------- 滚动进场动画 ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 内容占位标记（填内容时整块替换） ---------- */
.ph-text {
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-size: 14px;
  font-style: normal;
}
.ph-img {
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  padding: var(--sp-3);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ph-img--1x1  { aspect-ratio: 1 / 1; }
.ph-img--3x4  { aspect-ratio: 3 / 4; }
.ph-img--21x9 { aspect-ratio: 21 / 9; }
.ph-img--logo { aspect-ratio: 3 / 1; }
.ph-img--wide { aspect-ratio: 2 / 1; }