feat: Complete light mode implementation with semantic theme system (#450)

- Add comprehensive light/dark mode CSS variables with semantic naming
- Implement theme-aware scrollbars using CSS variables
- Add light mode backgrounds: --bg-base, --bg-elevated, --bg-surface, etc.
- Add theme-aware borders: --border-base, --border-panel, --border-subtle
- Add semantic text colors: --foreground-secondary, --foreground-subtle
- Convert oklch colors to hex for better compatibility
- Add theme awareness to CodeMirror editors
- Update dark mode colors for consistency (background, sidebar, card, muted, input)
- Add Tailwind color mappings for semantic classes

Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com>

src/ui/mobile/apps/navigation/hosts/FolderCard.tsx

@@ -53,9 +53,9 @@ export function FolderCard({
   };
 
   return (
-    <div className="bg-dark-bg-darker border-2 border-dark-border rounded-lg overflow-hidden p-0 m-0">
+    <div className="bg-elevated border-2 border-edge rounded-lg overflow-hidden p-0 m-0">
       <div
-        className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-dark-bg-header`}
+        className={`px-4 py-3 relative ${isExpanded ? "border-b-2" : ""} bg-header`}
       >
         <div className="flex gap-2 pr-10">
           <div className="flex-shrink-0 flex items-center">