fix(web): make header navigation text visible on dark background

- Add explicit text-foreground color to all ghost button nav items
- Add text color to header title links
- Fixes invisible navigation text on black header background

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

apps/web/src/app/page.tsx

@@ -14,26 +14,50 @@ export default function HomePage(): React.ReactElement {
 		<div className="min-h-screen flex flex-col">
 			{/* Header */}
 			<Header
-				title={<Link href="/">TPMJS</Link>}
+				title={
+					<Link href="/" className="text-foreground hover:text-foreground">
+						TPMJS
+					</Link>
+				}
 				size="md"
 				sticky={true}
 				actions={
 					<div className="flex items-center gap-4">
 						<Link href="/playground">
-							<Button variant="ghost" size="sm">
+							<Button
+								variant="ghost"
+								size="sm"
+								className="text-foreground hover:text-foreground"
+							>
 								Playground
 							</Button>
 						</Link>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Pro
 						</Button>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Teams
 						</Button>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Pricing
 						</Button>
-						<Button variant="ghost" size="sm">
+						<Button
+							variant="ghost"
+							size="sm"
+							className="text-foreground hover:text-foreground"
+						>
 							Documentation
 						</Button>
 						<Button variant="secondary" size="sm">

apps/web/src/app/playground/page.tsx

@@ -30,13 +30,21 @@ export default function PlaygroundPage() {
 		<div className="min-h-screen flex flex-col">
 			{/* Header */}
 			<Header
-				title={<Link href="/">TPMJS Playground</Link>}
+				title={
+					<Link href="/" className="text-foreground hover:text-foreground">
+						TPMJS Playground
+					</Link>
+				}
 				size="md"
 				sticky={true}
 				actions={
 					<div className="flex items-center gap-4">
 						<Link href="/">
-							<Button variant="ghost" size="sm">
+							<Button
+								variant="ghost"
+								size="sm"
+								className="text-foreground hover:text-foreground"
+							>
 								Home
 							</Button>
 						</Link>