/*!
 * tokens.css — デザイントークン
 * DESIGN_TOKENS.md と同期。C案「クラフト＆ナチュラル」用CSS変数一覧。
 */

:root {
	/* ============ Color ============ */

	/* Paper / 背景 */
	--paper:   #FBF7EE;  /* メイン背景（クリーム） */
	--paper2:  #F1EBDB;  /* セクション背景（やや濃いクリーム） */
	--paper3:  #E8DFC7;  /* アクセント面 */

	/* Ink / 文字・線 */
	--ink:     #26241F;  /* 本文／太枠 */
	--ink2:    #5C5648;  /* 補助テキスト */
	--ink3:    #9C927E;  /* キャプション・カウント */

	/* Brand Accents */
	--sticky:  #FFE98A;  /* マーカー黄・付箋 */
	--accent:  #FF8B3D;  /* オレンジ（CTA） */
	--accent2: #FF6B35;  /* オレンジ（濃） */

	/* セマンティック */
	--red:   #E53935;    /* 必須・急募 */
	--green: #43A047;    /* 成功 */
	--blue:  #1976D2;    /* リンク */
	--gold:  #FFB300;    /* 強調 */

	/* チャネルカラー */
	--line-green: #06C755;  /* LINEブランド */
	--tel-yellow: #FFD25C;  /* 電話ボタン */

	/* ============ Typography ============
	   Webフォント（Yusei Magic / Zen Kaku Gothic New）に含まれない一部 CJK 漢字（例:「通」「卍」）
	   が iOS Safari で絵文字フォントにフォールバックして「👀」みたいに化ける問題への対策：
	   Hiragino / Yu Gothic を Web フォントの直後に必ず置く。 */
	--font-display: "Yusei Magic", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
	--font-body:    "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, system-ui, sans-serif;

	--fs-hero: 56px;  /* ヒーローコピー */
	--fs-h1:   40px;  /* ページタイトル */
	--fs-h2:   32px;  /* セクション見出し */
	--fs-h3:   22px;  /* カード見出し */
	--fs-h4:   18px;  /* サブ見出し */
	--fs-body: 15px;  /* 本文 */
	--fs-sm:   13px;  /* 補助 */
	--fs-xs:   11px;  /* キャプション */

	--lh-body:    1.75;
	--lh-heading: 1.4;

	/* ============ Spacing ============ */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  20px;
	--sp-6:  24px;
	--sp-8:  32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;

	/* ============ Border / Radius ============ */
	--bd-w-thin:  1.5px;
	--bd-w:       2px;
	--bd-w-thick: 2.5px;

	--radius-sm: 6px;
	--radius:    10px;
	--radius-lg: 14px;
	--radius-xl: 18px;

	--line:    var(--ink);   /* 主要な線色 */
	--line-2:  var(--ink2);  /* 補助の線・ダッシュ用 */

	/* ============ Shadows（オフセット影）============ */
	--shadow-sm: 2px 2px 0 var(--ink);
	--shadow:    4px 4px 0 var(--ink);
	--shadow-lg: 6px 6px 0 var(--ink);
	--shadow-xl: 8px 8px 0 var(--ink);

	--shadow-accent: 5px 5px 0 var(--accent);

	/* ============ Layout ============ */
	--container:        1280px;
	--container-narrow: 1080px;
	--container-text:    780px;
	--gutter: 28px;

	/* ============ Breakpoints（参考値・@mediaで使用）============ */
	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
}