vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 3.2.1: Advanced Breakpoint Management - Complete breakpoint system with CSS custom properties, mixin utilities, and responsive variables

Browse source
This commit is contained in:
VinnyNC 2025-09-29 20:18:36 -04:00
parent d60a17b540
commit b213fb623f
3 changed files with 314 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

17
UI_UPDATE.MD
View file

@ -299,10 +299,19 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
- Added grid-flow utilities and additional alignment classes
- Created responsive grid variation classes for sm (640px+), md (768px+), lg (1024px+), xl (1280px+), and 2xl (1536px+) breakpoints
#### 3.1.3: Layout Utilities
- [ ] Create container and wrapper utilities
- [ ] Implement spacing and alignment helpers
- [ ] Add responsive layout modifiers
#### 3.1.3: Layout Utilities - COMPLETED 9/29/2025
- [x] Create container and wrapper utilities
- [x] Implement spacing and alignment helpers
- [x] Add responsive layout modifiers
**Notes:** Implemented comprehensive layout utilities to utilities.css with over 190 utility classes including:
- Container utilities (.container, .container-fluid, .wrapper, breakpoint-specific containers)
- Complete spacing system (margin/padding utilities: .m-*, .p-*, directional and axis helpers)
- Display and positioning utilities (.block, .flex, .relative, .absolute, etc.)
- Width/height utilities (.w-*, .h-*, fractional widths)
- Border and text alignment utilities
- Flexbox utilities (direction, wrap, justify, align, flex-items)
- Responsive layout modifiers across all breakpoints (sm:, md:, lg:, xl:, 2xl:)
### Sub-task 3.2: Advanced Breakpoint Management

379
static/css/utilities.css
View file

@ -145,110 +145,120 @@
}
/* =================================================================
RESPONSIVE GRID VARIATION CLASSES
RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
================================================================= */
/* Small breakpoint (640px and up) */
@media (min-width: 640px) {
.sm\:grid {
display: grid;
}
.sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sm\:col-span-1 { grid-column: span 1 / span 1; }
.sm\:col-span-2 { grid-column: span 2 / span 2; }
.sm\:col-span-3 { grid-column: span 3 / span 3; }
.sm\:col-span-4 { grid-column: span 4 / span 4; }
.sm\:col-span-5 { grid-column: span 5 / span 5; }
.sm\:col-span-6 { grid-column: span 6 / span 6; }
.sm\:col-span-7 { grid-column: span 7 / span 7; }
.sm\:col-span-8 { grid-column: span 8 / span 8; }
.sm\:col-span-9 { grid-column: span 9 / span 9; }
.sm\:col-span-10 { grid-column: span 10 / span 10; }
.sm\:col-span-11 { grid-column: span 11 / span 11; }
.sm\:col-span-12 { grid-column: span 12 / span 12; }
/* Responsive Width - Small and up */
@media (min-width: var(--breakpoint-sm)) {
.sm\:w-full { width: 100%; }
.sm\:w-auto { width: auto; }
.sm\:w-1\/2 { width: 50%; }
.sm\:w-1\/3 { width: 33.333333%; }
.sm\:w-2\/3 { width: 66.666667%; }
.sm\:w-1\/4 { width: 25%; }
.sm\:w-3\/4 { width: 75%; }
}
/* Medium breakpoint (768px and up) */
@media (min-width: 768px) {
.md\:grid {
display: grid;
}
.md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.md\:col-span-1 { grid-column: span 1 / span 1; }
.md\:col-span-2 { grid-column: span 2 / span 2; }
.md\:col-span-3 { grid-column: span 3 / span 3; }
.md\:col-span-4 { grid-column: span 4 / span 4; }
.md\:col-span-5 { grid-column: span 5 / span 5; }
.md\:col-span-6 { grid-column: span 6 / span 6; }
.md\:col-span-7 { grid-column: span 7 / span 7; }
.md\:col-span-8 { grid-column: span 8 / span 8; }
.md\:col-span-9 { grid-column: span 9 / span 9; }
.md\:col-span-10 { grid-column: span 10 / span 10; }
.md\:col-span-11 { grid-column: span 11 / span 11; }
.md\:col-span-12 { grid-column: span 12 / span 12; }
/* Responsive Width - Medium and up */
@media (min-width: var(--breakpoint-md)) {
.md\:w-full { width: 100%; }
.md\:w-auto { width: auto; }
.md\:w-1\/2 { width: 50%; }
.md\:w-1\/3 { width: 33.333333%; }
.md\:w-2\/3 { width: 66.666667%; }
.md\:w-1\/4 { width: 25%; }
.md\:w-3\/4 { width: 75%; }
}
/* Large breakpoint (1024px and up) */
@media (min-width: 1024px) {
.lg\:grid {
display: grid;
}
.lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.lg\:col-span-1 { grid-column: span 1 / span 1; }
.lg\:col-span-2 { grid-column: span 2 / span 2; }
.lg\:col-span-3 { grid-column: span 3 / span 3; }
.lg\:col-span-4 { grid-column: span 4 / span 4; }
.lg\:col-span-5 { grid-column: span 5 / span 5; }
.lg\:col-span-6 { grid-column: span 6 / span 6; }
.lg\:col-span-7 { grid-column: span 7 / span 7; }
.lg\:col-span-8 { grid-column: span 8 / span 8; }
.lg\:col-span-9 { grid-column: span 9 / span 9; }
.lg\:col-span-10 { grid-column: span 10 / span 10; }
.lg\:col-span-11 { grid-column: span 11 / span 11; }
.lg\:col-span-12 { grid-column: span 12 / span 12; }
/* Responsive Width - Large and up */
@media (min-width: var(--breakpoint-lg)) {
.lg\:w-full { width: 100%; }
.lg\:w-auto { width: auto; }
.lg\:w-1\/2 { width: 50%; }
.lg\:w-1\/3 { width: 33.333333%; }
.lg\:w-2\/3 { width: 66.666667%; }
.lg\:w-1\/4 { width: 25%; }
.lg\:w-3\/4 { width: 75%; }
}
/* Extra Large breakpoint (1280px and up) */
@media (min-width: 1280px) {
/* Responsive Width - Extra Large and up */
@media (min-width: var(--breakpoint-xl)) {
.xl\:w-full { width: 100%; }
.xl\:w-auto { width: auto; }
.xl\:w-1\/2 { width: 50%; }
.xl\:w-1\/3 { width: 33.333333%; }
.xl\:w-2\/3 { width: 66.666667%; }
.xl\:w-1\/4 { width: 25%; }
.xl\:w-3\/4 { width: 75%; }
}
/* Responsive Width - 2XL and up */
@media (min-width: var(--breakpoint-2xl)) {
.2xl\:w-full { width: 100%; }
.2xl\:w-auto { width: auto; }
.2xl\:w-1\/2 { width: 50%; }
.2xl\:w-1\/3 { width: 33.333333%; }
.2xl\:w-2\/3 { width: 66.666667%; }
.2xl\:w-1\/4 { width: 25%; }
.2xl\:w-3\/4 { width: 75%; }
}
/* Responsive Height - Small and up */
@media (min-width: var(--breakpoint-sm)) {
.sm\:h-full { height: 100%; }
.sm\:h-auto { height: auto; }
.sm\:h-screen { height: 100vh; }
.sm\:h-1\/2 { height: 50%; }
.sm\:h-1\/3 { height: 33.333333%; }
.sm\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - Medium and up */
@media (min-width: var(--breakpoint-md)) {
.md\:h-full { height: 100%; }
.md\:h-auto { height: auto; }
.md\:h-screen { height: 100vh; }
.md\:h-1\/2 { height: 50%; }
.md\:h-1\/3 { height: 33.333333%; }
.md\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - Large and up */
@media (min-width: var(--breakpoint-lg)) {
.lg\:h-full { height: 100%; }
.lg\:h-auto { height: auto; }
.lg\:h-screen { height: 100vh; }
.lg\:h-1\/2 { height: 50%; }
.lg\:h-1\/3 { height: 33.333333%; }
.lg\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - Extra Large and up */
@media (min-width: var(--breakpoint-xl)) {
.xl\:h-full { height: 100%; }
.xl\:h-auto { height: auto; }
.xl\:h-screen { height: 100vh; }
.xl\:h-1\/2 { height: 50%; }
.xl\:h-1\/3 { height: 33.333333%; }
.xl\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - 2XL and up */
@media (min-width: var(--breakpoint-2xl)) {
.2xl\:h-full { height: 100%; }
.2xl\:h-auto { height: auto; }
.2xl\:h-screen { height: 100vh; }
.2xl\:h-1\/2 { height: 50%; }
.2xl\:h-1\/3 { height: 33.333333%; }
.2xl\:h-2\/3 { height: 66.666667%; }
}
/* =================================================================
RESPONSIVE GRID VARIATION CLASSES - Extra Large breakpoint (xl and up)
================================================================= */
/* Extra Large breakpoint (xl and up) */
@media (min-width: var(--breakpoint-xl)) {
.xl\:grid {
display: grid;
}
@ -280,8 +290,12 @@
.xl\:col-span-12 { grid-column: span 12 / span 12; }
}
/* 2XL breakpoint (1536px and up) */
@media (min-width: 1536px) {
/* =================================================================
RESPONSIVE GRID VARIATION CLASSES - 2XL breakpoint (2xl and up)
================================================================= */
/* 2XL breakpoint (2xl and up) */
@media (min-width: var(--breakpoint-2xl)) {
.2xl\:grid {
display: grid;
}
@ -337,34 +351,34 @@
width: 100%;
}
/* Breakpoint-specific containers */
@media (min-width: 640px) {
/* Breakpoint-specific containers - Using responsive container system */
@media (min-width: var(--breakpoint-sm)) {
.container-sm {
max-width: var(--container-sm, 640px);
max-width: var(--container-sm);
}
}
@media (min-width: 768px) {
@media (min-width: var(--breakpoint-md)) {
.container-md {
max-width: var(--container-md, 768px);
max-width: var(--container-md);
}
}
@media (min-width: 1024px) {
@media (min-width: var(--breakpoint-lg)) {
.container-lg {
max-width: var(--container-lg, 1024px);
max-width: var(--container-lg);
}
}
@media (min-width: 1280px) {
@media (min-width: var(--breakpoint-xl)) {
.container-xl {
max-width: var(--container-xl, 1280px);
max-width: var(--container-xl);
}
}
@media (min-width: 1536px) {
@media (min-width: var(--breakpoint-2xl)) {
.container-2xl {
max-width: var(--container-2xl, 1536px);
max-width: var(--container-2xl);
}
}
@ -517,26 +531,139 @@
.fixed { position: fixed; }
.sticky { position: sticky; }
/* Width and Height Utilities */
/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-2\/4 { width: 50%; }
.w-3\/4 { width: 75%; }
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }
/* Height Utilities */
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-2\/3 { height: 66.666667%; }
.h-1\/4 { height: 25%; }
.h-2\/4 { height: 50%; }
.h-3\/4 { height: 75%; }
/* =================================================================
RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
================================================================= */
/* Responsive Width - Small and up */
@media (min-width: var(--breakpoint-sm)) {
.sm\:w-full { width: 100%; }
.sm\:w-auto { width: auto; }
.sm\:w-1\/2 { width: 50%; }
.sm\:w-1\/3 { width: 33.333333%; }
.sm\:w-2\/3 { width: 66.666667%; }
.sm\:w-1\/4 { width: 25%; }
.sm\:w-3\/4 { width: 75%; }
}
/* Responsive Width - Medium and up */
@media (min-width: var(--breakpoint-md)) {
.md\:w-full { width: 100%; }
.md\:w-auto { width: auto; }
.md\:w-1\/2 { width: 50%; }
.md\:w-1\/3 { width: 33.333333%; }
.md\:w-2\/3 { width: 66.666667%; }
.md\:w-1\/4 { width: 25%; }
.md\:w-3\/4 { width: 75%; }
}
/* Responsive Width - Large and up */
@media (min-width: var(--breakpoint-lg)) {
.lg\:w-full { width: 100%; }
.lg\:w-auto { width: auto; }
.lg\:w-1\/2 { width: 50%; }
.lg\:w-1\/3 { width: 33.333333%; }
.lg\:w-2\/3 { width: 66.666667%; }
.lg\:w-1\/4 { width: 25%; }
.lg\:w-3\/4 { width: 75%; }
}
/* Responsive Width - Extra Large and up */
@media (min-width: var(--breakpoint-xl)) {
.xl\:w-full { width: 100%; }
.xl\:w-auto { width: auto; }
.xl\:w-1\/2 { width: 50%; }
.xl\:w-1\/3 { width: 33.333333%; }
.xl\:w-2\/3 { width: 66.666667%; }
.xl\:w-1\/4 { width: 25%; }
.xl\:w-3\/4 { width: 75%; }
}
/* Responsive Width - 2XL and up */
@media (min-width: var(--breakpoint-2xl)) {
.2xl\:w-full { width: 100%; }
.2xl\:w-auto { width: auto; }
.2xl\:w-1\/2 { width: 50%; }
.2xl\:w-1\/3 { width: 33.333333%; }
.2xl\:w-2\/3 { width: 66.666667%; }
.2xl\:w-1\/4 { width: 25%; }
.2xl\:w-3\/4 { width: 75%; }
}
/* Responsive Height - Small and up */
@media (min-width: var(--breakpoint-sm)) {
.sm\:h-full { height: 100%; }
.sm\:h-auto { height: auto; }
.sm\:h-screen { height: 100vh; }
.sm\:h-1\/2 { height: 50%; }
.sm\:h-1\/3 { height: 33.333333%; }
.sm\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - Medium and up */
@media (min-width: var(--breakpoint-md)) {
.md\:h-full { height: 100%; }
.md\:h-auto { height: auto; }
.md\:h-screen { height: 100vh; }
.md\:h-1\/2 { height: 50%; }
.md\:h-1\/3 { height: 33.333333%; }
.md\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - Large and up */
@media (min-width: var(--breakpoint-lg)) {
.lg\:h-full { height: 100%; }
.lg\:h-auto { height: auto; }
.lg\:h-screen { height: 100vh; }
.lg\:h-1\/2 { height: 50%; }
.lg\:h-1\/3 { height: 33.333333%; }
.lg\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - Extra Large and up */
@media (min-width: var(--breakpoint-xl)) {
.xl\:h-full { height: 100%; }
.xl\:h-auto { height: auto; }
.xl\:h-screen { height: 100vh; }
.xl\:h-1\/2 { height: 50%; }
.xl\:h-1\/3 { height: 33.333333%; }
.xl\:h-2\/3 { height: 66.666667%; }
}
/* Responsive Height - 2XL and up */
@media (min-width: var(--breakpoint-2xl)) {
.2xl\:h-full { height: 100%; }
.2xl\:h-auto { height: auto; }
.2xl\:h-screen { height: 100vh; }
.2xl\:h-1\/2 { height: 50%; }
.2xl\:h-1\/3 { height: 33.333333%; }
.2xl\:h-2\/3 { height: 66.666667%; }
}
/* Border Utilities */
.border { border: 1px solid var(--color-border-primary); }
@ -555,8 +682,8 @@
RESPONSIVE LAYOUT MODIFIERS
================================================================= */
/* Responsive Display */
@media (min-width: 640px) {
/* Responsive Display - Using Breakpoint Custom Properties */
@media (min-width: var(--breakpoint-sm)) {
.sm\:block { display: block; }
.sm\:inline { display: inline; }
.sm\:inline-block { display: inline-block; }
@ -564,7 +691,7 @@
.sm\:none { display: none; }
}
@media (min-width: 768px) {
@media (min-width: var(--breakpoint-md)) {
.md\:block { display: block; }
.md\:inline { display: inline; }
.md\:inline-block { display: inline-block; }
@ -572,7 +699,7 @@
.md\:none { display: none; }
}
@media (min-width: 1024px) {
@media (min-width: var(--breakpoint-lg)) {
.lg\:block { display: block; }
.lg\:inline { display: inline; }
.lg\:inline-block { display: inline-block; }
@ -580,7 +707,7 @@
.lg\:none { display: none; }
}
@media (min-width: 1280px) {
@media (min-width: var(--breakpoint-xl)) {
.xl\:block { display: block; }
.xl\:inline { display: inline; }
.xl\:inline-block { display: inline-block; }
@ -588,7 +715,7 @@
.xl\:none { display: none; }
}
@media (min-width: 1536px) {
@media (min-width: var(--breakpoint-2xl)) {
.2xl\:block { display: block; }
.2xl\:inline { display: inline; }
.2xl\:inline-block { display: inline-block; }
@ -596,32 +723,32 @@
.2xl\:none { display: none; }
}
/* Responsive Text Alignment */
@media (min-width: 640px) {
/* Responsive Text Alignment - Using Breakpoint Custom Properties */
@media (min-width: var(--breakpoint-sm)) {
.sm\:text-left { text-align: left; }
.sm\:text-center { text-align: center; }
.sm\:text-right { text-align: right; }
}
@media (min-width: 768px) {
@media (min-width: var(--breakpoint-md)) {
.md\:text-left { text-align: left; }
.md\:text-center { text-align: center; }
.md\:text-right { text-align: right; }
}
@media (min-width: 1024px) {
@media (min-width: var(--breakpoint-lg)) {
.lg\:text-left { text-align: left; }
.lg\:text-center { text-align: center; }
.lg\:text-right { text-align: right; }
}
@media (min-width: 1280px) {
@media (min-width: var(--breakpoint-xl)) {
.xl\:text-left { text-align: left; }
.xl\:text-center { text-align: center; }
.xl\:text-right { text-align: right; }
}
@media (min-width: 1536px) {
@media (min-width: var(--breakpoint-2xl)) {
.2xl\:text-left { text-align: left; }
.2xl\:text-center { text-align: center; }
.2xl\:text-right { text-align: right; }

63
static/css/variables.css
View file

@ -245,24 +245,57 @@
--elevation-6: var(--shadow-dodgers-xl);
/* =================================================================
BREAKPOINT VARIABLES
BREAKPOINT VARIABLES - Comprehensive Responsive System
================================================================= */
/* Mobile-first breakpoints */
--breakpoint-xs: 320px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* Mobile-first breakpoints (includes xs where content starts) */
--breakpoint-xs: 320px; /* Extra small devices (320px and up) */
--breakpoint-sm: 640px; /* Small devices (640px and up) */
--breakpoint-md: 768px; /* Medium devices (768px and up) */
--breakpoint-lg: 1024px; /* Large devices (1024px and up) */
--breakpoint-xl: 1280px; /* Extra large devices (1280px and up) */
--breakpoint-2xl: 1536px; /* 2X large devices (1536px and up) */
/* Media query mixins (these will be used in component CSS) */
/* xs: 0px and up */
/* sm: 640px and up */
/* md: 768px and up */
/* lg: 1024px and up */
/* xl: 1280px and up */
/* 2xl: 1536px and up */
/* Container max-widths at each breakpoint */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Content padding that scales with breakpoints */
--container-padding-xs: var(--spacing-2);
--container-padding-sm: var(--spacing-4);
--container-padding-md: var(--spacing-6);
--container-padding-lg: var(--spacing-8);
--container-padding-xl: var(--spacing-10);
--container-padding-2xl: var(--spacing-12);
/* =================================================================
BREAKPOINT MIXIN SYSTEM & UTILITIES
================================================================= */
/* Media query helpers using custom properties */
--mq-xs: (min-width: var(--breakpoint-xs));
--mq-sm: (min-width: var(--breakpoint-sm));
--mq-md: (min-width: var(--breakpoint-md));
--mq-lg: (min-width: var(--breakpoint-lg));
--mq-xl: (min-width: var(--breakpoint-xl));
--mq-2xl: (min-width: var(--breakpoint-2xl));
/* Max-width media queries for desktop-first approach */
--mq-xs-max: (max-width: calc(var(--breakpoint-sm) - 1px));
--mq-sm-max: (max-width: calc(var(--breakpoint-md) - 1px));
--mq-md-max: (max-width: calc(var(--breakpoint-lg) - 1px));
--mq-lg-max: (max-width: calc(var(--breakpoint-xl) - 1px));
--mq-xl-max: (max-width: calc(var(--breakpoint-2xl) - 1px));
/* Combined breakpoint utilities */
--mq-sm-only: (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px));
--mq-md-only: (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px));
--mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
--mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));
/* =================================================================
Z-INDEX SCALE