Light/dark theme system: CSS vars, ThemeToggle, anti-flash, Apple-clean light surfaces

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/Nav.jsx

@@ -1,5 +1,6 @@
 'use client'
 import { useState } from 'react'
+import ThemeToggle from './ThemeToggle'
 
 const LINKS = [
   { href: '#manifesto',  label: 'Why Fibe' },
@@ -43,6 +44,7 @@ export default function Nav() {
 
         {/* Desktop CTA */}
         <div className="hidden md:flex items-center gap-3">
+          <ThemeToggle />
           <a href="https://next.fibe.live/login"
             className="text-sm transition-colors"
             style={{color:'rgba(161,161,170,0.7)'}}>
@@ -57,6 +59,7 @@ export default function Nav() {
 
         {/* Mobile: CTA + hamburger */}
         <div className="flex md:hidden items-center gap-2">
+          <ThemeToggle />
           <a href="https://next.fibe.live/register"
             className="text-xs font-semibold px-3 py-1.5 rounded-lg"
             style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)'}}>

app/components/ThemeToggle.jsx

@@ -0,0 +1,58 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+export default function ThemeToggle() {
+  const [dark, setDark] = useState(true)
+
+  useEffect(() => {
+    // Read from localStorage (set by anti-flash script in layout)
+    const saved = localStorage.getItem('fibe-theme')
+    setDark(saved !== 'light')
+  }, [])
+
+  const toggle = () => {
+    const next = !dark
+    setDark(next)
+    if (next) {
+      document.documentElement.removeAttribute('data-theme')
+      localStorage.setItem('fibe-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light')
+      localStorage.setItem('fibe-theme', 'light')
+    }
+  }
+
+  return (
+    <button
+      onClick={toggle}
+      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+      title={dark ? 'Light mode' : 'Dark mode'}
+      className="w-8 h-8 flex items-center justify-center rounded-lg transition-all hover:scale-110"
+      style={{
+        color: dark ? 'rgba(167,139,250,0.7)' : 'rgba(124,58,237,0.7)',
+        background: dark ? 'rgba(139,92,246,0.1)' : 'rgba(124,58,237,0.08)',
+        border: dark ? '1px solid rgba(139,92,246,0.2)' : '1px solid rgba(124,58,237,0.18)',
+      }}
+    >
+      {dark ? (
+        // Sun icon
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+          <circle cx="7.5" cy="7.5" r="2.5" />
+          <line x1="7.5" y1="1" x2="7.5" y2="2.5" />
+          <line x1="7.5" y1="12.5" x2="7.5" y2="14" />
+          <line x1="1" y1="7.5" x2="2.5" y2="7.5" />
+          <line x1="12.5" y1="7.5" x2="14" y2="7.5" />
+          <line x1="2.93" y1="2.93" x2="3.99" y2="3.99" />
+          <line x1="11.01" y1="11.01" x2="12.07" y2="12.07" />
+          <line x1="2.93" y1="12.07" x2="3.99" y2="11.01" />
+          <line x1="11.01" y1="3.99" x2="12.07" y2="2.93" />
+        </svg>
+      ) : (
+        // Moon icon
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 9A6 6 0 0 1 5 2a6 6 0 1 0 7 7z" />
+        </svg>
+      )}
+    </button>
+  )
+}

app/globals.css

@@ -30,6 +30,47 @@
     --shadow-elevated: 0 8px 30px -4px rgb(0 0 0 / 0.5), 0 4px 10px -4px rgb(0 0 0 / 0.4);
     --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
     --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Semantic text scale — dark defaults */
+    --ft-primary:  rgba(250,250,250,0.92);
+    --ft-muted:    rgba(161,161,170,0.75);
+    --ft-subtle:   rgba(161,161,170,0.48);
+    --ft-dimmed:   rgba(161,161,170,0.32);
+    --ft-ghost:    rgba(161,161,170,0.2);
+    --ft-white:    rgba(255,255,255,0.9);
+
+    /* Section / surface */
+    --section-alt: rgba(139,92,246,0.025);
+  }
+
+  /* ─── LIGHT THEME ─── */
+  [data-theme="light"] {
+    --background: #f8f8f6;
+    --foreground: #18181b;
+    --card: #ffffff;
+    --card-foreground: #18181b;
+    --muted: #f1f0ee;
+    --muted-foreground: #71717a;
+    --accent: #f5f3ff;
+    --accent-foreground: #7c3aed;
+    --border: rgba(124, 58, 237, 0.18);
+    --border-subtle: rgba(124, 58, 237, 0.09);
+    --primary: #7c3aed;
+    --primary-dark: #6d28d9;
+    --primary-light: #8b5cf6;
+    --ring: #7c3aed;
+    --shadow-glass: 0 2px 24px 0 rgb(124 58 237 / 0.08);
+    --shadow-elevated: 0 2px 16px -2px rgb(0 0 0 / 0.1);
+
+    /* Text scale — light */
+    --ft-primary:  rgba(24,24,27,0.92);
+    --ft-muted:    rgba(39,39,42,0.68);
+    --ft-subtle:   rgba(39,39,42,0.48);
+    --ft-dimmed:   rgba(39,39,42,0.35);
+    --ft-ghost:    rgba(39,39,42,0.2);
+    --ft-white:    rgba(24,24,27,0.9);
+
+    --section-alt: rgba(124,58,237,0.03);
   }
 
   /* Phoenix logo animation */
@@ -89,6 +130,7 @@ body {
   background: var(--background);
   color: var(--foreground);
   min-height: 100vh;
+  transition: background 0.3s ease, color 0.3s ease;
 }
 
 /* Display font for headings */
@@ -96,14 +138,20 @@ body {
   font-family: var(--font-display);
 }
 
-/* Animated purple-indigo gradient background */
+/* ─── ANIMATED GRADIENT BACKGROUND ─── */
 .bg-fibe {
   background: linear-gradient(135deg, #0b0916 0%, #0f0c29 25%, #1a1540 50%, #261f5a 75%, #1e1a42 100%);
   background-size: 400% 400%;
   animation: gradientShift 18s ease infinite;
 }
 
-/* Subtle grid */
+[data-theme="light"] .bg-fibe {
+  background: linear-gradient(135deg, #ffffff 0%, #fdf9ff 25%, #f5efff 50%, #fdf9ff 75%, #ffffff 100%);
+  background-size: 400% 400%;
+  animation: gradientShift 18s ease infinite;
+}
+
+/* ─── GRID OVERLAY ─── */
 .grid-overlay {
   background-image:
     linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px),
@@ -111,7 +159,13 @@ body {
   background-size: 52px 52px;
 }
 
-/* Glass card */
+[data-theme="light"] .grid-overlay {
+  background-image:
+    linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px);
+}
+
+/* ─── GLASS CARDS ─── */
 .glass {
   background: rgba(255,255,255,0.03);
   border: 1px solid var(--border);
@@ -119,6 +173,14 @@ body {
   -webkit-backdrop-filter: blur(16px);
 }
 
+[data-theme="light"] .glass {
+  background: rgba(255,255,255,0.72);
+  border: 1px solid rgba(124,58,237,0.14);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 4px 20px rgba(124,58,237,0.06);
+}
+
 .glass-strong {
   background: rgba(26,21,37,0.7);
   border: 1px solid rgba(167,139,250,0.18);
@@ -127,7 +189,15 @@ body {
   box-shadow: var(--shadow-glass);
 }
 
-/* Glows */
+[data-theme="light"] .glass-strong {
+  background: rgba(255,255,255,0.9);
+  border: 1px solid rgba(124,58,237,0.18);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  box-shadow: 0 2px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(124,58,237,0.08);
+}
+
+/* ─── GLOW ORBS ─── */
 .glow-orb {
   position: absolute;
   border-radius: 50%;
@@ -135,7 +205,12 @@ body {
   filter: blur(1px);
 }
 
-/* Gradient text — display font hero */
+[data-theme="light"] .glow-orb {
+  opacity: 0.3;
+  filter: blur(2px);
+}
+
+/* ─── GRADIENT TEXT ─── */
 .gradient-text {
   background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #818cf8 80%, #93c5fd 100%);
   -webkit-background-clip: text;
@@ -143,7 +218,14 @@ body {
   background-clip: text;
 }
 
-/* Tags / pills */
+[data-theme="light"] .gradient-text {
+  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #4f46e5 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ─── TAGS / PILLS ─── */
 .tag {
   background: rgba(139,92,246,0.1);
   border: 1px solid rgba(139,92,246,0.2);
@@ -156,7 +238,52 @@ body {
   border-radius: 999px;
 }
 
-/* Scrollbar */
+[data-theme="light"] .tag {
+  background: rgba(124,58,237,0.07);
+  border-color: rgba(124,58,237,0.18);
+  color: #7c3aed;
+}
+
+/* ─── text-white override in light mode ─── */
+[data-theme="light"] .text-white {
+  color: #18181b !important;
+}
+
+/* ─── Terminal — always dark regardless of theme ─── */
+.terminal-mockup {
+  background: rgba(15,12,26,0.95);
+}
+[data-theme="light"] .terminal-mockup {
+  box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(124,58,237,0.15) !important;
+}
+[data-theme="light"] .terminal-mockup * {
+  /* Terminal internals stay dark — do NOT override */
+}
+
+/* ─── NAV border ─── */
+[data-theme="light"] nav {
+  background: rgba(248,248,246,0.85) !important;
+  border-bottom-color: rgba(124,58,237,0.12) !important;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
+}
+
+/* ─── Section border dividers ─── */
+[data-theme="light"] [style*="rgba(139,92,246,0.08)"] {
+  /* handled via CSS variable approach */
+}
+
+/* ─── Comparison table ─── */
+[data-theme="light"] .comparison-row:nth-child(even) {
+  background: rgba(124,58,237,0.02);
+}
+
+/* ─── Pulse glow — light adaptation ─── */
+[data-theme="light"] .animate-pulse-glow {
+  animation: none;
+  box-shadow: 0 4px 32px rgba(124,58,237,0.12);
+}
+
+/* ─── Scrollbar ─── */
 ::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-track { background: var(--background); }
 ::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.25); border-radius: 3px; }

app/layout.jsx

@@ -50,6 +50,10 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en" className="dark">
       <head>
+        {/* Anti-flash: apply saved theme before React hydrates */}
+        <script dangerouslySetInnerHTML={{__html:`
+          try{var t=localStorage.getItem('fibe-theme');if(t==='light')document.documentElement.setAttribute('data-theme','light');}catch(e){}
+        `}} />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{

app/page.jsx

@@ -28,12 +28,12 @@ export default function Home() {
           </h1>
 
           <p className="text-xl md:text-2xl max-w-2xl mx-auto mb-5 leading-relaxed"
-            style={{color:'rgba(255,255,255,0.55)'}}>
+            style={{color:'var(--ft-primary)'}}>
             Describe what you want to build. Fibe and its AI Genies handle the code,
             the servers, the SSL and the deploy — on <em className="not-italic" style={{color:'rgba(196,181,253,0.85)'}}>your</em> infrastructure.
           </p>
           <p className="text-base max-w-xl mx-auto mb-14"
-            style={{color:'rgba(161,161,170,0.4)'}}>
+            style={{color:'var(--ft-subtle)'}}>
             Zero DevOps. Zero local setup. Zero powerful hardware.
             Any device, anywhere in the world.
           </p>
@@ -46,13 +46,13 @@ export default function Home() {
             </a>
             <a href="https://github.com/fibegg/sdk"
               className="font-medium px-8 py-3.5 rounded-xl transition-all hover:text-white text-sm glass"
-              style={{color:'rgba(161,161,170,0.7)',borderColor:'rgba(139,92,246,0.15)'}}>
+              style={{color:'var(--ft-muted)',borderColor:'rgba(139,92,246,0.15)'}}>
               brew install fibegg/sdk/fibe ↗
             </a>
           </div>
 
-          {/* Terminal */}
+          {/* Terminal — stays dark in both themes */}
-          <div className="max-w-2xl mx-auto glass-strong rounded-2xl overflow-hidden animate-pulse-glow">
+          <div className="terminal-mockup max-w-2xl mx-auto glass-strong rounded-2xl overflow-hidden animate-pulse-glow">
             <div className="flex items-center gap-1.5 px-4 py-3"
               style={{borderBottom:'1px solid rgba(139,92,246,0.12)'}}>
               <span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(239,68,68,0.6)'}} />
@@ -61,20 +61,20 @@ export default function Home() {
               <span className="ml-3 text-xs font-mono" style={{color:'rgba(139,92,246,0.5)'}}>~ fibe sdk</span>
             </div>
             <div className="p-6 font-mono text-sm text-left leading-8">
-              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-emerald-400">brew install fibegg/sdk/fibe</span></p>
+              <p><span style={{color:'var(--ft-ghost)'}}>$</span> <span className="text-emerald-400">brew install fibegg/sdk/fibe</span></p>
-              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span style={{color:'#a78bfa'}}>fibe marquees connect</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--host my-vps.io</span></p>
+              <p><span style={{color:'var(--ft-ghost)'}}>$</span> <span style={{color:'#a78bfa'}}>fibe marquees connect</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--host my-vps.io</span></p>
               <p style={{color:'rgba(255,255,255,0.25)'}}>  <span className="text-emerald-400">✓</span> Marquee registered <span style={{color:'rgba(255,255,255,0.3)'}}>— Traefik, SSL, Docker ready</span></p>
-              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-blue-400">fibe launch</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--repo github.com/you/app --branch main</span></p>
+              <p><span style={{color:'var(--ft-ghost)'}}>$</span> <span className="text-blue-400">fibe launch</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--repo github.com/you/app --branch main</span></p>
               <p style={{color:'rgba(255,255,255,0.25)'}}>  <span className="text-emerald-400">✓</span> Cloning · building · routing · SSL · live</p>
               <p style={{color:'rgba(255,255,255,0.25)'}}>  <span className="text-emerald-400">✓</span> <span style={{color:'rgba(196,181,253,0.9)'}}>https://app.your-domain.com</span></p>
-              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-yellow-400">git push</span>  <span style={{color:'rgba(255,255,255,0.25)'}}># hot-reload. always.</span></p>
+              <p><span style={{color:'var(--ft-ghost)'}}>$</span> <span className="text-yellow-400">git push</span>  <span style={{color:'rgba(255,255,255,0.25)'}}># hot-reload. always.</span></p>
             </div>
           </div>
         </div>
       </section>
 
       {/* ── MANIFESTO ── */}
-      <section id="manifesto" className="py-20 px-6 relative" style={{borderTop:'1px solid rgba(139,92,246,0.08)',background:'rgba(139,92,246,0.025)'}}>
+      <section id="manifesto" className="py-20 px-6 relative" style={{borderTop:'1px solid rgba(139,92,246,0.08)',background:'var(--section-alt)'}}>
         <div className="max-w-5xl mx-auto">
           <p className="text-xs font-semibold uppercase tracking-widest text-center mb-14"
             style={{color:'rgba(139,92,246,0.55)'}}>The old way is dead</p>
@@ -86,7 +86,7 @@ export default function Home() {
             ].map(({dead, alive}) => (
               <div key={dead}>
                 <p className="font-display text-2xl mb-3"
-                  style={{color:'rgba(161,161,170,0.25)',letterSpacing:'-0.01em',textDecoration:'line-through'}}>
+                  style={{color:'var(--ft-dimmed)',letterSpacing:'-0.01em',textDecoration:'line-through'}}>
                   {dead}
                 </p>
                 <p className="text-sm leading-relaxed" style={{color:'rgba(196,181,253,0.65)'}}>{alive}</p>
@@ -113,7 +113,7 @@ export default function Home() {
                   <span className="tag" style={{background:'rgba(167,139,250,0.15)',borderColor:'rgba(167,139,250,0.3)',color:'#c4b5fd'}}>recommended</span>
                 </div>
                 <h3 className="font-semibold text-white mb-3 text-lg">Let Genies write the code</h3>
-                <p className="text-sm leading-relaxed mb-6" style={{color:'rgba(161,161,170,0.7)'}}>
+                <p className="text-sm leading-relaxed mb-6" style={{color:'var(--ft-muted)'}}>
                   No coding experience? No problem. Describe your idea in plain English.
                   A Genie plans it, builds it, tests it and ships it. You just review and approve.
                 </p>
@@ -128,7 +128,7 @@ export default function Home() {
             <div className="glass rounded-2xl p-8" style={{borderColor:'rgba(139,92,246,0.15)'}}>
               <div className="text-2xl mb-4">👨‍💻</div>
               <h3 className="font-semibold text-white mb-3 text-lg">You write the code</h3>
-              <p className="text-sm leading-relaxed mb-6" style={{color:'rgba(161,161,170,0.65)'}}>
+              <p className="text-sm leading-relaxed mb-6" style={{color:'var(--ft-muted)'}}>
                 Already a developer? Git push and Fibe handles the rest — builds,
                 routes, SSLs, hot-reloads. Your entire stack, live in seconds, on your own infra.
               </p>
@@ -163,7 +163,7 @@ export default function Home() {
             <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
               Anything that runs in Docker.
             </h2>
-            <p className="mt-4 max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.6)'}}>
+            <p className="mt-4 max-w-lg mx-auto" style={{color:'var(--ft-muted)'}}>
               If it has a Dockerfile, Fibe clones it, builds it, exposes it, routes it and SSLs it. Full stop.
             </p>
           </div>
@@ -183,7 +183,7 @@ export default function Home() {
                 style={{background:glow, borderColor:'rgba(255,255,255,0.06)'}}>
                 <div className="text-3xl mb-3">{icon}</div>
                 <h3 className="font-semibold text-sm text-white mb-1.5">{label}</h3>
-                <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
+                <p className="text-xs leading-relaxed" style={{color:'var(--ft-muted)'}}>{desc}</p>
               </div>
             ))}
           </div>
@@ -198,7 +198,7 @@ export default function Home() {
             <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
               Four steps to a live URL.
             </h2>
-            <p className="mt-4" style={{color:'rgba(161,161,170,0.6)'}}>
+            <p className="mt-4" style={{color:'var(--ft-muted)'}}>
               No architecture meetings. No ops tickets. No environment parity nightmares.
             </p>
           </div>
@@ -223,7 +223,7 @@ export default function Home() {
                     <h3 className="font-semibold text-white">{title}</h3>
                     <span className="tag">{badge}</span>
                   </div>
-                  <p className="text-sm leading-relaxed" style={{color:'rgba(161,161,170,0.7)'}}>{desc}</p>
+                  <p className="text-sm leading-relaxed" style={{color:'var(--ft-muted)'}}>{desc}</p>
                 </div>
               </div>
             ))}
@@ -241,7 +241,7 @@ export default function Home() {
             <h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
               Your cloud. 5 minutes to ready.
             </h2>
-            <p className="max-w-xl mx-auto" style={{color:'rgba(161,161,170,0.65)'}}>
+            <p className="max-w-xl mx-auto" style={{color:'var(--ft-muted)'}}>
               No prior cloud experience needed. Pick your provider, spin up a server,
               connect it to Fibe. Same three steps everywhere.
             </p>
@@ -254,12 +254,12 @@ export default function Home() {
               style={{color:'rgba(139,92,246,0.6)'}}>
               Steps 2 &amp; 3 are identical on every provider
             </p>
-            <div className="font-mono text-xs leading-7 text-center" style={{color:'rgba(161,161,170,0.6)'}}>
+            <div className="font-mono text-xs leading-7 text-center" style={{color:'var(--ft-muted)'}}>
-              <span style={{color:'rgba(255,255,255,0.2)'}}>$</span>{' '}
+              <span style={{color:'var(--ft-ghost)'}}>$</span>{' '}
               <span className="text-emerald-400">curl -fsSL https://get.docker.com | sh</span>
-              {'  '}<span style={{color:'rgba(255,255,255,0.2)'}}>← install Docker</span>
+              {'  '}<span style={{color:'var(--ft-ghost)'}}>← install Docker</span>
               <br />
-              <span style={{color:'rgba(255,255,255,0.2)'}}>$</span>{' '}
+              <span style={{color:'var(--ft-ghost)'}}>$</span>{' '}
               <span style={{color:'#a78bfa'}}>fibe marquees connect</span>{' '}
               <span style={{color:'rgba(255,255,255,0.35)'}}>--host YOUR_IP</span>
               {'  '}<span className="text-emerald-400">✓ done</span>
@@ -326,7 +326,7 @@ export default function Home() {
                       style={{background:'rgba(139,92,246,0.2)',color:'#a78bfa'}}>1</span>
                     <span className="text-sm font-semibold text-white">{step1}</span>
                   </div>
-                  <p className="text-xs leading-relaxed pl-7 mb-2" style={{color:'rgba(161,161,170,0.6)'}}>{step1desc}</p>
+                  <p className="text-xs leading-relaxed pl-7 mb-2" style={{color:'var(--ft-muted)'}}>{step1desc}</p>
                   <a href={step1link} target="_blank" rel="noopener noreferrer"
                     className="text-xs pl-7 inline-flex items-center gap-1 transition-colors hover:opacity-80"
                     style={{color}}>
@@ -369,7 +369,7 @@ export default function Home() {
             ))}
           </div>
 
-          <p className="text-center text-sm mt-8" style={{color:'rgba(161,161,170,0.4)'}}>
+          <p className="text-center text-sm mt-8" style={{color:'var(--ft-subtle)'}}>
             Have a different provider or bare metal server?{' '}
             <span style={{color:'rgba(167,139,250,0.6)'}}>If it runs Ubuntu + Docker, it works.</span>
           </p>
@@ -384,7 +384,7 @@ export default function Home() {
             <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
               Every layer, covered.
             </h2>
-            <p className="mt-4" style={{color:'rgba(161,161,170,0.65)'}}>No glue code. No YAML hell. No ops team required.</p>
+            <p className="mt-4" style={{color:'var(--ft-muted)'}}>No glue code. No YAML hell. No ops team required.</p>
           </div>
 
           <div className="grid md:grid-cols-3 gap-5">
@@ -403,7 +403,7 @@ export default function Home() {
                 style={{borderColor:'rgba(139,92,246,0.12)'}}>
                 <div className="text-2xl mb-4">{icon}</div>
                 <h3 className="font-semibold text-white mb-2">{title}</h3>
-                <p className="text-sm leading-relaxed mb-4" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
+                <p className="text-sm leading-relaxed mb-4" style={{color:'var(--ft-muted)'}}>{desc}</p>
                 <div className="flex flex-wrap gap-1.5">
                   {tags.map(t => <span key={t} className="tag">{t}</span>)}
                 </div>
@@ -425,7 +425,7 @@ export default function Home() {
               <em className="gradient-text not-italic">a single line of code.</em>
             </h2>
             <p className="text-lg max-w-2xl mx-auto mb-10 leading-relaxed"
-              style={{color:'rgba(161,161,170,0.75)'}}>
+              style={{color:'var(--ft-muted)'}}>
               Genies are autonomous AI agents that live inside your Playgrounds —
               with a real terminal, a file editor, Docker access and your full codebase.
               Describe the feature. They plan it, build it, test it and push it.
@@ -460,7 +460,7 @@ export default function Home() {
                 style={{borderColor:'rgba(139,92,246,0.15)'}}>
                 <div className="text-2xl mb-3">{icon}</div>
                 <h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
-                <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
+                <p className="text-xs leading-relaxed" style={{color:'var(--ft-muted)'}}>{desc}</p>
               </div>
             ))}
           </div>
@@ -475,7 +475,7 @@ export default function Home() {
               ].map(({val, label}) => (
                 <div key={label}>
                   <div className="font-semibold text-sm gradient-text mb-0.5">{val}</div>
-                  <div className="text-xs" style={{color:'rgba(161,161,170,0.4)'}}>{label}</div>
+                  <div className="text-xs" style={{color:'var(--ft-subtle)'}}>{label}</div>
                 </div>
               ))}
             </div>
@@ -493,7 +493,7 @@ export default function Home() {
             Your phone is now<br />
             <em className="gradient-text not-italic">a development machine.</em>
           </h2>
-          <p className="text-lg max-w-2xl mx-auto mb-14 leading-relaxed" style={{color:'rgba(161,161,170,0.7)'}}>
+          <p className="text-lg max-w-2xl mx-auto mb-14 leading-relaxed" style={{color:'var(--ft-muted)'}}>
             The entire dev environment lives in the cloud. Your device is just a window into it.
             Open a browser, describe your idea, watch Genies build it —
             from a Tokyo coffee shop, your couch or a $200 Chromebook.
@@ -511,7 +511,7 @@ export default function Home() {
                 style={{borderColor:'rgba(139,92,246,0.12)'}}>
                 <div className="text-3xl mb-3">{icon}</div>
                 <h3 className="font-semibold text-white text-sm mb-2">{label}</h3>
-                <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.55)'}}>{desc}</p>
+                <p className="text-xs leading-relaxed" style={{color:'var(--ft-subtle)'}}>{desc}</p>
               </div>
             ))}
           </div>
@@ -544,7 +544,7 @@ export default function Home() {
               Your code. Your data.<br />
               <em className="gradient-text not-italic">Your servers. Always.</em>
             </h2>
-            <p className="max-w-xl mx-auto" style={{color:'rgba(161,161,170,0.65)'}}>
+            <p className="max-w-xl mx-auto" style={{color:'var(--ft-muted)'}}>
               Fibe never stores, scans or touches your application data. It orchestrates — your infrastructure, your rules, your jurisdiction.
             </p>
           </div>
@@ -562,15 +562,15 @@ export default function Home() {
                 style={{borderColor:'rgba(139,92,246,0.12)'}}>
                 <div className="text-2xl mb-4">{icon}</div>
                 <h3 className="font-semibold text-white mb-2">{title}</h3>
-                <p className="text-sm leading-relaxed" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
+                <p className="text-sm leading-relaxed" style={{color:'var(--ft-muted)'}}>{desc}</p>
               </div>
             ))}
           </div>
 
           {/* Pricing hint */}
           <div className="mt-8 glass rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-4"
-            style={{borderColor:'rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.03)'}}>
+            style={{borderColor:'rgba(139,92,246,0.1)',background:'var(--section-alt)'}}>
-            <p className="text-sm" style={{color:'rgba(161,161,170,0.6)'}}>
+            <p className="text-sm" style={{color:'var(--ft-muted)'}}>
               <span className="text-white font-medium">Start from ~$12/month</span> on a DigitalOcean Droplet.
               Scale to whatever your project needs. Pay your cloud provider — not us.
             </p>
@@ -591,17 +591,17 @@ export default function Home() {
             <h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
               The platform others can&apos;t be.
             </h2>
-            <p style={{color:'rgba(161,161,170,0.6)'}}>Your infra. Your AI. Your rules. No one else can offer all three.</p>
+            <p style={{color:'var(--ft-muted)'}}>Your infra. Your AI. Your rules. No one else can offer all three.</p>
           </div>
 
           <div className="glass rounded-2xl overflow-hidden" style={{borderColor:'rgba(139,92,246,0.12)'}}>
             {/* Header */}
             <div className="grid grid-cols-5 text-xs font-semibold uppercase tracking-widest px-6 py-4"
               style={{borderBottom:'1px solid rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.05)'}}>
-              <div className="col-span-2" style={{color:'rgba(161,161,170,0.4)'}}>Feature</div>
+              <div className="col-span-2" style={{color:'var(--ft-subtle)'}}>Feature</div>
               <div className="text-center gradient-text">Fibe</div>
-              <div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Vercel / Railway</div>
+              <div className="text-center" style={{color:'var(--ft-dimmed)'}}>Vercel / Railway</div>
-              <div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Kubernetes</div>
+              <div className="text-center" style={{color:'var(--ft-dimmed)'}}>Kubernetes</div>
             </div>
 
             {[
@@ -625,7 +625,7 @@ export default function Home() {
               return (
                 <div key={feature} className="grid grid-cols-5 px-6 py-3 text-sm items-center"
                   style={{borderBottom: i < arr.length-1 ? '1px solid rgba(139,92,246,0.05)' : 'none'}}>
-                  <div className="col-span-2" style={{color:'rgba(161,161,170,0.65)'}}>{feature}</div>
+                  <div className="col-span-2" style={{color:'var(--ft-muted)'}}>{feature}</div>
                   <div className="text-center">{cell(fibe)}</div>
                   <div className="text-center">{cell(vercel)}</div>
                   <div className="text-center">{cell(k8s)}</div>
@@ -644,7 +644,7 @@ export default function Home() {
             <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
               No add-ons. No tiers. No surprises.
             </h2>
-            <p className="mt-4" style={{color:'rgba(161,161,170,0.6)'}}>
+            <p className="mt-4" style={{color:'var(--ft-muted)'}}>
               Every feature ships in the box. Always.
             </p>
           </div>
@@ -691,7 +691,7 @@ export default function Home() {
               <div key={feature} className="flex items-center gap-2.5 py-2.5"
                 style={{borderBottom:'1px solid rgba(139,92,246,0.05)'}}>
                 <span className="text-emerald-400 text-xs shrink-0">✓</span>
-                <span className="text-sm" style={{color:'rgba(161,161,170,0.65)'}}>{feature}</span>
+                <span className="text-sm" style={{color:'var(--ft-muted)'}}>{feature}</span>
               </div>
             ))}
           </div>
@@ -706,7 +706,7 @@ export default function Home() {
             <h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
               Battle-tested all the way down.
             </h2>
-            <p className="max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.7)'}}>
+            <p className="max-w-lg mx-auto" style={{color:'var(--ft-muted)'}}>
               No WASM runtimes. No experimental protocols. Docker, SSH, git and Traefik —
               doing what they&apos;ve done for a decade.
             </p>
@@ -714,7 +714,7 @@ export default function Home() {
 
           <div className="grid md:grid-cols-2 gap-10 mb-10">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Platform</p>
+              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'var(--ft-ghost)'}}>Platform</p>
               <div className="flex flex-wrap gap-2">
                 {['Docker','docker-compose','Traefik',"Let's Encrypt",'SSH','Go','PostgreSQL','Redis','Gitea'].map(t => (
                   <span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
@@ -725,11 +725,11 @@ export default function Home() {
               </div>
             </div>
             <div>
-              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Works with any framework</p>
+              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'var(--ft-ghost)'}}>Works with any framework</p>
               <div className="flex flex-wrap gap-2">
                 {['Next.js','Nuxt','SvelteKit','Remix','Rails','Django','FastAPI','Go Fiber','NestJS','Laravel','Spring Boot','Elixir/Phoenix','Bun'].map(t => (
                   <span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
-                    style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(255,255,255,0.06)'}}>
+                    style={{color:'var(--ft-muted)',borderColor:'rgba(255,255,255,0.06)'}}>
                     {t}
                   </span>
                 ))}
@@ -737,7 +737,7 @@ export default function Home() {
             </div>
           </div>
           <div>
-            <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Genies stack</p>
+            <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'var(--ft-ghost)'}}>Genies stack</p>
             <div className="flex flex-wrap gap-2">
               {['xterm.js','CodeMirror 6','WebSocket / PTY','Claude Code','Gemini CLI','OpenAI Codex','OpenCode','MCP','GHCR multi-arch'].map(t => (
                 <span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
@@ -761,7 +761,7 @@ export default function Home() {
           ].map(({n, label}) => (
             <div key={label} className="glass rounded-2xl p-6 text-center" style={{borderColor:'rgba(139,92,246,0.12)'}}>
               <div className="font-display text-4xl font-normal mb-1.5 gradient-text" style={{letterSpacing:'-0.02em'}}>{n}</div>
-              <div className="text-xs" style={{color:'rgba(161,161,170,0.5)'}}>{label}</div>
+              <div className="text-xs" style={{color:'var(--ft-subtle)'}}>{label}</div>
             </div>
           ))}
         </div>
@@ -775,7 +775,7 @@ export default function Home() {
           <h2 className="font-display text-5xl md:text-7xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
             Ready to <em className="gradient-text not-italic">fibe</em>?
           </h2>
-          <p className="text-lg mb-2" style={{color:'rgba(161,161,170,0.65)'}}>
+          <p className="text-lg mb-2" style={{color:'var(--ft-muted)'}}>
             Your first Playground is free. No credit card. No CLI required to start.
           </p>
           <p className="text-sm mb-10" style={{color:'rgba(139,92,246,0.45)'}}>
@@ -789,7 +789,7 @@ export default function Home() {
             </a>
             <a href="https://github.com/fibegg"
               className="font-medium px-10 py-4 rounded-xl transition-all hover:text-white text-base glass"
-              style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(139,92,246,0.15)'}}>
+              style={{color:'var(--ft-muted)',borderColor:'rgba(139,92,246,0.15)'}}>
               Explore on GitHub
             </a>
           </div>
@@ -802,10 +802,10 @@ export default function Home() {
           <div className="flex items-center gap-2">
             <div className="w-6 h-6 rounded-md flex items-center justify-center text-xs font-black"
               style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>ƒ</div>
-            <span className="font-semibold" style={{color:'rgba(161,161,170,0.5)'}}>fibe</span>
+            <span className="font-semibold" style={{color:'var(--ft-subtle)'}}>fibe</span>
           </div>
-          <span className="text-sm" style={{color:'rgba(161,161,170,0.2)'}}>© 2026 Fibe — Build anything. Ship everything.</span>
+          <span className="text-sm" style={{color:'var(--ft-ghost)'}}>© 2026 Fibe — Build anything. Ship everything.</span>
-          <div className="flex gap-6 text-sm" style={{color:'rgba(161,161,170,0.35)'}}>
+          <div className="flex gap-6 text-sm" style={{color:'var(--ft-dimmed)'}}>
             <a href="https://github.com/fibegg" className="hover:text-white transition-colors">GitHub</a>
             <a href="https://next.fibe.live" className="hover:text-white transition-colors">App</a>
             <a href="https://git-next.fibe.live/fibegg" className="hover:text-white transition-colors">Gitea</a>