/**
 * Install Guide — 統一デザイントークン（単一の出典）
 * すべての guide CSS（blocks / progress / experience / focus）がこれを参照する。
 * 目的: 青(#2271b1/#0063b1)とオレンジの混在を解消し、ブランド(オレンジ/クリーム)＋
 *       意味色(success/danger/caution)に集約。フォント・角丸・余白も一貫させる。
 * root は 62.5% 前提（1rem = 10px）。可読テキスト最小 = 1.3rem(13px)。
 */

:root {
	/* ===== ブランド & 意味色 ===== */
	--guide-accent:        var(--kabocy-color-primary, #ff5b00);
	--guide-accent-hover:  var(--kabocy-color-tertiary, #ff7900);
	--guide-accent-soft:   var(--kabocy-color-pop-bg, #ffedca);

	--guide-success:       #1e7a45;
	--guide-success-soft:  #e8f6ee;
	--guide-danger:        #c0341d;
	--guide-danger-soft:   #fcece9;
	--guide-caution:       #a65f00;
	--guide-caution-soft:  #fbf1df;

	/* ===== サーフェス & テキスト（暖色ニュートラル） ===== */
	--guide-surface:       var(--kabocy-color-absolute-white, #fff);
	--guide-surface-warm:  var(--kabocy-color-pop-bg, #ffedca);
	--guide-bg:            var(--kabocy-color-main-bg, #fff4e1);
	--guide-border:        #e8e1d4;
	--guide-border-strong: #d8cebb;
	--guide-text:          #2b2620;
	--guide-muted:         #6f6052;

	/* ===== コード（暖色ダーク） ===== */
	--guide-code-bg:       #1d1813;
	--guide-code-bg-soft:  #2a241d;
	--guide-code-fg:       #f1ede6;
	--guide-code-muted:    rgba(241, 237, 230, 0.62);

	/* ===== 角丸（4値に統一・kabocy標準8pxへ） ===== */
	--guide-radius-sm:   8px;
	--guide-radius-md:   12px;
	--guide-radius-lg:   16px;
	--guide-radius-pill: 999px;

	/* ===== タイプスケール（最小可読 1.3rem＝13px） ===== */
	--guide-fs-eyebrow: 1.2rem;  /* 12px: 大文字ラベル・バッジ */
	--guide-fs-meta:    1.3rem;  /* 13px: メタ・補助テキスト最小 */
	--guide-fs-label:   1.4rem;  /* 14px: ラベル・UIテキスト */
	--guide-fs-body:    1.6rem;  /* 16px: 本文 */
	--guide-fs-code:    1.45rem; /* 14.5px: コード */
	--guide-fs-lead:    1.7rem;  /* 17px: リード文 */
	--guide-fs-h3:      1.9rem;  /* 19px: ステップ見出し */
	--guide-fs-h2:      2.3rem;  /* 23px */
	--guide-fs-h1:      2.9rem;  /* 29px: ガイドタイトル */

	/* ===== 余白スケール ===== */
	--guide-space-1: 0.4rem;
	--guide-space-2: 0.8rem;
	--guide-space-3: 1.2rem;
	--guide-space-4: 1.6rem;
	--guide-space-5: 2.4rem;
	--guide-space-6: 3.2rem;

	/* ===== 影（控えめ） ===== */
	--guide-shadow-sm: 0 1px 2px rgba(43, 38, 32, 0.06);
	--guide-shadow-md: 0 6px 20px rgba(43, 38, 32, 0.08);

	/* ===== 固定ヘッダーの高さ（アンカー着地・sticky の基準） =====
	 * .global-header は position:fixed。#anchor やスクロール先がその下に
	 * 潜らないよう、scroll-padding-top / sticky の top はこの値を基準にする。
	 * 値は style.css の body{padding-top} と対でメンテナンスすること
	 * （既定 122px / 430px 以下 108px）。
	 *
	 * このファイルは全ページで読まれるので、KB(110/128px)・図鑑(96px)に
	 * 散っているハードコードも将来この単一の出典へ寄せられる。 */
	--lp-header-offset: 122px;
	--lp-anchor-gap:    12px;
	--lp-scroll-offset: calc( var(--lp-header-offset) + var(--lp-anchor-gap) );
}

@media screen and ( max-width: 430px ) {
	:root {
		--lp-header-offset: 108px;
	}
}