diff --git a/docs/stories/story-12.3-blade-component-color-migration.md b/docs/stories/story-12.3-blade-component-color-migration.md
index 0949600..ed2d530 100644
--- a/docs/stories/story-12.3-blade-component-color-migration.md
+++ b/docs/stories/story-12.3-blade-component-color-migration.md
@@ -203,26 +203,26 @@ Key updates:
 
 ## Dev Checklist
 
-- [ ] Update `navigation.blade.php` - Dark Forest Green bg, Warm Cream text
-- [ ] Update `footer.blade.php` - Dark Forest Green bg, Warm Cream text
-- [ ] Update `language-toggle.blade.php` - Olive Green active state
-- [ ] Update `spinner.blade.php` - Warm Gold color
-- [ ] Update `toast.blade.php` - Warm Gold for info
-- [ ] Update `card.blade.php` - White bg, Gold Light accents
-- [ ] Update `stat-card.blade.php` - Gold accents
-- [ ] Update `public.blade.php` layout - Warm Cream body bg
-- [ ] Update `home.blade.php` - New palette
-- [ ] Update `booking.blade.php` - New palette
-- [ ] Update `terms.blade.php` - New palette
-- [ ] Update `privacy.blade.php` - New palette
-- [ ] Update `legal.blade.php` - New palette
-- [ ] Update `posts/index.blade.php` - New palette
-- [ ] Update `posts/show.blade.php` - New palette
-- [ ] Review and update admin dashboard components
-- [ ] Review and update client dashboard components
-- [ ] Test RTL layout (Arabic)
-- [ ] Test responsive breakpoints
-- [ ] Visual review all updated pages
+- [x] Update `navigation.blade.php` - Dark Forest Green bg, Warm Cream text
+- [x] Update `footer.blade.php` - Dark Forest Green bg, Warm Cream text
+- [x] Update `language-toggle.blade.php` - Olive Green active state
+- [x] Update `spinner.blade.php` - Warm Gold color
+- [x] Update `toast.blade.php` - Warm Gold for info
+- [x] Update `card.blade.php` - White bg, Gold Light accents
+- [x] Update `stat-card.blade.php` - Gold accents
+- [x] Update `public.blade.php` layout - Warm Cream body bg
+- [x] Update `home.blade.php` - New palette
+- [x] Update `booking.blade.php` - New palette
+- [x] Update `terms.blade.php` - New palette
+- [x] Update `privacy.blade.php` - New palette
+- [x] Update `legal.blade.php` - New palette
+- [x] Update `posts/index.blade.php` - New palette
+- [x] Update `posts/show.blade.php` - New palette
+- [x] Review and update admin dashboard components
+- [x] Review and update client dashboard components
+- [x] Test RTL layout (Arabic)
+- [x] Test responsive breakpoints
+- [x] Visual review all updated pages
 
 ## Estimation
 
@@ -238,18 +238,55 @@ Key updates:
 ## Dev Agent Record
 
 ### Status
-Not Started - Ready for Implementation
+Ready for Review
 
 ### Agent Model Used
-(To be filled during implementation)
+Claude Opus 4.5 (claude-opus-4-5-20251101)
 
 ### File List
-(To be filled during implementation)
+**Modified Components:**
+- `resources/views/components/navigation.blade.php` - Updated hover/active colors to use cta/active classes
+- `resources/views/components/footer.blade.php` - Updated text/link colors to use cta classes
+- `resources/views/components/language-toggle.blade.php` - Changed amber-500 to active class for Olive Green
+- `resources/views/components/spinner.blade.php` - Changed text-primary to text-cta for Warm Gold
+- `resources/views/components/toast.blade.php` - Changed bg-primary to bg-cta for info toasts
+- `resources/views/components/ui/card.blade.php` - Changed bg-off-white to bg-card, border-accent to border-cta-light
+- `resources/views/components/ui/stat-card.blade.php` - Updated icon bg to cta-light, icon color to cta
+- `resources/views/components/layouts/public.blade.php` - Changed bg-off-white to bg-background
+
+**Modified Public Pages:**
+- `resources/views/pages/home.blade.php` - Updated cards to bg-card, shadow-card
+- `resources/views/pages/booking.blade.php` - Updated to bg-card, shadow-card
+- `resources/views/pages/terms.blade.php` - Updated to bg-card, shadow-card, prose-brand
+- `resources/views/pages/privacy.blade.php` - Updated to bg-card, shadow-card, prose-brand
+- `resources/views/pages/legal.blade.php` - Updated to bg-card, shadow-card, prose-brand
+
+**Modified Post Pages:**
+- `resources/views/livewire/pages/posts/index.blade.php` - Updated cards, links, highlight colors
+- `resources/views/livewire/pages/posts/show.blade.php` - Updated border and link colors
+
+**Modified Tests:**
+- `tests/Feature/NavigationTest.php` - Updated color assertions to match Story 12.2 palette
 
 ### Change Log
 | Date | Change |
 |------|--------|
 | 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
+| 2026-01-04 | Implementation completed - all components updated to new palette |
 
 ### Completion Notes
-(To be filled during implementation)
+- All Blade components updated to use new color palette classes
+- Navigation: Uses bg-primary (Dark Forest Green), text-off-white, hover:text-cta, bg-active for active states
+- Footer: Uses bg-primary, text-cta for links with hover:text-cta-light
+- Language Toggle: Uses bg-active (Olive Green) for active state, hover:bg-active-hover
+- Spinner: Uses text-cta (Warm Gold)
+- Toast: Info toasts use bg-cta (Warm Gold)
+- Cards: Use bg-card (Pure White), border-cta-light (Gold Light) for highlights
+- Stat Cards: Icon bg uses cta-light/20, icon color uses text-cta
+- Public Layout: Uses bg-background (Warm Cream)
+- All public pages use bg-card, shadow-card, prose-brand
+- Admin/Client dashboards retain Flux UI dark mode styling (intentional)
+- Amber colors retained for warning/status indicators per AC6
+- Tests updated to validate new color palette from Story 12.2
+- All 38 Navigation tests passing
+- All 38 Public feature tests passing
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
index 8e1d6c1..5cce0a2 100644
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -4,7 +4,7 @@
             <!-- Logo & Description -->
             <div class="text-center sm:text-start">
                 <x-logo size="lg" class="logo-badge" />
-                <p class="mt-3 text-accent text-sm">
+                <p class="mt-3 text-cta text-sm">
                     {{ __('footer.description') }}
                 </p>
             </div>
@@ -12,7 +12,7 @@
             <!-- Contact Information -->
             <div class="text-center sm:text-start">
                 <h3 class="text-off-white font-semibold mb-3">{{ __('footer.contact') }}</h3>
-                <address class="text-accent text-sm not-italic space-y-1">
+                <address class="text-cta text-sm not-italic space-y-1">
                     <p>{{ __('footer.address') }}</p>
                     <p><span class="ltr-inline">{{ __('footer.phone') }}</span></p>
                     <p><span class="ltr-inline">{{ __('footer.email') }}</span></p>
@@ -26,7 +26,7 @@
                     <li>
                         <a
                             href="{{ route('terms') }}"
-                            class="text-accent hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
+                            class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
                             data-test="footer-terms"
                         >
                             {{ __('footer.terms') }}
@@ -35,7 +35,7 @@
                     <li>
                         <a
                             href="{{ route('privacy') }}"
-                            class="text-accent hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
+                            class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
                             data-test="footer-privacy"
                         >
                             {{ __('footer.privacy') }}
@@ -46,8 +46,8 @@
         </div>
 
         <!-- Copyright -->
-        <div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-accent/20 text-center">
-            <p class="text-accent text-xs sm:text-sm" data-test="footer-copyright">
+        <div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-cta/20 text-center">
+            <p class="text-cta text-xs sm:text-sm" data-test="footer-copyright">
                 &copy; {{ date('Y') }} {{ __('footer.copyright') }}
             </p>
         </div>
diff --git a/resources/views/components/language-toggle.blade.php b/resources/views/components/language-toggle.blade.php
index 8508d15..e64eede 100644
--- a/resources/views/components/language-toggle.blade.php
+++ b/resources/views/components/language-toggle.blade.php
@@ -5,25 +5,25 @@
         href="{{ route('language.switch', 'ar') }}"
         @class([
             'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
-            'bg-amber-500 text-white font-bold' => app()->getLocale() === 'ar',
-            'text-off-white hover:text-accent' => app()->getLocale() !== 'ar' && $variant === 'dark',
-            'text-body/70 hover:text-body' => app()->getLocale() !== 'ar' && $variant === 'light',
+            'bg-active text-white font-bold' => app()->getLocale() === 'ar',
+            'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'dark',
+            'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
         ])
         data-test="language-switch-ar"
     >
         العربية
     </a>
     <span @class([
-        'text-accent/50' => $variant === 'dark',
+        'text-cta/50' => $variant === 'dark',
         'text-body/30' => $variant === 'light',
     ])>|</span>
     <a
         href="{{ route('language.switch', 'en') }}"
         @class([
             'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
-            'bg-amber-500 text-white font-bold' => app()->getLocale() === 'en',
-            'text-off-white hover:text-accent' => app()->getLocale() !== 'en' && $variant === 'dark',
-            'text-body/70 hover:text-body' => app()->getLocale() !== 'en' && $variant === 'light',
+            'bg-active text-white font-bold' => app()->getLocale() === 'en',
+            'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'dark',
+            'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'light',
         ])
         data-test="language-switch-en"
     >
diff --git a/resources/views/components/layouts/public.blade.php b/resources/views/components/layouts/public.blade.php
index a8048a2..49f19d6 100644
--- a/resources/views/components/layouts/public.blade.php
+++ b/resources/views/components/layouts/public.blade.php
@@ -3,7 +3,7 @@
     <head>
         @include('partials.head')
     </head>
-    <body class="min-h-screen flex flex-col bg-off-white" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
+    <body class="min-h-screen flex flex-col bg-background" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
         <!-- Skip to content link for keyboard accessibility -->
         <a href="#main-content" class="skip-link" data-test="skip-to-content">
             {{ __('accessibility.skip_to_content') }}
diff --git a/resources/views/components/navigation.blade.php b/resources/views/components/navigation.blade.php
index ff5ee5f..8cd65e8 100644
--- a/resources/views/components/navigation.blade.php
+++ b/resources/views/components/navigation.blade.php
@@ -17,7 +17,7 @@
                 <!-- Hamburger Button -->
                 <button
                     @click="mobileMenuOpen = !mobileMenuOpen"
-                    class="p-2 text-off-white hover:text-accent focus:outline-none min-h-[44px] min-w-[44px] flex items-center justify-center"
+                    class="p-2 text-off-white hover:text-cta focus:outline-none min-h-[44px] min-w-[44px] flex items-center justify-center"
                     :aria-expanded="mobileMenuOpen"
                     aria-label="{{ __('Toggle navigation menu') }}"
                     data-test="mobile-menu-button"
@@ -46,8 +46,8 @@
                 <a
                     href="{{ route('home') }}"
                     @class([
-                        'text-off-white hover:text-accent transition-colors py-2',
-                        'border-b-2 border-accent' => request()->routeIs('home'),
+                        'text-off-white hover:text-cta transition-colors py-2',
+                        'border-b-2 border-cta' => request()->routeIs('home'),
                     ])
                     wire:navigate
                     data-test="nav-home"
@@ -57,8 +57,8 @@
                 <a
                     href="{{ route('booking') }}"
                     @class([
-                        'text-off-white hover:text-accent transition-colors py-2',
-                        'border-b-2 border-accent' => request()->routeIs('booking*'),
+                        'text-off-white hover:text-cta transition-colors py-2',
+                        'border-b-2 border-cta' => request()->routeIs('booking*'),
                     ])
                     wire:navigate
                     data-test="nav-booking"
@@ -68,8 +68,8 @@
                 <a
                     href="{{ route('posts.index') }}"
                     @class([
-                        'text-off-white hover:text-accent transition-colors py-2',
-                        'border-b-2 border-accent' => request()->routeIs('posts*'),
+                        'text-off-white hover:text-cta transition-colors py-2',
+                        'border-b-2 border-cta' => request()->routeIs('posts*'),
                     ])
                     wire:navigate
                     data-test="nav-posts"
@@ -84,8 +84,8 @@
                     <a
                         href="{{ $dashboardRoute }}"
                         @class([
-                            'text-off-white hover:text-accent transition-colors py-2',
-                            'border-b-2 border-accent' => request()->routeIs('*.dashboard'),
+                            'text-off-white hover:text-cta transition-colors py-2',
+                            'border-b-2 border-cta' => request()->routeIs('*.dashboard'),
                         ])
                         wire:navigate
                         data-test="nav-dashboard"
@@ -96,7 +96,7 @@
                         @csrf
                         <button
                             type="submit"
-                            class="text-off-white hover:text-accent transition-colors py-2"
+                            class="text-off-white hover:text-cta transition-colors py-2"
                             data-test="nav-logout"
                         >
                             {{ __('navigation.logout') }}
@@ -106,8 +106,8 @@
                     <a
                         href="{{ route('login') }}"
                         @class([
-                            'text-off-white hover:text-accent transition-colors py-2',
-                            'border-b-2 border-accent' => request()->routeIs('login'),
+                            'text-off-white hover:text-cta transition-colors py-2',
+                            'border-b-2 border-cta' => request()->routeIs('login'),
                         ])
                         wire:navigate
                         data-test="nav-login"
@@ -137,7 +137,7 @@
         x-cloak
         @click.away="mobileMenuOpen = false"
         @keydown.escape.window="mobileMenuOpen = false"
-        class="md:hidden bg-primary border-t border-accent/20"
+        class="md:hidden bg-primary border-t border-cta/20"
         role="dialog"
         aria-modal="true"
         aria-label="{{ __('Mobile navigation menu') }}"
@@ -147,8 +147,8 @@
             <a
                 href="{{ route('home') }}"
                 @class([
-                    'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
-                    'bg-primary-hover border-s-2 border-accent' => request()->routeIs('home'),
+                    'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
+                    'bg-active border-s-2 border-cta' => request()->routeIs('home'),
                 ])
                 wire:navigate
                 @click="mobileMenuOpen = false"
@@ -159,8 +159,8 @@
             <a
                 href="{{ route('booking') }}"
                 @class([
-                    'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
-                    'bg-primary-hover border-s-2 border-accent' => request()->routeIs('booking*'),
+                    'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
+                    'bg-active border-s-2 border-cta' => request()->routeIs('booking*'),
                 ])
                 wire:navigate
                 @click="mobileMenuOpen = false"
@@ -171,8 +171,8 @@
             <a
                 href="{{ route('posts.index') }}"
                 @class([
-                    'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
-                    'bg-primary-hover border-s-2 border-accent' => request()->routeIs('posts*'),
+                    'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
+                    'bg-active border-s-2 border-cta' => request()->routeIs('posts*'),
                 ])
                 wire:navigate
                 @click="mobileMenuOpen = false"
@@ -188,8 +188,8 @@
                 <a
                     href="{{ $dashboardRoute }}"
                     @class([
-                        'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
-                        'bg-primary-hover border-s-2 border-accent' => request()->routeIs('*.dashboard'),
+                        'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
+                        'bg-active border-s-2 border-cta' => request()->routeIs('*.dashboard'),
                     ])
                     wire:navigate
                     @click="mobileMenuOpen = false"
@@ -201,7 +201,7 @@
                     @csrf
                     <button
                         type="submit"
-                        class="w-full text-start px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center"
+                        class="w-full text-start px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center"
                         data-test="mobile-nav-logout"
                     >
                         {{ __('navigation.logout') }}
@@ -211,8 +211,8 @@
                 <a
                     href="{{ route('login') }}"
                     @class([
-                        'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
-                        'bg-primary-hover border-s-2 border-accent' => request()->routeIs('login'),
+                        'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
+                        'bg-active border-s-2 border-cta' => request()->routeIs('login'),
                     ])
                     wire:navigate
                     @click="mobileMenuOpen = false"
diff --git a/resources/views/components/spinner.blade.php b/resources/views/components/spinner.blade.php
index 8f2a710..96b73b2 100644
--- a/resources/views/components/spinner.blade.php
+++ b/resources/views/components/spinner.blade.php
@@ -15,7 +15,7 @@
 
 <div {{ $attributes->merge(['class' => $inline ? 'inline-flex items-center gap-2' : 'flex items-center gap-2']) }}>
     <svg
-        class="animate-spin {{ $sizeClass }} text-primary"
+        class="animate-spin {{ $sizeClass }} text-cta"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
diff --git a/resources/views/components/toast.blade.php b/resources/views/components/toast.blade.php
index c3f5b17..31066d2 100644
--- a/resources/views/components/toast.blade.php
+++ b/resources/views/components/toast.blade.php
@@ -43,7 +43,7 @@
                 'bg-success text-white': toast.type === 'success',
                 'bg-danger text-white': toast.type === 'error',
                 'bg-warning text-body': toast.type === 'warning',
-                'bg-primary text-white': toast.type === 'info' || !toast.type
+                'bg-cta text-white': toast.type === 'info' || !toast.type
             }"
             role="alert"
         >
diff --git a/resources/views/components/ui/card.blade.php b/resources/views/components/ui/card.blade.php
index d01b6c6..cabffc9 100644
--- a/resources/views/components/ui/card.blade.php
+++ b/resources/views/components/ui/card.blade.php
@@ -5,7 +5,7 @@
 ])
 
 @php
-    $classes = 'bg-off-white rounded-lg p-6';
+    $classes = 'bg-card rounded-lg p-6';
 
     // Variant-based shadow (default uses custom shadow from specs: 0 2px 8px rgba(0,0,0,0.1))
     $classes .= match($variant) {
@@ -18,9 +18,9 @@
         $classes .= ' hover:shadow-card-hover hover:-translate-y-0.5 transition-all duration-200 cursor-pointer';
     }
 
-    // Light Olive highlight border (uses border-s for RTL support)
+    // Gold Light highlight border (uses border-s for RTL support)
     if ($highlight) {
-        $classes .= ' border-s-4 border-accent';
+        $classes .= ' border-s-4 border-cta-light';
     }
 @endphp
 
diff --git a/resources/views/components/ui/stat-card.blade.php b/resources/views/components/ui/stat-card.blade.php
index b4964e9..d760c55 100644
--- a/resources/views/components/ui/stat-card.blade.php
+++ b/resources/views/components/ui/stat-card.blade.php
@@ -8,8 +8,8 @@
 <x-ui.card>
     <div class="flex items-center gap-4">
         @if($icon)
-            <div class="p-3 bg-accent/10 rounded-lg">
-                <flux:icon :name="$icon" class="w-6 h-6 text-primary" />
+            <div class="p-3 bg-cta-light/20 rounded-lg">
+                <flux:icon :name="$icon" class="w-6 h-6 text-cta" />
             </div>
         @endif
         <div>
diff --git a/resources/views/livewire/pages/posts/index.blade.php b/resources/views/livewire/pages/posts/index.blade.php
index 3d91aee..17b6d38 100644
--- a/resources/views/livewire/pages/posts/index.blade.php
+++ b/resources/views/livewire/pages/posts/index.blade.php
@@ -33,7 +33,7 @@ new #[Layout('components.layouts.public')] class extends Component
 
         return preg_replace(
             '/('.preg_quote($escapedSearch, '/').')/iu',
-            '<mark class="bg-accent/30 rounded px-1">$1</mark>',
+            '<mark class="bg-cta/30 rounded px-1">$1</mark>',
             $escapedText
         );
     }
@@ -94,9 +94,9 @@ new #[Layout('components.layouts.public')] class extends Component
     <!-- Posts List -->
     <div class="mt-6 sm:mt-8 space-y-4 sm:space-y-6">
         @forelse($posts as $post)
-            <article wire:key="post-{{ $post->id }}" class="bg-white p-4 sm:p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
-                <h2 class="text-lg sm:text-xl font-semibold text-body">
-                    <a href="{{ route('posts.show', $post) }}" class="hover:text-primary" wire:navigate>
+            <article wire:key="post-{{ $post->id }}" class="bg-card p-4 sm:p-6 rounded-lg shadow-card hover:shadow-card-hover transition-shadow">
+                <h2 class="text-lg sm:text-xl font-semibold text-text">
+                    <a href="{{ route('posts.show', $post) }}" class="hover:text-cta" wire:navigate>
                         @if($search)
                             {!! $this->highlightSearch($post->getTitle(), $search) !!}
                         @else
@@ -117,12 +117,12 @@ new #[Layout('components.layouts.public')] class extends Component
                     @endif
                 </p>
 
-                <a href="{{ route('posts.show', $post) }}" class="text-primary hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
+                <a href="{{ route('posts.show', $post) }}" class="text-cta hover:text-cta-hover hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
                     {{ __('posts.read_more') }} &rarr;
                 </a>
             </article>
         @empty
-            <div class="empty-state bg-white rounded-lg">
+            <div class="empty-state bg-card rounded-lg">
                 @if($search)
                     <flux:icon name="magnifying-glass" class="empty-state-icon text-body/30" />
                     <p class="text-body/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
diff --git a/resources/views/livewire/pages/posts/show.blade.php b/resources/views/livewire/pages/posts/show.blade.php
index 28a84c2..5a041be 100644
--- a/resources/views/livewire/pages/posts/show.blade.php
+++ b/resources/views/livewire/pages/posts/show.blade.php
@@ -31,8 +31,8 @@ new #[Layout('components.layouts.public')] class extends Component
         {!! $post->getBody() !!}
     </div>
 
-    <footer class="mt-12 pt-6 border-t border-accent/20">
-        <a href="{{ route('posts.index') }}" class="text-primary hover:underline" wire:navigate>
+    <footer class="mt-12 pt-6 border-t border-cta/20">
+        <a href="{{ route('posts.index') }}" class="text-cta hover:text-cta-hover hover:underline" wire:navigate>
             &larr; {{ __('posts.back_to_posts') }}
         </a>
     </footer>
diff --git a/resources/views/pages/booking.blade.php b/resources/views/pages/booking.blade.php
index fbfd1ca..b0829b5 100644
--- a/resources/views/pages/booking.blade.php
+++ b/resources/views/pages/booking.blade.php
@@ -1,7 +1,7 @@
 <x-layouts.public>
     <div class="py-8">
-        <h1 class="text-3xl font-bold text-body mb-6">{{ __('navigation.booking') }}</h1>
-        <div class="bg-white p-8 rounded-lg shadow-md">
+        <h1 class="text-3xl font-bold text-text mb-6">{{ __('navigation.booking') }}</h1>
+        <div class="bg-card p-8 rounded-lg shadow-card">
             <p class="text-body">{{ __('Booking form will be implemented in a future story.') }}</p>
         </div>
     </div>
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index f8f8904..ae34577 100644
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -4,16 +4,16 @@
         <p class="text-body text-base sm:text-lg mb-6 sm:mb-8 px-4">{{ __('Professional legal services with integrity and excellence.') }}</p>
 
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mt-8 sm:mt-12">
-            <div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
-                <h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Expert Consultations') }}</h3>
+            <div class="bg-card p-4 sm:p-6 rounded-lg shadow-card">
+                <h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Expert Consultations') }}</h3>
                 <p class="text-body text-sm sm:text-base">{{ __('Professional legal advice tailored to your needs.') }}</p>
             </div>
-            <div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
-                <h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Case Management') }}</h3>
+            <div class="bg-card p-4 sm:p-6 rounded-lg shadow-card">
+                <h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Case Management') }}</h3>
                 <p class="text-body text-sm sm:text-base">{{ __('Track your cases and stay informed every step of the way.') }}</p>
             </div>
-            <div class="bg-white p-4 sm:p-6 rounded-lg shadow-md sm:col-span-2 lg:col-span-1">
-                <h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Legal Resources') }}</h3>
+            <div class="bg-card p-4 sm:p-6 rounded-lg shadow-card sm:col-span-2 lg:col-span-1">
+                <h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Legal Resources') }}</h3>
                 <p class="text-body text-sm sm:text-base">{{ __('Access our library of legal insights and articles.') }}</p>
             </div>
         </div>
diff --git a/resources/views/pages/legal.blade.php b/resources/views/pages/legal.blade.php
index cf13705..e237de5 100644
--- a/resources/views/pages/legal.blade.php
+++ b/resources/views/pages/legal.blade.php
@@ -1,14 +1,14 @@
 <x-layouts.public>
     <div class="py-8">
-        <h1 class="mb-6 text-3xl font-bold text-body dark:text-off-white">{{ $page->getTitle() }}</h1>
-        <div class="prose max-w-none rounded-lg bg-white p-8 shadow-md dark:bg-zinc-800 dark:prose-invert" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
+        <h1 class="mb-6 text-3xl font-bold text-text dark:text-off-white">{{ $page->getTitle() }}</h1>
+        <div class="prose prose-brand max-w-none rounded-lg bg-card p-8 shadow-card dark:bg-zinc-800 dark:prose-invert" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
             @if ($page->getContent())
                 {!! clean($page->getContent()) !!}
             @else
                 <p class="text-body dark:text-zinc-400">{{ __('pages.content_coming_soon') }}</p>
             @endif
         </div>
-        <p class="mt-4 text-sm text-zinc-500 dark:text-zinc-400">
+        <p class="mt-4 text-sm text-body/70 dark:text-zinc-400">
             {{ __('pages.last_updated') }}: {{ $page->updated_at->format('M d, Y') }}
         </p>
     </div>
diff --git a/resources/views/pages/privacy.blade.php b/resources/views/pages/privacy.blade.php
index 582a347..252335a 100644
--- a/resources/views/pages/privacy.blade.php
+++ b/resources/views/pages/privacy.blade.php
@@ -1,7 +1,7 @@
 <x-layouts.public>
     <div class="py-8">
-        <h1 class="text-3xl font-bold text-body mb-6">{{ __('footer.privacy') }}</h1>
-        <div class="bg-white p-8 rounded-lg shadow-md prose max-w-none">
+        <h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.privacy') }}</h1>
+        <div class="bg-card p-8 rounded-lg shadow-card prose prose-brand max-w-none">
             <p class="text-body">{{ __('Privacy policy content will be added here.') }}</p>
         </div>
     </div>
diff --git a/resources/views/pages/terms.blade.php b/resources/views/pages/terms.blade.php
index fbf7650..9bd6e49 100644
--- a/resources/views/pages/terms.blade.php
+++ b/resources/views/pages/terms.blade.php
@@ -1,7 +1,7 @@
 <x-layouts.public>
     <div class="py-8">
-        <h1 class="text-3xl font-bold text-body mb-6">{{ __('footer.terms') }}</h1>
-        <div class="bg-white p-8 rounded-lg shadow-md prose max-w-none">
+        <h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.terms') }}</h1>
+        <div class="bg-card p-8 rounded-lg shadow-card prose prose-brand max-w-none">
             <p class="text-body">{{ __('Terms of service content will be added here.') }}</p>
         </div>
     </div>
diff --git a/tests/Feature/NavigationTest.php b/tests/Feature/NavigationTest.php
index 9ba8656..570f4b7 100644
--- a/tests/Feature/NavigationTest.php
+++ b/tests/Feature/NavigationTest.php
@@ -213,16 +213,19 @@ describe('Tailwind Colors', function () {
     test('app.css contains brand colors', function () {
         $css = file_get_contents(resource_path('css/app.css'));
 
-        // New brand palette from Story 10.1
-        expect($css)->toContain('--color-primary: #4A4A42');       // Charcoal
-        expect($css)->toContain('--color-accent: #C9C4BA');        // Warm Gray
-        expect($css)->toContain('--color-accent-light: #E8E4DC');  // Off-White
-        expect($css)->toContain('--color-background: #E8E4DC');    // Off-White
-        expect($css)->toContain('--color-text: #1A1A1A');          // Deep Black
+        // New brand palette from Story 12.2 - Dark Charcoal & Warm Gold
+        expect($css)->toContain('--color-primary: #2D3624');       // Dark Forest Green
+        expect($css)->toContain('--color-primary-light: #3D4634'); // Lighter Forest Green
+        expect($css)->toContain('--color-cta: #A68966');           // Warm Gold
+        expect($css)->toContain('--color-cta-hover: #8A7555');     // Darker Gold
+        expect($css)->toContain('--color-cta-light: #C4A882');     // Light Gold
+        expect($css)->toContain('--color-active: #4A5D23');        // Olive Green
+        expect($css)->toContain('--color-background: #F4F1EA');    // Warm Cream
+        expect($css)->toContain('--color-text: #2D322A');          // Forest Green
 
         // Backward compatibility aliases (mapped to new colors)
         expect($css)->toContain('--color-navy: var(--color-primary)');
-        expect($css)->toContain('--color-gold: var(--color-accent)');
+        expect($css)->toContain('--color-gold: var(--color-cta)');
     });
 });