/* ==========================================================
	variables.css
	CSS変数定義（カラー・フォント・固定ヘッダー高さ等）
	========================================================== */

:root {
	--pd-color-primary: #1a1a1a;
	--pd-color-accent: #0066ff;
	--pd-color-accent-hover: #0052cc;
	--pd-color-base: #ffffff;
	--pd-color-gray: #767676;
	--pd-color-gray-light: #f5f5f5;
	--pd-color-border: #e0e0e0;
	--pd-color-error: #e53e3e;
	--pd-color-error-bg: #fdeded;
	--pd-color-success: #2e7d32;
	--pd-color-overlay: rgba(0, 0, 0, 0.5);

	--pd-font-family-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
		'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	--pd-font-size-small: 14px;
	--pd-font-size-base: 16px;
	--pd-font-size-large: 20px;
	--pd-font-size-xlarge: 28px;
	--pd-font-size-xxlarge: 36px;
	--pd-line-height-base: 1.7;

	--pd-header-height: 72px;
	--pd-header-height-sp: 60px;
	--pd-container-max-width: 1200px;
	--pd-container-padding: 24px;
	--pd-content-max-width: 800px;

	--pd-space-xs: 4px;
	--pd-space-sm: 8px;
	--pd-space-md: 16px;
	--pd-space-lg: 24px;
	--pd-space-xl: 40px;
	--pd-space-xxl: 64px;

	--pd-radius-sm: 4px;
	--pd-radius-md: 8px;
	--pd-radius-full: 999px;
	--pd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--pd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);

	--pd-transition-fast: 0.2s ease;
	--pd-transition-base: 0.3s ease;

	--pd-z-header: 1000;
	--pd-z-drawer: 1100;
	--pd-z-overlay: 1050;
	--pd-z-back-to-top: 900;
}

@media (max-width: 767px) {
	:root {
		--pd-container-padding: 16px;
		--pd-font-size-xlarge: 24px;
		--pd-font-size-xxlarge: 28px;
	}
}