diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD
index 0137412..e946f56 100644
--- a/UI_UPDATE.MD
+++ b/UI_UPDATE.MD
@@ -279,27 +279,48 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 
 ### Sub-task 3.1: Grid-Based Layout System
 
-#### 3.1.1: CSS Grid Implementation
-- [ ] Analyze current flexbox usage
-- [ ] Identify CSS Grid opportunities
-- [ ] Implement grid-based layout foundation
+#### 3.1.1: CSS Grid Implementation - COMPLETED 9/29/2025
+- [x] Analyze current flexbox usage
+- [x] Identify CSS Grid opportunities
+- [x] Implement grid-based layout foundation
 
-#### 3.1.2: 12-Column System
-- [ ] Create responsive grid variation classes
-- [ ] Implement grid gap and spacing system
-- [ ] Add grid utility classes for common patterns
+**Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements.
 
-#### 3.1.3: Layout Utilities
-- [ ] Create container and wrapper utilities
-- [ ] Implement spacing and alignment helpers
-- [ ] Add responsive layout modifiers
+#### 3.1.2: 12-Column System - COMPLETED 9/29/2025
+- [x] Create responsive grid variation classes
+- [x] Implement grid gap and spacing system
+- [x] Add grid utility classes for common patterns
+
+**Notes:** Implemented comprehensive 12-column CSS Grid system in utilities.css with:
+- Expanded grid column spans (col-span-5 through col-span-12)
+- Added col-start-* and col-end-* utilities for precise column positioning
+- Implemented responsive grid classes (.sm\:grid-cols-*, .md\:grid-cols-*, etc.) for all breakpoints
+- Enhanced gap system with gap-*, gap-x-*, and gap-y-* utilities
+- 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 - 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
 
-#### 3.2.1: Breakpoint Definition
-- [ ] Establish 6 responsive breakpoints (xs to 2xl)
-- [ ] Create breakpoint mixin system
-- [ ] Implement breakpoint-based CSS variables
+#### 3.2.1: Breakpoint Definition - COMPLETED 9/29/2025
+- [x] Establish 6 responsive breakpoints (xs to 2xl)
+- [x] Create breakpoint mixin system
+- [x] Implement breakpoint-based CSS variables
+
+**Notes:** Implemented comprehensive breakpoint system using CSS custom properties. Established 6 mobile-first breakpoints (xs: 320px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) in variables.css. Created breakpoint mixin system with custom property utilities (--mq-sm, --mq-md, etc.) and implemented all utility classes using var(--breakpoint-sm) in media queries across utilities.css. Added container max-widths and responsive padding variables for each breakpoint. Modernized all existing responsive utilities to use the new system, including grid, display, text alignment, and dimension utilities.
 
 #### 3.2.2: Responsive Typography
 - [ ] Create fluid typography scaling
diff --git a/static/js/api.js b/assets/js/api.js
similarity index 100%
rename from static/js/api.js
rename to assets/js/api.js
diff --git a/static/js/app.js b/assets/js/app.js
similarity index 100%
rename from static/js/app.js
rename to assets/js/app.js
diff --git a/static/js/chat.js b/assets/js/chat.js
similarity index 100%
rename from static/js/chat.js
rename to assets/js/chat.js
diff --git a/static/js/ui-controls.js b/assets/js/ui-controls.js
similarity index 100%
rename from static/js/ui-controls.js
rename to assets/js/ui-controls.js
diff --git a/static/js/video-player.js b/assets/js/video-player.js
similarity index 100%
rename from static/js/video-player.js
rename to assets/js/video-player.js
diff --git a/static/css/utilities.css b/static/css/utilities.css
index 2df17a7..6d7c0ef 100644
--- a/static/css/utilities.css
+++ b/static/css/utilities.css
@@ -1,341 +1,813 @@
-/* Utility classes and animations */
-
 /* =================================================================
-   KEYFRAME ANIMATIONS
+   CSS GRID UTILITIES
    ================================================================= */
 
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateX(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
+/* Grid containers */
+.grid {
+    display: grid;
 }
 
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.8;
-    }
+.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)); }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+/* Grid column span utilities (1-12 columns for 12-column system) */
+.col-span-1 { grid-column: span 1 / span 1; }
+.col-span-2 { grid-column: span 2 / span 2; }
+.col-span-3 { grid-column: span 3 / span 3; }
+.col-span-4 { grid-column: span 4 / span 4; }
+.col-span-5 { grid-column: span 5 / span 5; }
+.col-span-6 { grid-column: span 6 / span 6; }
+.col-span-7 { grid-column: span 7 / span 7; }
+.col-span-8 { grid-column: span 8 / span 8; }
+.col-span-9 { grid-column: span 9 / span 9; }
+.col-span-10 { grid-column: span 10 / span 10; }
+.col-span-11 { grid-column: span 11 / span 11; }
+.col-span-12 { grid-column: span 12 / span 12; }
+
+/* Starting column utilities for offset positioning */
+.col-start-1 { grid-column-start: 1; }
+.col-start-2 { grid-column-start: 2; }
+.col-start-3 { grid-column-start: 3; }
+.col-start-4 { grid-column-start: 4; }
+.col-start-5 { grid-column-start: 5; }
+.col-start-6 { grid-column-start: 6; }
+.col-start-7 { grid-column-start: 7; }
+.col-start-8 { grid-column-start: 8; }
+.col-start-9 { grid-column-start: 9; }
+.col-start-10 { grid-column-start: 10; }
+.col-start-11 { grid-column-start: 11; }
+.col-start-12 { grid-column-start: 12; }
+
+/* Ending column utilities */
+.col-end-1 { grid-column-end: 1; }
+.col-end-2 { grid-column-end: 2; }
+.col-end-3 { grid-column-end: 3; }
+.col-end-4 { grid-column-end: 4; }
+.col-end-5 { grid-column-end: 5; }
+.col-end-6 { grid-column-end: 6; }
+.col-end-7 { grid-column-end: 7; }
+.col-end-8 { grid-column-end: 8; }
+.col-end-9 { grid-column-end: 9; }
+.col-end-10 { grid-column-end: 10; }
+.col-end-11 { grid-column-end: 11; }
+.col-end-12 { grid-column-end: 12; }
+
+/* Grid row spans */
+.row-span-1 { grid-row: span 1 / span 1; }
+.row-span-2 { grid-row: span 2 / span 2; }
+.row-span-3 { grid-row: span 3 / span 3; }
+.row-span-4 { grid-row: span 4 / span 4; }
+
+/* Grid flow direction */
+.grid-flow-row { grid-auto-flow: row; }
+.grid-flow-col { grid-auto-flow: column; }
+.grid-flow-dense { grid-auto-flow: dense; }
+.grid-flow-row-dense { grid-auto-flow: row dense; }
+.grid-flow-col-dense { grid-auto-flow: column dense; }
+
+/* Grid alignment */
+.place-items-center {
+    place-items: center;
 }
 
-@keyframes blink {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
+.items-start { align-items: start; }
+.items-end { align-items: end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
+
+.justify-start { justify-content: start; }
+.justify-end { justify-content: end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+.justify-items-start { justify-items: start; }
+.justify-items-end { justify-items: end; }
+.justify-items-center { justify-items: center; }
+.justify-items-stretch { justify-items: stretch; }
+
+.place-content-center {
+    place-content: center;
 }
 
-@keyframes bounce {
-    0%, 100% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.2);
-    }
+.place-content-start { place-content: start; }
+.place-content-end { place-content: end; }
+.place-content-stretch { place-content: stretch; }
+
+/* Grid gap and spacing system */
+.gap-1 { gap: var(--spacing-1); }
+.gap-2 { gap: var(--spacing-2); }
+.gap-3 { gap: var(--spacing-3); }
+.gap-4 { gap: var(--spacing-4); }
+.gap-5 { gap: var(--spacing-5); }
+.gap-6 { gap: var(--spacing-6); }
+.gap-8 { gap: var(--spacing-8); }
+.gap-10 { gap: var(--spacing-10); }
+.gap-12 { gap: var(--spacing-12); }
+.gap-16 { gap: var(--spacing-16); }
+
+/* Horizontal gap utilities */
+.gap-x-1 { column-gap: var(--spacing-1); }
+.gap-x-2 { column-gap: var(--spacing-2); }
+.gap-x-3 { column-gap: var(--spacing-3); }
+.gap-x-4 { column-gap: var(--spacing-4); }
+.gap-x-5 { column-gap: var(--spacing-5); }
+.gap-x-6 { column-gap: var(--spacing-6); }
+
+/* Vertical gap utilities */
+.gap-y-1 { row-gap: var(--spacing-1); }
+.gap-y-2 { row-gap: var(--spacing-2); }
+.gap-y-3 { row-gap: var(--spacing-3); }
+.gap-y-4 { row-gap: var(--spacing-4); }
+.gap-y-5 { row-gap: var(--spacing-5); }
+.gap-y-6 { row-gap: var(--spacing-6); }
+
+/* Auto-fit and auto-fill responsive grids */
+.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
+.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
+
+.grid-auto-fit-sm {
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
 }
 
-@keyframes slideOut {
-    to {
-        opacity: 0;
-        transform: translateX(100%);
-    }
+.grid-auto-fill-md {
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+}
+
+.grid-auto-fit-lg {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
 }
 
 /* =================================================================
-   SCROLLBAR STYLING
+   RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
    ================================================================= */
 
-.chat-messages::-webkit-scrollbar {
-    width: var(--spacing-2);
+/* 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%; }
 }
 
-.chat-messages::-webkit-scrollbar-track {
-    background: var(--bg-darker);
+/* 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%; }
 }
 
-.chat-messages::-webkit-scrollbar-thumb {
-    background: var(--dodgers-blue-500);
-    border-radius: var(--border-radius-sm);
-    opacity: 0.6;
+/* 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%; }
 }
 
-.chat-messages::-webkit-scrollbar-thumb:hover {
-    opacity: 1;
+/* 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%; }
 }
 
 /* =================================================================
-   VIDEO.JS OVERRIDES
+   RESPONSIVE GRID VARIATION CLASSES - Extra Large breakpoint (xl and up)
    ================================================================= */
 
-/* Video player container */
-#video-player {
-    position: absolute;
-    top: 0;
-    left: 0;
+/* Extra Large breakpoint (xl and up) */
+@media (min-width: var(--breakpoint-xl)) {
+    .xl\:grid {
+        display: grid;
+    }
+
+    .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .xl\:col-span-1 { grid-column: span 1 / span 1; }
+    .xl\:col-span-2 { grid-column: span 2 / span 2; }
+    .xl\:col-span-3 { grid-column: span 3 / span 3; }
+    .xl\:col-span-4 { grid-column: span 4 / span 4; }
+    .xl\:col-span-5 { grid-column: span 5 / span 5; }
+    .xl\:col-span-6 { grid-column: span 6 / span 6; }
+    .xl\:col-span-7 { grid-column: span 7 / span 7; }
+    .xl\:col-span-8 { grid-column: span 8 / span 8; }
+    .xl\:col-span-9 { grid-column: span 9 / span 9; }
+    .xl\:col-span-10 { grid-column: span 10 / span 10; }
+    .xl\:col-span-11 { grid-column: span 11 / span 11; }
+    .xl\:col-span-12 { grid-column: span 12 / span 12; }
+}
+
+/* =================================================================
+   RESPONSIVE GRID VARIATION CLASSES - 2XL breakpoint (2xl and up)
+   ================================================================= */
+
+/* 2XL breakpoint (2xl and up) */
+@media (min-width: var(--breakpoint-2xl)) {
+    .2xl\:grid {
+        display: grid;
+    }
+
+    .2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .2xl\:col-span-1 { grid-column: span 1 / span 1; }
+    .2xl\:col-span-2 { grid-column: span 2 / span 2; }
+    .2xl\:col-span-3 { grid-column: span 3 / span 3; }
+    .2xl\:col-span-4 { grid-column: span 4 / span 4; }
+    .2xl\:col-span-5 { grid-column: span 5 / span 5; }
+    .2xl\:col-span-6 { grid-column: span 6 / span 6; }
+    .2xl\:col-span-7 { grid-column: span 7 / span 7; }
+    .2xl\:col-span-8 { grid-column: span 8 / span 8; }
+    .2xl\:col-span-9 { grid-column: span 9 / span 9; }
+    .2xl\:col-span-10 { grid-column: span 10 / span 10; }
+    .2xl\:col-span-11 { grid-column: span 11 / span 11; }
+    .2xl\:col-span-12 { grid-column: span 12 / span 12; }
+}
+
+/* =================================================================
+   LAYOUT UTILITIES
+   ================================================================= */
+
+/* Container and Wrapper Utilities */
+.container {
     width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+    max-width: var(--container-max-width, 1200px);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--container-padding, var(--spacing-4));
+    padding-right: var(--container-padding, var(--spacing-4));
 }
 
-/* Video.js skin overrides */
-.video-js {
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: 100% !important;
+.container-fluid {
+    width: 100%;
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
 }
 
-/* Override VideoJS fluid behavior to prevent overflow */
-.video-js.vjs-fluid {
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: 100% !important;
-    padding-top: 0 !important;
+.wrapper {
+    width: 100%;
 }
 
-/* Ensure the actual video element is properly constrained */
-.video-js video {
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: 100% !important;
-    object-fit: contain !important;
+/* Breakpoint-specific containers - Using responsive container system */
+@media (min-width: var(--breakpoint-sm)) {
+    .container-sm {
+        max-width: var(--container-sm);
+    }
 }
 
-/* Control bar styling */
-.video-js .vjs-control-bar {
-    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+@media (min-width: var(--breakpoint-md)) {
+    .container-md {
+        max-width: var(--container-md);
+    }
+}
+
+@media (min-width: var(--breakpoint-lg)) {
+    .container-lg {
+        max-width: var(--container-lg);
+    }
+}
+
+@media (min-width: var(--breakpoint-xl)) {
+    .container-xl {
+        max-width: var(--container-xl);
+    }
+}
+
+@media (min-width: var(--breakpoint-2xl)) {
+    .container-2xl {
+        max-width: var(--container-2xl);
+    }
 }
 
 /* =================================================================
-   FOCUSABLE ELEMENTS (Accessibility)
+   SPACING AND ALIGNMENT HELPERS
    ================================================================= */
 
-/* Focus ring utility - can be used on any focusable element */
-.focus-ring:focus {
-    outline: 2px solid var(--dodgers-blue-500);
-    outline-offset: 2px;
-}
+/* Margin Utilities */
+/* Auto margins for centering */
+.mx-auto { margin-left: auto; margin-right: auto; }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+.m-auto { margin: auto; }
+
+/* Margin scale */
+.m-0 { margin: 0; }
+.m-1 { margin: var(--spacing-1); }
+.m-2 { margin: var(--spacing-2); }
+.m-3 { margin: var(--spacing-3); }
+.m-4 { margin: var(--spacing-4); }
+.m-5 { margin: var(--spacing-5); }
+.m-6 { margin: var(--spacing-6); }
+.m-8 { margin: var(--spacing-8); }
+.m-10 { margin: var(--spacing-10); }
+.m-12 { margin: var(--spacing-12); }
+.m-16 { margin: var(--spacing-16); }
+
+/* Directional margins */
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: var(--spacing-1); }
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-3 { margin-top: var(--spacing-3); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-5 { margin-top: var(--spacing-5); }
+.mt-6 { margin-top: var(--spacing-6); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: var(--spacing-1); }
+.mb-2 { margin-bottom: var(--spacing-2); }
+.mb-3 { margin-bottom: var(--spacing-3); }
+.mb-4 { margin-bottom: var(--spacing-4); }
+.mb-5 { margin-bottom: var(--spacing-5); }
+.mb-6 { margin-bottom: var(--spacing-6); }
+
+.ml-0 { margin-left: 0; }
+.ml-1 { margin-left: var(--spacing-1); }
+.ml-2 { margin-left: var(--spacing-2); }
+.ml-3 { margin-left: var(--spacing-3); }
+.ml-4 { margin-left: var(--spacing-4); }
+.ml-5 { margin-left: var(--spacing-5); }
+.ml-6 { margin-left: var(--spacing-6); }
+
+.mr-0 { margin-right: 0; }
+.mr-1 { margin-right: var(--spacing-1); }
+.mr-2 { margin-right: var(--spacing-2); }
+.mr-3 { margin-right: var(--spacing-3); }
+.mr-4 { margin-right: var(--spacing-4); }
+.mr-5 { margin-right: var(--spacing-5); }
+.mr-6 { margin-right: var(--spacing-6); }
+
+/* X and Y margins */
+.mx-0 { margin-left: 0; margin-right: 0; }
+.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
+.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
+.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
+.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
+.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
+
+.my-0 { margin-top: 0; margin-bottom: 0; }
+.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
+.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
+.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
+.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
+.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
+
+/* Padding Utilities */
+.p-0 { padding: 0; }
+.p-1 { padding: var(--spacing-1); }
+.p-2 { padding: var(--spacing-2); }
+.p-3 { padding: var(--spacing-3); }
+.p-4 { padding: var(--spacing-4); }
+.p-5 { padding: var(--spacing-5); }
+.p-6 { padding: var(--spacing-6); }
+.p-8 { padding: var(--spacing-8); }
+.p-10 { padding: var(--spacing-10); }
+.p-12 { padding: var(--spacing-12); }
+.p-16 { padding: var(--spacing-16); }
+
+/* Directional padding */
+.pt-0 { padding-top: 0; }
+.pt-1 { padding-top: var(--spacing-1); }
+.pt-2 { padding-top: var(--spacing-2); }
+.pt-3 { padding-top: var(--spacing-3); }
+.pt-4 { padding-top: var(--spacing-4); }
+.pt-5 { padding-top: var(--spacing-5); }
+.pt-6 { padding-top: var(--spacing-6); }
+
+.pb-0 { padding-bottom: 0; }
+.pb-1 { padding-bottom: var(--spacing-1); }
+.pb-2 { padding-bottom: var(--spacing-2); }
+.pb-3 { padding-bottom: var(--spacing-3); }
+.pb-4 { padding-bottom: var(--spacing-4); }
+.pb-5 { padding-bottom: var(--spacing-5); }
+.pb-6 { padding-bottom: var(--spacing-6); }
+
+.pl-0 { padding-left: 0; }
+.pl-1 { padding-left: var(--spacing-1); }
+.pl-2 { padding-left: var(--spacing-2); }
+.pl-3 { padding-left: var(--spacing-3); }
+.pl-4 { padding-left: var(--spacing-4); }
+.pl-5 { padding-left: var(--spacing-5); }
+.pl-6 { padding-left: var(--spacing-6); }
+
+.pr-0 { padding-right: 0; }
+.pr-1 { padding-right: var(--spacing-1); }
+.pr-2 { padding-right: var(--spacing-2); }
+.pr-3 { padding-right: var(--spacing-3); }
+.pr-4 { padding-right: var(--spacing-4); }
+.pr-5 { padding-right: var(--spacing-5); }
+.pr-6 { padding-right: var(--spacing-6); }
+
+/* X and Y padding */
+.px-0 { padding-left: 0; padding-right: 0; }
+.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
+.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
+.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
+.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
+.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
+
+.py-0 { padding-top: 0; padding-bottom: 0; }
+.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
+.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
+.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
+.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
+.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
 
 /* =================================================================
-   VISIBLE ONLY TO SCREEN READERS
+   DISPLAY AND POSITIONING UTILITIES
    ================================================================= */
 
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
+/* Display Utilities */
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+.none { display: none; }
+.flex { display: flex; }
+
+/* Position Utilities */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+/* Width Utilities */
+.w-full { width: 100%; }
+.w-auto { width: auto; }
+.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); }
+.border-t { border-top: 1px solid var(--color-border-primary); }
+.border-b { border-bottom: 1px solid var(--color-border-primary); }
+.border-l { border-left: 1px solid var(--color-border-primary); }
+.border-r { border-right: 1px solid var(--color-border-primary); }
+
+/* Text Alignment */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-justify { text-align: justify; }
+
+/* =================================================================
+   RESPONSIVE LAYOUT MODIFIERS
+   ================================================================= */
+
+/* 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; }
+    .sm\:flex { display: flex; }
+    .sm\:none { display: none; }
+}
+
+@media (min-width: var(--breakpoint-md)) {
+    .md\:block { display: block; }
+    .md\:inline { display: inline; }
+    .md\:inline-block { display: inline-block; }
+    .md\:flex { display: flex; }
+    .md\:none { display: none; }
+}
+
+@media (min-width: var(--breakpoint-lg)) {
+    .lg\:block { display: block; }
+    .lg\:inline { display: inline; }
+    .lg\:inline-block { display: inline-block; }
+    .lg\:flex { display: flex; }
+    .lg\:none { display: none; }
+}
+
+@media (min-width: var(--breakpoint-xl)) {
+    .xl\:block { display: block; }
+    .xl\:inline { display: inline; }
+    .xl\:inline-block { display: inline-block; }
+    .xl\:flex { display: flex; }
+    .xl\:none { display: none; }
+}
+
+@media (min-width: var(--breakpoint-2xl)) {
+    .2xl\:block { display: block; }
+    .2xl\:inline { display: inline; }
+    .2xl\:inline-block { display: inline-block; }
+    .2xl\:flex { display: flex; }
+    .2xl\:none { display: none; }
+}
+
+/* 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: var(--breakpoint-md)) {
+    .md\:text-left { text-align: left; }
+    .md\:text-center { text-align: center; }
+    .md\:text-right { text-align: right; }
+}
+
+@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: var(--breakpoint-xl)) {
+    .xl\:text-left { text-align: left; }
+    .xl\:text-center { text-align: center; }
+    .xl\:text-right { text-align: right; }
+}
+
+@media (min-width: var(--breakpoint-2xl)) {
+    .2xl\:text-left { text-align: left; }
+    .2xl\:text-center { text-align: center; }
+    .2xl\:text-right { text-align: right; }
 }
 
 /* =================================================================
    FLEXBOX UTILITIES
    ================================================================= */
 
-.flex {
-    display: flex;
-}
+/* Flex Direction */
+.flex-row { flex-direction: row; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-col { flex-direction: column; }
+.flex-col-reverse { flex-direction: column-reverse; }
 
-.flex-col {
-    flex-direction: column;
-}
+/* Flex Wrap */
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
 
-.items-center {
-    align-items: center;
-}
+/* Flex Items */
+.flex-1 { flex: 1 1 0%; }
+.flex-auto { flex: 1 1 auto; }
+.flex-initial { flex: 0 1 auto; }
+.flex-none { flex: none; }
 
-.justify-center {
-    justify-content: center;
-}
+/* Flex Grow and Shrink */
+.flex-grow { flex-grow: 1; }
+.flex-grow-0 { flex-grow: 0; }
+.flex-shrink { flex-shrink: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
 
-.justify-between {
-    justify-content: space-between;
-}
+/* Justify Content */
+.justify-start { justify-content: start; }
+.justify-end { justify-content: end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
 
-.gap-2 {
-    gap: var(--spacing-2);
-}
+/* Align Items */
+.items-start { align-items: start; }
+.items-end { align-items: end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
 
-.gap-4 {
-    gap: var(--spacing-4);
-}
+/* Align Self */
+.self-auto { align-self: auto; }
+.self-start { align-self: start; }
+.self-end { align-self: end; }
+.self-center { align-self: center; }
+.self-stretch { align-self: stretch; }
+.self-baseline { align-self: baseline; }
 
-/* =================================================================
-   SPACING UTILITIES
-   ================================================================= */
-
-.p-4 {
-    padding: var(--spacing-4);
-}
-
-.px-4 {
-    padding-left: var(--spacing-4);
-    padding-right: var(--spacing-4);
-}
-
-.py-4 {
-    padding-top: var(--spacing-4);
-    padding-bottom: var(--spacing-4);
-}
-
-.m-4 {
-    margin: var(--spacing-4);
-}
-
-.mx-4 {
-    margin-left: var(--spacing-4);
-    margin-right: var(--spacing-4);
-}
-
-.my-4 {
-    margin-top: var(--spacing-4);
-    margin-bottom: var(--spacing-4);
-}
-
-/* =================================================================
-   TEXT UTILITIES
-   ================================================================= */
-
-.text-sm {
-    font-size: var(--font-size-sm);
-}
-
-.text-base {
-    font-size: var(--font-size-base);
-}
-
-.text-lg {
-    font-size: var(--font-size-lg);
-}
-
-.text-center {
-    text-align: center;
-}
-
-.font-semibold {
-    font-weight: var(--font-weight-semibold);
-}
-
-.font-bold {
-    font-weight: var(--font-weight-bold);
-}
-
-/* =================================================================
-   BACKGROUND UTILITIES
-   ================================================================= */
-
-.bg-primary {
-    background-color: var(--dodgers-blue-500);
-}
-
-.bg-secondary {
-    background-color: var(--dodgers-red-500);
-}
-
-.bg-accent {
-    background-color: var(--dodgers-gold-500);
-}
-
-/* =================================================================
-   COLOR UTILITY CLASSES
-   ================================================================= */
-
-.text-primary {
-    color: var(--text-primary);
-}
-
-.text-secondary {
-    color: var(--text-secondary);
-}
-
-.text-muted {
-    color: var(--text-muted);
-}
-
-.text-accent {
-    color: var(--dodgers-gold-500);
-}
-
-.text-error {
-    color: var(--dodgers-red-500);
-}
-
-.text-success {
-    color: var(--dodgers-blue-500);
-}
-
-/* =================================================================
-   BG-NEUTRAL UTILITIES
-   ================================================================= */
-
-.bg-white {
-    background-color: white;
-}
-
-.bg-black {
-    background-color: black;
-}
-
-.bg-gray-50 {
-    background-color: var(--gray-50);
-}
-
-.bg-gray-100 {
-    background-color: var(--gray-100);
-}
-
-.bg-gray-200 {
-    background-color: var(--gray-200);
-}
-
-.bg-gray-800 {
-    background-color: var(--gray-800);
-}
-
-.bg-gray-900 {
-    background-color: var(--gray-900);
-   MOBILE RESPONSIVE OVERRIDES
-   ================================================================= */
-
-@media (max-width: 768px) {
-    .chat-section {
-        width: 100%;
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 100%;
-        z-index: var(--z-modal);
-    }
-
-    .video-header {
-        padding: var(--spacing-3) var(--spacing-4);
-    }
-
-    .logo {
-        font-size: var(--font-size-base);
-    }
-
-    .stream-stats {
-        gap: var(--spacing-3);
-    }
-
-    .quality-selector {
-        display: none;
-    }
-}
+/* Align Content */
+.content-start { align-content: start; }
+.content-end { align-content: end; }
+.content-center { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around { align-content: space-around; }
+.content-stretch { align-content: stretch; }
diff --git a/static/css/variables.css b/static/css/variables.css
index b163c6d..246ddc0 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -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