/*
 * デザインの決まり事(デザイントークン)
 *
 * 色の定義元は Blocksy のカスタマイザー(カラーパレット)。
 * メインカラー #F58220 は「パレット1」に登録されており、ここではそれを参照するだけ。
 * 色を変えたいときはカスタマイザー → カラー → パレットを変更する(このファイルに色コードを書かない)。
 */

:root {
	/* Color */
	--pi-primary: var(--theme-palette-color-1, #F58220);
	--pi-primary-hover: var(--theme-palette-color-2, #D96A10);
	--pi-primary-soft: color-mix(in srgb, var(--pi-primary) 10%, #fff);
	--pi-heading: var(--theme-palette-color-3, #1F2937);
	--pi-ink: var(--theme-palette-color-4, #111827);
	--pi-text: var(--theme-text-color, #4B5563);
	--pi-text-muted: #6B7280;
	--pi-bg: var(--theme-palette-color-7, #FFFFFF);
	--pi-bg-soft: var(--theme-palette-color-5, #F8FAFC);
	--pi-bg-muted: var(--theme-palette-color-8, #F3F4F6);
	--pi-border: var(--theme-palette-color-6, #E5E7EB);

	/* Radius */
	--pi-radius-sm: 8px;
	--pi-radius-md: 12px;
	--pi-radius-lg: 24px;
	--pi-radius-xl: clamp(24px, 3vw, 40px);
	--pi-radius-pill: 999px;

	/* Shadow */
	--pi-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
	--pi-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
	--pi-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.12);

	/* Spacing(セクションの上下余白はPC/スマホで自動的に変わる) */
	--pi-space-xs: 8px;
	--pi-space-sm: 16px;
	--pi-space-md: 24px;
	--pi-space-lg: 40px;
	--pi-space-xl: 64px;
	--pi-section-y: clamp(64px, 9vw, 120px);

	/* Layout */
	--pi-container: var(--theme-normal-container-max-width, 1240px);
	--pi-container-narrow: var(--theme-narrow-container-max-width, 750px);
	--pi-gutter: 20px;
	--pi-panel-inset: clamp(8px, 1.5vw, 24px);

	/* Typography */
	--pi-font-en: "Inter", "Noto Sans JP", sans-serif;
	--pi-fs-display: clamp(30px, 4.6vw, 60px);
	--pi-fs-display-en: clamp(34px, 8vw, 104px);
	--pi-fs-h2: clamp(26px, 3.6vw, 38px);
	--pi-fs-h3: clamp(20px, 2.4vw, 24px);
	--pi-fs-lead: clamp(16px, 1.6vw, 18px);
	--pi-fs-small: 14px;

	/* Icon(矢印。色違いの2種) */
	--pi-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--pi-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

	--pi-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F58220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E");

	/* Motion */
	--pi-transition: 0.2s ease;
}

/*
 * Breakpoint(CSS変数は media query に使えないため、値の目安として記載)
 *   スマホ:   〜 689px
 *   タブレット: 690px 〜 999px   ← Blocksy の切り替え幅に合わせる
 *   PC:      1000px 〜
 */