/**
 * AOSE WordPress
 * aose-typography.css
 *
 * AOSE 共通文字組み
 * 対象：aose.jp / SWELL CHILD
 *
 * 役割：
 * - 基本文字
 * - H1 / H2 / H3
 * - 本文
 * - リード文
 * - 日付
 * - タグ
 * - 補足情報
 * - UI文字
 *
 * 注意：
 * - フォントファイル自体の読み込みはここでは行わない
 * - HERO固有配置は components / page type CSS
 * - ボタン形状は components.css
 * - SWELLタイトルとの干渉は aose-swell.css
 *
 * Based on:
 * 青清 AOSE WordPress再構築 全体設計仕様書 v1.0
 */


/* =========================================================
   1. ROOT TYPOGRAPHY
   ========================================================= */

/*
 * AOSE本文の標準文字。
 *
 * 本文：
 * 16px
 * line-height 1.75〜1.80
 * weight 400
 */
.aose-page {
	font-family: var(--aose-font-body);
	font-size: 16px;
	font-weight: var(--aose-font-weight-regular);
	line-height: 1.8;
	color: var(--aose-color-text);
}


/* =========================================================
   2. HEADINGS COMMON
   ========================================================= */

/*
 * AOSE見出しは Noto Serif JP を基本とする。
 */
.aose-page :where(
	h1,
	h2,
	h3,
	.aose-heading-1,
	.aose-heading-2,
	.aose-heading-3
) {
	font-family: var(--aose-font-heading);
	font-weight: var(--aose-font-weight-medium);
	color: var(--aose-color-ink);
}


/*
 * 見出し内の強調要素で
 * 不意にウェイトが大きく変わるのを防ぐ。
 */
.aose-page :where(
	h1,
	h2,
	h3,
	.aose-heading-1,
	.aose-heading-2,
	.aose-heading-3
) strong {
	font-weight: inherit;
}


/* =========================================================
   3. H1 / HERO TITLE
   ========================================================= */

/*
 * SP基準：
 * 36〜42px
 *
 * PCでは48〜64pxへ切り替える。
 *
 * 長いタイトルを固定高に押し込まず、
 * 行数に応じて自然に高さを取る。
 */
.aose-page :where(
	h1,
	.aose-heading-1
) {
	font-size: clamp(2.25rem, 2rem + 1.25vw, 2.625rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.3;
	letter-spacing: 0.02em;
}


/*
 * HERO内タイトル用。
 *
 * 通常H1と同じ文字体系を利用するが、
 * Component側から明示的に指定できるようにする。
 */
.aose-hero-title {
	font-family: var(--aose-font-heading);
	font-size: clamp(2.25rem, 2rem + 1.25vw, 2.625rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.3;
	letter-spacing: 0.02em;
}


/* =========================================================
   4. H2
   ========================================================= */

/*
 * SP：
 * 28〜32px
 *
 * PC：
 * 32〜40px
 */
.aose-page :where(
	h2,
	.aose-heading-2
) {
	font-size: clamp(1.75rem, 1.6rem + 0.75vw, 2rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.42;
	letter-spacing: 0.025em;
}


/* =========================================================
   5. H3
   ========================================================= */

/*
 * 22〜28px
 */
.aose-page :where(
	h3,
	.aose-heading-3
) {
	font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.52;
}


/* =========================================================
   6. BODY TEXT
   ========================================================= */

/*
 * 通常本文。
 *
 * .aose-page自体に基本設定があるため、
 * 必要な場所へ明示的に使用するためのUtility。
 */
.aose-text {
	font-family: var(--aose-font-body);
	font-size: 16px;
	font-weight: var(--aose-font-weight-regular);
	line-height: 1.8;
	color: var(--aose-color-text);
}


/*
 * 読みもの・Story等で、
 * 少し大きく読ませたい文章。
 *
 * 仕様書で許容されている17px。
 */
.aose-text--large {
	font-size: 17px;
	line-height: 1.8;
}


/* =========================================================
   7. LEAD TEXT
   ========================================================= */

/*
 * HERO直下・ページ導入等のリード文。
 *
 * 本文より一段大きくするが、
 * 見出しにはしない。
 */
.aose-lead {
	font-family: var(--aose-font-body);
	font-size: 17px;
	font-weight: var(--aose-font-weight-regular);
	line-height: 1.8;
	color: var(--aose-color-text);
}


/* =========================================================
   8. SMALL / SUPPORT TEXT
   ========================================================= */

/*
 * 日付・タグ・補足：
 * 12〜14px
 * line-height 1.45
 *
 * 重要情報をこのサイズへ逃がさない。
 */
.aose-meta,
.aose-date,
.aose-tag,
.aose-caption,
.aose-note-text {
	font-family: var(--aose-font-ui);
	font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
	font-weight: var(--aose-font-weight-regular);
	line-height: 1.45;
}


/*
 * 補助情報。
 *
 * 色はmutedを使うが、
 * 本文や重要情報には使用しない。
 */
.aose-meta,
.aose-date,
.aose-caption {
	color: var(--aose-color-text-muted);
}


/*
 * タグは文字組みだけここで定義。
 *
 * 背景・枠・角丸・padding等は
 * components.cssで定義する。
 */
.aose-tag {
	color: var(--aose-color-text);
}


/* =========================================================
   9. CARD TYPOGRAPHY
   ========================================================= */

/*
 * Card説明文：
 * 14〜15px
 * line-height 1.60
 *
 * Card本体の形状・2行制限等は
 * components.cssで管理する。
 */
.aose-card-text {
	font-family: var(--aose-font-body);
	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	font-weight: var(--aose-font-weight-regular);
	line-height: 1.6;
	color: var(--aose-color-text);
}


/*
 * Card title。
 *
 * サイズそのものはカード用途に合わせて
 * Components側から必要時調整可能。
 *
 * ブランド見出しと同じSerifを基本とする。
 */
.aose-card-title {
	font-family: var(--aose-font-heading);
	font-size: 1.125rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
	color: var(--aose-color-ink);
}


/* =========================================================
   10. UI TYPOGRAPHY
   ========================================================= */

/*
 * Button / Navigation：
 * 14〜15px
 * line-height 1.40
 *
 * ボタンの高さ・padding・色は
 * components.cssで管理する。
 */
.aose-ui-text,
.aose-nav-text,
.aose-button-text {
	font-family: var(--aose-font-ui);
	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.4;
}


/* =========================================================
   11. EYEBROW / SECTION LABEL
   ========================================================= */

/*
 * セクション上部の小さな分類表示等に使う。
 *
 * タイトルの代わりには使用しない。
 */
.aose-eyebrow {
	font-family: var(--aose-font-ui);
	font-size: 0.8125rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.45;
	color: var(--aose-color-text-muted);
}


/* =========================================================
   12. TEXT ALIGNMENT UTILITIES
   ========================================================= */

.aose-text-left {
	text-align: left;
}

.aose-text-center {
	text-align: center;
}

.aose-text-right {
	text-align: right;
}


/* =========================================================
   13. TEXT COLOR UTILITIES
   ========================================================= */

/*
 * 承認済みAOSEカラーだけを使用する。
 */
.aose-text-ink {
	color: var(--aose-color-ink);
}

.aose-text-brown {
	color: var(--aose-color-brown);
}

.aose-text-miso {
	color: var(--aose-color-miso);
}

.aose-text-muted {
	color: var(--aose-color-text-muted);
}


/* =========================================================
   14. TEXT ON DARK / PHOTO
   ========================================================= */

/*
 * HERO等、暗い背景・写真上の白文字用。
 *
 * 実際の写真コントラストは
 * components / page CSS側で確認する。
 */
.aose-text-light {
	color: var(--aose-color-white);
}


/*
 * 写真上のタイトル用。
 *
 * 影だけを「読める根拠」にはしない。
 * 背景グラデーション等はComponent側で扱う。
 */
.aose-text-on-image {
	color: var(--aose-color-white);
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   15. PC
   1024px -
   ========================================================= */

@media (min-width: 1024px) {

	/*
	 * H1 / HERO
	 * PC 48〜64px
	 */
	.aose-page :where(
		h1,
		.aose-heading-1
	),
	.aose-hero-title {
		font-size: clamp(3rem, 2.2rem + 1.25vw, 4rem);
	}


	/*
	 * H2
	 * PC 32〜40px
	 */
	.aose-page :where(
		h2,
		.aose-heading-2
	) {
		font-size: clamp(2rem, 1.6rem + 0.625vw, 2.5rem);
	}

}


/* =========================================================
   16. LONG TITLE SAFETY
   ========================================================= */

/*
 * 投稿や情報ページの長いタイトルでは、
 * ブランドHERO用の最大サイズを
 * 強制しないためのModifier。
 *
 * 使用判断は投稿・子ページ設計側で行う。
 */
.aose-title--compact {
	font-size: clamp(2rem, 1.8rem + 1vw, 2.625rem);
	line-height: 1.35;
}


@media (min-width: 1024px) {

	.aose-title--compact {
		font-size: clamp(2.5rem, 2rem + 0.8vw, 3rem);
	}

}


/* =========================================================
   17. IMPLEMENTATION RULES
   ========================================================= */

/*
 * AOSE文字組みでは以下を原則とする。
 *
 * 1.
 * H1 / H2 / H3は意味上の階層で選ぶ。
 * 見た目を大きくするために
 * heading levelを変更しない。
 *
 * 2.
 * 独自HEROを使う固定ページでは
 * HERO内のタイトルを正式H1とする。
 *
 * 3.
 * 通常投稿のタイトルは
 * WordPress投稿タイトルを正本とする。
 *
 * 4.
 * HEROタイトルを本文に再入力しない。
 *
 * 5.
 * 重要情報を12〜14pxの
 * meta / captionへ逃がさない。
 *
 * 6.
 * 写真上の白文字は、
 * text-shadowだけで可読性OKと判断しない。
 *
 * 7.
 * ページ固有のfont-sizeを
 * 個別CSSで乱造しない。
 */