/* ============================================================
 * tokens.css — theme.json だけでは書けない「規則」の部分
 *
 * 1. 廃止予定 slug の受け皿（既存ページが参照している間だけ残す）
 * 2. 文字組み（見出しの上下余白、和文の約物、EN の行間）
 * 3. 文頭の左端を 1 本の線に揃える
 * 4. 段落のブロックスタイル（Lead / Label）
 *
 * 値は theme.json のプリセットだけを参照する。ここに新しい px 値を足さない。
 * ============================================================ */

/* ---- 1. 廃止予定 slug --------------------------------------
 * エディターの選択肢からは外したが、既存の本文が
 * has-ink-800-color などのクラスや var(--wp--preset--color--ink-800)
 * を参照している。置き換えが終わったらこの節ごと削除する。
 * ------------------------------------------------------------ */
:root {
	--wp--preset--color--ink-50: #F2F0EB;
	--wp--preset--color--ink-100: #F2F2F2;
	--wp--preset--color--ink-400: #A3A3A3;
	--wp--preset--color--ink-800: #1F1F1F;
	--wp--preset--color--brand-accent-soft: #F5E4DC;
	--wp--preset--font-family--serif: var(--wp--preset--font-family--sans);
}

.has-ink-50-color { color: var(--wp--preset--color--ink-50) !important; }
.has-ink-100-color { color: var(--wp--preset--color--ink-100) !important; }
.has-ink-400-color { color: var(--wp--preset--color--ink-400) !important; }
.has-ink-800-color { color: var(--wp--preset--color--ink-800) !important; }
.has-brand-accent-soft-color { color: var(--wp--preset--color--brand-accent-soft) !important; }

.has-ink-50-background-color { background-color: var(--wp--preset--color--ink-50) !important; }
.has-ink-100-background-color { background-color: var(--wp--preset--color--ink-100) !important; }
.has-ink-400-background-color { background-color: var(--wp--preset--color--ink-400) !important; }
.has-ink-800-background-color { background-color: var(--wp--preset--color--ink-800) !important; }
.has-brand-accent-soft-background-color { background-color: var(--wp--preset--color--brand-accent-soft) !important; }

.has-ink-50-border-color { border-color: var(--wp--preset--color--ink-50) !important; }
.has-ink-100-border-color { border-color: var(--wp--preset--color--ink-100) !important; }
.has-ink-400-border-color { border-color: var(--wp--preset--color--ink-400) !important; }
.has-ink-800-border-color { border-color: var(--wp--preset--color--ink-800) !important; }
.has-brand-accent-soft-border-color { border-color: var(--wp--preset--color--brand-accent-soft) !important; }

.has-serif-font-family { font-family: var(--wp--preset--font-family--sans) !important; }

/* 親テーマ（Twenty Twenty-Five）のブロックスタイル。既存ページが使っている
 * （Subtitle 26 か所、Annotation 6 か所）。親の指定は 24〜28px・角丸 16px で
 * このテーマの段階から外れるので、文字サイズと角丸だけ段階に寄せる。 */
:is(p, h1, h2, h3, h4, h5, h6).is-style-text-subtitle {
	font-size: var(--wp--preset--font-size--heading);
}

:is(p, h1, h2, h3, h4, h5, h6).is-style-text-annotation {
	border-radius: var(--wp--custom--radius);
}

/* ---- 2. 文字組み ------------------------------------------- */

/* 見出しは約物を詰め、行頭の「 の見かけの字下げを抑える（対応ブラウザのみ）。
 * Lead と本文は文章として読むものなので詰めない（句読点の後ろが窮屈になる）。 */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title {
	font-feature-settings: "palt";
	text-spacing-trim: trim-start;
}

/* 見出しの折り返し：文節の切れ目で折り、行の長さをそろえる（対応ブラウザのみ）。
 * 「動くも／のに。」のように語の途中で折れるのを避ける。 */
h1, h2, h3,
.wp-block-post-title {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* 太さは 400 と 700 だけ。太字の見出しの中の <strong> は、ブラウザの既定（bolder）だと
 * 900 になり、書体によっては一段太く出る。 */
strong,
b {
	font-weight: 700;
}

/* Display（ヒーロー用の 2 サイズ）は行間 1.2。
 * 字間は和文 0（和欧混植も和文に合わせる）。欧文だけの EN ページは詰める：
 * H1 -0.01em、Display -0.02em（design-direction.md §4.2）。 */
.has-xx-large-font-size,
.has-hero-font-size {
	line-height: 1.2;
}

html:lang(en) :is(h1, .wp-block-post-title, .has-x-large-font-size) {
	letter-spacing: -0.01em;
}

html:lang(en) :is(.has-xx-large-font-size, .has-hero-font-size) {
	letter-spacing: -0.02em;
}

/* 見出しの上の余白：H2 64 / H3 48 / H4 32。
 * コアの blockGap 規則（:root :where(.is-layout-flow) > *）より強く、
 * 先頭要素の 0 指定（> :first-child）より弱い詳細度にしてある。 */
:root :where(.is-layout-flow, .is-layout-constrained) > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

:root :where(.is-layout-flow, .is-layout-constrained) > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

:root :where(.is-layout-flow, .is-layout-constrained) > h4 {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* 見出しの下の余白：H2 24（= blockGap）/ H3 16 / H4 8 */
:root :where(.is-layout-flow, .is-layout-constrained) > h3 + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

:root :where(.is-layout-flow, .is-layout-constrained) > h4 + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* 見出しが連続するときは、下位の見出しの上余白を詰める */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3) + :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* リスト：項目間 8。マーカーは本文の左端から出さない（theme.json の左 padding 1.25em） */
:where(.wp-block-list) > li + li,
:where(.wp-block-list) > li > :where(ul, ol) {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* EN は和文より行間を詰める */
html:lang(en) body {
	line-height: 1.6;
}

html:lang(en) .is-style-lead {
	line-height: 1.5;
}

/* ---- 3. 文頭の左端を揃える ---------------------------------
 * コアの constrained レイアウトは content 幅（760px）の要素を中央に置くため、
 * wide 幅（1200px）の要素やヘッダーのロゴと左端がずれる。
 * content 幅の要素を「wide 幅の左端」に寄せ、左端の線を 1 本にする。
 *
 *   左の余白 = max(0, (コンテナ幅 − wide 幅) / 2)
 *
 * 例外として中央に置きたいコンテナには追加 CSS クラス xxmi-center を付ける。
 * ------------------------------------------------------------ */
body .is-layout-constrained:not(.xxmi-center) > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* 編集画面のタイトル欄（本文とは別の入れ物）も同じ左端に置く。
 * コアが同じセレクターで中央寄せを !important 指定しているので、body を付けて上回る。 */
body .editor-visual-editor__post-title-wrapper >:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* ---- 4. 段落のブロックスタイル ----------------------------- */

/* Lead：見出し直下の要約 1 段落（20px / 1.7） */
p.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
}

/* Label：見出しの上に置く分類・日付・型番（12px mono / 1.5 / 0.04em） */
p.is-style-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-600);
}

:root :where(.is-layout-flow, .is-layout-constrained) > p.is-style-label + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* 行頭の始め括弧（「（［ など）の左側の空きを詰め、文字の頭を左端の線に合わせる。
 * 対応しているブラウザ（Chromium 系）だけで効き、それ以外では今までどおり。 */
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, td, th, cite) {
	text-spacing-trim: trim-start;
}

/* Metric：結果の数値。桁をそろえ、直後の段落（条件・出典）を近づける。 */
p.is-style-metric {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

:root :where(.is-layout-flow, .is-layout-constrained) > p.is-style-metric + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* 暗い背景（Stage）の上では文字色を明るくする。
 * 見出しには色を指定していない（theme.json）ので、入れ物の文字色をそのまま受け継ぐ。
 * 見出しに色を固定すると、暗い背景のセクションの中で黒い文字が黒地に沈む。 */
.has-stage-background-color {
	color: var(--wp--preset--color--base);
}

.has-stage-background-color p.is-style-label {
	color: var(--wp--preset--color--ink-200);
}

/* 暗い背景の上の枠線ボタンは、枠と文字を明るい色に反転する */
.has-stage-background-color .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	border-color: currentColor;
	color: var(--wp--preset--color--base);
}

.has-stage-background-color .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}