/* ===========================================================
   Foundation / Variables
   サイト全体で参照するカスタムプロパティを集約する。
   ※カラーHEX値はFigma抽出値（CLAUDE.md準拠）。
   =========================================================== */

:root {
	/* ===========================
	   カラーパレット
	   =========================== */

	/* Pink（メインカラー：ピンク系） */
	--color-pink-200: #FDF7F7;
	--color-pink-300: #F0AAB5;
	--color-pink-400: #E99AB0;
	--color-pink-500: #E07794; /* ベース */
	--color-pink-600: #A9526A;
	--color-pink-700: #833D51;
	--color-pink-800: #5C2837;

	/* Navy（メインカラー：紺系） */
	--color-navy-100: #F1F5FB;
	--color-navy-200: #ECF1FF;
	--color-navy-300: #ADB5DA;
	--color-navy-400: #4D6298;
	--color-navy-500: #314081; /* ベース */
	--color-navy-600: #222D5D;
	--color-navy-700: #1A2348;
	--color-navy-800: #121832;

	/* Yellow（アクセント・背景・枠線） */
	--color-yellow-50: #FBF8F3;   /* 背景用クリーム（監修医ボックス等） */
	--color-yellow-300: #F0D78A;  /* 枠線・アクセント用イエロー */

	/* Notice（アクセント・お知らせ） */
	--color-notice: #FB5E94;

	/* Gray（テキスト・ボーダー） */
	--color-gray-100: #FCFCFC;
	--color-gray-200: #F0F0F0;
	--color-gray-300: #D9D9D9;
	--color-gray-400: #C0C0C0;
	--color-gray-500: #A0A0A0;
	--color-gray-600: #737373;
	--color-gray-700: #5D5D5D;
	--color-gray-800: #3E3E3E;
	--color-gray-900: #1E1E1E;

	--color-white: #FFFFFF;
	--color-black: #2A2A2A;

	/* ===========================
	   セマンティックカラー
	   =========================== */

	--color-primary: var(--color-pink-500);
	--color-primary-hover: var(--color-pink-700);
	--color-primary-light: var(--color-pink-200);

	--color-secondary: var(--color-navy-500);
	--color-secondary-hover: var(--color-navy-800);
	--color-secondary-light: var(--color-navy-100);

	--color-text: var(--color-black);
	--color-text-light: var(--color-gray-500);
	--color-text-muted: var(--color-gray-400);

	--color-bg: var(--color-white);
	--color-bg-soft: var(--color-pink-300);
	--color-bg-cream: var(--color-yellow-50);
	--color-bg-section: var(--color-navy-400);

	--color-border: var(--color-gray-500);
	--color-border-light: var(--color-gray-100);

	--color-link: var(--color-navy-500);
	--color-link-hover: var(--color-navy-600);

	/* ===========================
	   フォントファミリー
	   =========================== */

	--font-base:
		"Zen Maru Gothic",
		"Hiragino Maru Gothic ProN",
		"Hiragino Sans",
		"Meiryo",
		"Noto Sans JP",
		sans-serif;

	/* ===========================
	   フォントサイズ
	   ※PC基準。SPはclamp()で可変。
	   =========================== */

	--fs-section-title: clamp(24px, 3vw, 32px);
	--fs-section-subtitle: 16px;
	--fs-body: 16px;
	--fs-lead: clamp(16px, 1.5vw, 18px);
	--fs-caption: clamp(13px, 1vw, 14px);
	--fs-h1: clamp(28px, 4vw, 40px);
	--fs-h2: clamp(24px, 3vw, 32px);
	--fs-h3: clamp(20px, 2.5vw, 24px);
	--fs-h4: clamp(18px, 2vw, 20px);

	/* ===========================
	   行間
	   =========================== */

	--lh-tight: 1.3;
	--lh-base: 1.7;
	--lh-loose: 2;

	/* ===========================
	   レイアウト
	   =========================== */

	--content-max: 1280px;
	--content-max-narrow: 800px;
	--content-padding: clamp(16px, 4vw, 80px);
	--bp-pc: 768px;

	/* ===========================
	   角丸・シャドウ
	   =========================== */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

	/* ===========================
	   モーション
	   =========================== */

	--transition-base: all 0.3s ease;
}