feat(ui): add responsive mobile design tokens

src/app/sidebar/components/vip-benefits-card.module.css

@@ -17,7 +17,9 @@
   border-radius: 21px;
   width: 100%;
   box-sizing: border-box;
-  padding: 18px 0 18px 18px;
+  padding: var(--sidebar-card-padding-y, 18px) 0
+    var(--sidebar-card-padding-y, 18px)
+    var(--sidebar-card-padding-x, 18px);
   overflow: hidden;
 }
 
@@ -31,7 +33,7 @@
 
 .title {
   margin: 0;
-  font-size: var(--font-size-xxl);
+  font-size: var(--font-responsive-xl, 20px);
   font-weight: 700;
   color: #f657a0;
   line-height: 1.3;
@@ -63,7 +65,7 @@
   align-items: flex-start;
   gap: 0;
   padding: 0;
-  font-size: var(--font-size-lg);
+  font-size: var(--font-responsive-md, 16px);
   color: #1e1e1e;
   line-height: normal;
 }
@@ -104,7 +106,7 @@
     linear-gradient(#fb5e9d, #fb5e9d);
   background-blend-mode: normal, normal;
   color: var(--color-text-primary, #ffffff);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-responsive-md, 16px);
   font-weight: 600;
   border: 0;
   cursor: pointer;