/* ========================================
   RESPONSIVE SYSTEM - TAILWIND-STYLE BREAKPOINTS
   ======================================== */

/**
 * Breakpoint Scale (Mobile-First):
 * sm:  640px   (small tablets)
 * md:  768px   (tablets)
 * lg:  1024px  (small laptops)
 * xl:  1280px  (desktops)
 * 2xl: 1536px  (large desktops)
 */

@layer base {
	:root {
		/* ========================================
		   BREAKPOINT CONFIGURATION
		   ======================================== */
		--breakpoint-sm: 640px;
		--breakpoint-md: 768px;
		--breakpoint-lg: 1024px;
		--breakpoint-xl: 1280px;
		--breakpoint-2xl: 1536px;

		/* ========================================
		   COLORS
		   ======================================== */
				--lavender-mist: #f4f4ffff;
		--lavender-accent: #9392EE;
		--lime: #D1FF5C;
		--onyx: #0a090cff;

		/* ========================================
		   FONTS
		   ======================================== */
		--adelphi: neue-haas-unica, 'Inter', system-ui, sans-serif;
		--adelphi-condensed: neue-haas-unica, 'Inter', system-ui, sans-serif;
		--neue-haas: neue-haas-unica, 'Inter', system-ui, sans-serif;


		/* ========================================
		   RESPONSIVE SPACING SCALE
		   ======================================== */
		/* Base (Mobile) - 20px left/right */
		--px-mobile: 20px;
		--gap-mobile: 16px;
		--section-py-mobile: 32px;

		/* sm: 640px - same as mobile */
		--px-sm: 20px;
		--gap-sm: 20px;
		--section-py-sm: 40px;

		/* md: 768px - tablet: 80px left/right */
		--px-md: 80px;
		--gap-md: 24px;
		--section-py-md: 48px;

		/* lg: 1024px */
		--px-lg: 80px;
		--gap-lg: 32px;
		--section-py-lg: 64px;

		/* xl: 1280px */
		--px-xl: 80px;
		--gap-xl: 40px;
		--section-py-xl: 80px;

		/* 2xl: 1536px */
		--px-2xl: 80px;
		--gap-2xl: 48px;
		--section-py-2xl: 80px;

		/* ========================================
		   RESPONSIVE TYPOGRAPHY SCALE
		   Body text: Perfect Fourth (1.333)
		   Headings: 1.5 ratio for stronger hierarchy
		   Base: 16px mobile → 18px desktop
		   ======================================== */
		/* Body Text Scale - Mobile */
		--text-xs: 12px;      /* Mobile small */
		--text-sm: 14px;      /* Mobile labels */
		--text-base: 16px;    /* Mobile base */
		--text-lg: 18px;      /* Mobile large */
		--text-xl: 21px;      /* 16 × 1.333 */
		--text-2xl: 28px;     /* 21 × 1.333 */

		/* Heading Scale - Mobile (1.5 ratio for hierarchy) */
		--h5: 21px;           /* 16 × 1.333 */
		--h4: 28px;           /* 21 × 1.333 */
		--h3: 37px;           /* ~28 × 1.333 */
		--h2: 74px;           /* 37 × 2.0 */
		--h1: 148px;          /* 74 × 2.0 */

		/* ========================================
		   CONTAINER WIDTHS
		   ======================================== */
		--container-sm: 100%;
		--container-md: 100%;
		--container-lg: 960px;
		--container-xl: 1152px;
		--container-2xl: 1320px;

		/* Default (Mobile) Current Variables */
		--px-current: var(--px-mobile);
		--gap-current: var(--gap-mobile);
		--section-py-current: var(--section-py-mobile);

		/* ========================================
		   RESPONSIVE DISPLAY UTILITIES
		   ======================================== */
		/* Mobile-first: show by default, hide on larger screens */
		--show-mobile: block;
		--show-sm: none;
		--show-md: none;
		--show-lg: none;
		--show-xl: none;
		--show-2xl: none;
	}
}

/* ========================================
   RESPONSIVE UTILITY CLASSES
   ======================================== */

/* Display utilities: hide/show by breakpoint */
.hidden-mobile { display: none; }
.hidden-sm { display: block; }
.hidden-md { display: block; }
.hidden-lg { display: block; }
.hidden-xl { display: block; }
.hidden-2xl { display: block; }

.show-mobile { display: block; }
.show-sm { display: none; }
.show-md { display: none; }
.show-lg { display: none; }
.show-xl { display: none; }
.show-2xl { display: none; }

/* ========================================
   BREAKPOINT: SM (640px and up)
   ======================================== */
@media (min-width: 640px) {
	:root {
		--px-current: var(--px-sm);
		--gap-current: var(--gap-sm);
		--section-py-current: var(--section-py-sm);
		
		/* Intermediate typography scale for small tablets */
		--text-base: 17px;
		--text-lg: 19px;
		--text-xl: 22px;
		--text-2xl: 30px;
		
		--h5: 21px;
		--h4: 28px;
		--h3: 37px;
		--h2: 74px;          /* 37 × 2.0 */
		--h1: 148px;         /* 74 × 2.0 */
	}

	.hidden-sm { display: none; }
	.show-sm { display: block; }
}

/* ========================================
   BREAKPOINT: MD (768px and up)
   ======================================== */
@media (min-width: 768px) {
	:root {
		--px-current: var(--px-md);
		--gap-current: var(--gap-md);
		--section-py-current: var(--section-py-md);
		
		/* Desktop typography - scale up from 14px to 18px base */
		--text-xs: 13px;
		--text-sm: 15px;
		--text-base: 18px;
		--text-lg: 21px;
		--text-xl: 24px;      /* 18 × 1.333 */
		--text-2xl: 32px;     /* 24 × 1.333 */
		
		--h5: 24px;           /* 18 × 1.333 */
		--h4: 32px;           /* 24 × 1.333 */
		--h3: 43px;           /* 32 × 1.333 */
		--h2: 86px;           /* 43 × 2.0 */
		--h1: 172px;          /* 86 × 2.0 */
	}

	.hidden-md { display: none; }
	.show-md { display: block; }
}

/* ========================================
   BREAKPOINT: LG (1024px and up)
   ======================================== */
@media (min-width: 1024px) {
	:root {
		--px-current: var(--px-lg);
		--gap-current: var(--gap-lg);
		--section-py-current: var(--section-py-lg);
		
		/* Slightly larger typography for laptops */
		--text-base: 19px;
		--text-lg: 23px;
		--text-xl: 27px;
		--text-2xl: 36px;
		
		--h5: 26px;
		--h4: 35px;
		--h3: 47px;
		--h2: 94px;          /* 47 × 2.0 */
		--h1: 188px;         /* 94 × 2.0 */
	}

	.hidden-lg { display: none; }
	.show-lg { display: block; }
}

/* ========================================
   BREAKPOINT: XL (1280px and up)
   ======================================== */
@media (min-width: 1280px) {
	:root {
		--px-current: var(--px-xl);
		--gap-current: var(--gap-xl);
		--section-py-current: var(--section-py-xl);
		
		/* Desktop typography */
		--text-base: 20px;
		--text-lg: 24px;
		--text-xl: 28px;
		--text-2xl: 37px;
		
		--h5: 28px;
		--h4: 37px;
		--h3: 49px;
		--h2: 98px;          /* 49 × 2.0 */
		--h1: 196px;         /* 98 × 2.0 */
	}

	/* Skills section - side-by-side layout at xl+ */
	.skills {
		flex-direction: row;
	}

	.hidden-xl { display: none; }
	.show-xl { display: block; }
}

/* ========================================
   BREAKPOINT: 2XL (1536px and up)
   ======================================== */
@media (min-width: 1536px) {
	:root {
		--px-current: var(--px-2xl);
		--gap-current: var(--gap-2xl);
		--section-py-current: var(--section-py-2xl);
		
		/* Large display typography */
		--text-base: 20px;
		--text-lg: 26px;
		--text-xl: 32px;
		--text-2xl: 42px;
		
		--h5: 30px;
		--h4: 40px;
		--h3: 53px;
		--h2: 106px;         /* 53 × 2.0 */
		--h1: 212px;         /* 106 × 2.0 */
	}

	.hidden-2xl { display: none; }
	.show-2xl { display: block; }
}

/* ========================================
   RESPONSIVE GRID UTILITIES
   ======================================== */

/* Grid columns - auto-responsive layout */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 767px) {
	.grid-cols-1-mobile { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.grid-cols-2-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-cols-3-mobile { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.grid-cols-1-md { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.grid-cols-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-cols-3-md { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.grid-cols-1-lg { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.grid-cols-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-cols-3-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid-cols-4-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.grid-cols-1-xl { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.grid-cols-2-xl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-cols-3-xl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid-cols-4-xl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ========================================
   RESPONSIVE FLEX UTILITIES
   ======================================== */

/* Flex direction - stack on mobile */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

@media (max-width: 767px) {
	.flex-col-mobile { flex-direction: column; }
	.flex-row-mobile { flex-direction: row; }
}

@media (min-width: 768px) {
	.flex-col-md { flex-direction: column; }
	.flex-row-md { flex-direction: row; }
}

@media (min-width: 1024px) {
	.flex-col-lg { flex-direction: column; }
	.flex-row-lg { flex-direction: row; }
}

/* ========================================
   RESPONSIVE TEXT UTILITIES
   ======================================== */

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

@media (max-width: 767px) {
	.text-center-mobile { text-align: center; }
	.text-left-mobile { text-align: left; }
}

@media (min-width: 768px) {
	.text-center-md { text-align: center; }
	.text-left-md { text-align: left; }
}

@media (min-width: 1024px) {
	.text-center-lg { text-align: center; }
	.text-left-lg { text-align: left; }
}

/* ========================================
   RESPONSIVE SIZING UTILITIES
   ======================================== */

/* Width utilities */
.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333%; }
.w-2\/3 { width: 66.666%; }

@media (min-width: 768px) {
	.w-full-md { width: 100%; }
	.w-1\/2-md { width: 50%; }
	.w-1\/3-md { width: 33.333%; }
}

@media (min-width: 1024px) {
	.w-full-lg { width: 100%; }
	.w-1\/2-lg { width: 50%; }
	.w-1\/3-lg { width: 33.333%; }
	.w-1\/4-lg { width: 25%; }
}

/* ========================================
   RESPONSIVE MARGIN UTILITIES
   ======================================== */

/* Margin auto utilities */
.mx-auto { margin-left: auto; margin-right: auto; }

@media (min-width: 768px) {
	.mx-auto-md { margin-left: auto; margin-right: auto; }
}

@media (min-width: 1024px) {
	.mx-auto-lg { margin-left: auto; margin-right: auto; }
}

/* ========================================
   RESPONSIVE PADDING UTILITIES
   ======================================== */

/* Use CSS custom properties for consistent padding */
.px-responsive { padding-inline: var(--px-mobile); }
.py-responsive { padding-block: var(--section-py-mobile); }
.p-responsive { 
	padding-inline: var(--px-mobile); 
	padding-block: var(--section-py-mobile);
}

@media (min-width: 640px) {
	.px-responsive { padding-inline: var(--px-sm); }
	.py-responsive { padding-block: var(--section-py-sm); }
	.p-responsive { 
		padding-inline: var(--px-sm); 
		padding-block: var(--section-py-sm);
	}
}

@media (min-width: 768px) {
	.px-responsive { padding-inline: var(--px-md); }
	.py-responsive { padding-block: var(--section-py-md); }
	.p-responsive { 
		padding-inline: var(--px-md); 
		padding-block: var(--section-py-md);
	}
}

@media (min-width: 1024px) {
	.px-responsive { padding-inline: var(--px-lg); }
	.py-responsive { padding-block: var(--section-py-lg); }
	.p-responsive { 
		padding-inline: var(--px-lg); 
		padding-block: var(--section-py-lg);
	}
}

@media (min-width: 1280px) {
	.px-responsive { padding-inline: var(--px-xl); }
	.py-responsive { padding-block: var(--section-py-xl); }
	.p-responsive { 
		padding-inline: var(--px-xl); 
		padding-block: var(--section-py-xl);
	}
}

/* ========================================
   RESPONSIVE GAP UTILITIES
   ======================================== */

.gap-responsive { gap: var(--gap-mobile); }

@media (min-width: 640px) {
	.gap-responsive { gap: var(--gap-sm); }
}

@media (min-width: 768px) {
	.gap-responsive { gap: var(--gap-md); }
}

@media (min-width: 1024px) {
	.gap-responsive { gap: var(--gap-lg); }
}

@media (min-width: 1280px) {
	.gap-responsive { gap: var(--gap-xl); }
}

/* ========================================
   RESPONSIVE ASPECT RATIO UTILITIES
   ======================================== */

.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-3\/2 { aspect-ratio: 3 / 2; }
.aspect-4\/3 { aspect-ratio: 4 / 3; }

/* ========================================
   CONTAINER QUERIES (Optional - Modern Feature)
   ======================================== */

/* Define container query contexts for specific layouts */
.container-context {
	container-type: inline-size;
}

@container (min-width: 400px) {
	.container-sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 600px) {
	.container-md\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ========================================
   PRINT MEDIA QUERY
   ======================================== */

@media print {
	.no-print { display: none; }
	.print-only { display: block; }
}

/* ========================================
   REDUCED MOTION (Accessibility)
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========================================
   DARK MODE (Optional - if needed)
   ======================================== */

@media (prefers-color-scheme: dark) {
	/* Add dark mode styles here if needed */
}

/* ========================================
   HIGH DPI SCREENS (Retina displays)
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	/* Optimize for high-DPI displays */
	/* Example: use sharper images, thinner borders */
}