/* ============================================================
   JBoltAI 基础样式：reset / 元素默认 / 排版工具类
   依赖 tokens.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* 吸顶导航下的锚点偏移 */
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1, h2, h3 { letter-spacing: 0; }

p { overflow-wrap: break-word; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--primary-deep); }

ul, ol { padding: 0; list-style: none; }

strong, b { font-weight: var(--fw-semibold); }

::selection { background: var(--primary-container); color: var(--primary-deep); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* —— 跳转主内容（键盘可达性）—— */
.jb-skip {
  position: absolute; left: var(--sp-md); top: -48px; z-index: 200;
  background: var(--ink); color: var(--on-primary);
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-sm);
  font-size: var(--fs-sm); transition: top var(--dur) var(--ease);
}
.jb-skip:focus { top: var(--sp-sm); color: var(--on-primary); }

/* ============ 排版工具类（令牌镜像） ============ */
.jb-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.jb-h2      { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
.jb-h3      { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.jb-lede    { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--ink-2); }
.jb-sm      { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.jb-cap     { font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: var(--ls-cap); color: var(--ink-3); }
.jb-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.jb-t2      { color: var(--ink-2); }
.jb-t3      { color: var(--ink-3); }
.jb-on-dark { color: var(--on-dark); }
.jb-on-dark-2 { color: var(--on-dark-variant); }

/* 眉题：等宽大间距（DESIGN.md eyebrow） */
.jb-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
  font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; gap: var(--sp-sm);
}
.jb-eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.jb-eyebrow--bare::before { display: none; }
.jb-eyebrow--on-dark { color: var(--primary-bright); }

/* 统计数字：等宽、字面量写入 HTML（禁止 JS 计数动画） */
.jb-stat {
  font-family: var(--font-mono);
  font-size: var(--fs-stat); line-height: var(--lh-stat);
  letter-spacing: var(--ls-stat);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* 长文排版（topics 文章） */
.jb-prose { max-width: 44em; }
.jb-prose p { margin-block: var(--sp-md); color: var(--ink-2); }
.jb-prose h2 { font-size: var(--fs-h3); margin-block: var(--sp-xxl) var(--sp-md); color: var(--ink); }
.jb-prose h3 { font-size: var(--fs-body); font-weight: var(--fw-semibold); margin-block: var(--sp-xl) var(--sp-sm); color: var(--ink); }
.jb-prose ul, .jb-prose ol { margin-block: var(--sp-md); padding-left: 1.4em; }
.jb-prose ul { list-style: disc; }
.jb-prose ol { list-style: decimal; }
.jb-prose li { margin-block: var(--sp-xs); color: var(--ink-2); }
.jb-prose blockquote {
  border-left: 2px solid var(--primary);
  padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-lg);
  margin-block: var(--sp-lg);
  color: var(--ink-2);
}
.jb-prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--primary-container); color: var(--primary-deep);
  padding: 2px 6px; border-radius: var(--r-sm);
}
.jb-prose pre {
  background: var(--dark); color: var(--on-dark);
  padding: var(--sp-lg); border-radius: var(--r-md);
  overflow-x: auto; margin-block: var(--sp-lg);
  font-size: var(--fs-sm); line-height: 1.7;
}
.jb-prose pre code { background: none; color: inherit; padding: 0; }
.jb-prose strong { color: var(--ink); }
.jb-prose table { width: 100%; border-collapse: collapse; margin-block: var(--sp-lg); font-size: var(--fs-sm); }
.jb-prose th, .jb-prose td { border: 1px solid var(--line); padding: var(--sp-sm) var(--sp-md); text-align: left; }
.jb-prose th { background: var(--surface); font-weight: var(--fw-semibold); }

/* ============ 滚动显现动效（四类动效之一） ============ */
.jb-reveal { opacity: 0; transform: translateY(12px); }
.jb-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .jb-reveal { opacity: 1; transform: none; }
}

/* ============ ≤640px 移动精修（全局字号降档） ============ */
@media (max-width: 640px) {
  body { font-size: var(--fs-sm); line-height: var(--lh-sm); }
  .jb-display { font-size: 32px; line-height: 42px; }
  .jb-h2 { font-size: 24px; line-height: 34px; }
  .jb-h3 { font-size: 18px; line-height: 28px; }
  .jb-lede { font-size: var(--fs-body); line-height: 26px; }
  .jb-stat { font-size: 28px; line-height: 34px; }
}