/*
 * デザイントークン (design.md §10 準拠)
 * ライト/ダークともに data-theme 属性で切り替える。
 * 初期値は head 内インラインスクリプト(header.php)で prefers-color-scheme /
 * localStorage を見て data-theme を確定させてからこのCSSが評価される。
 */

:root,
[data-theme="light"] {
	/* Colors */
	--color-primary: #8FD9F0;
	--color-primary-dark: #5CB8E4;
	--color-accent: #A8E6D3;
	--color-bg: #FAFDFF;
	--color-surface: #FFFFFF;
	--color-text: #3D4B57;
	--color-text-secondary: #8B9AA5;
	--color-border: #E8F5FB;
	--color-success: #A8E0B8;
	--color-warning: #F5E3A3;
	--color-error: #F0B8B8;

	/* Primary/Accent背景の上に乗せるテキスト色。
	   PrimaryDark/Primaryは中間トーンの水色のため、白文字だとコントラストが不足する。
	   ライト/ダークとも同じ濃紺を使い、十分なコントラストを確保する。 */
	--color-on-primary: #16232A;
}

[data-theme="dark"] {
	--color-primary: #6FD3F5;
	--color-primary-dark: #3FA9D9;
	--color-accent: #7EE8C7;
	--color-bg: #121A20;
	--color-surface: #1C2830;
	--color-text: #E8F1F5;
	--color-text-secondary: #9FB0BC;
	--color-border: #2B3944;
	--color-success: #7ED6A5;
	--color-warning: #E8D488;
	--color-error: #E89999;
}

:root {
	/* Typography */
	--font-family-base: 'LINE Seed JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
	--font-size-h1: 36px;
	--font-size-h2: 28px;
	--font-size-h3: 22px;
	--font-size-body: 16px;
	--font-size-small: 14px;
	--line-height-body: 1.75;

	/* Radius */
	--radius-base: 8px;

	/* Spacing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;

	/* Layout */
	--content-width: 1100px;
	--content-width-narrow: 720px;

	/* Breakpoints (メディアクエリでは直接数値を使うが、コメント代わりに明示) */
	--breakpoint-mobile: 480px;
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1024px;

	/* Motion */
	--duration-fast: 150ms;
	--duration-base: 300ms;
	--duration-slow: 600ms;
	--ease-base: ease-out;
}