refactor(buy-flow): migrate hardcoded colors and spacing to design tokens

src/pages/card-buy/card-buy.vue

@@ -86,7 +86,7 @@ $bar-height: 120rpx;
 
 .page {
   min-height: 100vh;
-  background: #ffffff;
+  background: $color-card;
   padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
   font-family: $font-family-body;
 }
@@ -113,7 +113,7 @@ $bar-height: 120rpx;
   width: 100%;
   box-sizing: border-box;
   height: $bar-height;
-  background: #ffffff;
+  background: $color-card;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -138,14 +138,14 @@ $bar-height: 120rpx;
   font-family: $font-family-body;
   font-size: 28rpx;
   font-weight: 700;
-  color: #e53935;
+  color: $color-price;
 }
 
 .price-value {
   font-family: $font-family-body;
   font-size: 38rpx;
   font-weight: 700;
-  color: #e53935;
+  color: $color-price;
   line-height: 1;
 }