/**
 * CSS Variables — extracted from Yoshino Bldg logo colors
 * Navy: #1B2A4A | Green: #3D8B5C | Gold: #B8956B
 */
:root {
	/* Brand colors */
	--color-navy: #1B2A4A;
	--color-navy-dark: #141E36;
	--color-navy-light: #2A3D66;
	--color-green: #3D8B5C;
	--color-green-dark: #2F7049;
	--color-green-light: #4DA06E;
	--color-gold: #B8956B;
	--color-gold-light: #D4B896;
	--color-beige: #F5F0E6;
	--color-beige-dark: #EBE4D6;

	/* Neutrals */
	--color-white: #FFFFFF;
	--color-gray-50: #FAFAF8;
	--color-gray-100: #F3F2EF;
	--color-gray-200: #E8E6E1;
	--color-gray-400: #9B9890;
	--color-gray-600: #5C5A55;
	--color-gray-800: #333330;
	--color-text: #2A2A28;
	--color-text-muted: #6B6964;

	/* Typography */
	--font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	--font-en: 'Cormorant Garamond', 'Times New Roman', serif;

	/* Layout */
	--container-max: 1200px;
	--container-padding: clamp(16px, 4vw, 40px);
	--header-height: 72px;
	--section-gap: clamp(64px, 8vw, 120px);

	/* Effects */
	--shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.06);
	--shadow-md: 0 8px 24px rgba(27, 42, 74, 0.1);
	--shadow-lg: 0 16px 48px rgba(27, 42, 74, 0.12);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;
	--transition: 0.25s ease;

	/* Safe area */
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-top: env(safe-area-inset-top, 0px);
}