/**
 * biso ブランドの共通トークン
 * 「グレーの猫にミントが宿っている」— グレー基調 + ミントのワンポイント + スターモチーフ
 * 各ブロックのCSSはこの変数を参照します。テーマ側で上書きしたい場合はここか
 * テーマのstyle.cssで --biso-* を再定義してください。
 */
:root {
	--biso-ink: #22242b;      /* 濃いグレー（テキスト/反転背景） */
	--biso-line: #dcdee3;     /* 境界線用ライトグレー */
	--biso-bg: #f6f6f8;       /* ベースの薄いグレー背景 */
	--biso-bg-soft: #eceef1;  /* もう一段濃いグレー背景 */
	--biso-mint: #61d6d9;     /* アクセントのミント */
	--biso-mint-bg: #e3f7f9;  /* ミントの薄い背景 */
	--biso-muted: #8a8d99;    /* 補助テキスト */
	--biso-radius: 4px;       /* 角丸は控えめに（ミニマルなトンマナ） */
}

/**
 * 見出し階層（H2〜H4）
 * 投稿本文（Gutenbergの記事エリア）内の見出しに適用されます。
 * H2＝セクションの大見出し、H3＝中見出し、H4＝カード状の小見出し、と
 * 一目で階層がわかるようトーンとサイズを分けています。
 */
.entry-content h2,
.post-content h2,
article h2 {
	font-size: 1.5em;
	font-weight: 700;
	color: var(--biso-ink, #22242b);
	margin: 2.2em 0 0.9em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid var(--biso-mint, #61d6d9);
	display: inline-block;
}

.entry-content h3,
.post-content h3,
article h3 {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--biso-ink, #22242b);
	margin: 1.8em 0 0.7em;
	padding-left: 0.7em;
	border-left: 3px solid var(--biso-mint, #61d6d9);
	line-height: 1.5;
}

.entry-content h4,
.post-content h4,
article h4 {
	font-size: 1em;
	font-weight: 700;
	color: var(--biso-ink, #22242b);
	margin: 1.4em 0 0.5em;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.entry-content h4::before,
.post-content h4::before,
article h4::before {
	content: "✮";
	color: var(--biso-mint, #61d6d9);
	font-size: 0.85em;
}

.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child {
	margin-top: 0;
}