Create styles/responsive.css

ui/styles/responsive.css

@@ -0,0 +1,161 @@
+/* ui/styles/responsive.css - Mobile-First Responsive Utilities */
+
+/* Mobile-first: default styles are for mobile */
+.container {
+  padding: 0 var(--spacing-4);
+}
+
+/* Hide/show utilities for different screen sizes */
+.mobile-only {
+  display: block;
+}
+
+.tablet-only {
+  display: none;
+}
+
+.desktop-only {
+  display: none;
+}
+
+/* Responsive grid columns */
+.grid-2, .grid-3, .grid-4 {
+  grid-template-columns: 1fr;
+}
+
+/* Responsive typography */
+.text-responsive {
+  font-size: 0.875rem;
+}
+
+/* Responsive spacing */
+.responsive-padding {
+  padding: var(--spacing-4);
+}
+
+/* Tablet styles (≥ 768px) */
+@media (min-width: 768px) {
+  .container {
+    padding: 0 var(--spacing-6);
+  }
+  
+  .mobile-only {
+    display: none;
+  }
+  
+  .tablet-only {
+    display: block;
+  }
+  
+  .grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .text-responsive {
+    font-size: 1rem;
+  }
+  
+  .responsive-padding {
+    padding: var(--spacing-6);
+  }
+}
+
+/* Desktop styles (≥ 1024px) */
+@media (min-width: 1024px) {
+  .container {
+    padding: 0 var(--spacing-8);
+  }
+  
+  .tablet-only {
+    display: none;
+  }
+  
+  .desktop-only {
+    display: block;
+  }
+  
+  .grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  .text-responsive {
+    font-size: 1.125rem;
+  }
+  
+  .responsive-padding {
+    padding: var(--spacing-8);
+  }
+}
+
+/* Large desktop (≥ 1280px) */
+@media (min-width: 1280px) {
+  .text-responsive {
+    font-size: 1.25rem;
+  }
+}
+
+/* Ultra-wide screens (≥ 1536px) */
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1400px;
+  }
+}
+
+/* Touch-friendly styles for mobile */
+@media (hover: none) and (pointer: coarse) {
+  .btn, button, [role="button"] {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  input, select, textarea {
+    font-size: 16px; /* Prevents iOS zoom on focus */
+  }
+}
+
+/* Reduce motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .card {
+    border: 2px solid var(--color-text);
+  }
+  
+  .btn {
+    border: 2px solid currentColor;
+  }
+}
+
+/* Print styles */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+  
+  .card {
+    border: 1px solid #000;
+    box-shadow: none;
+  }
+  
+  a {
+    color: #000;
+    text-decoration: underline;
+  }
+}