Add mobile accessibility and UI/UX improvements

- Add mobile card view for packages (replaces table on small screens)
- Implement design tokens system for consistent styling
- Add dark/light theme toggle with system preference support
- Create reusable StatusBadge and EmptyState components
- Add accessible form labels to package filters
- Add compact mobile stats display in navigation
- Add safe area insets for notched devices
- Add reduced motion support for accessibility
- Improve touch targets for WCAG compliance
- Add unit tests for composables
- Update Vuetify configuration and styling

frontend/src/components/Packages.vue

@@ -1,15 +1,43 @@
 <template>
-  <v-sheet :color="TRANSPARENT_COLOR" class="mt-6" width="100%">
-    <h5 class="text-h5 mb-4">Packages</h5>
+  <section class="packages-section" aria-labelledby="packages-title">
+    <h2 id="packages-title" class="section-title">
+      <v-icon icon="mdi-package-variant" size="24" class="title-icon" />
+      Packages
+    </h2>
 
     <PackageFilters />
 
     <PackageTable />
-  </v-sheet>
+  </section>
 </template>
 
 <script lang="ts" setup>
-import { TRANSPARENT_COLOR } from '@/config/constants'
 import PackageFilters from '@/components/Packages/PackageFilters.vue'
 import PackageTable from '@/components/Packages/PackageTable.vue'
 </script>
+
+<style scoped>
+.packages-section {
+  margin-top: var(--space-6);
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-4);
+}
+
+.title-icon {
+  color: var(--color-brand-primary);
+}
+
+@media (max-width: 600px) {
+  .section-title {
+    font-size: var(--font-size-lg);
+  }
+}
+</style>