/**
 * 流体字号体系 — 随视口宽度平滑缩放
 * 用法：在元素上添加 .fl-* 类，或依赖 html 根字号 rem 缩放
 */
:root {
  /* 根字号：14px @320px → 16px @1920px */
  font-size: clamp(14px, 0.52vw + 12.3px, 16px);

  /* 语义化令牌（供 style.css 引用） */
  --fl-body: clamp(0.875rem, 0.35vw + 0.8rem, 1rem);
  --fl-sm: clamp(0.75rem, 0.25vw + 0.68rem, 0.875rem);
  --fl-xs: clamp(0.6875rem, 0.2vw + 0.62rem, 0.8125rem);
  --fl-lg: clamp(1rem, 0.45vw + 0.88rem, 1.125rem);
  --fl-h1: clamp(1.75rem, 2.8vw + 1rem, 3rem);
  --fl-h2: clamp(1.5rem, 2vw + 0.85rem, 2.25rem);
  --fl-section-title: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem);
  --fl-h3: clamp(1.2rem, 1.2vw + 0.9rem, 1.5rem);
  --fl-h4: clamp(1.05rem, 0.8vw + 0.85rem, 1.25rem);
  --fl-display: clamp(2rem, 4.5vw + 0.5rem, 3.75rem);
  --fl-hero: clamp(2.75rem, 6.8vw, 4.5rem);
  --fl-stat: clamp(1.75rem, 3vw, 2.5rem);
  --fl-label: clamp(0.8rem, 0.3vw + 0.72rem, 0.95rem);

  /* 区块垂直间距 / 高度 — 随视口宽高适配（首页等） */
  --section-py: clamp(5.5rem, 7vh + 2.5rem, 8.75rem);
  --section-py-products: clamp(6.5rem, 9vh + 3rem, 10.5rem);
  --fl-products-title: var(--fl-section-title);
  --section-py-sm: clamp(4.5rem, 5.5vh + 2rem, 7rem);
  --section-gap: clamp(3rem, 5vh + 1.25rem, 5.5rem);
  --block-min-h: clamp(32rem, 52vh, 45rem);
  --block-min-h-md: clamp(26rem, 42vh, 35rem);
  --block-min-h-sm: clamp(22rem, 36vh, 30rem);
}

/* 工具类 */
.fl-body { font-size: var(--fl-body); line-height: 1.65; }
.fl-sm { font-size: var(--fl-sm); line-height: 1.6; }
.fl-xs { font-size: var(--fl-xs); line-height: 1.5; }
.fl-lg { font-size: var(--fl-lg); line-height: 1.6; }
.fl-h1 { font-size: var(--fl-h1); line-height: 1.25; font-weight: 700; }
.fl-h2 { font-size: var(--fl-h2); line-height: 1.3; font-weight: 700; }
.fl-section-title { font-size: var(--fl-section-title); line-height: 1.35; font-weight: 700; }
.fl-h3 { font-size: var(--fl-h3); line-height: 1.35; font-weight: 700; }
.fl-h4 { font-size: var(--fl-h4); line-height: 1.4; font-weight: 600; }
.fl-display { font-size: var(--fl-display); line-height: 1.15; font-weight: 700; }
.fl-hero { font-size: var(--fl-hero); line-height: 1.2; font-weight: 700; }
.fl-stat { font-size: var(--fl-stat); line-height: 1.2; font-weight: 700; }
.fl-label { font-size: var(--fl-label); line-height: 1.5; }
.fl-muted { color: var(--text-muted); }