From 9eb0786bcc62db30a62780f2a343ea567ca02b1f Mon Sep 17 00:00:00 2001
From: Michele <michele@mlhub.it>
Date: Sun, 1 Feb 2026 17:35:25 +0100
Subject: [PATCH] Fix: Google button hover text visibility

- Add btn-outline CSS class with explicit hover state
- Button outline variant now properly shows cream text on hover
- Add text-cream utility class

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/globals.css          | 14 ++++++++++++++
 src/components/ui/button.tsx |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 049d95a..be01870 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -134,6 +134,19 @@ h1, h2, h3, h4, h5, h6,
   color: var(--color-cream);
 }
 
+/* Button outline variant - explicit hover fix */
+.btn-outline {
+  background-color: transparent;
+  color: var(--color-ink);
+  border: 2px solid var(--color-ink);
+  transition: all 0.2s ease;
+}
+
+.btn-outline:hover {
+  background-color: var(--color-ink);
+  color: var(--color-cream);
+}
+
 /* Cards */
 .card-editorial {
   background-color: white;
@@ -180,6 +193,7 @@ textarea:focus {
 .text-muted { color: var(--color-ink-muted); }
 .text-ink { color: var(--color-ink); }
 .text-ink-light { color: var(--color-ink-light); }
+.text-cream { color: var(--color-cream); }
 
 /* Background colors */
 .bg-cream { background-color: var(--color-cream); }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 1e14704..e37377b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -17,9 +17,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           // Variants
           {
             // Primary - Black button
-            'bg-ink text-cream hover:bg-accent': variant === 'default',
-            // Outline - Border button
-            'border-2 border-ink bg-transparent text-ink hover:bg-ink hover:text-cream': variant === 'outline',
+            'btn-primary': variant === 'default',
+            // Outline - Border button (uses CSS class for reliable hover)
+            'btn-outline': variant === 'outline',
             // Ghost - No background
             'text-ink hover:bg-cream-dark': variant === 'ghost',
             // Accent - Coral button