/* ===========================================================================
   Typography Tokens — 日文站排版字号体系
   ---------------------------------------------------------------------------
   分级：
     Banner 主标题  42–48px
     一级标题 (H1)  36px
     二级标题 (H2)  28–32px
     正文           16px
     辅助说明       14px

   响应式三档（mobile-first 按可读性平滑收口）：
     PC      ≥1024px      Banner 48 / H1 36 / H2 32 / Body 16 / Caption 14
     平板    768–1023px   Banner 36 / H1 30 / H2 26 / Body 16 / Caption 14
     手机    ≤767px       Banner 28 / H1 22 / H2 20 / Body 15 / Caption 12

   策略：
     - body 保留 14px 兜底（避免影响既有密度），新页面/区块通过 .t-body 显式声明
     - 手机端正文降到 15px、Caption 降到 12px；同时收紧 line-height 与 letter-spacing
   =========================================================================== */

:root {
	--fs-banner: 48px;
	--fs-h1: 36px;
	--fs-h2: 32px;
	--fs-body: 16px;
	--fs-caption: 14px;

	--lh-display: 1.25;
	--lh-heading: 1.35;
	--lh-body: 1.75;

	--ls-display: .02em;
	--ls-body: .04em;

	--color-caption: #8a8a8a;
}

/* 平板（768–1023px）：标题收口一档，正文不变 */
@media screen and (max-width: 1023px) {
	:root {
		--fs-banner: 36px;
		--fs-h1: 30px;
		--fs-h2: 26px;
	}
}

/* 手机（≤767px）：所有层级再收口，行距和字距同步收紧 */
@media screen and (max-width: 767px) {
	:root {
		--fs-banner: 28px;
		--fs-h1: 22px;
		--fs-h2: 20px;
		--fs-body: 15px;
		--fs-caption: 12px;

		--lh-display: 1.3;
		--lh-heading: 1.4;
		--lh-body: 1.7;

		--ls-display: .01em;
		--ls-body: .02em;
	}
}

/* ---------- 语义化排版类（推荐写新页面 / 新区块时使用） ---------- */

.t-banner {
	font-size: var(--fs-banner);
	line-height: var(--lh-display);
	font-weight: 700;
	letter-spacing: var(--ls-display);
}

.t-h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	font-weight: 600;
	letter-spacing: var(--ls-display);
}

.t-h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	font-weight: 600;
	letter-spacing: var(--ls-display);
}

.t-body {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

.t-caption {
	font-size: var(--fs-caption);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	color: var(--color-caption);
}

/* ---------- 工具类：补齐项目现有 .u-fzNN 系列（已有 10–30，这里补 32/36/42/48） ----------
   - PC 用 px + rem 双声明，沿用项目惯例（html: 62.5% => 1rem = 10px）
   - 移动端按 token 阶梯同步收口
*/

.u-fz32 { font-size: 32px; font-size: 3.2rem; }
.u-fz36 { font-size: 36px; font-size: 3.6rem; }
.u-fz42 { font-size: 42px; font-size: 4.2rem; }
.u-fz48 { font-size: 48px; font-size: 4.8rem; }

/* 平板（768–1023px） */
@media screen and (max-width: 1023px) {
	.u-fz32 { font-size: 26px; font-size: 2.6rem; }
	.u-fz36 { font-size: 30px; font-size: 3.0rem; }
	.u-fz42 { font-size: 32px; font-size: 3.2rem; }
	.u-fz48 { font-size: 36px; font-size: 3.6rem; }
}

/* 手机（≤767px） */
@media screen and (max-width: 767px) {
	.u-fz32 { font-size: 20px; font-size: 2.0rem; }
	.u-fz36 { font-size: 22px; font-size: 2.2rem; }
	.u-fz42 { font-size: 24px; font-size: 2.4rem; }
	.u-fz48 { font-size: 28px; font-size: 2.8rem; }
}