feat: responsive card pages

src/components/Button/Button.css

@@ -1,47 +1,36 @@
 .btn {
-  width: 100%;
-  height: 100%;
-
   display: flex;
   align-items: center;
   justify-content: center;
 
   box-sizing: border-box;
 
+  min-height: var(--card-control-height);
+
   padding: 0 var(--space-4);
 
+  border: var(--border-width) solid transparent;
   border-radius: var(--radius-sm);
 
   font-family: var(--font-ui);
-  font-size: 13px;
-  font-weight: 500;
+  font-size: var(--font-md);
+  font-weight: var(--font-weight-medium);
 
   cursor: pointer;
-  border: 1px solid transparent;
 }
 
 .btn:disabled {
-  opacity: 0.45;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
 .btn-primary {
   background: var(--accent-brand);
-  color: #0d0f12;
-}
-
-.btn-ghost {
-  background: transparent;
-  border-color: var(--border-hairline);
-  color: var(--text-muted);
-}
-
-.btn-toggle {
-  background: transparent;
-  border-color: var(--border-hairline);
-  color: var(--text-muted);
+  color: var(--bg-void);
 }
 
+.btn-ghost,
+.btn-toggle,
 .btn-outline {
   background: transparent;
   border-color: var(--border-hairline);