/* ==========================================================================
   IP 高光资产系统 · 母版无关基础层（base）
   职责：盒模型、可访问性、以及一份中性兜底令牌。
   纪律：真正的版式骨架 / 字体 / 动效 / 组件样式属于「母版封装的要素」（4.4），
        一律放在 templates/<preset>/ 下，由 theme.preset 决定加载哪一套。
   ========================================================================== */

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

/* 中性兜底：母版 tokens.css 加载后会整体覆盖这些值 */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #F7F7F8;
  --color-highlight: #F1F2F4;
  --color-line: rgba(0, 0, 0, 0.12);
  --color-text: #17181C;
  --color-muted: #666B76;
  --color-heading: #0C0D10;
  --color-primary: #2B3A55;
  --color-accent: #7A6A4F;
  --color-on-primary: #FFFFFF;

  --font-heading: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-display: clamp(2.2rem, 5vw, 3.6rem);
  --fs-h1: clamp(1.6rem, 3vw, 2.2rem);
  --fs-h2: clamp(1.3rem, 2.2vw, 1.6rem);
  --fs-h3: 1.05rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-title: 1.2;
  --lh-body: 1.7;
  --ls-display: 0;
  --ls-title: 0;
  --ls-eyebrow: 0.14em;
  --fw-bold: 600;
  --fw-normal: 400;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: 5rem;
  --space-block: 1.75rem;

  --page-max: 78rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 40rem;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-pill: 999px;

  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shift-hover: translateY(-3px);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* 页头是吸顶的，锚点跳转后目标区块的标题会被页头盖住，
   故所有可作为跳转目标的顶部区块留出页头高度。 */
.hero, .section, .masthead { scroll-margin-top: 5rem; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  margin: 0;
}

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@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;
  }
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }
}