/* ============================================================
   宗信 · 设计令牌 (tokens.css)
   ------------------------------------------------------------
   本文件只放「与主题无关」的令牌：字体、字号、行高、间距、
   圆角、阴影、动效、栅格、层级。
   切换主题时这些值【不应】改变 —— 圆角是骨骼，不是皮肤。

   加载顺序：必须在页面内联 <style> 之后引入，才能成为权威值。
   ============================================================ */

:root {
  /* ── 字体 ────────────────────────────────────────────── */
  /* Inter 无中文字形，中文紧随其后由系统字体接管，
     避免中英混排时基线/字重割裂 */
  --ff-title: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --ff-body:  -apple-system, "PingFang SC", "HarmonyOS Sans SC",
              "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --ff-mono:  ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ── 字号阶梯 ────────────────────────────────────────── */
  /* 中文方块字笔画密度高，同字号视觉偏小，正文基准取 16px */
  --fs-xs:     12px;  /* 下限。标签 / 图例 / 角标，不再更小 */
  --fs-sm:     13px;  /* 卡片辅助文字 */
  --fs-base:   16px;  /* 正文 */
  --fs-md:     17px;  /* 长文正文 */
  --fs-lg:     20px;  /* 小标题 */
  --fs-xl:     24px;  /* 区块标题 */
  --fs-2xl:    32px;  /* 文章主标题 */
  --fs-3xl:    clamp(30px, 4.2vw, 46px);   /* 章节大标题 */
  --fs-display: clamp(36px, 7.5vw, 92px);  /* 首屏主标题 */

  /* ── 行高 ────────────────────────────────────────────── */
  --lh-tight: 1.25;  /* 大标题 */
  --lh-snug:  1.5;   /* 小标题 */
  --lh-base:  1.75;  /* 通用 UI */
  --lh-read:  1.9;   /* 长文阅读 */

  /* ── 间距刻度（4pt grid）─────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── 圆角（全站恒定，禁止随主题变化）───────────────── */
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-full:  999px;

  /* ── 阴影 ────────────────────────────────────────────── */
  --sh-1: 0 2px 10px rgba(0, 0, 0, .18);
  --sh-2: 0 22px 50px rgba(0, 0, 0, .30);
  --sh-3: 0 26px 60px rgba(0, 0, 0, .38);

  /* ── 动效 ────────────────────────────────────────────── */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .2s;
  --dur-base:  .3s;
  --dur-slow:  .5s;
  --dur-theme: 1.2s;   /* 主题切换过渡 */

  /* ── 栅格 ────────────────────────────────────────────── */
  --grid-1: 1fr;
  --grid-2: repeat(2, 1fr);
  --grid-3: repeat(3, 1fr);
  --grid-4: repeat(4, 1fr);
  --grid-gap: 22px;

  /* ── 触控目标下限（WCAG 2.1 AA 2.5.5）───────────────── */
  --tap: 44px;

  /* ── 层级 ────────────────────────────────────────────── */
  --z-base:  1;
  --z-head:  60;
  --z-panel: 80;
  --z-toast: 90;
  --z-modal: 100;
  --z-top:   110;
}

/* ===== 触控与可访问性规范（2026-08-31 审计修复） =====
   --radius-* 为全站圆角 scale，新组件一律使用；
   --hit-min 为最小触控目标（WCAG 2.5.5，桌面可放宽到 36px）。 */
:root{
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --hit-min: 44px;
}
@media (pointer: coarse){
  a, button, [role=button], select, .btn, .btn-sm, .btn-primary{
    min-height: var(--hit-min);
  }
  a.btn, a[class*="btn"], .nav-r a, .nav-l{
    display: inline-flex; align-items: center; justify-content: center;
  }
}


/* ===== UX Enhancement ===== */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Focus indicators for accessibility */
:focus-visible {
  outline: 2px solid var(--accent, #6c5ce7);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip to content - visible on focus */
.skip-to-content:focus {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  z-index: 9999 !important;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text2, #9aa0b0);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--accent, #6c5ce7);
  text-decoration: none;
  transition: opacity 0.2s;
}
.breadcrumb a:hover { opacity: 0.8; text-decoration: underline; }
.breadcrumb .sep { color: var(--text2, #555); user-select: none; }
.breadcrumb .current { color: var(--text, #e8eaed); font-weight: 500; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--card,#1a1a2e) 25%, var(--border,#2a2a4e) 50%, var(--card,#1a1a2e) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Card hover enhancement */
.card, .family-card, .article, [class*="card"] {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover, .family-card:hover, .article:hover, [class*="card"]:hover {
  /* 09-08 站主令：去悬停位移（GPU残影），反馈由描边+光晕承担 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border-color: var(--accent, #6c5ce7);
}

/* Button hover enhancement */
button, .btn, [class*="btn"], a.button, [role="button"] {
  transition: all 0.2s ease !important;
  cursor: pointer;
}
button:hover, .btn:hover, [class*="btn"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}
button:active, .btn:active, [class*="btn"]:active {
  transform: translateY(0);
  filter: brightness(0.9);
}

/* Link hover enhancement */
a:not(.btn):not([class*="button"]):not(nav a) {
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:not(.btn):not([class*="button"]):hover {
  opacity: 0.85;
}

/* Tooltip base */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--text, #333);
  color: var(--bg, #f5f5f5);
  font-size: 0.8rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Page transition */
.page-enter {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Empty state enhancement */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text2, #9aa0b0);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-state .title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.empty-state .desc { font-size: 0.9rem; max-width: 400px; margin: 0 auto; }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 7px;
  background: var(--card, #1a1a2e);
  border: 1px solid var(--border, #2a2a4e);
  color: var(--text, #e8eaed);
  font-size: 0.9rem;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
}
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* Responsive mobile menu improvements */
@media (max-width: 768px) {
  .breadcrumb { font-size: 0.8rem; padding: 0.5rem 0; }
  .page-enter { animation-duration: 0.2s; }
}