Update

styles/buttons.css

@@ -1,13 +1,13 @@
 :root {
   /* Colors */
-  --btn-bg-primary: #267361;
-  --btn-bg-primary-hover: #267361;
+  --btn-bg-primary: var(--color-accent);
+  --btn-bg-primary-hover: var(--color-accent);
   --btn-bg-primary-active: #353030;
 
   --btn-text-light: #fefcfb;
-  --btn-text-dark: #267361;
+  --btn-text-dark: var(--color-accent);
 
-  --btn-border-primary: #267361;
+  --btn-border-primary: var(--color-accent);
   --btn-border-ghost: #e9e9e9;
   --btn-border-ghost-hover: #ececec;
   --btn-border-ghost-active: #e1e1e1;
@@ -25,20 +25,21 @@
   --btn-focus-offset: 2px;
 
   /* Layout */
-  --btn-py: 12px;
-  --btn-px: 16px;
+  --btn-py: 8px;
+  --btn-px: 12px;
   --btn-py-lg: 16px;
-  --btn-px-lg: 24px;
+  --btn-px-lg: 20px;
   --btn-radius: 50px;
   --btn-gap: 8px;
-  --btn-max-height: 52px;
+  --btn-max-height: 46px;
+  --btn-min-height: 38px;
   --btn-icon-size: 18px;
   --btn-tertiary-px: 4px;
 
   /* Typography */
   --btn-font-family: var(--font-body);
-  --btn-font-size: 0.889rem;
-  --btn-font-weight: var(--font-weight-bold);
+  --btn-font-size: var(--font-size-xs);
+  --btn-font-weight: var(--font-weight-medium);
   --btn-line-height: 1;
 
   /* Shadow */
@@ -122,12 +123,37 @@
   transition: none;
 }
 
+/* Filled Inverse */
+.btn--filled-inverse {
+  background-color: #ffffff;
+  color: var(--color-accent);
+  border-color: #ffffff;
+  box-shadow: var(--btn-shadow);
+}
+
+.btn--filled-inverse .btn-icon {
+  color: currentColor;
+}
+
+.btn--filled-inverse:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(255, 255, 255, 0.9);
+  color: var(--color-accent);
+}
+
+.btn--filled-inverse:active {
+  background-color: rgba(255, 255, 255, 0.75);
+  border-color: rgba(255, 255, 255, 0.75);
+  transition: none;
+}
+
 /* Outline */
 .btn--outline {
   background-color: transparent;
   color: var(--btn-text-dark);
   border-color: var(--btn-border-primary);
   box-shadow: var(--btn-shadow-none);
+  min-height: var(--btn-min-height);
 }
 
 .btn--outline .btn-icon {
@@ -218,6 +244,12 @@
     border-color: var(--btn-bg-primary);
   }
 
+  .btn--filled-inverse:hover {
+    background-color: #ffffff;
+    border-color: #ffffff;
+    color: var(--color-accent);
+  }
+
   .btn--outline:hover {
     background-color: transparent;
     border-color: var(--btn-border-primary);
@@ -241,6 +273,5 @@
 @media (min-width: 768px) {
   .btn {
     padding: var(--btn-py-lg) var(--btn-px-lg);
-    font-size: 1rem;
   }
 }