/*
 * Harashina Standard — design tokens (CSS custom properties)
 *
 * theme.jsonが表現するのはWordPress標準の設定カテゴリ（色パレット／
 * フォントファミリー・サイズ／spacing scale／layout幅／border）のみ。
 * ここでは、theme.jsonでは扱いにくい、あるいはtheme.jsonのプリセット
 * (--wp--preset--*) をテーマの独自CSS・将来のテンプレートPHPから
 * 短い名前で使い回すための橋渡し変数を定義する。
 *
 * 値の出どころ:
 *  - 色・フォント・spacing scaleは、確定済みprototype
 *    （Harashina_Web_Project/prototypes/hero-ab-test/css/common.css,
 *    variant-a.css）で使われていたトークンをそのまま踏襲し、
 *    theme.jsonのプリセット変数を参照する形で再定義している
 *    （値の重複管理を避けるため、theme.json側を正とする）。
 *  - header-height / width-narrow等、theme.jsonの標準カテゴリに
 *    存在しない値は、このファイルで直接定義する。
 *
 * このファイルはフロントエンドのみで読み込む（エディタ内では
 * ヘッダー/フッター等のテーマchromeを描画しないため不要）。
 */

:root{
	/* ---- Color（theme.jsonのプリセットを短い名前で再公開） ---- */
	--bg: var(--wp--preset--color--background);
	--bg-alt: var(--wp--preset--color--background-alt);
	--text: var(--wp--preset--color--text);
	--text-muted: var(--wp--preset--color--text-muted);
	--border-color: var(--wp--preset--color--border);
	--accent: var(--wp--preset--color--accent);

	/* prototypeのSHOP/Footer地図で使っていた、写真・地図等の
	   読み込み待ち/枠用の控えめな背景色。theme.jsonのcolorパレットには
	   含めていない（エディタの配色候補としては不要なため）。 */
	--photo-frame: #eceae3;

	/* ---- Typography（theme.jsonのフォントファミリーを短い名前で再公開） ---- */
	--font-sans: var(--wp--preset--font-family--sans);
	--font-serif: var(--wp--preset--font-family--serif);
	--font-mono: var(--wp--preset--font-family--mono);

	/* ---- Spacing scale（theme.jsonのspacingSizesを短い名前で再公開） ---- */
	--space-xs: var(--wp--preset--spacing--xs);
	--space-s: var(--wp--preset--spacing--s);
	--space-m: var(--wp--preset--spacing--m);
	--space-l: var(--wp--preset--spacing--l);
	--space-xl: var(--wp--preset--spacing--xl);
	--space-section: var(--wp--preset--spacing--section);

	/* ---- Layout width（theme.jsonのlayout設定と同じ値。plain CSS/
	   メディアクエリ側の計算で直接使うためのコピー） ---- */
	--width-content: 1180px;
	--width-wide: 1400px;
	/* 既存固定ページ（page-templates/one-column-slim.php）のslim幅と同じ値。
	   新規に決めた値ではなく、既存実装からの継続。 */
	--width-narrow: 46rem;

	/* header.phpの現行実装（.site-header__inner padding + ロゴmax-height）
	   からの概算値。ヘッダーの正式デザイン適用時に実測して更新する前提の
	   暫定値（prototype側の.hero-a__intro-copy等はJSでこの高さを実測して
	   使う設計だったため、そちらへ倣うならJS実測に置き換えてもよい）。 */
	--header-height: 73px;

	/* ---- Motion ---- */
	/* Hero等の大きな入場アニメーション向け（今回は未移植。将来Hero等を
	   正式実装する際に使うためのトークンとしてだけ用意している）。 */
	--dur-in: 0.9s;
	/* リンク／ボタンhover等、通常のUIトランジション向け。prototype全体で
	   一貫して使われていた値。 */
	--transition-duration: 0.3s;
	--ease-in: cubic-bezier(.22, .61, .36, 1);
}