Refactor UI with design system, tablet optimization, and enhanced styling

src/components/ui/Layout.module.css

@@ -1,13 +1,17 @@
 .layout {
   min-height: 100vh;
-  background-color: #1a1a1a;
-  color: white;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  display: flex;
+  flex-direction: column;
 }
 
 .content {
-  max-width: 800px;
+  flex: 1;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 16px;
+  padding: var(--space-md);
+  width: 100%;
 }
 
 .screen {
@@ -17,8 +21,24 @@
   flex-direction: column;
 }
 
-@media (max-width: 768px) {
+/* Tablet optimizations */
+@media (min-width: 768px) and (max-width: 1024px) {
   .content {
-    padding: 12px;
+    padding: var(--space-lg) var(--space-xl);
+    max-width: 900px;
+  }
+}
+
+/* Large tablet and small desktop */
+@media (min-width: 1025px) {
+  .content {
+    padding: var(--space-xl);
+  }
+}
+
+/* Mobile adjustments */
+@media (max-width: 767px) {
+  .content {
+    padding: var(--space-sm) var(--space-md);
   }
 }