Add card shadow design tokens

Added --shadow-card and --shadow-card-hover tokens to the design system
and updated package cards to use them instead of hardcoded values.

This completes the package card redesign (DEV-247):
- Logo centered at top (64×64px)
- Title centered below logo
- Vertical centered layout with proper spacing
- Card shadow using design tokens
- Center-aligned content throughout

Design approved by CorporateDesigner.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

assets/css/main.css

@@ -77,6 +77,8 @@
   --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
   --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
   --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
+  --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
 
   /* Typography */
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

pages/packages/index.vue

@@ -85,13 +85,13 @@ useSeoMeta({
   flex-direction: column;
   align-items: center;
   text-align: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-card);
   min-width: 280px;
   max-width: 360px;
 }
 
 .package-card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-card-hover);
   transform: translateY(-2px);
   text-decoration: none;
 }