/*
 * Canonical front-end typography roles.
 *
 * Sizes and line-height are shared by component role. Font family, weight,
 * heading tracking, and feature settings continue to come from the selected
 * font preset so each preset keeps its intended character.
 */

/*
 * front-gradient-system.css は 2026-08-10（Issue #839）に @import から
 * 通常の enqueue へ移した（functions.php の 'tiptop-front-gradient-system'）。
 * @import のURLにはバージョンクエリが付かず編集がキャッシュで反映されない／
 * enqueue にも link にも出ないので所有ファイル探しが空振りする、の2点が理由。
 * ロード順は依存関係で従来と同じ「component-unification → gradient-system →
 * このファイル」を維持している。ここに @import を戻さないこと。
 */

:root {
	--tt-text-subhead: var(--tt-text-lg);
	--tt-text-lead: var(--tt-text-md);
	--tt-text-body: var(--tt-text-md);
	--tt-text-meta: var(--tt-text-xs);
	--tt-line-eyebrow: 1.35;
	--tt-line-hero-title: 1.15;
	--tt-line-section-title: 1.35;
	--tt-line-card-title: 1.6;
	--tt-tracking-eyebrow: 0.14em;
	--tt-tracking-heading: 0.1em;
	--tt-tracking-label: 0.04em;
	--tt-weight-regular: 400;
	--tt-weight-medium: 500;
	--tt-weight-bold: 700;
	--tt-weight-heavy: 800;
}

.hero__eyebrow,
.archive-hero__eyebrow,
.section__eyebrow,
.tiptop-blog-hero__eyebrow,
.tiptop-service-eyebrow,
.tiptop-works-page .archive-hero__eyebrow,
.tiptop-work-detail__eyebrow,
.tiptop-news-page .archive-hero__eyebrow,
.tiptop-news-detail__eyebrow,
[class*="__eyebrow"] {
	font-family: var(--tiptop-font-label);
	font-size: var(--tt-text-label);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: calc(var(--tt-tracking-eyebrow) + var(--tt-letter-add));
	line-height: calc(var(--tt-line-eyebrow) * var(--tt-leading-scale));
	text-transform: none;
}

.tiptop-service-block__num {
	font-family: var(--tiptop-font-label);
	font-size: var(--tt-text-numeral);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: calc(var(--tt-tracking-eyebrow) + var(--tt-letter-add));
	line-height: calc(var(--tt-line-eyebrow) * var(--tt-leading-scale));
	text-transform: none;
}

.hero__title,
.archive-hero__title,
.tiptop-blog-hero__title,
.tiptop-service-hero h1,
.tiptop-works-page .archive-hero__title,
.tiptop-news-page .archive-hero__title,
.contact-page-intro h1 {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-size: var(--tt-text-hero);
	/* ページ見出しは display の太さ（standard=400／他プリセットは heading と同値）。
	 * 分離の理由は front-font-presets.css の冒頭を参照。 */
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	line-height: calc(var(--tt-line-hero-title) * var(--tt-leading-scale));
	text-transform: none;
}

.tiptop-work-detail__title,
.tiptop-news-detail__title {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-size: var(--tt-text-title);
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	line-height: calc(var(--tt-line-hero-title) * var(--tt-leading-scale));
	text-transform: none;
}

.section__title,
.section h2,
.section-heading-row h2,
.tiptop-service-block__head h2 {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-size: var(--tt-text-section);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	line-height: calc(var(--tt-line-section-title) * var(--tt-leading-scale));
}

.entry__content h2 {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-size: var(--tt-text-heading);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	line-height: calc(var(--tt-line-section-title) * var(--tt-leading-scale));
}

/* 節見出しだけ display の太さにする。`.entry__content h2` は上に残す——
 * あれは記事本文の見出しで、モックでは 18.56px の太字（節見出しではない）。
 * 今回、節見出しのグループから分けて heading 段へ寄せた。 */
.section__title,
.section h2,
.section-heading-row h2,
.tiptop-service-block__head h2 {
	font-weight: var(--tiptop-font-weight-display);
}

/* Issue #912：標準トップの節見出しはモックと同じ欧文ロールへ。
 * Services の中間ラッパーや News のDOM構造に依存せず、既存の標準トップ節見出し
 * （クラスなしh2）と同じ実要素を狙う。書体名は固定せずプリセットへ追従させる。
 * 2026-08-13：About/Services/Blog/Newsの4見出しに役割クラスを付けたため
 * :not([class]) だけでは掴めなくなった。4クラスを明示的に追加して同じ対象を維持する
 * （website_title/material_title は今もクラス無しのままなので :not([class]) 側で継続して掴む）。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content h2:not([class]),
body.tiptop-standard-system .site-main--front .tiptop-front-content .tiptop-about-summary__title,
body.tiptop-standard-system .site-main--front .tiptop-front-content .tiptop-services-aside__title,
body.tiptop-standard-system .site-main--front .tiptop-front-content .front-blog-heading__title,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news__title {
	font-family: var(--tiptop-font-latin);
}

.post-card__title,
.card h3,
.tiptop-blog-page .post-card__title,
.category .post-card__title,
.tag .post-card__title,
.date .post-card__title,
.tiptop-works-page .post-card__title,
.tiptop-news-item__title,
.front-blog-card .post-card__title {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-size: var(--tt-text-card);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	line-height: calc(var(--tt-line-card-title) * var(--tt-leading-scale));
}

/* Issue #912：引用そのものの muted 指定は正しい。main.css の広域段落ルールが
 * 子の p で var(--tiptop-text) を再解決して黒へ戻すため、引用の内側だけ同トークンを
 * muted へ束縛する。広域段落セレクタやカード／抜粋の色契約は変更しない。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content blockquote,
body.tiptop-standard-system .tiptop-post-detail__body blockquote,
body.tiptop-standard-system .tiptop-news-detail__body blockquote,
body.tiptop-standard-system .tiptop-work-detail__body blockquote {
	--tiptop-text: var(--tiptop-muted);
}