theme fix

src/pages/HomePage.tsx

@@ -7,6 +7,7 @@ import BottomNav from '../components/BottomNav'
 import WelcomeModal from '../components/WelcomeModal'
 import { SaveBookAnimation } from '../components/SaveBookAnimation'
 import { useOnboardingTour, hasSeenOnboarding, markOnboardingDone } from '../hooks/useOnboardingTour'
+import { PageLoader } from '../components/PageLoader'
 
 const AFFIRMATIONS = [
   'You showed up for yourself today 🌱',
@@ -61,18 +62,14 @@ export default function HomePage() {
   }
 
   if (loading) {
-    return (
-      <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center' }}>
-        <p style={{ color: '#9ca3af' }}>Loading…</p>
-      </div>
-    )
+    return <PageLoader />
   }
 
   if (!user) {
     return (
       <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
-        <h1 style={{ fontFamily: '"Sniglet", system-ui', color: '#1a1a1a' }}>Grateful Journal</h1>
-        <p style={{ color: '#6b7280' }}>Sign in to start your journal.</p>
+        <h1 style={{ fontFamily: '"Sniglet", system-ui', color: 'var(--color-text)' }}>Grateful Journal</h1>
+        <p style={{ color: 'var(--color-text-muted)' }}>Sign in to start your journal.</p>
         <Link to="/login" className="home-login-link">Go to login</Link>
       </div>
     )
@@ -188,15 +185,7 @@ export default function HomePage() {
           </div>
 
           {message && (
-            <div style={{
-              padding: '0.75rem',
-              marginTop: '1rem',
-              borderRadius: '8px',
-              fontSize: '0.875rem',
-              backgroundColor: '#fef2f2',
-              color: '#b91c1c',
-              textAlign: 'center',
-            }}>
+            <div className="alert-msg alert-msg--error" style={{ marginTop: '1rem' }}>
               {message.text}
             </div>
           )}