/* ============================================================
   tokens.css · 设计变量与基础层
   依据 docs/design-spec.md v1.6 §2/§3/§4/§5/§7/§8
   全站禁止硬编码色值，一律引用本文件变量
   ============================================================ */

:root {
  /* 品牌色 §2.1 */
  --c-brand: #0B3B6F;
  --c-brand-dark: #062A50;
  --c-brand-link: #1D6BB5;
  --c-brand-mid: #14538F;
  --c-brand-tint: #E8F0F8;
  --c-brand-wash: #F4F8FC;

  /* 强调色 §2.2 */
  --c-accent: #C8452F;
  --c-accent-dark: #B03A26;
  --c-accent-active: #A83522;

  /* 中性灰阶 §2.3 */
  --c-n900: #1A1F26;
  --c-n700: #3D4652;
  --c-n500: #606B7A;
  --c-n400: #8B96A3;
  --c-n100: #EDF0F3;
  --c-n50: #F7F9FA;
  --c-n200: #E3E8ED;
  --c-n300: #C9D0D8;
  --c-border-input: #7A8694;

  /* 语义色 §2.4 */
  --c-success: #1F7A46;
  --c-success-bg: #E6F4EC;
  --c-info: #14538F;
  --c-info-bg: #E8F0F8;
  --c-warning: #8A5200;
  --c-warning-bg: #FFF4E0;
  --c-danger: #B3261E;
  --c-danger-bg: #FDECEA;

  /* 字体 §3.1 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI",
    "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "DIN Alternate", "SF Pro Display", -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* 间距 §4.1（8pt，仅此 8 档） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;

  /* 圆角与描边 §4.5 */
  --r-sm: 2px;
  --r-md: 4px;
  --r-full: 999px;

  /* 阴影（仅卡片 hover 与下拉） */
  --shadow-card: 0 4px 16px rgba(11, 59, 111, .10);
  --shadow-pop: 0 8px 24px rgba(6, 42, 80, .12);

  /* 焦点 §8-3 */
  --focus-light: #1D6BB5;
  --focus-dark: #7FB2E8;

  /* 遮罩 §5.4 */
  --shade-hero-x: linear-gradient(90deg, rgba(6, 42, 80, .82) 0%, rgba(6, 42, 80, .45) 55%, rgba(6, 42, 80, .10) 100%);
  --shade-hero-y: linear-gradient(180deg, rgba(6, 42, 80, .10) 40%, rgba(6, 42, 80, .78) 100%);
  --shade-store: linear-gradient(180deg, rgba(6, 42, 80, .20) 0%, rgba(6, 42, 80, .80) 100%);
}

/* ---------- 基础重置 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--c-n900);
  background: #FFFFFF;
  line-break: strict;
  word-break: break-word;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; border: 0; }
table { border-collapse: collapse; width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-size: 16px; }

a {
  color: var(--c-brand-link);
  text-decoration: none;
  transition: color 180ms ease;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 焦点可见 §8-3 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-light);
  outline-offset: 2px;
}
.topbar a:focus-visible,
.main-nav a:focus-visible,
.site-footer a:focus-visible,
.action-bar a:focus-visible,
.hero a:focus-visible,
.tabbar a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--focus-dark);
  outline-offset: 2px;
}

/* 跳过导航 §8-12 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #FFFFFF;
  color: var(--c-brand);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-md);
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-2); }

/* ---------- 版心与区块 §4.3 ---------- */
.container {
  width: 1200px;
  margin: 0 auto;
}

.section { padding: var(--sp-8) 0; }
.section-dense { padding: var(--sp-6) 0; }
.section-tint { background: var(--c-brand-wash); }
.section-gray { background: var(--c-n50); }

/* ---------- 字阶 §3.2 / §3.3 ---------- */
.h1 {
  font-size: 40px;
  line-height: 52px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--c-n900);
}
.h1-sm {
  font-size: 34px;
  line-height: 46px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--c-n900);
}
.h2 {
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--c-n900);
}
.h3 {
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
  color: var(--c-n900);
}
.h4 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: var(--c-n900);
}
.lead {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--c-n700);
}
.body-s {
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: var(--c-n700);
}
.caption {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: var(--c-n500);
}
.micro {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: var(--c-n500);
}
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* 区块标题：左侧 40×4 品牌色块 §7 */
.h2-bar::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: var(--c-brand);
  margin-bottom: var(--sp-3);
}

/* ---------- 按钮 §5.10 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--c-brand); color: #FFFFFF; }
.btn-primary:hover { background: var(--c-brand-mid); color: #FFFFFF; }
.btn-primary:active { background: var(--c-brand-dark); color: #FFFFFF; }

.btn-accent { background: var(--c-accent); color: #FFFFFF; }
.btn-accent:hover { background: var(--c-accent-dark); color: #FFFFFF; }
.btn-accent:active { background: var(--c-accent-active); color: #FFFFFF; }

.btn-secondary { background: transparent; color: var(--c-brand); border-color: var(--c-n400); }
.btn-secondary:hover { background: var(--c-brand-wash); border-color: var(--c-brand); color: var(--c-brand); }
.btn-secondary:active { background: var(--c-brand-tint); }

.btn[disabled],
.btn.disabled {
  background: var(--c-n100);
  color: var(--c-n500);
  cursor: not-allowed;
  border-color: transparent;
}

.btn-block { display: flex; width: 100%; }

/* 文字链 §5.10 */
.link {
  color: var(--c-brand-link);
  font-size: 16px;
  line-height: 28px;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link .arrow { transition: transform 180ms ease; display: inline-block; }
.link:hover .arrow { transform: translateX(2px); }

/* ---------- 标签 §5.15 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.tag-success { background: var(--c-success-bg); color: var(--c-success); }
.tag-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.tag-plain { background: #FFFFFF; color: var(--c-n500); border: 1px solid var(--c-n200); }

/* 筛选 chip §5.15 */
.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--c-n400);
  color: var(--c-n700);
  font-size: 15px;
  line-height: 24px;
  background: transparent;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.chip:hover { text-decoration: none; background: var(--c-brand-wash); color: var(--c-brand); }
.chip-cur { background: var(--c-brand); border-color: var(--c-brand); color: #FFFFFF; font-weight: 700; }
.chip-cur:hover { background: var(--c-brand); color: #FFFFFF; }

/* ---------- 提示条 §5.15 ---------- */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 26px;
}
.alert-info { background: var(--c-info-bg); color: var(--c-info); border-left: 4px solid var(--c-info); }
.alert-warning { background: var(--c-warning-bg); color: var(--c-warning); border-left: 4px solid var(--c-warning); }
.alert-success { background: var(--c-success-bg); color: var(--c-success); border-left: 4px solid var(--c-success); }
.alert-danger { background: var(--c-danger-bg); color: var(--c-danger); border-left: 4px solid var(--c-danger); }

/* ---------- 表格 §5.15 ---------- */
.table { width: 100%; }
.table th {
  background: var(--c-brand-wash);
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: var(--c-brand);
  text-align: left;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-n200);
}
.table td {
  padding: var(--sp-3);
  font-size: 15px;
  line-height: 24px;
  color: var(--c-n700);
  border-bottom: 1px solid var(--c-n100);
}
.table tr:nth-child(even) td { background: var(--c-n50); }

/* ---------- 手风琴 §5.15（原生 details） ---------- */
.accordion { border-top: 1px solid var(--c-n100); }
.accordion details { border-bottom: 1px solid var(--c-n100); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  color: var(--c-n900);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 24px;
  line-height: 1;
  color: var(--c-brand-link);
  flex: none;
}
.accordion details[open] summary::after { content: "−"; }
.accordion .accordion-body {
  padding-bottom: var(--sp-4);
  font-size: 16px;
  line-height: 28px;
  color: var(--c-n700);
}

/* ---------- 分页 §5.15 ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--c-n200);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--c-n700);
  background: #FFFFFF;
}
.pagination a:hover { text-decoration: none; background: var(--c-brand-wash); }
.pagination .page-num-current {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #FFFFFF;
  font-weight: 700;
}

/* ---------- 面包屑 §5.12 ---------- */
.breadcrumb {
  font-size: 14px;
  line-height: 22px;
  color: var(--c-n500);
  padding: var(--sp-2) 0;
}
.breadcrumb a { color: var(--c-n500); padding: var(--sp-2) 0; display: inline-block; }
.breadcrumb a:hover { color: var(--c-brand-link); }
.breadcrumb .crumb-sep { color: var(--c-n300); margin: 0 var(--sp-2); }
.breadcrumb .crumb-cur { color: var(--c-n900); }

/* ---------- 表单控件 §5.11 ---------- */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-size: 15px;
  line-height: 26px;
  font-weight: 700;
  color: var(--c-n900);
  margin-bottom: var(--sp-2);
}
.field .req { color: var(--c-accent); margin-left: var(--sp-1); }
.field input,
.field textarea,
.field select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-input);
  border-radius: var(--r-md);
  background: #FFFFFF;
  color: var(--c-n900);
  font-size: 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field textarea { height: auto; min-height: 120px; padding: var(--sp-2) var(--sp-3); line-height: 28px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--c-n500); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-brand-link);
  box-shadow: 0 0 0 3px rgba(29, 107, 181, .18);
}
.field .field-error {
  display: none;
  margin-top: var(--sp-2);
  font-size: 14px;
  line-height: 22px;
  color: var(--c-danger);
}
.field.field-invalid input,
.field.field-invalid textarea { border-color: var(--c-danger); }
.field.field-invalid .field-error { display: block; }
.form-note { font-size: 14px; line-height: 22px; color: var(--c-n500); margin-top: var(--sp-3); }

/* ---------- 卡片 §5.5 ---------- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--c-n200);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.card:hover { border-color: var(--c-n300); box-shadow: var(--shadow-card); transform: translateY(-2px); }

/* ---------- 空状态 §5.15 ---------- */
.empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--c-n200);
  border-radius: var(--r-md);
}
.empty-state .empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-full);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.empty-state p { font-size: 16px; line-height: 28px; color: var(--c-n500); margin-bottom: var(--sp-4); }

/* ---------- 富文本 §9.5 ---------- */
.rich-text { font-size: 16px; line-height: 28px; color: var(--c-n900); max-width: 760px; }
.rich-text p { margin-bottom: var(--sp-4); }
.rich-text h2, .rich-text h3 {
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--c-n900);
}
.rich-text img { border-radius: var(--r-md); margin: var(--sp-4) 0; }
.rich-text ul, .rich-text ol { padding-left: var(--sp-4); margin-bottom: var(--sp-4); }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-bottom: var(--sp-2); }
.rich-text blockquote {
  border-left: 4px solid var(--c-brand);
  background: var(--c-brand-wash);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  color: var(--c-n700);
}
.rich-text a { color: var(--c-brand-link); text-decoration: underline; text-underline-offset: 3px; }
.rich-text table { margin-bottom: var(--sp-4); }

/* ---------- 工具类 ---------- */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.text-center { text-align: center; }

/* ---------- 动效降级 §8-10 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}