/* ============================================================
   variables.css - デザイントークン

   色・フォントサイズ・スペーシング・フォントの実体は theme.json が
   単一の出所。ここではそれらを短い別名（--ink / --text-base 等）に
   割り当て直すのと、theme.json に持たない補助トークンだけを定義する。

   ・値を変えるときは theme.json を編集する（ここは参照するだけ）。
   ・使用側は従来どおり var(--ink) / var(--text-base) を使えばよい。
   ============================================================ */
:root {
	/* --- カラー：theme.json のパレットを参照 --- */
	--ink: var(--wp--preset--color--ink);
	--cream: var(--wp--preset--color--cream);
	--paper: var(--wp--preset--color--paper);
	--accent: var(--wp--preset--color--accent);
	--muted: var(--wp--preset--color--muted);
	--water: var(--wp--preset--color--water);
	--hozon: var(--wp--preset--color--hozon);
	--cta: var(--wp--preset--color--cta);
	--brand: var(--wp--preset--color--brand);
	--brand-pale: var(--wp--preset--color--brand-pale);
	--bg-subtle: var(--wp--preset--color--bg-subtle);
	--line: var(--wp--preset--color--line);

	/* theme.json に載せない補助色（エディタで選ばせない UI 内部の限定用途）。
	   パレットに出すと選択肢が増えて迷わせるため、あえてここに置く。 */
	--ink2: #231916;
	--body-ink: #26323b;
	--cream2: #EDE8DC;
	--slider-track: rgba(28, 38, 48, .18);
	--moors: #475560;
	--brand-tint: rgb(1 70 140 / 3%);
	--gray: #f7f7f7;
	--link-hover: var(--brand);
	--header-bg: #ffffffdb;
	--brand-line: #2a5c9a;
	--line-on-dark: rgb(255 255 255 / 12%);
	--text-on-dark: rgb(255 255 255 / 85%);
	--border-on-dark: rgb(255 255 255 / 70%);
	--surface-on-dark: rgb(255 255 255 / 5%);
	--safety-bg: #032950;
	--live-dot: #7FC6A0;
	--hero-hita-bg: #21495e;
	--scrim-bousai: linear-gradient(0deg, #3a320490, #3a320412);
	--scrim-hita: linear-gradient(0deg, #0247047f, #38683432);

	/* --- フォントサイズ：theme.json を参照 ---
	   （--text-2xl は theme.json の slug "xxl"。slug "2xl" だと WP が
	   --wp--preset--font-size--2-xl に変換してしまうため名前を分けている） */
	--text-xs: var(--wp--preset--font-size--xs);
	--text-sm: var(--wp--preset--font-size--sm);
	--text-base: var(--wp--preset--font-size--base);
	--text-md: var(--wp--preset--font-size--md);
	--text-ml: var(--wp--preset--font-size--ml);
	--text-lg: var(--wp--preset--font-size--lg);
	--text-xl: var(--wp--preset--font-size--xl);
	--text-2xl: var(--wp--preset--font-size--xxl);

	/* theme.json のスケールに乗らない固定サイズ（用途が単一なため別枠） */
	--text-stat: clamp(44px, 15cqi, 76px);

	/* --- ボタン高（theme.json に持たない）---
	   塗り／枠線のボタンを横に並べても高さがずれないよう、padding ではなく
	   height で揃えるための値。--btn-h は帯・ドロワー用、--btn-h-sm はヘッダー用。 */
	--btn-h: 56px;
	--btn-h-sm: 40px;

	/* --- ギャップ（theme.json に持たない） --- */
	--gap-sm: clamp(8px, 1vw, 16px);
	--gap-md: clamp(16px, 2vw, 24px);
	--gap-lg: clamp(24px, 3vw, 48px);

	/* --- スペーシング ---
	   --wp--preset--spacing--* は theme.json の settings.spacing.spacingSizes から
	   WordPress が自動生成する。ここで手書きすると二重管理・競合になるため定義しない。 */

	/* --- レイアウト --- */
	--content-width: 1360px;
	/* 固定ページ本文の読み幅（theme.json settings.layout.contentSize と一致）。
	   page.css の .page-entry 通常ブロック幅・タイトル帯に使う。 */
	--content-narrow: 960px;

	/* --- フォントファミリー：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);
	--font-en: var(--wp--preset--font-family--en);
}