diff --git a/package.json b/package.json
index 5c53a417..83c1473a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,8 @@
   "name": "myblog",
   "private": true,
   "scripts": {
-    "tw:build": "npx @tailwindcss/cli -i ./src/Web/Styles/input.css -o ./src/Web/wwwroot/css/tailwind.css --minify",
+    "tw:build": "npx @tailwindcss/cli -i ./src/Web/Styles/input.css -o ./src/Web/wwwroot/css/tailwind.css",
+    "tw:build:prod": "npx @tailwindcss/cli -i ./src/Web/Styles/input.css -o ./src/Web/wwwroot/css/tailwind.css --minify",
     "tw:watch": "npx @tailwindcss/cli -i ./src/Web/Styles/input.css -o ./src/Web/wwwroot/css/tailwind.css --watch"
   },
   "devDependencies": {
diff --git a/src/Web/Components/Layout/MainLayout.razor b/src/Web/Components/Layout/MainLayout.razor
index 219df93b..2834ba06 100644
--- a/src/Web/Components/Layout/MainLayout.razor
+++ b/src/Web/Components/Layout/MainLayout.razor
@@ -1,7 +1,7 @@
 @inherits LayoutComponentBase
 
 
-<div class="min-h-screen flex flex-col bg-primary-400 dark:bg-primary-800 text-primary-800 dark:text-primary-300">
+<div class="min-h-screen flex flex-col bg-primary-100 dark:bg-primary-800 text-primary-900 dark:text-primary-100">
 	<NavMenu/>
 
 	<main id="main-content" tabindex="-1" class="mx-auto w-full max-w-7xl flex-1 px-4 pt-20 pb-8 outline-none focus:outline-none focus-visible:outline-none">
diff --git a/src/Web/Components/Layout/NavMenu.razor b/src/Web/Components/Layout/NavMenu.razor
index 11017fbc..e981096e 100644
--- a/src/Web/Components/Layout/NavMenu.razor
+++ b/src/Web/Components/Layout/NavMenu.razor
@@ -1,7 +1,7 @@
 <header>
 	<nav class="fixed top-0 left-0 right-0 z-50
-		bg-primary-600 dark:bg-primary-600
-		border-b-2 border-primary-200 dark:border-primary-200" aria-label="Main navigation">
+		bg-primary-500 dark:bg-primary-900
+		border-b-2 border-primary-300 dark:border-primary-700" aria-label="Main navigation">
 		<div class="mx-auto max-w-7xl px-4">
 			<div class="flex items-center justify-between h-16">
 
@@ -11,7 +11,7 @@
 				@* Mobile hamburger (pure CSS peer toggle — no JS required) *@
 				<input type="checkbox" id="menu-toggle" class="peer sr-only" aria-hidden="true" />
 				<label for="menu-toggle"
-							 class="md:hidden cursor-pointer p-2 rounded hover:bg-primary-500 dark:hover:bg-primary-600 text-white"
+							 class="md:hidden cursor-pointer p-2 rounded hover:bg-primary-400 dark:hover:bg-primary-800 text-primary-900 dark:text-primary-500"
 							 aria-label="Toggle navigation" role="button" tabindex="0">
 					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
diff --git a/src/Web/Features/BlogPosts/Create/Create.razor b/src/Web/Features/BlogPosts/Create/Create.razor
index 9ea46af9..25364977 100644
--- a/src/Web/Features/BlogPosts/Create/Create.razor
+++ b/src/Web/Features/BlogPosts/Create/Create.razor
@@ -11,33 +11,33 @@
 
 @if (_error is not null)
 {
-    <div class="rounded-lg border border-red-300 bg-red-50 text-red-700 px-4 py-3 text-sm mb-4 flex items-center justify-between" role="alert">
+    <div class="alert-error" role="alert">
         <span>@_error</span>
-        <button type="button" class="ml-4 cursor-pointer text-red-700 hover:text-red-900" @onclick="() => _error = null">&times;</button>
+        <button type="button" class="alert-dismiss" @onclick="() => _error = null">&times;</button>
     </div>
 }
 
-<div class="rounded-lg shadow p-6 bg-white dark:bg-gray-800 max-w-2xl">
+<div class="form-panel">
     <EditForm Model="_model" OnValidSubmit="HandleSubmit">
         <DataAnnotationsValidator />
         <ValidationSummary class="mb-4" />
 
-        <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-900 dark:text-gray-50 mb-1">Title</label>
-            <InputText class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400" @bind-Value="_model.Title" />
+        <div class="form-group">
+            <label class="form-label">Title</label>
+            <InputText class="form-input" @bind-Value="_model.Title" />
         </div>
-        <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-900 dark:text-gray-50 mb-1">Author</label>
-            <InputText class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400" @bind-Value="_model.Author" />
+        <div class="form-group">
+            <label class="form-label">Author</label>
+            <InputText class="form-input" @bind-Value="_model.Author" />
         </div>
-        <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-900 dark:text-gray-50 mb-1">Content</label>
-            <InputTextArea class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400" rows="8" @bind-Value="_model.Content" />
+        <div class="form-group">
+            <label class="form-label">Content</label>
+            <InputTextArea class="form-input" rows="8" @bind-Value="_model.Content" />
         </div>
 
         <div class="flex gap-2">
             <button type="submit" class="btn-primary">Create</button>
-            <a href="/blog" class="px-4 py-2 rounded font-medium border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-50 hover:bg-gray-100 dark:hover:bg-gray-700 transition">Cancel</a>
+            <a href="/blog" class="btn-secondary">Cancel</a>
         </div>
     </EditForm>
 </div>
diff --git a/src/Web/Features/BlogPosts/Edit/Edit.razor b/src/Web/Features/BlogPosts/Edit/Edit.razor
index b5f8668c..a358dff7 100644
--- a/src/Web/Features/BlogPosts/Edit/Edit.razor
+++ b/src/Web/Features/BlogPosts/Edit/Edit.razor
@@ -11,20 +11,20 @@
 
 @if (_error is not null)
 {
-    <div class="rounded-lg border border-red-300 bg-red-50 text-red-700 px-4 py-3 text-sm mb-4 flex items-center justify-between" role="alert">
+    <div class="alert-error" role="alert">
         <span>@_error</span>
-        <button type="button" class="ml-4 cursor-pointer text-red-700 hover:text-red-900" @onclick="() => _error = null">&times;</button>
+        <button type="button" class="alert-dismiss" @onclick="() => _error = null">&times;</button>
     </div>
 }
 
 @if (_concurrencyError)
 {
-    <div class="rounded-lg border border-yellow-300 bg-yellow-50 text-yellow-700 px-4 py-3 text-sm mb-4 flex items-center justify-between" role="alert">
+    <div class="alert-warning" role="alert">
         <div>
             <strong class="font-semibold">Concurrency Conflict:</strong> This post was modified by another user. 
             Please reload the page to get the latest version.
         </div>
-        <button type="button" class="ml-4 cursor-pointer text-yellow-700 hover:text-yellow-900" @onclick="() => _concurrencyError = false">&times;</button>
+        <button type="button" class="alert-dismiss" @onclick="() => _concurrencyError = false">&times;</button>
     </div>
 }
 
@@ -34,23 +34,23 @@
 }
 else if (_model is not null)
 {
-    <div class="rounded-lg shadow p-6 bg-white dark:bg-gray-800 max-w-2xl">
+    <div class="form-panel">
         <EditForm Model="_model" OnValidSubmit="HandleSubmit">
             <DataAnnotationsValidator />
             <ValidationSummary class="mb-4" />
 
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-900 dark:text-gray-50 mb-1">Title</label>
-                <InputText class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400" @bind-Value="_model.Title" />
+            <div class="form-group">
+                <label class="form-label">Title</label>
+                <InputText class="form-input" @bind-Value="_model.Title" />
             </div>
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-900 dark:text-gray-50 mb-1">Content</label>
-                <InputTextArea class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400" rows="8" @bind-Value="_model.Content" />
+            <div class="form-group">
+                <label class="form-label">Content</label>
+                <InputTextArea class="form-input" rows="8" @bind-Value="_model.Content" />
             </div>
 
             <div class="flex gap-2">
                 <button type="submit" class="btn-primary">Save</button>
-                <a href="/blog" class="px-4 py-2 rounded font-medium border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-50 hover:bg-gray-100 dark:hover:bg-gray-700 transition">Cancel</a>
+                <a href="/blog" class="btn-secondary">Cancel</a>
             </div>
         </EditForm>
     </div>
diff --git a/src/Web/Features/BlogPosts/List/Index.razor b/src/Web/Features/BlogPosts/List/Index.razor
index 89c422ba..db0b5df2 100644
--- a/src/Web/Features/BlogPosts/List/Index.razor
+++ b/src/Web/Features/BlogPosts/List/Index.razor
@@ -11,20 +11,20 @@
 
 @if (_error is not null)
 {
-    <div class="rounded-lg border border-red-300 bg-red-50 text-red-700 px-4 py-3 text-sm mb-4 flex items-center justify-between" role="alert">
+    <div class="alert-error" role="alert">
         <span>@_error</span>
-        <button type="button" class="ml-4 cursor-pointer text-red-700 hover:text-red-900" @onclick="() => _error = null">&times;</button>
+        <button type="button" class="alert-dismiss" @onclick="() => _error = null">&times;</button>
     </div>
 }
 
 @if (_concurrencyError)
 {
-    <div class="rounded-lg border border-yellow-300 bg-yellow-50 text-yellow-700 px-4 py-3 text-sm mb-4 flex items-center justify-between" role="alert">
+    <div class="alert-warning" role="alert">
         <div>
             <strong class="font-semibold">Concurrency Conflict:</strong> This post was modified by another user.
             Please reload the page to get the latest version.
         </div>
-        <button type="button" class="ml-4 cursor-pointer text-yellow-700 hover:text-yellow-900" @onclick="() => _concurrencyError = false">&times;</button>
+        <button type="button" class="alert-dismiss" @onclick="() => _concurrencyError = false">&times;</button>
     </div>
 }
 
@@ -44,17 +44,17 @@ else if (!_posts.Any())
 }
 else
 {
-    <div class="rounded-lg shadow bg-white dark:bg-gray-800 overflow-hidden">
-        <table class="w-full text-sm text-left text-gray-900 dark:text-gray-50">
-            <thead class="bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+    <div class="table-wrapper">
+        <table class="data-table">
+            <thead>
                 <tr>
-                    <th class="px-4 py-3">Title</th>
-                    <th class="px-4 py-3">Author</th>
-                    <th class="px-4 py-3">Published</th>
-                    <th class="px-4 py-3">Created</th>
+                    <th>Title</th>
+                    <th>Author</th>
+                    <th>Published</th>
+                    <th>Created</th>
                     <AuthorizeView Roles="Author,Admin">
                         <Authorized>
-                            <th class="px-4 py-3"></th>
+                            <th></th>
                         </Authorized>
                     </AuthorizeView>
                 </tr>
@@ -62,15 +62,15 @@ else
             <tbody>
                 @foreach (var post in _posts)
                 {
-                    <tr class="odd:bg-white odd:dark:bg-gray-800 even:bg-gray-50 even:dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 hover:bg-primary-50 dark:hover:bg-primary-950 transition">
-                        <td class="px-4 py-3">@post.Title</td>
-                        <td class="px-4 py-3">@post.Author</td>
-                        <td class="px-4 py-3">@(post.IsPublished ? "Yes" : "No")</td>
-                        <td class="px-4 py-3">@post.CreatedAt.ToShortDateString()</td>
+                    <tr>
+                        <td>@post.Title</td>
+                        <td>@post.Author</td>
+                        <td>@(post.IsPublished ? "Yes" : "No")</td>
+                        <td>@post.CreatedAt.ToShortDateString()</td>
                         <AuthorizeView Roles="Author,Admin">
                             <Authorized>
-                                <td class="px-4 py-3">
-                                    <a href="/blog/edit/@post.Id" class="inline-block px-3 py-1 text-sm rounded font-medium border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-50 hover:bg-gray-100 dark:hover:bg-gray-700 transition mr-1">Edit</a>
+                                <td>
+                                    <a href="/blog/edit/@post.Id" class="btn-secondary inline-block mr-1">Edit</a>
                                     <button class="inline-block px-3 py-1 text-sm rounded font-medium bg-red-600 text-white hover:bg-red-700 transition"
                                             @onclick="() => ConfirmDelete(post)">Delete</button>
                                 </td>
diff --git a/src/Web/Features/UserManagement/ManageRoles.razor b/src/Web/Features/UserManagement/ManageRoles.razor
index 660b2af6..c25ebb09 100644
--- a/src/Web/Features/UserManagement/ManageRoles.razor
+++ b/src/Web/Features/UserManagement/ManageRoles.razor
@@ -15,9 +15,9 @@ else
 {
     @if (_error is not null)
     {
-        <div class="rounded-lg border border-red-300 bg-red-50 text-red-700 px-4 py-3 text-sm mb-4 flex items-center justify-between" role="alert">
+        <div class="alert-error" role="alert">
             <span>@_error</span>
-            <button type="button" class="ml-4 cursor-pointer text-red-700 hover:text-red-900" aria-label="Close error" @onclick="() => _error = null">&times;</button>
+            <button type="button" class="alert-dismiss" aria-label="Close error" @onclick="() => _error = null">&times;</button>
         </div>
     }
 
@@ -26,24 +26,24 @@ else
         <p class="text-gray-600 dark:text-gray-400 mb-4">Available roles: @string.Join(", ", _availableRoles.Select(r => r.Name))</p>
     }
 
-    <div class="rounded-lg shadow bg-white dark:bg-gray-800 overflow-hidden">
-        <table class="w-full text-sm text-left text-gray-900 dark:text-gray-50">
-            <thead class="bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+    <div class="table-wrapper">
+        <table class="data-table">
+            <thead>
                 <tr>
-                    <th class="px-4 py-3">User</th>
-                    <th class="px-4 py-3">Email</th>
-                    <th class="px-4 py-3">Current Roles</th>
-                    <th class="px-4 py-3">Actions</th>
+                    <th>User</th>
+                    <th>Email</th>
+                    <th>Current Roles</th>
+                    <th>Actions</th>
                 </tr>
             </thead>
             <tbody>
                 @foreach (var user in _users)
                 {
-                    <tr class="odd:bg-white odd:dark:bg-gray-800 even:bg-gray-50 even:dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 hover:bg-primary-50 dark:hover:bg-primary-950 transition">
-                        <td class="px-4 py-3">@user.Name</td>
-                        <td class="px-4 py-3">@user.Email</td>
-                        <td class="px-4 py-3">@string.Join(", ", user.Roles)</td>
-                        <td class="px-4 py-3">
+                    <tr>
+                        <td>@user.Name</td>
+                        <td>@user.Email</td>
+                        <td>@string.Join(", ", user.Roles)</td>
+                        <td>
                             @foreach (var role in _availableRoles.Where(r => !user.Roles.Contains(r.Name)))
                             {
                                 <button class="inline-block px-3 py-1 text-sm rounded border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 transition mr-1 mb-1"
diff --git a/src/Web/Styles/input.css b/src/Web/Styles/input.css
index b8a88127..414d3d11 100644
--- a/src/Web/Styles/input.css
+++ b/src/Web/Styles/input.css
@@ -52,20 +52,20 @@
 @layer components {
 	/* ─── Nav Links ───────────────────────────────────────────────────────── */
 	.nav-link {
-		@apply text-primary-100 dark:text-primary-100
-		hover:text-primary-400 dark:hover:text-primary-400
+		@apply text-primary-900 dark:text-primary-500
+		hover:text-primary-700 dark:hover:text-primary-200
 		transition-colors;
 	}
 
 	.nav-link.active {
-		@apply font-bold border-b-2 border-white;
+		@apply font-bold border-b-2 border-primary-900 dark:border-primary-500;
 	}
 
 	/* ─── Footer ─────────────────────────────────────────────────────────── */
 	footer {
-		@apply border-t-2 border-primary-200 dark:border-primary-200
-		bg-primary-600 dark:bg-primary-600
-		text-primary-50 dark:text-primary-100
+		@apply border-t-2 border-primary-300 dark:border-primary-700
+		bg-primary-500 dark:bg-primary-900
+		text-primary-900 dark:text-primary-500
 		py-3 text-center text-sm font-medium shadow-lg;
 	}
 
@@ -85,13 +85,86 @@
 		rounded-lg shadow;
 	}
 
+	/* ─── Tables ──────────────────────────────────────────────────────────── */
+	.table-wrapper {
+		@apply rounded-lg shadow bg-white dark:bg-gray-800 overflow-hidden;
+	}
+
+	.data-table {
+		@apply w-full text-sm text-left text-gray-900 dark:text-gray-50;
+
+		& thead {
+			@apply bg-primary-500 dark:bg-primary-900
+			text-primary-900 dark:text-primary-500
+			border-b border-primary-300 dark:border-primary-700;
+		}
+
+		& thead th {
+			@apply px-4 py-3;
+		}
+
+		& tbody tr {
+			@apply odd:bg-white odd:dark:bg-gray-800 even:bg-gray-50 even:dark:bg-gray-900
+			border-b border-gray-200 dark:border-gray-700
+			hover:bg-primary-100 dark:hover:bg-primary-800 transition;
+		}
+
+		& tbody td {
+			@apply px-4 py-3;
+		}
+	}
+
+	/* ─── Forms ───────────────────────────────────────────────────────────── */
+	.form-panel {
+		@apply rounded-lg shadow p-6 bg-white dark:bg-gray-800 max-w-2xl;
+	}
+
+	.form-group {
+		@apply mb-4;
+	}
+
+	.form-label {
+		@apply block text-sm font-medium text-gray-900 dark:text-gray-50 mb-1;
+	}
+
+	.form-input {
+		@apply w-full rounded border border-gray-300 dark:border-gray-600
+		bg-white dark:bg-gray-700
+		text-gray-900 dark:text-gray-50
+		px-3 py-2 text-sm
+		focus:outline-none focus:ring-2 focus:ring-primary-400;
+	}
+
+	/* ─── Secondary button (Cancel / neutral action) ──────────────────────── */
+	.btn-secondary {
+		@apply px-4 py-2 rounded font-medium
+		border border-gray-300 dark:border-gray-600
+		text-gray-900 dark:text-gray-50
+		hover:bg-gray-100 dark:hover:bg-gray-700 transition;
+	}
+
+	/* ─── Alert banners ───────────────────────────────────────────────────── */
+	.alert-error {
+		@apply rounded-lg border border-red-300 bg-red-50 text-red-700
+		px-4 py-3 text-sm mb-4 flex items-center justify-between;
+	}
+
+	.alert-warning {
+		@apply rounded-lg border border-yellow-300 bg-yellow-50 text-yellow-700
+		px-4 py-3 text-sm mb-4 flex items-center justify-between;
+	}
+
+	.alert-dismiss {
+		@apply ml-4 cursor-pointer hover:opacity-75;
+	}
+
 	/* ─── Blazor form validation ──────────────────────────────────────────── */
 	.valid.modified:not([type=checkbox]) {
-		@apply outline outline-1 outline-green-500;
+		@apply outline-1 outline-green-500;
 	}
 
 	.invalid {
-		@apply outline outline-1 outline-red-500;
+		@apply outline-1 outline-red-500;
 	}
 
 	.validation-message {
diff --git a/src/Web/Styles/themes.css b/src/Web/Styles/themes.css
index e6008214..c364026f 100644
--- a/src/Web/Styles/themes.css
+++ b/src/Web/Styles/themes.css
@@ -1,61 +1,62 @@
 /* ─── Theme colour palettes (OKLCH) ──────────────────────────────────────── */
 /* Applied to <html> by themeManager.js when a user picks a colour.          */
-/* Standard Tailwind 4 OKLCH values for blue, red, green, and yellow.         */
+/* Pastel-compressed OKLCH palettes: 950 ≈ old-500 lightness, 50 ≈ old-50.   */
+/* Yellow hue corrected to stay in 87–103° range throughout (no amber drift). */
 
 @layer base {
 	:root.color-blue {
 		--primary-50:  oklch(97.08% 0.0138 238.07);
-		--primary-100: oklch(94.26% 0.0315 246.17);
-		--primary-200: oklch(89.33% 0.0608 248.28);
-		--primary-300: oklch(81.29% 0.1009 251.57);
-		--primary-400: oklch(71.64% 0.1435 254.62);
-		--primary-500: oklch(62.34% 0.1783 259.22);
-		--primary-600: oklch(54.65% 0.2154 263.19);
-		--primary-700: oklch(46.39% 0.2024 264.23);
-		--primary-800: oklch(39.67% 0.1633 262.64);
-		--primary-900: oklch(35.16% 0.1215 261.97);
-		--primary-950: oklch(28.21% 0.1094 261.97);
+		--primary-100: oklch(95.67% 0.0226 242.12);
+		--primary-200: oklch(94.26% 0.0315 246.17);
+		--primary-300: oklch(91.80% 0.0461 247.22);
+		--primary-400: oklch(89.33% 0.0608 248.28);
+		--primary-500: oklch(85.31% 0.0809 249.93);
+		--primary-600: oklch(81.29% 0.1009 251.57);
+		--primary-700: oklch(76.47% 0.1222 253.09);
+		--primary-800: oklch(71.64% 0.1435 254.62);
+		--primary-900: oklch(66.99% 0.1609 256.92);
+		--primary-950: oklch(62.34% 0.1783 259.22);
 	}
 
 	:root.color-red {
 		--primary-50:  oklch(97.14% 0.0127 17.38);
-		--primary-100: oklch(94.52% 0.0237 25.71);
-		--primary-200: oklch(88.47% 0.0522 22.23);
-		--primary-300: oklch(80.85% 0.1033 21.41);
-		--primary-400: oklch(73.08% 0.1671 21.73);
-		--primary-500: oklch(63.77% 0.2265 22.55);
-		--primary-600: oklch(57.65% 0.2451 25.34);
-		--primary-700: oklch(50.11% 0.2249 26.89);
-		--primary-800: oklch(44.09% 0.1906 26.12);
-		--primary-900: oklch(38.06% 0.1491 25.51);
-		--primary-950: oklch(25.77% 0.0921 26.04);
+		--primary-100: oklch(95.83% 0.0182 21.55);
+		--primary-200: oklch(94.52% 0.0237 25.71);
+		--primary-300: oklch(91.50% 0.0379 23.97);
+		--primary-400: oklch(88.47% 0.0522 22.23);
+		--primary-500: oklch(84.66% 0.0777 21.82);
+		--primary-600: oklch(80.85% 0.1033 21.41);
+		--primary-700: oklch(76.97% 0.1352 21.57);
+		--primary-800: oklch(73.08% 0.1671 21.73);
+		--primary-900: oklch(68.42% 0.1968 22.14);
+		--primary-950: oklch(63.77% 0.2265 22.55);
 	}
 
 	:root.color-green {
-		--primary-50:  oklch(98.2%  0.0182 155.83);
-		--primary-100: oklch(96.26% 0.0373 156.07);
-		--primary-200: oklch(92.59% 0.0792 157.37);
-		--primary-300: oklch(87.08% 0.1332 153.53);
-		--primary-400: oklch(79.27% 0.191  151.11);
-		--primary-500: oklch(72.33% 0.2166 150.66);
-		--primary-600: oklch(62.74% 0.1971 152.35);
-		--primary-700: oklch(52.7%  0.1771 153.84);
-		--primary-800: oklch(44.77% 0.1387 154.01);
-		--primary-900: oklch(38.25% 0.1005 152.94);
-		--primary-950: oklch(26.61% 0.0653 152.94);
+		--primary-50:  oklch(98.20% 0.0182 155.83);
+		--primary-100: oklch(97.23% 0.0278 155.95);
+		--primary-200: oklch(96.26% 0.0373 156.07);
+		--primary-300: oklch(94.43% 0.0583 156.72);
+		--primary-400: oklch(92.59% 0.0792 157.37);
+		--primary-500: oklch(89.84% 0.1062 155.45);
+		--primary-600: oklch(87.08% 0.1332 153.53);
+		--primary-700: oklch(83.17% 0.1621 152.32);
+		--primary-800: oklch(79.27% 0.1910 151.11);
+		--primary-900: oklch(75.80% 0.2038 150.88);
+		--primary-950: oklch(72.33% 0.2166 150.66);
 	}
 
 	:root.color-yellow {
 		--primary-50:  oklch(98.71% 0.0256 102.21);
-		--primary-100: oklch(97.48% 0.0458 103.08);
-		--primary-200: oklch(95.41% 0.0769 101.56);
-		--primary-300: oklch(91.74% 0.1453  99.21);
-		--primary-400: oklch(85.25% 0.1871  87.2);
-		--primary-500: oklch(79.5%  0.175   62.03);
-		--primary-600: oklch(70.57% 0.1751  52.34);
-		--primary-700: oklch(62.06% 0.1647  48.27);
-		--primary-800: oklch(54.33% 0.1438  48.29);
-		--primary-900: oklch(47.64% 0.1206  47.44);
-		--primary-950: oklch(28.63% 0.0661  53.81);
+		--primary-100: oklch(98.09% 0.0357 102.64);
+		--primary-200: oklch(97.48% 0.0458 103.08);
+		--primary-300: oklch(96.44% 0.0614 102.32);
+		--primary-400: oklch(95.41% 0.0769 101.56);
+		--primary-500: oklch(93.57% 0.1111 100.38);
+		--primary-600: oklch(91.74% 0.1453  99.21);
+		--primary-700: oklch(88.50% 0.1662  93.20);
+		--primary-800: oklch(85.25% 0.1871  87.20);
+		--primary-900: oklch(82.38% 0.1810  87.20);
+		--primary-950: oklch(79.50% 0.1750  87.20);
 	}
 }
diff --git a/src/Web/wwwroot/css/app.css b/src/Web/wwwroot/css/app.css
index 0430827a..e89c9109 100644
--- a/src/Web/wwwroot/css/app.css
+++ b/src/Web/wwwroot/css/app.css
@@ -153,11 +153,11 @@
 
 	/* ─── Blazor form validation ─────────────────────────────────────────────── */
 	.valid.modified:not([type=checkbox]) {
-		@apply outline outline-1 outline-green-500;
+		@apply outline-1 outline-green-500;
 	}
 
 	.invalid {
-		@apply outline outline-1 outline-red-500;
+		@apply outline-1 outline-red-500;
 	}
 
 	.validation-message {
diff --git a/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs b/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
index 8f9aa84b..086ac951 100644
--- a/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
+++ b/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
@@ -448,7 +448,7 @@ public void ManageRolesRemoveButtonSendsCommandAndRefreshesUsers()
 		cut.WaitForAssertion(() =>
 		{
 			cut.Markup.Should().Contain("+ Author");
-			cut.Markup.Should().Contain("<td class=\"px-4 py-3\">Admin</td>");
+			cut.Markup.Should().Contain("<td>Admin</td>");
 		});
 	}