diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 72955e154..9a36206bf 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -12,8 +12,8 @@
 :root,
 .zenLooksAndFeelColorOption {
   /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
-  * in the preferences page.
-  */
+   * in the preferences page.
+   */
 
   /* Default values */
   --zen-border-radius: 7px;
@@ -46,21 +46,21 @@
 
   --in-content-primary-button-background: color-mix(
     in srgb,
-    var(--zen-primary-color) 10%,
-    var(--zen-branding-bg) 90%
+    var(--zen-primary-color) 30%,
+    var(--zen-branding-bg-reverse) 70%
   ) !important;
   --in-content-primary-button-background-hover: color-mix(
     in srgb,
-    var(--zen-primary-color) 15%,
-    var(--zen-branding-bg) 85%
+    var(--zen-primary-color) 35%,
+    var(--zen-branding-bg-reverse) 65%
   ) !important;
   --in-content-primary-button-background-active: color-mix(
     in srgb,
-    var(--zen-primary-color) 20%,
-    var(--zen-branding-bg) 80%
+    var(--zen-primary-color) 40%,
+    var(--zen-branding-bg-reverse) 60%
   ) !important;
-  --button-text-color-primary: var(--zen-branding-bg-reverse) !important;
-  --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
+  --button-text-color-primary: var(--zen-branding-bg) !important;
+  --in-content-primary-button-text-color: var(--zen-branding-bg) !important;
   --in-content-primary-button-border-color: transparent !important;
   --in-content-primary-button-border-hover: transparent !important;
   --in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -72,7 +72,7 @@
   /* This is like the secondary button */
   --in-content-button-background: transparent !important;
   --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
-  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important;
+  --in-content-button-background-hover: color-mix(in srgb, currentColor 3%, transparent 97%) !important;
   --button-bgcolor: var(--in-content-button-background) !important;
   --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
   --button-hover-color: var(--in-content-button-text-color-hover) !important;
@@ -88,7 +88,7 @@
 
   --button-background-color: var(--in-content-button-background) !important;
   --button-background-color-hover: var(--in-content-button-background-hover) !important;
-  --button-background-color-active: var(--in-content-primary-button-background-active) !important;
+  --button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important;
 
   --color-accent-primary: var(--button-primary-bgcolor) !important;
   --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
@@ -180,9 +180,9 @@
   --zen-native-inner-radius: var(
     --zen-webview-border-radius,
     /* Inner radius calculation:
-      * 1. If the native radius - the separation is less than 4px, use 4px.
-      * 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
-    */
+       * 1. If the native radius - the separation is less than 4px, use 4px.
+       * 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
+     */
       max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2))
   );