Simplify page and card surfaces

app/assets/css/main.css

@@ -96,10 +96,10 @@ body {
 .lk-content-canvas {
   border: 0;
   border-radius: 2rem;
-  background: color-mix(in oklab, var(--color-base-200) 78%, white);
+  background: color-mix(in oklab, #edf3ef 82%, white);
   box-shadow:
-    0 22px 60px rgba(16, 73, 44, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.35);
+    0 18px 46px rgba(16, 73, 44, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.32);
   padding: clamp(1rem, 1.2vw, 1.5rem);
 }
 
@@ -107,17 +107,24 @@ body {
   border: 0;
   background: #fff;
   box-shadow: none;
-  transition: box-shadow 0.2s ease;
-}
-
-.surface-card:hover {
-  box-shadow: 0 14px 32px rgba(24, 66, 44, 0.1);
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
 .surface-subcard {
   border: 0;
   border-radius: 1.5rem;
-  background: color-mix(in oklab, #ffffff 78%, var(--brand-surface));
+  background: #fff;
+}
+
+.surface-card-interactive {
+  cursor: pointer;
+}
+
+.surface-card-interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 38px rgba(18, 56, 36, 0.12);
 }
 
 .manager-hero {
@@ -199,7 +206,7 @@ body {
 .manager-mini-card {
   border: 0;
   border-radius: 1.2rem;
-  background: color-mix(in oklab, white 72%, var(--brand-muted));
+  background: #fff;
   padding: 0.9rem 1rem;
 }
 

app/components/orders/OrderSummaryCard.vue

@@ -70,7 +70,7 @@ const codeLabel = computed(() => formatOrderCode(props.code));
 <template>
   <NuxtLink
     :to="to"
-    class="surface-card group block rounded-[30px] border border-[#dbece2] bg-white px-4 py-4 transition hover:-translate-y-0.5 hover:shadow-[0_18px_40px_rgba(18,56,36,0.08)] md:px-5"
+    class="surface-card surface-card-interactive group block rounded-[30px] bg-white px-4 py-4 md:px-5"
   >
     <div class="grid gap-4 md:grid-cols-4 md:items-center md:gap-6">
       <div class="min-w-0">

app/pages/clients/index.vue

@@ -151,7 +151,7 @@ function userInitials(fullName: string) {
           v-for="user in filteredUsers"
           :key="user.id"
           :to="`/clients/${user.id}`"
-          class="surface-card flex min-h-[280px] flex-col rounded-[32px] p-6"
+          class="surface-card surface-card-interactive flex min-h-[280px] flex-col rounded-[32px] p-6"
         >
           <div class="flex justify-center">
             <img
@@ -189,7 +189,7 @@ function userInitials(fullName: string) {
           v-for="request in filteredRequests"
           :key="request.id"
           :to="`/clients/${request.id}?tab=requests`"
-          class="surface-card rounded-3xl p-5"
+          class="surface-card surface-card-interactive rounded-3xl p-5"
         >
           <div class="flex items-start justify-between gap-3">
             <div class="space-y-1">