/* ============================================================
 * Root & Form — base.css
 * 设计令牌、重置、排版与基础元素
 *
 * 设计规范（北欧极简）：
 *  - 背景暖白 #FAFAF7，不用纯白/冷白
 *  - 主文本柔和炭灰，不用纯黑
 *  - 强调色点缀占比 < 5%：浅原木 / 低饱和陶土棕 / 鼠尾草绿
 *  - 无衬线字体（Inter），字重偏轻，行高 1.7
 *  - 动效 0.2–0.3s，无弹跳/旋转/炫光
 * ============================================================ */

:root {
  /* ---- 配色 ---- */
  --color-bg:        #FAFAF7;   /* 暖白背景 */
  --color-bg-alt:    #F2EFE6;   /* 浅米灰辅助背景 */
  --color-surface:   #FCFBF7;   /* 卡片表面 */
  --color-text:      #3B3A35;   /* 柔和炭灰主文本 */
  --color-text-soft: #6F6D63;   /* 次级文本 */
  --color-muted:     #9C998D;   /* 弱化文本 / 占位 */
  --color-line:      #E6E3D9;   /* 1px 极细浅灰分隔线 */
  --color-wood:      #C9B193;   /* 浅原木强调色 */
  --color-terra:     #A9855F;   /* 低饱和陶土棕 */
  --color-sage:      #9CA58B;   /* 鼠尾草绿 */
  --color-btn:       #3B3A35;   /* 低饱和深灰按钮（支付按钮同色） */
  --color-btn-hover: #2E2D28;
  --color-on-btn:    #F7F5EE;
  --color-danger:    #9C5B4B;   /* 低饱和错误提示 */

  /* ---- 圆角 / 阴影（极淡近乎无） ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(59, 58, 53, 0.03), 0 6px 20px rgba(59, 58, 53, 0.05);
  --shadow-float: 0 4px 12px rgba(59, 58, 53, 0.06), 0 16px 40px rgba(59, 58, 53, 0.08);

  /* ---- 排版 ---- */
  --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  clamp(2rem, 5vw, 3.25rem);
  --leading: 1.7;              /* 行高 1.7 */
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;    /* 标题字距适度放宽 */

  /* ---- 布局 ---- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(4rem, 9vw, 7.5rem);
  --header-h: 68px;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --dur: 0.25s;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;               /* 平滑滚动 */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.3; letter-spacing: var(--tracking-wide); }
h1 { font-weight: 300; }
h2 { font-weight: 300; }
strong { font-weight: 500; }

/* ---------- 可访问性 ---------- */
:focus-visible { outline: 2px solid var(--color-wood-deep, var(--color-terra)); outline-offset: 3px; border-radius: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---------- 布局原语 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-space); }
.section--alt { background: var(--color-bg-alt); }

/* 通用文字区：限制行宽，避免文本过长影响阅读 */
.prose { max-width: 58ch; }
.prose p + p { margin-top: 1.1em; }

/* 版面标题 */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}
.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head__title { font-size: var(--fs-3xl); margin-bottom: 0.9rem; }
.section-head__text { color: var(--color-text-soft); max-width: 46ch; }

/* ---------- 按钮（极简：纯色填充，无多余 logo） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.8rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  border-radius: 999px;                 /* 克制的胶囊形 */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-btn);
  color: var(--color-on-btn);
}
.btn--primary:hover { background: var(--color-btn-hover); }

.btn--outline {
  border: 1px solid var(--color-line);
  color: var(--color-text);
}
.btn--outline:hover { border-color: var(--color-muted); background: rgba(59,58,53,0.03); }

.btn--light {
  background: rgba(247, 245, 238, 0.92);
  color: var(--color-text);
}
.btn--light:hover { background: #FBFAF4; }

.btn--sm { padding: 0.6rem 1.25rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* 次级文字链接（下划线仅 hover 时出现） */
.link {
  position: relative;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-soft);
}
.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.link:hover { color: var(--color-text); }
.link:hover::after { transform: scaleX(1); }

/* ---------- 表单（极简） ---------- */
.field { margin-bottom: 1.35rem; }
.field__label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-soft);
  margin-bottom: 0.5rem;
}
.field__input, .field__select, .field__textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: var(--fs-base);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--color-muted); }
.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: none;
  border-color: var(--color-wood-deep, var(--color-terra));
  box-shadow: 0 0 0 3px rgba(169, 133, 95, 0.12);
}
.field__textarea { min-height: 130px; resize: vertical; }
.field__error { display: none; font-size: var(--fs-xs); color: var(--color-danger); margin-top: 0.4rem; }
.field--invalid .field__error { display: block; }
.field--invalid .field__input, .field--invalid .field__select { border-color: var(--color-danger); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form-grid .field--full { grid-column: 1 / -1; }

/* ---------- 图片懒加载淡入 ---------- */
img.lazy {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img.lazy.loaded { opacity: 1; }

/* ---------- 滚动淡入动画（克制） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }

/* 悬停微反馈 */
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 0.4s var(--ease); }
.hover-zoom:hover img { transform: scale(1.03); }

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  img.lazy { opacity: 1; }
}