Refactor AddButton styles for consistency; use CSS variables for spacing and dimensions

Author: markshenouda

src/components/CCIP/AddButton/AddButton.astro

@@ -16,14 +16,14 @@ const { href, text } = Astro.props
   .add-button {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2x);
     padding: var(--space-2x) var(--space-4x);
     border: 1px solid var(--tertiary-border);
-    border-radius: 4px;
+    border-radius: var(--space-1x);
     font-family: "Inter", sans-serif;
-    font-size: 12px;
+    font-size: var(--space-3x);
     font-weight: 600;
-    line-height: 16px;
+    line-height: var(--space-4x);
     color: var(--tertiary-foreground);
     text-decoration: none;
     background-color: transparent;
@@ -36,7 +36,7 @@ const { href, text } = Astro.props
   }
 
   .add-button-icon {
-    width: 12px;
-    height: 12px;
+    width: var(--space-3x);
+    height: var(--space-3x);
   }
 </style>