fix(spa): redesign remaining pages to light theme

apps/spa/src/pages/ArticleReaderPage.tsx

@@ -25,7 +25,7 @@ export default function ArticleReaderPage() {
 
   if (loading) return (
     <div className="min-h-screen flex items-center justify-center bg-black">
-      <Loader2 className="w-8 h-8 animate-spin text-cyan-glow" />
+      <Loader2 className="w-8 h-8 animate-spin text-spa-forest" />
     </div>
   )
 
@@ -41,13 +41,13 @@ export default function ArticleReaderPage() {
   )
 
   return (
-    <div className="min-h-screen flex flex-col bg-night-950">
+    <div className="min-h-screen flex flex-col bg-pop-bg">
       <Navbar categories={categories} />
 
       <main className="flex-1 pt-24 pb-20">
         <article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8">
           
-          <Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 glass border border-white/5 rounded-full hover:bg-white/10 transition-colors">
+          <Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 rounded-full hover:bg-white/10 transition-colors">
              <ArrowLeft className="w-5 h-5 text-slate-300" />
           </Link>
 
@@ -56,7 +56,7 @@ export default function ArticleReaderPage() {
             <Link to="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4">
                <ArrowLeft className="w-4 h-4" /> Go Back
             </Link>
-            <p className="text-cyan-glow uppercase tracking-[0.3em] font-bold text-xs">
+            <p className="text-spa-forest uppercase tracking-[0.3em] font-bold text-xs">
               {new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
             </p>
             <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif">
@@ -66,7 +66,7 @@ export default function ArticleReaderPage() {
 
           {/* Cover Image */}
           {article.coverImage && (
-            <div className="w-full aspect-[16/7] bg-night-900 md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-white/5">
+            <div className="w-full aspect-[16/7] bg-white md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-spa-stone/10">
               <img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" />
             </div>
           )}