/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
	/* Colors */
	--color-primary: #5a9f4d;
	--color-primary-light: #7ab86d;
	--color-primary-dark: #4a853d;
	--color-secondary: #EAF4F4;
	--color-accent: #CCE3DE;
	--color-white: #FFFFFF;
	--color-beige: #fcf7e1;
	--color-beige-alt: #ece4cc;
	--color-gray-light: #F5F5F5;
	--color-gray: #E8E8E8;
	--color-gray-dark: #666666;
	--color-text: #333333;
	--color-text-light: #666666;
	--color-text-white: #fffdf6;
	--color-text-white-80: rgba(255, 253, 246, 0.8);
	--color-ui-white: #fffdf6;
	--color-ui-white-40: rgba(255, 253, 246, 0.4);
	--color-ui-white-10: rgba(255, 253, 246, 0.1);
	
	/* Typography */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	--font-size-base: 1.6rem; /* 16px */
	--font-size-small: 1.4rem; /* 14px */
	--font-size-large: 1.8rem; /* 18px */
	--font-size-h1: 3.2rem; /* 32px */
	--font-size-h2: 2.8rem; /* 28px */
	--font-size-h3: 2.4rem; /* 24px */
	--font-size-h4: 2.0rem; /* 20px */
	--line-height-base: 1.8;
	--line-height-heading: 1.4;
	
	/* Spacing */
	--spacing-xs: 0.8rem; /* 8px */
	--spacing-sm: 1.6rem; /* 16px */
	--spacing-md: 2.4rem; /* 24px */
	--spacing-lg: 4.0rem; /* 40px */
	--spacing-xl: 6.0rem; /* 60px */
	--spacing-xxl: 8.0rem; /* 80px */
	
	/* Layout */
	--container-width: 120rem; /* 1200px */
	--container-padding: 2.0rem; /* 20px */
	--header-height: 8.0rem; /* 80px */
	--footer-fixed-height: 7.0rem; /* 70px */
	
	/* Common Max Widths */
	--max-width-90: 90.0rem; /* 900px */
	--max-width-96: 96.0rem; /* 960px */
	--max-width-50: 50.0rem; /* 500px */
	
	/* Common Min Heights */
	--min-height-80: 80.0rem; /* 800px */
	--min-height-60: 60.0rem; /* 600px */
	--min-height-40: 40.0rem; /* 400px */
	
	/* Border Radius */
	--radius-sm: 0.4rem; /* 4px */
	--radius-md: 0.8rem; /* 8px */
	--radius-lg: 1.2rem; /* 12px */
	
	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
	
	/* Transitions */
	--transition-base: all 0.3s ease;
}

	/* Breakpoints */
	--breakpoint-sm: 480px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	
	/* Z-index */
	--z-header: 100;
	--z-menu: 105;
	--z-menu-trigger: 110;
	--z-fixed-nav: 100;
	--z-modal: 200;
}