/* Edgebase Design Tokens — サイト展開時は :root の色のみ差し替える */
:root {
	/* 配色（70/20/10 比率運用。AA準拠の初期値） */
	--color-base: #ffffff;        /* 背景・70% */
	--color-surface: #f5f7fa;
	--color-brand: #1f4e79;       /* ブランド・20% */
	--color-accent: #d97706;      /* アクセント・10% */
	--color-text: #1a1a1a;        /* 本文（対 base で 4.5:1 以上） */
	--color-text-muted: #4a4a4a;
	--color-link: #1558b0;
	--color-link-hover: #0d3d80;
	--color-link-visited: #5b3a8c;
	--color-border: #d9dee5;
	--color-focus: #1558b0;

	/* 文字サイズ（本文 PC16/SP14、下限ガード、clamp連続） */
	--fs-min: 12px;               /* これ未満は使用しない（10px以下禁止） */
	--fs-body: clamp(14px, 1.2vw + 10px, 16px);
	--fs-small: clamp(12px, 1vw + 8px, 14px);
	--fs-h1: clamp(26px, 4vw + 8px, 40px);
	--fs-h2: clamp(22px, 3vw + 6px, 30px);
	--fs-h3: clamp(18px, 2vw + 6px, 24px);
	--fs-h4: clamp(16px, 1.5vw + 6px, 20px);

	/* 行間 */
	--lh-body: 1.8;
	--lh-heading: 1.4;

	/* 余白（Webサイト基準: section PC64-96/SP32-56, block16-32, inline12-24） */
	--space-section: clamp(32px, 6vw, 96px);
	--space-block: clamp(16px, 3vw, 32px);
	--space-inline: clamp(12px, 2vw, 24px);
	--page-gutter: 20px;          /* 画面端と主要コンテンツ外端のSP左右余白 */
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-card-gap: 32px;    /* 独立したカード同士の間隔 */
	--space-group-gap: 48px;   /* 地域・カテゴリなど分類セクション同士の間隔 */

	/* レイアウト */
	--container-max: 1120px;
	--container-wide: 1200px;     /* PC PICK UPなど広めの共通コンテンツ幅 */
	--content-max: 760px;

	/* 操作要素（タップ44px） */
	--tap-min: 44px;
	--radius: 8px;

	/* フォント */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;

	/* --- クリニック（Figmaカセット）用トークン ---
	   Figma実値（確定値）。 */
	--font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-sans: "Noto Sans JP", var(--font-body);

	--brand_green: #3CA1A0;       /* サブボタン（電話/Web）背景 */
	--green_sub: #6DB5B5;         /* 「一覧に戻る」文字色 */
	--cta_grad_from: #3CA1A0;     /* LINEボタン グラデ開始 */
	--cta_grad_to: #2D8281;       /* LINEボタン グラデ終了 */

	--brand_purple: #A465C0;      /* 施術chip 文字色 */
	--accent_purple: #CDA3E0;     /* about見出し 背景 */
	--txt_purple: #C189DB;        /* 紫系テキスト */
	--bg_purple: #F7EEF3;         /* NAP表ラベル列 / about-block 背景 */
	--chip_bg: #DAEEEE;           /* 施術chip 背景 */
	--bg_green: #E8F5F5;          /* 緑系背景 */
	--bg_light: #F5F5F5;          /* ライト背景 */
	--bg_yellow: #FDFBF6;         /* point-card 背景 */

	--card_border: #AAA4AC;       /* カセット / about-block 枠線 */
	--cta_border: #3ABBBA;        /* LINEボタン・戻るボタン 枠線 */
	--line: #b5b5b5;              /* NAP表の罫線 / エリアPill 枠線 */

	--text_dark: #191917;         /* クリニック名 */
	--text_body: #555555;         /* 本文14px */
	--text_muted: #888888;        /* エリアPill 文字 */
	--img_placeholder: #d7d7d7;   /* 写真プレースホルダー背景 */
}

@media (min-width: 1024px) {
	:root {
		--space-card-gap: 40px;
		--space-group-gap: 56px;
	}
}