/* ============================================================
   yoshisato.net 共通テーマ（デザイントークン）
   ── 3サイト共通の「色の正解」ファイル ──

   ■ 正本（マスター）: yoshisato-www/src/styles/theme.css ←このファイル
   ■ コピー先:
       yoshisato-blog/src/styles/theme.css
       gencode モノレポ ai-showcase/public/theme.css
     コピー先は直接編集しない。変更は必ずこの正本を直してから
     Claude Code に「theme.css を各サイトへ配布して」と頼むこと。

   出典: Claude Design「yoshisato Top」(2026-07)
   ============================================================ */

:root {
	/* --- 背景 --- */
	--bg: #f5f5f7; /* ページ背景（薄いグレー） */
	--bg-card: #ffffff; /* カード背景 */
	--bg-card-soft: #fafafc; /* 控えめなカード背景（準備中カードなど） */
	--bg-media: #f2f2f7; /* 画像エリアの下地 */

	/* --- 文字 --- */
	--text: #1d1d1f; /* 見出し・本文の基本色 */
	--text-body: #555555; /* 説明文 */
	--text-soft: #666666; /* 小さめの説明文 */
	--text-muted: #86868b; /* セクションラベル・補足 */
	--text-faint: #999999; /* いちばん薄い補足（URL表記など） */

	/* --- アクセント（青） --- */
	--accent: #007aff;
	--accent-strong: #0060df; /* リンクの hover */
	--accent-soft: #eaf3ff; /* 薄い青のピル背景 */

	/* --- 罫線 --- */
	--border: #e3e3e8; /* カードの枠線 */
	--border-strong: #d1d1d6; /* チップ・ボタンの枠線 */

	/* --- 角丸 --- */
	--radius-lg: 18px; /* 大きいカード */
	--radius-md: 16px; /* 小さいカード */
	--radius-pill: 999px; /* ピル・チップ */

	/* --- 影 --- */
	--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
	--shadow-card-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
	--shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.12);
	--shadow-hover-accent: 0 16px 40px rgba(0, 122, 255, 0.16);

	/* --- ヒーロー装飾（ふわふわ動く円）の色 --- */
	--blob-blue: rgba(0, 122, 255, 0.34);
	--blob-pink: rgba(255, 120, 170, 0.28);
	--blob-teal: rgba(90, 200, 190, 0.26);

	/* --- フォント --- */
	--font-sans: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic',
		'Noto Sans JP', sans-serif;
}