/* ============================================================
   PRIME ESSENCE — Design Tokens (v0.2 ブラッシュアップ版)
   CLAUDE.md 8章(Design Tokens) / BRAND.md Visual Identityに準拠。
   カラーは仕様書記載の値をそのまま反映。
   フォント・余白・角丸・shadow等はWarm Luxury/静かなラグジュアリー感の
   方針に基づく提案値で、今回のフィードバックを受けて更新している。
   ============================================================ */

:root {
	/* ---------------------------------------------------------
	   Colors (CLAUDE.md 8章 / BRAND.md Visual Identityより / 事実)
	   --------------------------------------------------------- */
	--pe-color-primary: #D9C3BC;       /* Dusty Pink Beige */
	--pe-color-secondary: #C7A49A;     /* Rose Beige */
	--pe-color-base: #FFFFFF;          /* White */
	--pe-color-text: #4B3A35;          /* Chocolate Brown(見出し・ボタン等のブランドカラー用) */
	--pe-color-accent: #C8AA6E;        /* Champagne Gold(サイト全体の基本アクセント) */
	--pe-color-bg-soft: #F7F1EF;       /* Soft Blush */

	/* 【2026-08-16追加】第2のブランドアクセント(Deep Rose Burgundy)。
	   Chocolate Brown(--pe-color-text)より少し赤みを含み、Dusty Pink Beige/
	   Rose Beige/Champagne Goldとも調和する深色。重要な内部リンク・eyebrow・
	   強調文字等、限定的な強調にのみ使用する(基本のアクセントは引き続き
	   Champagne Gold = --pe-color-accent)。白・Soft Blush背景いずれでも
	   コントラスト比7:1以上を確保しており、可読性上も問題ない。
	   今回はContactの連絡手段名(pe-contact-channel__value)にのみ使用し、
	   サイト全体への展開は別工程で検討する。 */
	--pe-color-accent-deep: #7A4148;   /* Deep Rose Burgundy */

	/* ---------------------------------------------------------
	   本文用テキストカラー(最終調整版)
	   見出しはブランドカラー(Chocolate Brown = --pe-color-text)のまま、
	   本文はダークグレーへ分離し、可読性を優先する。
	   --------------------------------------------------------- */
	--pe-color-heading: var(--pe-color-text); /* 見出し用の別名(意図を明確にするため) */
	--pe-color-body: #333333;                 /* 本文(段落)用ダークグレー */

	/* テキスト用の補助トーン(提案: キャプション等、本文よりさらに控えめな箇所に使用) */
	--pe-color-text-muted: #6E6E6E;

	/* 境界線(提案: 今回さらに軽くし、UIの主張を弱めた) */
	--pe-color-border: #EDE3DE;        /* 通常の境界線(以前よりさらに淡く) */
	--pe-color-border-faint: #F2EAE6;  /* ごく控えめな区切り線(カード内側など) */

	/* ブラッシュアップ追加(提案): セクション背景に3段階目のトーンを設け、
	   White(base) / Soft Blush(soft) の二値な切り替えではなく、
	   もう一段階ごくわずかな変化を挟むことでスクロール時の余韻を出す。
	   whisper はbaseとsoftの中間、footerはsoftよりさらに一段深い、
	   サイトの最後を静かに締めくくるトーン。 */
	--pe-color-bg-whisper: #FBF7F5;
	--pe-color-bg-footer: #F1E6E1;

	/* 状態色(提案: フォームのエラー表示等、必要最小限のみ) */
	--pe-color-error: #A94442;

	/* ---------------------------------------------------------
	   Typography(正式版として確定)

	   前回3案を比較した結果、以下で正式決定。
	     英字 = Cormorant Garamond(確定)
	     日本語 = Noto Serif JP(第一候補・確定)
	   「個性的すぎず、長く使える上品さ」という方針を優先し、
	   Zen Old Mincho/Shippori Minchoではなく、オーソドックスで
	   可読性の高いNoto Serif JPを採用している。

	   第二候補: BIZ UDPゴシックではなくBIZ UDP明朝。
	   Noto Serif JPで運用してみて視認性やウェイト展開に課題が出た場合は、
	   下記のコメントアウトに切り替えるだけで対応できるようにしてある。
	   --------------------------------------------------------- */
	--pe-font-heading-en: 'Cormorant Garamond', serif;
	--pe-font-heading-jp: 'Noto Serif JP', serif;
	/* 第二候補に切り替える場合:
	   --pe-font-heading-jp: 'BIZ UDPMincho', serif;
	   (Google Fontsの family 名は "BIZ UDPMincho" 表記) */
	--pe-font-body: 'Noto Sans JP', sans-serif;

	/* フォントサイズ(提案: モバイルファーストのスケール) */
	--pe-fs-xs: 0.75rem;     /* 12px 補足・キャプション */
	--pe-fs-sm: 0.875rem;    /* 14px 補助テキスト */
	--pe-fs-base: 0.9375rem; /* 15px 本文(項目7: やや小さく) */
	--pe-fs-md: 1.125rem;    /* 18px リード文 */
	--pe-fs-lg: 1.375rem;    /* 22px 小見出し */
	--pe-fs-xl: 1.75rem;     /* 28px セクション見出し(モバイル) */
	--pe-fs-2xl: 2.25rem;    /* 36px HERO見出し(モバイル) */
	--pe-fs-3xl: 3rem;       /* 48px セクション見出し(PC) */

	--pe-lh-tight: 1.3;
	--pe-lh-base: 2;         /* 本文行間(項目7: 1.8→2に拡大し、余白と静けさを強調) */
	--pe-ls-heading: 0.02em;

	/* ---------------------------------------------------------
	   Spacing scale(項目2: 全体の余白をもう一段広く)
	   「情報量より空気感」を優先し、旧スケールから底上げしている。
	   --------------------------------------------------------- */
	--pe-space-2xs: 4px;
	--pe-space-xs: 10px;
	--pe-space-sm: 20px;
	--pe-space-md: 32px;
	--pe-space-lg: 56px;
	--pe-space-xl: 88px;
	--pe-space-2xl: 128px;
	--pe-space-3xl: 168px;

	/* セクション間の余白(モバイル/PC) */
	--pe-space-section-mobile: var(--pe-space-2xl);
	--pe-space-section-desktop: var(--pe-space-3xl);

	/* コンテナ幅(提案) */
	--pe-container-max: 1120px;
	--pe-container-padding: var(--pe-space-sm);

	/* ---------------------------------------------------------
	   Radius / Border(CLAUDE.md 9章: 角丸は小さめ〜中程度、境界線は細く控えめ)
	   ボタンやカード等「UIのチロム」用と、写真そのもの用を分離し、
	   写真側の角丸をより控えめにしている(項目4)。
	   --------------------------------------------------------- */
	--pe-radius-sm: 4px;
	--pe-radius-md: 8px;
	--pe-radius-lg: 12px;
	--pe-radius-photo: 2px;   /* 装飾事例カード等、写真自体に使う最小限の角丸 */
	--pe-radius-btn: 4px;     /* ブラッシュアップ(提案): ボタンはカード類(8px)より控えめな角丸にし、丸みよりも仕立ての良さ・端正さを感じさせる */
	--pe-border-width: 1px;

	/* ---------------------------------------------------------
	   Shadow(CLAUDE.md 9章: 強いシャドウは禁止 → ごく控えめな1段階のみ)
	   --------------------------------------------------------- */
	--pe-shadow-subtle: 0 2px 10px rgba(75, 58, 53, 0.06);

	/* ---------------------------------------------------------
	   Motion(CLAUDE.md 10章/11章: ホバーは軽微、アニメーションは穏やかに)
	   --------------------------------------------------------- */
	--pe-transition-fast: 0.2s ease;
	--pe-transition-base: 0.35s ease;
	--pe-transition-slow: 0.6s ease;
	--pe-hover-lift: -2px; /* 1〜2px程度の移動 */

	/* ---------------------------------------------------------
	   Z-index(提案: Sticky CTA等の重なり管理)
	   --------------------------------------------------------- */
	--pe-z-sticky-cta: 100;
	--pe-z-header: 200;

	/* ---------------------------------------------------------
	   Layout(2026-08-16追加)
	   .pe-header(components.css)の実際の高さと常に一致させる値。
	   position: fixedのヘッダーはドキュメントの高さに影響しないため、
	   ページ内アンカーへのスクロール時にscroll-margin-topでこの値を
	   考慮しないと、ジャンプ先の要素がヘッダーの下に隠れてしまう。
	   .pe-headerのheightもこの変数を参照する(値の二重管理を避けるため)。
	   --------------------------------------------------------- */
	--pe-header-height: 64px;
}

@media (min-width: 768px) {
	:root {
		--pe-header-height: 80px;
	}
}