/**
 * デザイントークン（CSS変数）
 * サイト全体で使用するカラー・フォント・余白などの基準値を定義します。
 * 値を変更すると全ページのデザインに反映されます。
 */

:root {
	/* ===== カラー：ベース ===== */
	--color-black: #0a0a0a;
	--color-charcoal: #14161a;
	--color-cream: #f5f0e8;
	--color-cream-soft: #f3ecdf;
	--color-white: #ffffff;

	/* ===== カラー：アクセント ===== */
	--color-gold: #b89968;
	--color-gold-light: #d9c6a5;
	--color-accent: #b03a2e;
	--color-accent-dark: #8f2e24;

	/* ===== カラー：テキスト ===== */
	--color-text-on-light: #1a1a1a;
	--color-text-on-dark: var(--color-cream-soft);
	--color-text-muted-on-light: #6b6258;
	--color-text-muted-on-dark: rgba(243, 236, 223, 0.65);

	/* ===== カラー：ボーダー ===== */
	--color-border-on-light: rgba(10, 10, 10, 0.1);
	--color-border-on-dark: rgba(245, 240, 232, 0.15);

	/* ===== フォント ===== */
	--font-jp-serif: "Shippori Mincho B1", serif;
	--font-jp-sans: "Noto Sans JP", sans-serif;
	--font-en-serif: "EB Garamond", "Times New Roman", serif;

	/* ===== フォントサイズ ===== */
	--fs-hero: clamp(2.5rem, 6vw, 4.75rem);
	--fs-h2: clamp(1.875rem, 4vw, 2.75rem);
	--fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-label: 0.75rem;

	/* ===== 行間・字間 ===== */
	--lh-heading: 1.4;
	--lh-body: 1.8;
	--letter-spacing-heading: 0.08em;
	--letter-spacing-label: 0.2em;

	/* ===== レイアウト ===== */
	--container-width: 1200px;
	--container-padding: clamp(1.25rem, 5vw, 2.5rem);
	--section-padding-y: clamp(4rem, 10vw, 8rem);

	/* ===== 余白 ===== */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	/* ===== その他 ===== */
	--radius-sm: 2px;
	--radius-md: 4px;
	--transition-base: 0.3s ease;
}