/* ==========================================================================
 * base.css — 全局重置、文档基调、通用容器与工具类
 * 依赖：tokens.css
 * ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--bg-alabaster);
  color: var(--ink-main);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* iOS 横屏会自动放大正文字号，关掉以保持排版可控 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection {
  background: var(--forest-deep);
  color: var(--surface-card);
}

body {
  overflow-x: hidden;
  position: relative;
  /* 移动端点按默认会闪一层高亮方块，与纸本质感冲突 */
  -webkit-tap-highlight-color: transparent;
}

/* 去掉移动端 300ms 点击延迟：保留平移与双指缩放，仅禁用双击缩放 */
a,
button,
input,
select,
textarea {
  touch-action: manipulation;
}

/* 内容容器：所有 section 的横向留白基准 */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4.5vw, 4rem);
  /* 刘海屏 / 灵动岛横屏时把内容推离圆角，非刘海设备 env() 为 0，等价于上面那行 */
  padding-left: max(clamp(1.25rem, 4.5vw, 4rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 4.5vw, 4rem), env(safe-area-inset-right));
  position: relative;
  z-index: 2;
}

/* 滚动速度物理形变容器（Velocity Skew）的变换目标 */
.velocity-skew-target {
  will-change: transform;
  transition: transform 0.15s linear;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
  .container {
    padding-left: max(1.15rem, env(safe-area-inset-left));
    padding-right: max(1.15rem, env(safe-area-inset-right));
  }
}

@media (max-width: 420px) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}