feat(ui): redesign desktop experience

tailwind.config.mjs

@@ -5,7 +5,7 @@ export default {
   theme: {
     extend: {
       colors: {
-        // iOS semantic palette
+        // Desktop semantic palette
         accent: 'rgb(var(--accent) / <alpha-value>)',
         'accent-soft': 'rgb(var(--accent-soft) / <alpha-value>)',
         'accent-2': 'rgb(var(--accent-2) / <alpha-value>)',
@@ -20,6 +20,9 @@ export default {
         surface: 'rgb(var(--surface) / <alpha-value>)',
         'surface-2': 'rgb(var(--surface-2) / <alpha-value>)',
         'surface-elevated': 'rgb(var(--surface-elevated) / <alpha-value>)',
+        sidebar: 'rgb(var(--sidebar) / <alpha-value>)',
+        'sidebar-text': 'rgb(var(--sidebar-text) / <alpha-value>)',
+        'sidebar-muted': 'rgb(var(--sidebar-muted) / <alpha-value>)',
 
         // Text & lines
         text: 'rgb(var(--text) / <alpha-value>)',
@@ -68,15 +71,14 @@ export default {
         ]
       },
       borderRadius: {
-        // iOS-specific radii
-        xl: '14px',
-        '2xl': '18px',
-        '3xl': '22px'
+        xl: '8px',
+        '2xl': '10px',
+        '3xl': '12px'
       },
       boxShadow: {
-        ios: '0 0.5px 0 rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04)',
+        ios: '0 1px 2px rgb(15 23 42 / 0.06), 0 10px 28px -24px rgb(15 23 42 / 0.35)',
         sheet:
-          '0 1px 2px rgb(0 0 0 / 0.06), 0 20px 50px -16px rgb(0 0 0 / 0.4)'
+          '0 1px 2px rgb(15 23 42 / 0.08), 0 24px 60px -28px rgb(15 23 42 / 0.45)'
       }
     }
   },