/* =========================================================================
 * Make it — デザイントークン（意味名エイリアス）
 *
 * 値の一次ソースは theme.json。WordPress はそこから
 *   --wp--preset--color--*  /  --wp--preset--font-family--*  /  --wp--custom--*
 * を自動出力する。このファイルはそれらを「実務で書きやすい意味名」に束ね直し、
 * テンプレート／コンポーネントCSSが参照する単一の入口にする。
 *
 * ※ここに生の16進値を重複記述しない（theme.json を唯一の真実に保つ）。
 *   theme.json 未出力の環境向けフォールバックのみ右辺2つ目に記述する。
 * ====================================================================== */

:root {
	/* --- 役割色 -------------------------------------------------------
	 * 2026-08 リデザイン：主CTAは藍墨→コーラルへ。primary は「濃紺の面・
	 * リンク」、secondary は「青緑の副CTA・番号・カード枠」に役割が変わった。
	 * コーラルは4値を役割で使い分ける（値の根拠＝design/redesign-top-2026-08.md §1）。
	 *   --c-accent         #E96847 モック実値。装飾（罫・矢印・rail節点）＝非テキスト用
	 *   --c-accent-strong  #C7502B 主ボタンの面。白文字とのコントラスト 4.55:1（AA）
	 *   --c-light-text     #B04328 明面に載る文字。最悪地は --bg-alt で 5.11:1（AA）。
	 *                              かつては面色 #F1E4DC 等が 4.59:1 で床だったが、
	 *                              Issue #64 案2 でそれらの面を廃したため上がった。
	 *                              地の一覧は下の surface 節を参照。
	 *   --c-accent-on-dark #EE8A66 暗面（#203E43）に載る文字。4.62:1（AA）
	 * ※モック実値 #E96847 は、白文字だと3.2:1／明面の文字だと3.1:1／暗面の文字だと
	 *   3.6:1 でいずれもAA不合格。そのためテキストに使う場所だけ、明面では深く・
	 *   暗面では明るく振った専用トークンを持たせ、装飾用の #E96847 と分離している。
	 *   暗面を「深くする」のではなく「明るくする」のは、明るく温かい雰囲気を維持
	 *   したいという野中様のご要望（2026-08-20 確認③の回答）に沿わせるため。
	 * ------------------------------------------------------------------ */
	--c-primary:       var(--wp--preset--color--primary,       #17324C); /* 濃紺・ロゴ／暗面／リンク */
	--c-secondary:     var(--wp--preset--color--secondary,     #327C7F); /* 青緑・副CTA／番号／カード枠 */
	--c-accent:        var(--wp--preset--color--accent,        #E96847); /* コーラル・装飾 */
	--c-accent-strong: var(--wp--preset--color--accent-strong, #C7502B); /* コーラル濃・主ボタン面 */
	--c-light-text:    var(--wp--preset--color--light-text,    #B04328); /* 明面のアクセント文字 */
	--c-accent-on-dark: var(--wp--preset--color--accent-on-dark, #EE8A66); /* 暗面のアクセント文字 */
	--c-text:          var(--wp--preset--color--text,          #1F2E38);
	--c-text-sub:      var(--wp--preset--color--text-sub,      #263740);
	--c-text-caption:  var(--wp--preset--color--text-caption,  #626B6E);
	--c-on-dark:       var(--wp--preset--color--on-dark,       #FFFFFF);
	--c-on-dark-sub:   var(--wp--preset--color--on-dark-sub,   #CBD3D2);
	--c-border:        var(--wp--preset--color--border,        #DDD8CF);

	/* --- 背景：生成り2値の交互 ---------------------------------------
	 * 旧「上（寒色）→下（暖色）」の温度段階は廃止。全面を明るい生成りにし、
	 * セクションごとに base / alt を交互に敷くだけにする。 */
	--bg-base: var(--wp--preset--color--bg-base, #FBFAF6);
	--bg-alt:  var(--wp--preset--color--bg-alt,  #F6F2EA);
	--bg-cta:  var(--wp--preset--color--cta-ink, #203E43); /* 最終CTA */
	--bg-footer: var(--wp--preset--color--footer, #162F34);
	/* Hero だけ斜めのごく淡いグラデーション（モック実装に合わせる） */
	--bg-hero-gradient: linear-gradient(
		105deg,
		var(--wp--custom--hero--gradient-from, #FFFDF8),
		var(--wp--custom--hero--gradient-to, #F8F5EF)
	);

	/* --- 面色（surface）：カード・バッジ・表・入力欄の地 ----------------
	 * Issue #64「案3」＝値は保ったまま名前だけ与える（見た目は不変）。
	 * bg-base / bg-alt だけを見て検算すると、それより暗いこれらの面が漏れ、
	 * AA未達を見逃す（PR #55 で実際に3件発生）。地の候補を有限の集合として
	 * ここに列挙し、機械的に走査できる状態にするのが目的。
	 * ※パレット（theme.json の color.palette）には入れない。エディタの色UIに
	 *   面色が並ぶと野中様がブランド外の色を選べてしまうため（Issue #40 と同趣旨）。
	 *   rail / hero と同じ settings.custom 経由にしている。
	 *
	 * ▼ コーラル文字（--c-light-text #B04328）が載る地とコントラスト（案2 適用後）
	 *   --bg-alt   #F6F2EA  5.11:1  ← 最悪地（plan-estimate の地）
	 *   --bg-base  #FBFAF6  5.46:1
	 *   --bg-card  #FFFFFF  5.46:1
	 *   案2 で #F1E4DC（必須バッジ）・#EFE6D6（目安）・#F4EAD9（予約セクション）の
	 *   3面を廃し、床が 4.59:1 → 5.11:1 に上がった。バッジと目安は「面の濃さ」を
	 *   やめて細罫で役割を表す形に変えている（面を alt に寄せると地と同化するため）。
	 *   1段明るい #BC482A は 5.11:1 の地で 4.59:1 となり合格圏に入るが、採否は
	 *   登内さん判断（Figmaの同時修正が要るため）。
	 * ------------------------------------------------------------------ */
	--bg-card:            var(--wp--custom--surface--card,            #FFFFFF); /* 白のカード・表・QR枠 */
	--bg-card-warm:       var(--wp--custom--surface--card-warm,       #FBF7EF); /* 生成りのカード（ブログ著者・LP） */
	--bg-field:           var(--wp--custom--surface--field,           #FAF8F3); /* フォーム入力欄 */
	--bg-table-head:      var(--wp--custom--surface--table-head,      #EAE5DA); /* 料金表のヘッダ */
	--bg-table-head-cool: var(--wp--custom--surface--table-head-cool, #DFE5E2); /* TOP 変化表のヘッダ（青み） */

	/* 画像プレースホルダ：文字が載らないためコントラスト検算の対象外。
	   画像書き出し後は不要になる想定だが、8箇所に散っていたので1つに束ねる。 */
	--bg-placeholder:       var(--wp--custom--surface--placeholder,       #CDC8BA);
	--bg-placeholder-thumb: var(--wp--custom--surface--placeholder-thumb, #E3DCCB); /* ブログ一覧のサムネ */
	--bg-placeholder-band:  var(--wp--custom--surface--placeholder-band,  #D8CFB8); /* TOP の写真帯 */

	/* --- 通り道（rail）：全セクション同一 -----------------------------
	 * 寒色→暖色のグラデーションと6段階のトーンクラスは廃止（2026-08）。
	 * どのセクションも「線=--rail-line／節点=--rail-dot」の1組で統一する。 */
	--rail-line: var(--wp--preset--color--rail-line, #DFB19F);
	--rail-dot:  var(--wp--preset--color--rail-dot,  #F05E37);
	--rail-width: var(--wp--custom--rail--width, 1px);
	--rail-node:  var(--wp--custom--rail--node-size, 10px);

	/* --- フォント ----------------------------------------------------- */
	--font-display: var(--wp--preset--font-family--display, "Zen Kaku Gothic New", "Noto Sans JP", sans-serif);
	--font-body:    var(--wp--preset--font-family--body,    "Noto Sans JP", sans-serif);
	--font-label:   var(--wp--preset--font-family--label,   "IBM Plex Mono", monospace);

	/* --- 形状・字送り・寸法 ------------------------------------------ */
	--radius:        var(--wp--custom--radius, 4px);
	--lh-body:       var(--wp--custom--line-height--body, 1.95);
	--lh-heading:    var(--wp--custom--line-height--heading, 1.5);
	--tracking-display: var(--wp--custom--tracking--display, -0.01em);
	--tracking-label:   var(--wp--custom--tracking--label, 0.08em);
	/* ボタン高さ（Issue #51）＝SP 46px（Figma 17:21 ほか）／PC 50px（Figma 24:13・
	   24:29・24:31・24:103・25:129・25:178・648:3 ほか全箇所）。PCの出し分けは
	   layout.css の @media (min-width: 1024px) の :root で行う（レスポンシブな
	   トークン上書きは layout.css 側に置く既存パターンに合わせた）。
	   旧値 44px はSP・PCどちらのFigma値とも一致していなかった。 */
	--btn-min-h:     var(--wp--custom--button--min-height, 46px);

	/* --- ブレークポイント（メディアクエリでは直接使えないため参照用） - */
	--bp-sp:     var(--wp--custom--breakpoint--sp, 375px);
	--bp-tablet: var(--wp--custom--breakpoint--tablet, 768px);
	--bp-pc:     var(--wp--custom--breakpoint--pc, 1280px);
}

/* -------------------------------------------------------------------------
 * ベースリセット
 *
 * ブラウザ既定の見出し／段落／リストのマージンを持ったままだと、各コンポーネント
 * 側で付与する margin-top と二重に積み上がり、Figma実測とズレる（例：railの
 * 節点はコンテナのpadding-top基準で絶対配置しているが、<p>の既定margin-topが
 * 残っているとテキストの見た目の開始位置だけ下にズレて節点と合わなくなる）。
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure {
	margin: 0;
}

ul, ol {
	padding: 0;
}

/* -------------------------------------------------------------------------
 * 文字ロール（サイズはFigma実測の固定値。fluid/clamp は使わない）
 *
 * 数値の正は仕様repo design/typography-spec.md §2（PC 1280）／§3（SP 390）。
 * PC/SP の2値をブレークポイント 1024px で切り替える（レイアウトのPC切替と同じ境界）。
 * ---------------------------------------------------------------------- */

/* eyebrow ラベル（IBM Plex Mono・英字・字間広め・センテンスケース）
   SP=Regular 10px/lh1.4/tracking1.6px ／ PC=Medium 12px/tracking0.96px
   2026-08：文字色をキャプション灰→コーラルへ（モックの eyebrow は #E8532C）。
   書体は現行の IBM Plex Mono を維持（モックの Georgia serif は採らない。確認②）。 */
.mk-eyebrow {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 1.6px;
	color: var(--c-light-text);
}

/* Hero・セクション・最終CTAの見出し（Zen Kaku Gothic New）
   tracking は 0（Hero h1 のPCのみ -0.42px＝front.css で個別指定）。
   ウェイトは Bold 基準。SPのセクション見出しのみ Medium（front.css で上書き）。 */
.mk-display {
	font-family: var(--font-display);
	letter-spacing: 0;
	line-height: var(--lh-heading);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.mk-eyebrow {
		font-size: 12px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0.96px;
	}
}

/* -------------------------------------------------------------------------
 * SP専用の改行（.mk-br--sp）
 *
 * 野中様の最終確認（2026-08-26）で、SPの改行位置が12件にわたって指定された
 * （「言葉が途中で分断されないよう、意味のまとまりに合わせて改行してください」）。
 * PCは承認済み（「PC版のみを対象とする追加修正はありません」）なので、PCでは
 * display:none で打ち消し、SPだけで折る。仕様＝design/final-fixes-2026-08-26.md。
 *
 * ※pre-line が効いている要素（.mk-hero__heading／.mk-body／.mk-closing-copy）で
 *   使う場合、この <br> をソース上で改行して書くと素の改行も1行として描画される。
 *   必ず行内に置き、改行を増やさないこと。
 *
 * ※PC専用の改行（--pc）は不要。指定が「SPで改行を入れる」方向に統一されたため、
 *   PCの改行はすべて既存の <br> または pre-line の生改行がそのまま担保する。
 * ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.mk-br--sp {
		display: none;
	}
}