/**
 * デザイントークン
 *
 * サイト全体で共通に使う余白スケール。
 *
 * 経緯（2026-09-03）:
 * テンプレート内のインラインスタイルに 9px / 11px / 14px / 18px / 20px など
 * どのスケールにも乗らない余白が散在していたため、4pxを基数とする段階値に整理した。
 * 新規に余白を書くときは必ずこのトークンから選ぶこと。
 *
 * このファイルは main.css の「後」に読み込まれる（site/inc/config.php）。
 * main.css は SCSS + autoprefixer でビルドされているが、リポジトリにビルド環境が
 * 無く再ビルドすると全体が差分になるため、余白の整理はこの追加レイヤーで行う。
 * ビルド環境が復旧したら src/scss/_variable.scss 側へ移すこと。
 *
 * @package WordPress
 * @since 1.0.0
 */

:root {
	/* 余白スケール（4px基数） */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 40px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 88px;

	/*
	 * セクションの縦リズム。
	 * 既存の .containerTree__branch（PC 88px / SP 64px）と同値。
	 * 値を変える場合は src/scss/block/_containerTree.scss も合わせること。
	 */
	--space-section: var(--space-4xl);
	--space-section-sp: var(--space-3xl);
}