feat: complete UI redesign with dark mode, sidebar navigation, and modern design system

Implemented comprehensive UI overhaul with three-layer architecture:

Layer 1 - Theme System:
- CSS variables for light/dark themes (theme.css)
- Theme composable with light/dark/auto mode (useTheme.ts)
- Sidebar state management composable (useSidebar.ts)
- Refactored main.css to use CSS variables throughout

Layer 2 - Core Components:
- AppSidebar with collapsible navigation (desktop) and overlay (mobile)
- CollapsibleSection reusable component for expandable cards
- Restructured App.vue with new sidebar layout
- Integrated Lucide icons library (lucide-vue-next)

Layer 3 - Views & Components:
- Updated all 14 views with CSS variables and responsive design
- Replaced inline SVG with Lucide icon components
- Added collapsible sections to Dashboard, Admin pages, UserProfile
- Updated 3 shared components (BookingForm, SpaceCalendar, AttachmentsList)

Features:
- Dark/light/auto theme with persistent preference
- Collapsible sidebar (icons-only on desktop, overlay on mobile)
- Consistent color palette using CSS variables
- Full responsive design across all pages
- Modern minimalist aesthetic with Indigo accent color

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/views/Register.vue

@@ -145,12 +145,12 @@ const handleRegister = async () => {
 h2 {
   text-align: center;
   margin-bottom: 0.5rem;
-  color: #2c3e50;
+  color: var(--color-text-primary);
 }
 
 .subtitle {
   text-align: center;
-  color: #7f8c8d;
+  color: var(--color-text-secondary);
   margin-bottom: 2rem;
 }
 
@@ -158,7 +158,7 @@ h2 {
   display: block;
   margin-top: 0.25rem;
   font-size: 0.85rem;
-  color: #7f8c8d;
+  color: var(--color-text-secondary);
 }
 
 .btn-block {
@@ -169,11 +169,11 @@ h2 {
 .login-link {
   text-align: center;
   margin-top: 1.5rem;
-  color: #7f8c8d;
+  color: var(--color-text-secondary);
 }
 
 .login-link a {
-  color: #3498db;
+  color: var(--color-accent);
   text-decoration: none;
 }
 
@@ -184,18 +184,18 @@ h2 {
 .error {
   margin-top: 1rem;
   padding: 0.75rem;
-  background: #fee;
-  border-left: 3px solid #e74c3c;
-  border-radius: 4px;
-  color: #c0392b;
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  border-left: 3px solid var(--color-danger);
+  border-radius: var(--radius-sm);
+  color: var(--color-danger);
 }
 
 .success {
   margin-top: 1rem;
   padding: 0.75rem;
-  background: #d4edda;
-  border-left: 3px solid #28a745;
-  border-radius: 4px;
-  color: #155724;
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
+  border-left: 3px solid var(--color-success);
+  border-radius: var(--radius-sm);
+  color: var(--color-success);
 }
 </style>