/**
 * RESPONSIVE BREAKPOINT CONFIGURATION
 * Centralized CSS Custom Properties for Device-First Responsive Design
 * 
 * Based on 2024-2026 device sales data and viewport analysis
 * Version: 1.0.0
 * Last Updated: February 11, 2026
 * 
 * DEVICE CATEGORIES (8 total):
 * 1. Phone Portrait
 * 2. Phone Landscape
 * 3. Tablet Portrait
 * 4. Tablet Landscape
 * 5. Laptop High-DPI (Surface Book, MacBook Pro Retina, etc.)
 * 6. Desktop Regular (16:9 aspect ratio)
 * 7. Desktop Ultrawide (>16:9 aspect ratio)
 * 8. Smart TV (4K+)
 * 
 * USAGE EXAMPLE:
 * @media (max-width: var(--bp-phone-portrait-max)) and (orientation: portrait) {
 *     .element { font-size: 14px; }
 * }
 */

:root {
	/* ============================================
	   PHONE BREAKPOINTS
	   Based on: iPhone 15 (393px), Samsung S24 (480px)
	   ============================================ */
	
	/* Phone Portrait: 0px - 480px */
	--bp-phone-portrait-max: 480px;
	
	/* Phone Landscape: 0px - 932px */
	--bp-phone-landscape-max: 932px;  /* Covers iPhone 15 Pro Max landscape (932px) */
	
	
	/* ============================================
	   TABLET BREAKPOINTS
	   Based on: iPad Mini (744px), iPad Air (820px), iPad Pro (1024px)
	   ============================================ */
	
	/* Tablet Portrait: 481px - 1024px */
	--bp-tablet-portrait-min: 481px;
	--bp-tablet-portrait-max: 1024px;
	
	/* Tablet Landscape: 933px - 1100px */
	--bp-tablet-landscape-min: 933px;
	--bp-tablet-landscape-max: 1100px;  /* Real tablets like iPad in landscape */
	
	
	/* ============================================
	   LAPTOP BREAKPOINTS - HIGH-DPI DEVICES
	   Based on: Surface Book 3, MacBook Pro Retina, Dell XPS 13
	   These devices have high physical resolution but scaled CSS viewports
	   ============================================ */
	
	/* High-DPI Laptop: 1101px - 1599px */
	--bp-laptop-hidpi-min: 1101px;
	--bp-laptop-hidpi-max: 1599px;  /* Surface Book 3 (~1000-1500px), MacBook Pro 13" (~1280px) */
	
	
	/* ============================================
	   COMPUTER/LAPTOP BREAKPOINTS - REGULAR 16:9
	   Based on: Full HD (1920px), 2K (2560px)
	   ============================================ */
	
	/* Regular Desktop/Laptop (16:9): 1600px - 2560px */
	--bp-computer-regular-min: 1600px;
	--bp-computer-regular-max: 2560px;  /* 2K QHD monitors */
	
	
	/* ============================================
	   COMPUTER/LAPTOP BREAKPOINTS - ULTRAWIDE
	   Based on: 21:9 (3440px), 32:9 (5120px)
	   ============================================ */
	
	/* Ultrawide Desktop (>16:9): 2561px - 3839px */
	--bp-computer-ultrawide-min: 2561px;
	--bp-computer-ultrawide-max: 3839px;  /* Super ultrawide monitors */
	
	
	/* ============================================
	   SMART TV BREAKPOINTS
	   Based on: 4K UHD (3840px), 8K (7680px)
	   ============================================ */
	
	/* Smart TV (4K+): 3840px+ */
	--bp-tv-min: 3840px;
	
	
	/* ============================================
	   SIMPLIFIED BREAKPOINTS
	   For non-orientation-specific media queries
	   Use these when you don't need portrait/landscape distinction
	   ============================================ */
	
	--bp-mobile: 480px;          /* All phones */
	--bp-tablet: 1024px;         /* Most tablets */
	--bp-laptop: 1280px;         /* High-DPI laptops (simplified) */
	--bp-desktop: 1920px;        /* Standard Full HD */
	--bp-desktop-large: 2560px;  /* 2K monitors */
	--bp-ultrawide: 3440px;      /* Typical 21:9 ultrawide */
	--bp-wide: 3840px;           /* 4K and above */
	
	
	/* ============================================
	   COMMON RESPONSIVE VALUES
	   Helper variables for consistent spacing/sizing
	   ============================================ */
	
	/* Container Max Widths */
	--container-phone: 100%;
	--container-tablet: 100%;
	--container-desktop: 1240px;
	--container-ultrawide: 1600px;
	--container-tv: 2000px;
	
	/* Spacing Scale (Responsive) */
	--spacing-xs: 0.5rem;    /* 8px */
	--spacing-sm: 1rem;      /* 16px */
	--spacing-md: 1.5rem;    /* 24px */
	--spacing-lg: 2rem;      /* 32px */
	--spacing-xl: 3rem;      /* 48px */
	--spacing-xxl: 4rem;     /* 64px */
	
	/* Typography Scale (Responsive Base) */
	--font-size-xs: 0.75rem;   /* 12px */
	--font-size-sm: 0.875rem;  /* 14px */
	--font-size-base: 1rem;    /* 16px */
	--font-size-lg: 1.125rem;  /* 18px */
	--font-size-xl: 1.25rem;   /* 20px */
	--font-size-2xl: 1.5rem;   /* 24px */
	--font-size-3xl: 2rem;     /* 32px */
	--font-size-4xl: 2.5rem;   /* 40px */
	--font-size-5xl: 3rem;     /* 48px */
}


/* ============================================
   RESPONSIVE OVERRIDES
   Adjust spacing and typography per device
   ============================================ */

/* Phone Portrait Adjustments */
@media (max-width: 480px) and (orientation: portrait) {
	:root {
		--spacing-xs: 0.375rem;  /* 6px */
		--spacing-sm: 0.75rem;   /* 12px */
		--spacing-md: 1rem;      /* 16px */
		--spacing-lg: 1.5rem;    /* 24px */
		--spacing-xl: 2rem;      /* 32px */
		--spacing-xxl: 2.5rem;   /* 40px */
		
		--font-size-xs: 0.688rem;  /* 11px */
		--font-size-sm: 0.813rem;  /* 13px */
		--font-size-base: 0.938rem; /* 15px */
		--font-size-lg: 1rem;      /* 16px */
		--font-size-xl: 1.125rem;  /* 18px */
		--font-size-2xl: 1.25rem;  /* 20px */
		--font-size-3xl: 1.5rem;   /* 24px */
		--font-size-4xl: 1.875rem; /* 30px */
		--font-size-5xl: 2.25rem;  /* 36px */
	}
}

/* Phone Landscape Adjustments */
@media (max-width: 932px) and (orientation: landscape) {
	:root {
		--spacing-xs: 0.5rem;    /* 8px */
		--spacing-sm: 0.875rem;  /* 14px */
		--spacing-md: 1.25rem;   /* 20px */
		--spacing-lg: 1.75rem;   /* 28px */
		--spacing-xl: 2.5rem;    /* 40px */
		--spacing-xxl: 3rem;     /* 48px */
	}
}

/* Tablet Portrait Adjustments */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
	:root {
		--spacing-md: 1.25rem;   /* 20px */
		--spacing-lg: 1.75rem;   /* 28px */
		--spacing-xl: 2.5rem;    /* 40px */
		
		--font-size-2xl: 1.375rem; /* 22px */
		--font-size-3xl: 1.75rem;  /* 28px */
		--font-size-4xl: 2.25rem;  /* 36px */
	}
}

/* High-DPI Laptop Adjustments (Surface Book, MacBook Pro, etc.) */
@media (min-width: 1101px) and (max-width: 1599px) {
	:root {
		/* Laptop-appropriate spacing - desktop-like experience */
		--spacing-md: 1.5rem;    /* 24px */
		--spacing-lg: 2rem;      /* 32px */
		--spacing-xl: 3rem;      /* 48px */
		
		/* Desktop-size typography */
		--font-size-base: 1rem;    /* 16px */
		--font-size-lg: 1.125rem;  /* 18px */
		--font-size-xl: 1.25rem;   /* 20px */
		--font-size-2xl: 1.5rem;   /* 24px */
		--font-size-3xl: 2rem;     /* 32px */
		--font-size-4xl: 2.5rem;   /* 40px */
	}
}

/* Smart TV Adjustments (Larger spacing/typography) */
@media (min-width: 3840px) {
	:root {
		--spacing-xs: 0.75rem;   /* 12px */
		--spacing-sm: 1.5rem;    /* 24px */
		--spacing-md: 2rem;      /* 32px */
		--spacing-lg: 3rem;      /* 48px */
		--spacing-xl: 4rem;      /* 64px */
		--spacing-xxl: 6rem;     /* 96px */
		
		--font-size-xs: 0.875rem;  /* 14px */
		--font-size-sm: 1rem;      /* 16px */
		--font-size-base: 1.25rem; /* 20px */
		--font-size-lg: 1.5rem;    /* 24px */
		--font-size-xl: 1.75rem;   /* 28px */
		--font-size-2xl: 2rem;     /* 32px */
		--font-size-3xl: 2.5rem;   /* 40px */
		--font-size-4xl: 3rem;     /* 48px */
		--font-size-5xl: 4rem;     /* 64px */
	}
}


/* ============================================
   USAGE EXAMPLES & TEMPLATES
   Copy these patterns for consistent implementation
   ============================================ */

/*
// EXAMPLE 1: Phone Portrait Only
@media (max-width: var(--bp-phone-portrait-max)) and (orientation: portrait) {
	.element {
		padding: var(--spacing-sm);
		font-size: var(--font-size-sm);
	}
}

// EXAMPLE 2: Phone Landscape Only
@media (max-width: var(--bp-phone-landscape-max)) and (orientation: landscape) {
	.element {
		padding: var(--spacing-md);
	}
}

// EXAMPLE 3: All Phones (Any Orientation)
@media (max-width: var(--bp-mobile)) {
	.element {
		width: 100%;
	}
}

// EXAMPLE 4: Tablet Portrait
@media (min-width: var(--bp-tablet-portrait-min)) and (max-width: var(--bp-tablet-portrait-max)) and (orientation: portrait) {
	.element {
		width: 50%;
	}
}

// EXAMPLE 5: Tablet Landscape
@media (min-width: var(--bp-tablet-landscape-min)) and (max-width: var(--bp-tablet-landscape-max)) and (orientation: landscape) {
	.element {
		width: 33.333%;
	}
}

// EXAMPLE 6: High-DPI Laptop (Surface Book, MacBook Pro Retina)
@media (min-width: var(--bp-laptop-hidpi-min)) and (max-width: var(--bp-laptop-hidpi-max)) {
	.element {
		max-width: var(--container-desktop);
		padding: var(--spacing-md);
	}
}

// EXAMPLE 7: Desktop Regular (16:9)
@media (min-width: var(--bp-computer-regular-min)) and (max-width: var(--bp-computer-regular-max)) {
	.element {
		max-width: var(--container-desktop);
	}
}

// EXAMPLE 8: Desktop Ultrawide (>16:9)
@media (min-width: var(--bp-computer-ultrawide-min)) and (max-width: var(--bp-computer-ultrawide-max)) {
	.element {
		max-width: var(--container-ultrawide);
	}
}

// EXAMPLE 9: Smart TV
@media (min-width: var(--bp-tv-min)) {
	.element {
		max-width: var(--container-tv);
		font-size: var(--font-size-2xl);
	}
}

// EXAMPLE 10: Mobile-First Progressive Enhancement
.element {
	// Mobile defaults
	padding: var(--spacing-sm);
	font-size: var(--font-size-base);
}

@media (min-width: var(--bp-tablet)) {
	.element {
		// Tablet and up
		padding: var(--spacing-md);
	}
}

@media (min-width: var(--bp-desktop)) {
	.element {
		// Desktop and up
		padding: var(--spacing-lg);
		font-size: var(--font-size-lg);
	}
}

// EXAMPLE 11: Combined Phone Conditions
@media (max-width: var(--bp-phone-portrait-max)) and (orientation: portrait),
       (max-width: var(--bp-phone-landscape-max)) and (orientation: landscape) {
	.element {
		// Applies to ALL phones, both orientations
		display: block;
	}
}

// EXAMPLE 12: High-DPI Laptop Specific Styling
@media (min-width: var(--bp-laptop-hidpi-min)) and (max-width: var(--bp-laptop-hidpi-max)) {
	.element {
		// Optimized for Surface Book 3, MacBook Pro Retina, Dell XPS 13
		max-width: var(--container-desktop);
		font-size: var(--font-size-base);
		padding: var(--spacing-md);
	}
}
*/