diff --git a/assets/css/main.css b/assets/css/main.css
index a23327d..126a496 100644
--- a/assets/css/main.css
+++ b/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;
diff --git a/pages/packages/index.vue b/pages/packages/index.vue
index ffad763..0c48ca1 100644
--- a/pages/packages/index.vue
+++ b/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;
 }