/* ============================================================================
 * Centralized Breakpoint Management System
 * ============================================================================
 * 
 * BREAKPOINT STRATEGY:
 * This file defines consistent breakpoint values across all responsive files
 * and establishes the foundation for future mobile-first migration.
 * 
 * CURRENT APPROACH: Desktop-First (maintained for compatibility)
 * - Base: Desktop default (no media query) - 1400px+
 * - Large Desktop: min-width 1400px
 * - Desktop: 1200px-1399px
 * - Tablet Landscape: 992px-1199px  
 * - Tablet Portrait: 768px-991px
 * - Mobile: max-width 767px
 * - Small Mobile: max-width 576px
 */

:root {
	/* === BREAKPOINT DEFINITIONS === 
	 * Centralized responsive breakpoint system
	 * All breakpoint variables are defined here (--breakpoint-*)
	 * Used by: responsive.css, mobile-consolidated.css, and component files
	 * Note: This is the single source of truth for all breakpoints after optimization
	 */
	--breakpoint-mobile-max: 767px;
	--breakpoint-small-mobile-max: 576px;
	--breakpoint-tablet-min: 768px;
	--breakpoint-tablet-max: 991px;
	--breakpoint-tablet-landscape-min: 992px;
	--breakpoint-tablet-landscape-max: 1199px;
	--breakpoint-desktop-min: 1200px;
	--breakpoint-desktop-max: 1399px;
	--breakpoint-large-desktop-min: 1400px;
	
	/* === RESPONSIVE SPACING === */
	--space-header-height-tablet: 80px;
	--space-header-height-desktop: 90px;
}

/* ============================================================================
 * BREAKPOINT USAGE GUIDELINES
 * ============================================================================
 * 
 * DESKTOP-FIRST MEDIA QUERIES (Current Implementation):
 * 
 * 1. Extra Large Desktop (1400px+):
 *    @media only screen and (min-width: 1400px) { }
 *    
 * 2. Large Desktop Range (1200px-1399px):
 *    @media only screen and (min-width: 1200px) and (max-width: 1399px) { }
 *    
 * 3. Tablet Landscape Range (992px-1199px):
 *    @media only screen and (min-width: 992px) and (max-width: 1199px) { }
 *    
 * 4. Tablet Portrait & Mobile Range (max-width: 991px):
 *    @media only screen and (max-width: 991px) { }
 *    
 * 5. Tablet Portrait Range (768px-991px):
 *    @media only screen and (min-width: 768px) and (max-width: 991px) { }
 *    
 * 6. Mobile Range (max-width: 767px):
 *    @media only screen and (max-width: 767px) { }
 *    
 * 7. Small Mobile Range (max-width: 576px):
 *    @media only screen and (max-width: 576px) { }
 *
 * CRITICAL: Ensure no overlapping ranges to prevent cascade conflicts
 * 
 * ============================================================================
 * MOBILE-FIRST MIGRATION PATH (Future Implementation)
 * ============================================================================
 * 
 * When migrating to mobile-first, use these patterns:
 * 
 * 1. Mobile Base (no media query - default)
 * 2. Small Tablet: @media (min-width: 576px) { }
 * 3. Tablet Portrait: @media (min-width: 768px) { }
 * 4. Tablet Landscape: @media (min-width: 992px) { }
 * 5. Desktop: @media (min-width: 1200px) { }
 * 6. Large Desktop: @media (min-width: 1400px) { }
 * 
 * MIGRATION BENEFITS:
 * - Smaller CSS bundle size (mobile styles as base)
 * - Better performance on mobile devices
 * - Progressive enhancement approach
 * - Cleaner cascade with minimal overrides
 * 
 * MIGRATION STRATEGY:
 * 1. Start with new components using mobile-first
 * 2. Gradually refactor existing components
 * 3. Test thoroughly at each breakpoint
 * 4. Maintain backward compatibility during transition
 */

/* ============================================================================
 * COMMON RESPONSIVE PATTERNS
 * ============================================================================ */

/* Mobile styles have been moved to mobile-consolidated.css */
/* This keeps breakpoints.css focused on breakpoint definitions and desktop-first patterns */