style(responsive): migrate fixed UI sizes to tokens

src/app/subscription/components/subscription-plan-card.module.css

@@ -3,11 +3,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 154px;
-  padding: var(--spacing-sm) var(--spacing-xs) 0;
+  min-height: clamp(136px, 28.519vw, 154px);
+  padding:
+    clamp(7px, 1.481vw, 8px)
+    clamp(4px, 0.926vw, 5px)
+    0;
   background: #ffffff;
   border: 1px solid transparent;
-  border-radius: 20px;
+  border-radius: var(--responsive-card-radius-sm, 20px);
   border-style: solid;
   box-shadow: 0 5px 7px 0 rgba(247, 89, 168, 0.1);
   cursor: pointer;
@@ -32,12 +35,12 @@
 .selected {
   border-color: #f657a0;
   border-width: 3px;
-  border-radius: 20px;
+  border-radius: var(--responsive-card-radius-sm, 20px);
 }
 
 .name {
   margin-top: var(--spacing-lg);
-  font-size: var(--font-size-lg);
+  font-size: var(--responsive-body, var(--font-size-lg));
   font-weight: 500;
   color: var(--color-auth-text-primary);
   line-height: 1.2;
@@ -53,17 +56,17 @@
 }
 
 .currency {
-  font-size: var(--font-size-lg);
+  font-size: var(--responsive-body, var(--font-size-lg));
 }
 
 .price {
-  font-size: var(--font-size-40);
+  font-size: clamp(32px, 7.407vw, var(--font-size-40));
   line-height: 1;
 }
 
 .originalPrice {
   margin: 4px 0 var(--spacing-sm);
-  font-size: var(--font-size-lg);
+  font-size: var(--responsive-body, var(--font-size-lg));
   color: #999999;
   text-decoration: line-through;
   line-height: 1;
@@ -75,7 +78,7 @@
   padding: 6px 0;
   border-radius: 0;
   color: #ffffff;
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-caption, var(--font-size-md));
   font-weight: 600;
   text-align: center;
   line-height: 1.2;