fix(website): complete light mode audit — slate colors, playground, badges

Audit of all 21 page/component files found remaining light mode gaps:

- Add slate-200 through slate-600 text color overrides (playground tabs)
- Add bg-slate-700/800/900/950 background overrides
- Add border-slate-500/700/800 border overrides
- Add bg-zinc-800/900/950 background overrides
- Add bg-surface override for docs sidebar
- Keep playground editor dark in light mode (convention) via scoped
  overrides targeting the h-[calc(100vh-64px)] container
- Reduce hero gradient opacity from 0.3 to 0.15 in light mode
- Fix ThemeToggle: remove non-functional light:/dark: pseudo-classes,
  simplify to standard classes that work with CSS overrides

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

website/src/app/globals.css

@@ -145,8 +145,15 @@ html.light .text-zinc-200 { color: #374151 !important; }
 html.light .text-zinc-300 { color: #4B5563 !important; }
 html.light .text-zinc-400 { color: #6B7280 !important; }
 html.light .text-zinc-500 { color: #6B7280 !important; }
+html.light .text-zinc-600 { color: #4B5563 !important; }
 html.light .text-indigo-300 { color: #4338CA !important; }
 html.light .text-emerald-400 { color: #059669 !important; }
+/* Slate palette (used in playground components) */
+html.light .text-slate-200 { color: #374151 !important; }
+html.light .text-slate-300 { color: #4B5563 !important; }
+html.light .text-slate-400 { color: #4B5563 !important; }
+html.light .text-slate-500 { color: #6B7280 !important; }
+html.light .text-slate-600 { color: #4B5563 !important; }
 
 /* --- Heading gradient: dark gradient on light bg --- */
 html.light .from-white { --tw-gradient-from: #0F172A !important; }
@@ -177,6 +184,27 @@ html.light [class*="bg-white\\/10"] { background-color: rgba(0, 0, 0, 0.05) !imp
 
 /* --- Primary bg (used as bg-primary on mobile menu, etc.) --- */
 html.light .bg-primary { background-color: #FAFBFC !important; }
+html.light .bg-surface { background-color: #FFFFFF !important; }
+
+/* --- Slate backgrounds (playground, panels) --- */
+html.light .bg-slate-800 { background-color: #E5E7EB !important; }
+html.light .bg-slate-900 { background-color: #F3F4F6 !important; }
+html.light .bg-slate-950 { background-color: #F9FAFB !important; }
+html.light [class*="bg-slate-800\\/"] { background-color: rgba(0, 0, 0, 0.04) !important; }
+html.light [class*="bg-slate-900\\/"] { background-color: rgba(0, 0, 0, 0.03) !important; }
+html.light [class*="bg-slate-700\\/"] { background-color: rgba(0, 0, 0, 0.05) !important; }
+html.light [class*="bg-slate-500\\/"] { background-color: rgba(0, 0, 0, 0.06) !important; }
+
+/* Slate borders */
+html.light .border-slate-700 { border-color: rgba(0, 0, 0, 0.10) !important; }
+html.light .border-slate-800 { border-color: rgba(0, 0, 0, 0.08) !important; }
+html.light [class*="border-slate-500\\/"] { border-color: rgba(0, 0, 0, 0.12) !important; }
+html.light [class*="border-slate-700\\/"] { border-color: rgba(0, 0, 0, 0.08) !important; }
+
+/* Zinc backgrounds */
+html.light .bg-zinc-800 { background-color: #E5E7EB !important; }
+html.light .bg-zinc-900 { background-color: #F3F4F6 !important; }
+html.light .bg-zinc-950 { background-color: #F9FAFB !important; }
 
 /* --- Navbar --- */
 html.light header[class*="border-b"] { border-color: rgba(0, 0, 0, 0.08); }
@@ -244,8 +272,24 @@ html.light .border-accent-indigo\\/30 {
   border-color: rgba(99, 102, 241, 0.25);
 }
 
-/* --- Hero background gradients: hide on light mode --- */
-html.light section > [aria-hidden="true"] { opacity: 0.3; }
+/* --- Hero background gradients: reduce on light mode --- */
+html.light section > [aria-hidden="true"] { opacity: 0.15; }
+
+/* --- Playground: keep dark editor theme in light mode --- */
+html.light .h-\\[calc\\(100vh-64px\\)] {
+  background-color: #0F172A;
+}
+html.light .h-\\[calc\\(100vh-64px\\)] .text-white { color: #F8FAFC !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .text-zinc-300 { color: #D4D4D8 !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .text-zinc-400 { color: #A1A1AA !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .text-slate-400 { color: #94A3B8 !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .text-slate-300 { color: #CBD5E1 !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .bg-slate-900 { background-color: #0F172A !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .bg-slate-800 { background-color: #1E293B !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .bg-zinc-900 { background-color: #18181B !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .border-slate-700 { border-color: rgba(255, 255, 255, 0.08) !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] .border-slate-800 { border-color: rgba(255, 255, 255, 0.06) !important; }
+html.light .h-\\[calc\\(100vh-64px\\)] [class*="border-white\\/"] { border-color: rgba(255, 255, 255, 0.08) !important; }
 
 /* --- Code blocks / pre elements --- */
 html.light pre[class*="font-mono"] {

website/src/components/ui/ThemeToggle.tsx

@@ -68,7 +68,7 @@ export function ThemeToggle() {
     <button
       type="button"
       onClick={toggle}
-      className="text-zinc-300 hover:text-white dark:text-zinc-300 dark:hover:text-white light:text-zinc-600 light:hover:text-zinc-900 transition-colors duration-200 p-2 rounded-lg hover:bg-white/[0.04] dark:hover:bg-white/[0.04] light:hover:bg-black/[0.04]"
+      className="text-zinc-400 hover:text-white transition-colors duration-200 p-2 rounded-lg hover:bg-white/[0.04]"
       aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
     >
       {theme === 'dark' ? (