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;
   }
 }

styles/tokens.css

@@ -47,10 +47,17 @@
   --color-surface-alt: #f9f9f9;
   --color-background: #ffffff;
   --color-background-alt: #f9f9f9;
+  --color-background-linear: linear-gradient(
+    to bottom,
+    #f9f9f9 5%,
+    #ffffff 50%,
+    #f9f9f9 100%
+  );
   --color-text: #171717;
-  --color-text-muted: #5f5f5f;
+  --color-text-muted: #4a4a4a;
   --color-text-soft: #7a7a7a;
   --color-heading: #171717;
+  --color-accent: #267361;
 
   /* Radius */
   --radius-none: 0;

styles/typography.css

@@ -1,8 +1,9 @@
 :root {
   /* Font sizes */
-  --font-size-body: 1rem;
-  --font-size-small: 0.875rem;
-  --font-size-lead: clamp(1rem, 2.15vw, 1.125rem);
+  --font-size-xs: clamp(0.79rem, 2vw, 0.889rem);
+  --font-size-s: 0.889rem;
+  --font-size-base: clamp(0.889rem, 2.2vw, 1rem);
+  --font-size-m: clamp(1rem, 2.15vw, 1.125rem);
 
   /* Fluid typography (768px to 1024px) */
   --font-size-h1: clamp(1.802rem, 5.71vw, 3.247rem);
@@ -12,7 +13,8 @@
   --font-size-h5: clamp(1.125rem, 2.82vw, 1.602rem);
 
   --line-height-body: 1.5;
-  --line-height-heading: 1.2;
+  --line-height-heading: 1.1;
+  --line-height-lead: 1.2;
 
   --letter-spacing-tight: -0.02em;
   --letter-spacing-normal: 0;
@@ -36,20 +38,20 @@ a {
 
 p,
 li {
-  font-size: var(--font-size-body);
+  font-size: var(--font-size-base);
   line-height: var(--line-height-body);
 }
 
-small,
+.small,
 .text-small {
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-xs);
   line-height: 1.4;
 }
 
 .lead,
 .text-lead {
-  font-size: var(--font-size-lead);
-  line-height: 1.4;
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-lead);
 }
 
 h1,