From c914cdff890a4c3200fedd16006a6d55741d39b0 Mon Sep 17 00:00:00 2001
From: Jose Cruz <jose.colorstack@gmail.com>
Date: Thu, 2 Jul 2026 21:55:56 -0400
Subject: [PATCH] fix(ui): tokenize residual brand-green literals (#103, #104)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Finish the frontend-audit P0 token migration by replacing the last raw
brand-green hex literals on main with the existing design tokens:

- globals.css: add --brand-forest-hover (#155A35), the hover-darken of the
  base forest, for primary-forest button :hover states.
- (public)/page.tsx: the beta-submit button's onMouseEnter now sets
  var(--brand-forest-hover) instead of the raw #155A35 — matching its
  onMouseLeave, which already used a token. Clears the last #155A35 literal
  (#103's AC2).
- HowItWorks.tsx: the seed-SVG stem / left-leaf / tip-bud used raw #1B6C42
  in static fill/stroke attributes; switch to var(--brand-forest) to match
  the ~20 other var(--brand-forest) sinks already in the same file. Clears
  the last #1B6C42 literals (#104's AC1).

Value-preserving: every swap resolves to the identical hex, so there is no
visual change — this is pure token hygiene that lets #103 and #104 close
with every acceptance box literally satisfied.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/app/(public)/page.tsx     | 2 +-
 frontend/src/app/globals.css           | 2 ++
 frontend/src/components/HowItWorks.tsx | 6 +++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx
index 1906987a..16f078b3 100644
--- a/frontend/src/app/(public)/page.tsx
+++ b/frontend/src/app/(public)/page.tsx
@@ -1151,7 +1151,7 @@ export default function LandingPage() {
                     transition: 'all 0.18s', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                     fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif",
                   }}
-                  onMouseEnter={e => { if (!betaSubmitting) e.currentTarget.style.background = '#155A35'; }}
+                  onMouseEnter={e => { if (!betaSubmitting) e.currentTarget.style.background = 'var(--brand-forest-hover)'; }}
                   onMouseLeave={e => { if (!betaSubmitting) e.currentTarget.style.background = 'var(--brand-forest)'; }}
                 >
                   {betaSubmitting ? 'Planting your node…' : <>Sign Me Up <span style={{ opacity: 0.7 }}>→</span></>}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 10fdfaed..be686a94 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -20,6 +20,8 @@
 
   /* Canonical brand green ("forest"). Mirrored by BRAND_FOREST in lib/brand.ts. */
   --brand-forest: #1B6C42;
+  /* Hover-darken of the base forest, for primary-forest button :hover states. */
+  --brand-forest-hover: #155A35;
   /* Brighter forest used for the primary CTA fill + the hero "growth" leaf. */
   --brand-forest-bright: #2D8F5C;
   --brand-forest-bright-hover: #236F48;
diff --git a/frontend/src/components/HowItWorks.tsx b/frontend/src/components/HowItWorks.tsx
index 932da395..d7bd97cb 100644
--- a/frontend/src/components/HowItWorks.tsx
+++ b/frontend/src/components/HowItWorks.tsx
@@ -42,14 +42,14 @@ function SeedSVG({ active }: { active: boolean }) {
       <g style={{ transformOrigin: '100px 215px', transform: 'scale(0.55)' }}>
         {/* Stem */}
         <motion.path d="M100 215 L100 137"
-          stroke="#1B6C42" strokeWidth="5" strokeLinecap="round"
+          stroke="var(--brand-forest)" strokeWidth="5" strokeLinecap="round"
           initial={{ pathLength: 0 }}
           animate={active ? { pathLength: 1 } : { pathLength: 0 }}
           transition={{ duration: 0.55, ease: 'easeOut' }}
         />
         {/* Left leaf */}
         <motion.path d="M100 167 C100 167 58 155 52 119 C52 119 94 113 100 167 Z"
-          fill="#1B6C42"
+          fill="var(--brand-forest)"
           initial={{ scale: 0 }} animate={active ? { scale: 1 } : { scale: 0 }}
           transition={{ duration: 0.55, delay: 0.42, ease: [0.34, 1.56, 0.64, 1] }}
           style={{ transformOrigin: '100px 167px' }}
@@ -62,7 +62,7 @@ function SeedSVG({ active }: { active: boolean }) {
           style={{ transformOrigin: '100px 143px' }}
         />
         {/* Tip bud */}
-        <motion.circle cx="100" cy="131" r="7" fill="#1B6C42"
+        <motion.circle cx="100" cy="131" r="7" fill="var(--brand-forest)"
           initial={{ scale: 0 }} animate={active ? { scale: 1 } : { scale: 0 }}
           transition={{ duration: 0.38, delay: 0.32, ease: [0.34, 1.56, 0.64, 1] }}
           style={{ transformOrigin: '100px 131px' }}