/* =========================================================
   カドル デザイントークン
   Pencil の変数と1:1対応（色・角丸・フォント）＋余白/影/コンテナ
   ========================================================= */

:root {
	/* --- ブランドカラー --- */
	--kd-ground: #EAF1FF;       /* ページ地色 */
	--kd-surface: #FFFFFF;      /* カード/タイル */
	--kd-blue: #2563EB;         /* メイン */
	--kd-blue-dark: #1D4ED8;
	--kd-blue-deep: #1E3A8A;    /* フッター等 */
	--kd-blue-tint: #EFF6FF;    /* 淡い青背景 */
	--kd-blue-soft: #DBEAFE;    /* バッジ */
	--kd-orange: #F59E0B;       /* アクセント / CTA */
	--kd-orange-dark: #D97706;
	--kd-orange-soft: #FEF3C7;
	--kd-ink: #1E293B;          /* 主要テキスト */
	--kd-ink-2: #64748B;        /* 補助テキスト */
	--kd-ink-muted: #94A3B8;
	--kd-line: #E2E8F0;         /* 罫線 */
	--kd-green: #16A34A;
	--kd-green-soft: #DCFCE7;
	--kd-star: #FBBF24;

	/* --- ヒーロー/CTA グラデーション --- */
	--kd-grad-blue: linear-gradient(180deg, #3B74F0 0%, #1B45C0 100%);
	--kd-grad-blue-diag: linear-gradient(150deg, #2F6BF6 0%, #1B45C0 100%);

	/* --- フォント --- */
	--kd-font-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
	--kd-font-body: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;

	/* --- 角丸 --- */
	--kd-r-sm: 8px;
	--kd-r-md: 12px;
	--kd-r-lg: 16px;
	--kd-r-xl: 20px;
	--kd-r-2xl: 24px;
	--kd-r-pill: 9999px;

	/* --- 影（やわらかい lift） --- */
	--kd-shadow-sm: 0 3px 8px rgba(30, 58, 138, 0.08);
	--kd-shadow-md: 0 8px 22px -6px rgba(30, 58, 138, 0.16);
	--kd-shadow-lg: 0 16px 40px -10px rgba(30, 58, 138, 0.20);
	--kd-shadow-cta: 0 8px 18px -2px rgba(245, 158, 11, 0.45);
	--kd-shadow-blue: 0 8px 18px -2px rgba(37, 99, 235, 0.40);

	/* --- レイアウト --- */
	--kd-container: 1140px;     /* PC コンテンツ最大幅 */
	--kd-gutter: 20px;          /* SP 左右余白 */
	--kd-section-y: 42px;       /* SP セクション上下余白 */
	--kd-section-y-pc: 80px;    /* PC セクション上下余白 */
}