@layer tokens {
	/*
	 * theme.json に出さない「内部用」トークンのみをここに置く。
	 * 配色・余白・フォントサイズなどエディタUIに出すものは theme.json が正
	 * （WPが --wp--preset--* を自動生成するのでCSSからそのまま参照可）。
	 *   例：var(--wp--preset--color--primary) / var(--wp--preset--spacing--50)
	 *
	 * レイアウト幅（コンテナ）は theme.json の settings.layout が権威。
	 *   contentSize=800px / wideSize=1160px
	 * WPが alignwide 等でこれらを適用するため、CSS側に幅トークンを重複定義しない
	 * （値が二重管理になりドリフトするため。以前あった --nexray-container /
	 *   --nexray-container-wide は theme.json と重複していたので削除した）。
	 */

	/*
	 * ============================================================
	 * 正規ブレークポイント（レスポンシブの単一の真実）★このコメントが権威
	 * ============================================================
	 * 全 CSS はモバイルファースト（min-width で上書き）で書く。
	 * 基本スタイル＝モバイル、幅が広がるにつれて min-width で加算する。
	 *
	 *   sm : 600px   @media (min-width: 600px)
	 *   md : 769px   @media (min-width: 769px)
	 *   lg : 1024px  @media (min-width: 1024px)
	 *
	 * ※ md=769 は「768 の丸め」ではなく、かつて site-nav ドロワーが max-width:768 だった時代の
	 *   厳密な補集合。本文タイポ・余白など viewport 軸の分岐は引き続きこの 769 を使う。
	 *   なおナビの切替境界は 961 へ移した（下記例外）ので、md はもうナビ切替と一致しない。
	 *   それでも 769 を動かさないのは、既存の全ページのタイポ／余白がこの境界で較正済みで、
	 *   丸め直すと境界がずれて見た目が変わる箇所が広範に出るため（ADR 0009 の注記と同じ理由）。
	 *
	 * ※ CSS カスタムプロパティは @media 条件部で使えない（仕様上の制約）。
	 *   本テーマはビルドステップ無し（生 CSS＋個別 enqueue）のため @custom-media も
	 *   使えない。よって各 @media にはリテラル値（600/768/1024）を直接書き、
	 *   値の権威はこのコメントに一本化する（コメント規約でのトークン化）。
	 *
	 * 例外（正規セット外を許すのはこの2系統だけ・理由必須）：
	 *   782px  … WordPress コア管理バーの規定 breakpoint に一致させる補正
	 *             （.admin-bar の top offset。ログイン時のみ・本番は無効）。
	 *             これはデザイン用 BP ではなく WP 挙動のミラーなので max-width のまま据え置く。
	 *   960/961px（ヘッダー帯のみ）… blocks/site-nav の右スライドドロワーは
	 *             モバイル専用オーバーレイのため max-width:960 据え置き（min-width 化すると
	 *             デスクトップで多数プロパティの undo が要り可読性・安全性が悪化する）。
	 *             当初 768 だったが、先方FBでロゴを 56px（横 184px）へ拡大した結果、
	 *             769〜960px で固定幅 554px の横並びナビと衝突するため帯ごとドロワーへ寄せた。
	 *             ※この境界に揃えるものは4つ。ズレると「ハンバーガー＋デスクトップ用タグライン
	 *               同時表示」等の衝突が出るので必ずセットで動かす：
	 *                 blocks/site-nav/style.css   @media (max-width: 960px)
	 *                 assets/js/site-nav.js       matchMedia('(min-width: 961px)')
	 *                 components/header.css       タグライン表示 / ロゴ 56px 化（min-width: 961px）
	 *                 tokens.css                  --nexray-nav-height 96px（min-width: 961px）
	 *
	 * @container（コンテナクエリ）もビューポートではなく親要素幅で同様に min-width 化する。
	 * prefers-reduced-motion 等の機能クエリはビューポート軸でないため対象外。
	 */
	:root {
		/* --- 使用中（部品スタイルの共通値） --- */
		--nexray-radius-md: 8px;
		--nexray-transition: 0.25s ease;
		--nexray-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* エレガントな減速（ease-out-expo） */
		--nexray-hover-opacity: 0.8;
		--nexray-letter-spacing-wide: 0.04em; /* 移植元 --letter-spacing-wide: ボタン等の広い字間 */
		--nexray-color-error: #dc2626; /* フォームバリデーションのエラー色（移植元 red-600）。theme.json プリセット外の UI 専用色 */
		--nexray-color-error-bg: #fef2f2; /* エラー時フィールド地（移植元 red-50） */

		/*
		 * --- 内部プレースホルダ（theme.json に存在しない純内部値） ---
		 * design coding からの移植先。近く使う想定で保持する。
		 *   --nexray-nav-height : 追従ヘッダーの高さ（sticky ヘッダーバー・モバイルドロワー基準）
		 *   --nexray-body-inset : 本文の左右インセット（layout 層で使用予定）
		 *   --nexray-shell-max  : ヘッダー／フッターの内側シェル最大幅（移植元 .nav/.footer inner=1472px）
		 *     ※ theme.json layout（content=800 / wide=1160）とは別用途の値のため重複には当たらない。
		 *   --nexray-shell-gutter : シェル内側の左右パディング（移植元 --gutter）
		 *   --nexray-content-max : shell 内側の本文コンテンツ列幅（移植元 .page-content=1216px）
		 * 使い道が確定した段階で参照側を追加する。
		 */
		--nexray-nav-height: 72px; /* モバイル基準（ロゴ44px＋上下余白14px）。md(769px)〜で 96px に上書き */
		--nexray-body-inset: clamp(1.5rem, calc(15vw - 2rem), 12rem);
		--nexray-shell-max: 1472px;
		--nexray-shell-gutter: clamp(1.5rem, 4vw, 4rem);
		--nexray-content-max: 1216px;

		/*
		 * --- プロジェクト（P2）内部トークン ---
		 * 出典: Figma XgcEwUjwMM7ZujjAbUD3YO / 移植元 projects.js。
		 * theme.json palette に無い Figma 固有値・カテゴリ配色・固有タイポのみをここに置く
		 * （エディタUIに出さない内部値。palette にある色は --wp--preset--color--* を使う）。
		 */
		/* Figma 固有色（palette 外） */
		--nexray-badge-blue: #0058d7; /* Figma --800: バッジ地・強調 */
		--nexray-frame-blue: #d1edff; /* Figma --100: 画像フレーム地 */
		--nexray-surface-alt: #f8fafc; /* Figma slate-50: 物件概要セクション地 */
		--nexray-arrow: #94a3b8; /* Figma/移植元 slate-400: カード矢印線（装飾） */

		/*
		 * カテゴリ別バッジ色（移植元 projects.js CATEGORIES。project_category の slug に対応）。
		 * バッジは白文字・700・0.875rem（WCAG 大文字閾値未満）のため対白 4.5:1 必須。
		 * 移植元の原色は 3 色が AA 未達だったため、色相・彩度を保ち明度のみ降下し 4.6:1 化（#34）。
		 * 括弧内は対白コントラスト実測値。
		 */
		--nexray-cat-commercial: #0058d7; /* 商業（対白 6.22・原色維持） */
		--nexray-cat-office: #e11d48; /* オフィス（対白 4.70・原色維持） */
		--nexray-cat-luxury-residence: #00865b; /* 高級レジ（原色 #059669=3.77 → 4.60） */
		--nexray-cat-hospitality: #cc4a00; /* 宿泊施設（原色 #f97316=2.80 → 4.62） */
		--nexray-cat-medical: #7c3aed; /* 病院（対白 5.70・原色維持） */
		--nexray-cat-fukuoka: #007fa0; /* 福岡（原色 #0891b2=3.68 → 4.62） */

		/* プロジェクト固有タイポ（preset に無い実値。Figma スケールに一致・流体） */
		--nexray-text-hero-catch: clamp(
			1.5rem,
			1rem + 1.5vw,
			2rem
		); /* ヒーロー キャッチ 32px（Figma 364:4587）流体で 24→32 */
		--nexray-text-editorial-head: clamp(
			1.375rem,
			1rem + 1vw,
			1.625rem
		); /* エディトリアル 小見出し 26px */
		--nexray-text-property-name: clamp(
			1.125rem,
			0.9rem + 0.4vw,
			1.25rem
		); /* 物件名 20px（Figma 364:4587）流体で 18→20 */

		/*
		 * --- 共有プロース タイポ ---
		 * プロジェクト固有ではなく、下層プロースページ横断で再利用する共有部品用。
		 * 出典: 移植元 css/style.css .lead-text--lg（Figma 参照なし）。
		 * リード文（キャッチコピー）の大サイズ変種。モバイルファースト：
		 *   基本値＝モバイル（20→最大28px）、md(769px)〜で上限を 32px に引き上げ
		 *   （下の @media で :root 上書き＝--nexray-nav-height と同型）。
		 */
		--nexray-text-lead: clamp(1.25rem, 5vw, 1.75rem);

		/*
		 * --- プロジェクト一覧ページネーション（移植元 .pagination） ---
		 * palette に無い薄青の下線ハイライトと、装飾矢印 SVG のみをここに置く。
		 */
		--nexray-pagination-current-line: #cfe0f0; /* 移植元 blue-200: 現在ページの下線 */
		--nexray-pagination-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='10' viewBox='0 0 29 10' fill='none'%3E%3Cpath d='M0.5 9.5H28.5L21.8025 0.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* NEXT の右矢印。PREV は擬似要素で反転 */
	}

	/*
	 * リード文（--nexray-text-lead）は md=769px〜で上限を 32px に引き上げる。
	 * モバイル基準は 28px 上限（上の :root）。移植元 .lead-text--lg のデスクトップ値。
	 */
	@media (min-width: 769px) {
		:root {
			--nexray-text-lead: clamp(1.25rem, 3vw, 2rem);
		}
	}

	/*
	 * 横並びナビ帯（961px〜）はヘッダーを高くする（96px）。ハンバーガー帯は 72px（上の :root）。
	 * ヘッダー inner の min-height とドロワーの top 基準がこの値に追従する。
	 * モバイルファースト（min-width で上書き）で書く。
	 *
	 * 先方FB「ヘッダーのロゴを2まわりほど大きくする」でロゴを 44px / 56px に拡大した際、
	 * バー高も 64→72 / 80→96px へ引き上げた（会議での「スペースが圧迫されるならヘッダーの縦幅を
	 * 広げて対応」に沿う）。ロゴ上下の余白は 14px / 20px で、拡大前（16px / 20px）と
	 * ほぼ同じ息づかいを保つ。
	 *
	 * 境界が md=769 でなく 961 なのは、ロゴ高と同じく site-nav ドロワー（max-width:960）の
	 * 厳密補集合に合わせるため。バー高だけ 769 で上げるとハンバーガー帯の後半（769〜960）で
	 * ロゴ 44px に対しバー 96px となり上下 26px の間延びしたバーになる。
	 */
	@media (min-width: 961px) {
		:root {
			--nexray-nav-height: 96px;
		}
	}
}