add: change the whole BlazorFrontend theme to Mystic Lavender Hue

BlazorFrontend/Components/App.razor

@@ -21,18 +21,31 @@
                         sans: ['Inter', 'sans-serif'],
                     },
                     colors: {
+                        mystic: {
+                            50: '#fcfbff',
+                            100: '#e3dfff', // Main Soft Lavender
+                            200: '#d3c0cd', // Muted Rose
+                            300: '#c1acb9',
+                            400: '#b19994', // Warm Taupe
+                            500: '#a3877d',
+                            600: '#937666', // Muted Brown
+                            700: '#7a5f51',
+                            800: '#5a4b5d',
+                            900: '#3d3a4b', // Dark Slate Purple
+                            950: '#2a2736',
+                        },
                         primary: {
-                            50: '#f8fafc',
-                            100: '#f1f5f9',
-                            200: '#e2e8f0',
-                            300: '#cbd5e1',
-                            400: '#94a3b8',
-                            500: '#64748b',
-                            600: '#475569',
-                            700: '#334155',
-                            800: '#1e293b',
-                            900: '#0f172a',
-                            950: '#020617',
+                            50: '#f4f4f6',
+                            100: '#e9e9ed',
+                            200: '#d3d2db',
+                            300: '#bdbcc9',
+                            400: '#908fa7',
+                            500: '#646285',
+                            600: '#5a5878',
+                            700: '#4b4a64',
+                            800: '#3d3a4b', // Using mystic-900 as primary base
+                            900: '#32303d',
+                            950: '#2a2736',
                         },
                     },
                 }
@@ -42,15 +55,16 @@
     
     <style type="text/tailwindcss">
         @@layer base {
-            body { @@apply text-slate-900 antialiased h-full; }
+            body { @@apply text-mystic-900 antialiased h-full bg-mystic-100/30; }
+            html { @@apply bg-mystic-100/30; }
         }
         @@layer components {
-            .nav-link { @@apply flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md transition-colors text-slate-600 hover:text-slate-900 hover:bg-slate-100; }
-            .nav-link.active { @@apply bg-slate-900 text-white hover:bg-slate-900 hover:text-white; }
+            .nav-link { @@apply flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md transition-colors text-mystic-600 hover:text-mystic-900 hover:bg-mystic-200/50; }
+            .nav-link.active { @@apply bg-mystic-900 text-white hover:bg-mystic-900 hover:text-white; }
             
-            .card { @@apply bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden; }
-            .btn-primary { @@apply inline-flex items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow transition-colors hover:bg-slate-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50; }
-            .btn-secondary { @@apply inline-flex items-center justify-center rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50; }
+            .card { @@apply bg-white border border-mystic-200 rounded-xl shadow-sm overflow-hidden; }
+            .btn-primary { @@apply inline-flex items-center justify-center rounded-md bg-mystic-900 px-4 py-2 text-sm font-medium text-white shadow transition-colors hover:bg-mystic-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-mystic-950 disabled:pointer-events-none disabled:opacity-50; }
+            .btn-secondary { @@apply inline-flex items-center justify-center rounded-md border border-mystic-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-mystic-100 hover:text-mystic-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-mystic-950 disabled:pointer-events-none disabled:opacity-50; }
         }
     </style>
     
@@ -70,7 +84,7 @@
             const container = document.getElementById('toast-container');
             const toast = document.createElement('div');
             
-            const bgColor = type === 'success' ? 'bg-slate-900' : 'bg-red-600';
+            const bgColor = type === 'success' ? 'bg-mystic-900' : 'bg-red-600';
             const icon = type === 'success' 
                 ? '<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>'
                 : '<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>';

BlazorFrontend/Components/Layout/MainLayout.razor

@@ -6,9 +6,9 @@
 <div class="flex h-full overflow-hidden">
     <!-- Sidebar -->
     <aside class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0 z-50">
-        <div class="flex flex-col flex-grow border-r border-slate-200 bg-white pt-5 pb-4 overflow-y-auto">
+        <div class="flex flex-col flex-grow border-r border-mystic-200 bg-white pt-5 pb-4 overflow-y-auto">
             <div class="flex items-center flex-shrink-0 px-4 gap-2">
-                <div class="bg-slate-900 rounded-lg p-1.5 text-white">
+                <div class="bg-mystic-900 rounded-lg p-1.5 text-white">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
                 </div>
                 <span class="text-lg font-bold tracking-tight">Library OS</span>
@@ -71,27 +71,27 @@
                     </AuthorizeView>
                 </nav>
             </div>
-            <div class="px-4 py-4 border-t border-slate-100">
+            <div class="px-4 py-4 border-t border-mystic-100">
                 <AuthorizeView>
                     <Authorized Context="authContext">
                         <div class="flex items-center gap-3">
-                            <div class="h-8 w-8 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-xs uppercase">
+                            <div class="h-8 w-8 rounded-full bg-mystic-900 flex items-center justify-center text-white font-bold text-xs uppercase">
                                 @(authContext.User.Identity?.Name?.Substring(0, 2) ?? "US")
                             </div>
                             <div class="flex flex-col">
                                 <span class="text-sm font-medium">@authContext.User.Identity?.Name</span>
-                                <span class="text-xs text-slate-500">@authContext.User.Claims.FirstOrDefault(c => c.Type == System.Security.Claims.ClaimTypes.Role || c.Type == "role")?.Value</span>
+                                <span class="text-xs text-mystic-500">@authContext.User.Claims.FirstOrDefault(c => c.Type == System.Security.Claims.ClaimTypes.Role || c.Type == "role")?.Value</span>
                             </div>
                         </div>
                     </Authorized>
                     <NotAuthorized>
                         <div class="flex items-center gap-3">
-                            <div class="h-8 w-8 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-xs uppercase">
+                            <div class="h-8 w-8 rounded-full bg-mystic-900 flex items-center justify-center text-white font-bold text-xs uppercase">
                                 GU
                             </div>
                             <div class="flex flex-col">
                                 <span class="text-sm font-medium">Guest User</span>
-                                <span class="text-xs text-slate-500">Sign in to borrow</span>
+                                <span class="text-xs text-mystic-500">Sign in to borrow</span>
                             </div>
                         </div>
                     </NotAuthorized>
@@ -103,23 +103,23 @@
     <!-- Main Content Wrapper -->
     <div class="md:pl-64 flex flex-col flex-1 w-0">
         <!-- Topbar -->
-        <header class="flex-shrink-0 flex h-16 bg-white border-b border-slate-200">
+        <header class="flex-shrink-0 flex h-16 bg-white border-b border-mystic-200">
             <div class="flex-1 px-4 flex justify-between">
                 <div class="flex-1 flex items-center">
                     <div class="w-full max-w-sm">
                         <label for="search" class="sr-only">Search</label>
                         <div class="relative">
                             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <svg class="h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <svg class="h-4 w-4 text-mystic-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                     <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                                 </svg>
                             </div>
-                            <input id="search" name="search" class="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-md leading-5 bg-slate-50 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-900 focus:border-slate-900 sm:text-sm transition-all" placeholder="Search books, authors, ISBN..." type="search">
+                            <input id="search" name="search" class="block w-full pl-10 pr-3 py-2 border border-mystic-200 rounded-md leading-5 bg-mystic-50 placeholder-mystic-400 focus:outline-none focus:ring-1 focus:ring-mystic-900 focus:border-mystic-900 sm:text-sm transition-all" placeholder="Search books, authors, ISBN..." type="search">
                         </div>
                     </div>
                 </div>
                 <div class="ml-4 flex items-center md:ml-6 gap-4">
-                    <button type="button" class="bg-white p-1 rounded-full text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900">
+                    <button type="button" class="bg-white p-1 rounded-full text-mystic-400 hover:text-mystic-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mystic-900">
                         <span class="sr-only">View notifications</span>
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
@@ -147,7 +147,7 @@
                 else
                 {
                     <div class="flex items-center justify-center h-64">
-                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div>
+                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-mystic-900"></div>
                     </div>
                 }
             </div>

BlazorFrontend/Components/Pages/Books.razor

@@ -12,10 +12,10 @@
 {
     <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 animate-in fade-in slide-in-from-top-4 duration-500">
         <div>
-            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Books Catalog</h1>
-            <p class="mt-2 text-slate-500">
+            <h1 class="text-3xl font-bold tracking-tight text-mystic-900">Books Catalog</h1>
+            <p class="mt-2 text-mystic-500">
                 Explore and discover your next great read.
-                <span class="ml-2 text-xs text-slate-400">(@FilteredBooks.Count() total)</span>
+                <span class="ml-2 text-xs text-mystic-400">(@FilteredBooks.Count() total)</span>
             </p>
         </div>
         <AuthorizeView Roles="Librarian">
@@ -32,12 +32,12 @@
         <div class="md:col-span-3">
             <div class="relative">
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <svg class="h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <svg class="h-4 w-4 text-mystic-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                     </svg>
                 </div>
                 <input type="text" @bind="_searchQuery" @bind:event="oninput"
-                       class="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent sm:text-sm shadow-sm" 
+                       class="block w-full pl-10 pr-3 py-2 border border-mystic-200 rounded-lg bg-white placeholder-mystic-400 focus:outline-none focus:ring-2 focus:ring-mystic-900 focus:border-transparent sm:text-sm shadow-sm" 
                        placeholder="Search by title, author or ISBN...">
             </div>
         </div>
@@ -46,15 +46,15 @@
     @if (_categories.Any())
     {
         <div class="flex flex-wrap items-center gap-2 mb-8 animate-in fade-in duration-700">
-            <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider mr-1">Filter:</span>
+            <span class="text-xs font-semibold text-mystic-400 uppercase tracking-wider mr-1">Filter:</span>
             <button @onclick="() => FilterByCategory(null)"
-               class='inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border transition-colors @(_selectedCategoryId == null ? "bg-slate-900 text-white border-slate-900" : "bg-white text-slate-600 border-slate-200 hover:border-slate-400 hover:text-slate-900")'>
+               class='inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border transition-colors @(_selectedCategoryId == null ? "bg-mystic-900 text-white border-mystic-900" : "bg-white text-mystic-600 border-mystic-200 hover:border-mystic-400 hover:text-mystic-900")'>
                 All
             </button>
             @foreach (var cat in _categories)
             {
                 <button @onclick="() => FilterByCategory(cat.Id)"
-                   class='inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border transition-colors @(_selectedCategoryId == cat.Id ? "bg-slate-900 text-white border-slate-900" : "bg-white text-slate-600 border-slate-200 hover:border-slate-400 hover:text-slate-900")'>
+                   class='inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border transition-colors @(_selectedCategoryId == cat.Id ? "bg-mystic-900 text-white border-mystic-900" : "bg-white text-mystic-600 border-mystic-200 hover:border-mystic-400 hover:text-mystic-900")'>
                     @cat.Name
                 </button>
             }
@@ -64,14 +64,14 @@
     @if (_isLoading)
     {
         <div class="py-20 flex justify-center">
-            <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+            <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-mystic-900"></div>
         </div>
     }
     else if (!FilteredBooks.Any())
     {
-        <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200 animate-in fade-in duration-500">
-            <svg class="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
-            <p class="text-slate-500 font-medium">No books found matching your criteria.</p>
+        <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200 animate-in fade-in duration-500">
+            <svg class="w-16 h-16 mx-auto text-mystic-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+            <p class="text-mystic-500 font-medium">No books found matching your criteria.</p>
         </div>
     }
     else
@@ -80,7 +80,7 @@
             @foreach (var book in FilteredBooks)
             {
                 <div class="group card hover:shadow-lg transition-all duration-300 flex flex-col h-full">
-                    <div @onclick="() => ShowDetails(book.Id)" class="relative aspect-[2/3] w-full bg-slate-100 flex items-center justify-center text-slate-300 overflow-hidden text-center cursor-pointer group-hover:scale-105 transition-transform duration-500">
+                    <div @onclick="() => ShowDetails(book.Id)" class="relative aspect-[2/3] w-full bg-mystic-100 flex items-center justify-center text-mystic-300 overflow-hidden text-center cursor-pointer group-hover:scale-105 transition-transform duration-500">
                         @if (!string.IsNullOrWhiteSpace(book.CoverUrl))
                         {
                             <img src="@book.CoverUrl" alt="@book.Title" class="absolute inset-0 w-full h-full object-cover" />
@@ -89,24 +89,24 @@
                         {
                             <div class="flex flex-col items-center gap-4 p-4">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
-                                <span class="text-[10px] font-bold text-slate-400">@book.Isbn</span>
+                                <span class="text-[10px] font-bold text-mystic-400">@book.Isbn</span>
                             </div>
                         }
                         
                         @if (book.AvailableCopies <= 0)
                         {
-                            <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-[2px] flex items-center justify-center">
-                                <span class="bg-white text-slate-900 text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded">Out of Stock</span>
+                            <div class="absolute inset-0 bg-mystic-900/60 backdrop-blur-[2px] flex items-center justify-center">
+                                <span class="bg-white text-mystic-900 text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded">Out of Stock</span>
                             </div>
                         }
                     </div>
                     <div class="p-4 flex-grow flex flex-col">
                         <div class="flex items-start justify-between gap-2">
                             <div class="min-w-0">
-                                <h3 @onclick="() => ShowDetails(book.Id)" class="text-sm font-bold text-slate-900 truncate group-hover:text-amber-600 transition-colors cursor-pointer">
+                                <h3 @onclick="() => ShowDetails(book.Id)" class="text-sm font-bold text-mystic-900 truncate group-hover:text-mystic-600 transition-colors cursor-pointer">
                                     @book.Title
                                 </h3>
-                                <p class="text-xs text-slate-500 mt-0.5 truncate">@book.Author</p>
+                                <p class="text-xs text-mystic-500 mt-0.5 truncate">@book.Author</p>
                             </div>
                         </div>
                         @if (book.Categories.Any())
@@ -121,7 +121,7 @@
                             </div>
                         }
                         <div class="mt-3 flex items-center justify-between">
-                            <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">@book.Status</span>
+                            <span class="inline-flex items-center rounded-full bg-mystic-100 px-2 py-0.5 text-[10px] font-medium text-mystic-600">@book.Status</span>
                             <span class="text-[10px] font-medium @(book.AvailableCopies > 0 ? "text-emerald-600" : "text-rose-600")">
                                 @book.AvailableCopies / @book.TotalCopies
                             </span>
@@ -129,7 +129,7 @@
                         <div class="mt-auto pt-4 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                             <button @onclick="() => ShowDetails(book.Id)" class="flex-1 btn-secondary py-1 text-[11px]">Details</button>
                             <AuthorizeView Roles="Librarian">
-                                <button @onclick="() => ShowEdit(book.Id)" class="p-1.5 rounded-md border border-slate-200 hover:bg-slate-50 text-slate-600">
+                                <button @onclick="() => ShowEdit(book.Id)" class="p-1.5 rounded-md border border-mystic-200 hover:bg-mystic-50 text-mystic-600">
                                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                 </button>
                             </AuthorizeView>
@@ -143,14 +143,14 @@
 else if (_viewMode == ViewMode.Details && _selectedBook != null)
 {
     <div class="mb-8 animate-in fade-in slide-in-from-left-4 duration-500">
-        <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-mystic-500 hover:text-mystic-900 mb-6 group">
             <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
             Back to Catalog
         </button>
         
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
             <div class="lg:col-span-1">
-                <div class="aspect-[2/3] w-full rounded-2xl bg-slate-100 border border-slate-200 shadow-sm flex items-center justify-center text-slate-300 overflow-hidden">
+                <div class="aspect-[2/3] w-full rounded-2xl bg-mystic-100 border border-mystic-200 shadow-sm flex items-center justify-center text-mystic-300 overflow-hidden">
                     @if (!string.IsNullOrWhiteSpace(_selectedBook.CoverUrl))
                     {
                         <img src="@_selectedBook.CoverUrl" alt="@_selectedBook.Title" class="w-full h-full object-cover" />
@@ -164,25 +164,25 @@ else if (_viewMode == ViewMode.Details && _selectedBook != null)
 
             <div class="lg:col-span-2 space-y-8">
                 <div>
-                    <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 mb-4 tracking-wide uppercase">@_selectedBook.Status</span>
-                    <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight">@_selectedBook.Title</h1>
-                    <p class="text-xl text-slate-500 mt-2 font-medium">by @_selectedBook.Author</p>
+                    <span class="inline-flex items-center rounded-full bg-mystic-100 px-3 py-1 text-xs font-semibold text-mystic-600 mb-4 tracking-wide uppercase">@_selectedBook.Status</span>
+                    <h1 class="text-4xl font-extrabold text-mystic-900 tracking-tight">@_selectedBook.Title</h1>
+                    <p class="text-xl text-mystic-500 mt-2 font-medium">by @_selectedBook.Author</p>
                 </div>
 
-                <div class="prose prose-slate max-w-none">
-                    <h3 class="text-lg font-bold text-slate-900 border-b border-slate-100 pb-2 mb-4 uppercase tracking-wider text-sm">Description</h3>
-                    <p class="text-slate-600 leading-relaxed">
+                <div class="prose prose-mystic max-w-none">
+                    <h3 class="text-lg font-bold text-mystic-900 border-b border-mystic-100 pb-2 mb-4 uppercase tracking-wider text-sm">Description</h3>
+                    <p class="text-mystic-600 leading-relaxed">
                         @(string.IsNullOrEmpty(_selectedBook.Description) ? "No description available for this book." : _selectedBook.Description)
                     </p>
                 </div>
 
-                <div class="grid grid-cols-2 gap-8 border-y border-slate-100 py-6">
+                <div class="grid grid-cols-2 gap-8 border-y border-mystic-100 py-6">
                     <div>
-                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">ISBN</h4>
-                        <p class="text-sm font-semibold text-slate-900">@_selectedBook.Isbn</p>
+                        <h4 class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest mb-1">ISBN</h4>
+                        <p class="text-sm font-semibold text-mystic-900">@_selectedBook.Isbn</p>
                     </div>
                     <div>
-                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Availability</h4>
+                        <h4 class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest mb-1">Availability</h4>
                         <p class="text-sm font-semibold @(_selectedBook.AvailableCopies > 0 ? "text-emerald-600" : "text-rose-600")">
                             @(_selectedBook.AvailableCopies > 0 ? $"{_selectedBook.AvailableCopies} / {_selectedBook.TotalCopies} units in stock" : "Currently occupied")
                         </p>
@@ -193,7 +193,7 @@ else if (_viewMode == ViewMode.Details && _selectedBook != null)
                     <AuthorizeView Roles="Member">
                         @if (_selectedBook.AvailableCopies > 0)
                         {
-                            <button @onclick="() => BorrowAsync(_selectedBook.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Borrow This Book</button>
+                            <button @onclick="() => BorrowAsync(_selectedBook.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-mystic-200">Borrow This Book</button>
                         }
                         else
                         {
@@ -221,15 +221,15 @@ else if (_viewMode == ViewMode.Details && _selectedBook != null)
 else if (_viewMode == ViewMode.Create || _viewMode == ViewMode.Edit)
 {
     <div class="mb-8 animate-in fade-in slide-in-from-right-4 duration-500">
-        <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <button @onclick="ShowList" class="inline-flex items-center text-sm font-medium text-mystic-500 hover:text-mystic-900 mb-6 group">
             <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
             Back to Catalog
         </button>
 
         <div class="max-w-3xl mx-auto">
             <div class="mb-8">
-                <h1 class="text-3xl font-bold tracking-tight text-slate-900">@(_viewMode == ViewMode.Create ? "Add New Book" : "Edit Book")</h1>
-                <p class="mt-2 text-slate-500">Fill in the details below to @(_viewMode == ViewMode.Create ? "add a new book to" : "update the") library catalog.</p>
+                <h1 class="text-3xl font-bold tracking-tight text-mystic-900">@(_viewMode == ViewMode.Create ? "Add New Book" : "Edit Book")</h1>
+                <p class="mt-2 text-mystic-500">Fill in the details below to @(_viewMode == ViewMode.Create ? "add a new book to" : "update the") library catalog.</p>
             </div>
 
             <div class="card p-6 sm:p-8">
@@ -237,46 +237,46 @@ else if (_viewMode == ViewMode.Create || _viewMode == ViewMode.Edit)
                     <DataAnnotationsValidator />
                     <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                         <div class="sm:col-span-2">
-                            <label class="block text-sm font-medium text-slate-700">Book Title <span class="text-rose-500">*</span></label>
-                            <InputText @bind-Value="_formModel.Title" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. The Great Gatsby" required />
+                            <label class="block text-sm font-medium text-mystic-700">Book Title <span class="text-rose-500">*</span></label>
+                            <InputText @bind-Value="_formModel.Title" class="mt-1 block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. The Great Gatsby" required />
                         </div>
 
                         <div>
-                            <label class="block text-sm font-medium text-slate-700">Author <span class="text-rose-500">*</span></label>
-                            <InputText @bind-Value="_formModel.Author" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. F. Scott Fitzgerald" required />
+                            <label class="block text-sm font-medium text-mystic-700">Author <span class="text-rose-500">*</span></label>
+                            <InputText @bind-Value="_formModel.Author" class="mt-1 block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. F. Scott Fitzgerald" required />
                         </div>
 
                         <div>
-                            <label class="block text-sm font-medium text-slate-700">ISBN <span class="text-rose-500">*</span></label>
-                            <InputText @bind-Value="_formModel.Isbn" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. 978-0743273565" required />
+                            <label class="block text-sm font-medium text-mystic-700">ISBN <span class="text-rose-500">*</span></label>
+                            <InputText @bind-Value="_formModel.Isbn" class="mt-1 block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. 978-0743273565" required />
                         </div>
 
                         <div>
-                            <label class="block text-sm font-medium text-slate-700">Total Copies <span class="text-rose-500">*</span></label>
-                            <InputNumber @bind-Value="_formModel.TotalCopies" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="1" required />
+                            <label class="block text-sm font-medium text-mystic-700">Total Copies <span class="text-rose-500">*</span></label>
+                            <InputNumber @bind-Value="_formModel.TotalCopies" class="mt-1 block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="1" required />
                         </div>
 
                         <div>
-                            <label class="block text-sm font-medium text-slate-700">Cover Image URL</label>
-                            <InputText @bind-Value="_formModel.CoverUrl" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="https://example.com/cover.jpg" />
+                            <label class="block text-sm font-medium text-mystic-700">Cover Image URL</label>
+                            <InputText @bind-Value="_formModel.CoverUrl" class="mt-1 block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="https://example.com/cover.jpg" />
                         </div>
                         
                         <div class="hidden sm:block"></div>
 
                         <div class="sm:col-span-2">
-                            <label class="block text-sm font-medium text-slate-700">Description</label>
-                            <InputTextArea @bind-Value="_formModel.Description" rows="4" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Brief summary of the book..."></InputTextArea>
+                            <label class="block text-sm font-medium text-mystic-700">Description</label>
+                            <InputTextArea @bind-Value="_formModel.Description" rows="4" class="mt-1 block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Brief summary of the book..."></InputTextArea>
                         </div>
 
                         <div class="sm:col-span-2">
-                            <label class="block text-sm font-medium text-slate-700 mb-2">Categories</label>
+                            <label class="block text-sm font-medium text-mystic-700 mb-2">Categories</label>
                             <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                                 @foreach (var cat in _categories)
                                 {
-                                    <label class="flex items-center gap-2 px-3 py-2 rounded-md border border-slate-200 bg-slate-50 hover:bg-slate-100 cursor-pointer text-sm text-slate-700 transition-colors">
+                                    <label class="flex items-center gap-2 px-3 py-2 rounded-md border border-mystic-200 bg-mystic-50 hover:bg-mystic-100 cursor-pointer text-sm text-mystic-700 transition-colors">
                                         <input type="checkbox" checked="@(_formModel.CategoryIds.Contains(cat.Id))"
                                                @onchange='(e) => ToggleCategory(cat.Id, (bool)e.Value!)'
-                                               class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900" />
+                                               class="h-4 w-4 rounded border-mystic-300 text-mystic-900 focus:ring-mystic-900" />
                                         @cat.Name
                                     </label>
                                 }
@@ -284,7 +284,7 @@ else if (_viewMode == ViewMode.Create || _viewMode == ViewMode.Edit)
                         </div>
                     </div>
 
-                    <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                    <div class="pt-5 border-t border-mystic-100 flex justify-end gap-3">
                         <button type="button" @onclick="ShowList" class="btn-secondary">Cancel</button>
                         <button type="submit" class="btn-primary" disabled="@_isSubmitting">
                             @(_isSubmitting ? "Saving..." : (_viewMode == ViewMode.Create ? "Add Book" : "Update Book"))

BlazorFrontend/Components/Pages/Borrowings.razor

@@ -7,14 +7,14 @@
 <PageTitle>My Loans</PageTitle>
 
 <div class="mb-8 animate-in fade-in slide-in-from-top-4 duration-500">
-    <h1 class="text-3xl font-bold tracking-tight text-slate-900">My Loans</h1>
-    <p class="mt-2 text-slate-500">Track your current borrowings and return upcoming books.</p>
+    <h1 class="text-3xl font-bold tracking-tight text-mystic-900">My Loans</h1>
+    <p class="mt-2 text-mystic-500">Track your current borrowings and return upcoming books.</p>
 </div>
 
 @if (_isLoading)
 {
     <div class="py-20 flex justify-center">
-        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-mystic-900"></div>
     </div>
 }
 else
@@ -23,44 +23,44 @@ else
         <div class="overflow-x-auto">
             <table class="w-full text-left border-collapse">
                 <thead>
-                    <tr class="bg-slate-50/50 border-b border-slate-100">
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Book Information</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Dates</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Status</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Fines</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Actions</th>
+                    <tr class="bg-mystic-50/50 border-b border-mystic-100">
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Book Information</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Dates</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Status</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Fines</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest text-right">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-slate-100">
+                <tbody class="divide-y divide-mystic-100">
                     @if (!_borrowings.Any())
                     {
                         <tr>
-                            <td colspan="5" class="px-6 py-12 text-center text-slate-400 italic">
+                            <td colspan="5" class="px-6 py-12 text-center text-mystic-400 italic">
                                 You don't have any borrowing history yet.
                             </td>
                         </tr>
                     }
                     @foreach (var loan in _borrowings)
                     {
-                        <tr class="hover:bg-slate-50 transition-colors group">
+                        <tr class="hover:bg-mystic-50 transition-colors group">
                             <td class="px-6 py-4">
                                 <div class="flex items-center gap-3">
-                                    <div class="w-10 h-14 bg-slate-100 rounded flex items-center justify-center text-slate-300 group-hover:bg-slate-200 transition-colors">
+                                    <div class="w-10 h-14 bg-mystic-100 rounded flex items-center justify-center text-mystic-300 group-hover:bg-mystic-200 transition-colors">
                                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                                     </div>
                                     <div class="min-w-0">
-                                        <p class="text-sm font-bold text-slate-900 truncate">@loan.BookTitle</p>
-                                        <p class="text-[11px] text-slate-500 mt-0.5">Loan ID: #@loan.Id</p>
+                                        <p class="text-sm font-bold text-mystic-900 truncate">@loan.BookTitle</p>
+                                        <p class="text-[11px] text-mystic-500 mt-0.5">Loan ID: #@loan.Id</p>
                                     </div>
                                 </div>
                             </td>
                             <td class="px-6 py-4">
                                 <div class="space-y-1">
-                                    <p class="text-[11px]"><span class="text-slate-400">Borrowed:</span> <span class="font-medium text-slate-700">@loan.BorrowDate.ToString("MMM dd, yyyy")</span></p>
-                                    <p class="text-[11px]"><span class="text-slate-400">Due:</span> <span class="font-medium @(loan.DueDate < DateTime.Now && loan.Status == "Borrowed" ? "text-rose-600" : "text-slate-700")">@loan.DueDate.ToString("MMM dd, yyyy")</span></p>
+                                    <p class="text-[11px]"><span class="text-mystic-400">Borrowed:</span> <span class="font-medium text-mystic-700">@loan.BorrowDate.ToString("MMM dd, yyyy")</span></p>
+                                    <p class="text-[11px]"><span class="text-mystic-400">Due:</span> <span class="font-medium @(loan.DueDate < DateTime.Now && loan.Status == "Borrowed" ? "text-rose-600" : "text-mystic-700")">@loan.DueDate.ToString("MMM dd, yyyy")</span></p>
                                     @if (loan.ReturnDate.HasValue)
                                     {
-                                        <p class="text-[11px]"><span class="text-slate-400">Returned:</span> <span class="font-medium text-emerald-600">@loan.ReturnDate.Value.ToString("MMM dd, yyyy")</span></p>
+                                        <p class="text-[11px]"><span class="text-mystic-400">Returned:</span> <span class="font-medium text-emerald-600">@loan.ReturnDate.Value.ToString("MMM dd, yyyy")</span></p>
                                     }
                                 </div>
                             </td>
@@ -76,7 +76,7 @@ else
                                 @if (loan.FineAmount > 0)
                                 {
                                     <div class="flex flex-col">
-                                        <span class="text-xs font-bold @(loan.IsFinePaid ? "text-slate-500 line-through" : "text-rose-600")">
+                                        <span class="text-xs font-bold @(loan.IsFinePaid ? "text-mystic-500 line-through" : "text-rose-600")">
                                             MMK @loan.FineAmount.ToString("N0")
                                         </span>
                                         @if (loan.IsFinePaid)
@@ -87,20 +87,20 @@ else
                                 }
                                 else
                                 {
-                                    <span class="text-[11px] text-slate-400">No Fines</span>
+                                    <span class="text-[11px] text-mystic-400">No Fines</span>
                                 }
                             </td>
                             <td class="px-6 py-4 text-right">
                                 @if (loan.Status == "Borrowed")
                                 {
                                     <button @onclick="() => RequestReturnAsync(loan)" 
-                                            class="bg-slate-900 text-white py-1.5 px-4 rounded-xl text-xs font-bold hover:bg-slate-800 transition-all active:scale-95 shadow-sm">
+                                            class="bg-mystic-900 text-white py-1.5 px-4 rounded-xl text-xs font-bold hover:bg-mystic-800 transition-all active:scale-95 shadow-sm">
                                         Return Book
                                     </button>
                                 }
                                 else if (loan.Status == "PendingReturn")
                                 {
-                                    <span class="text-xs font-medium text-slate-400 italic">Awaiting Approval</span>
+                                    <span class="text-xs font-medium text-mystic-400 italic">Awaiting Approval</span>
                                 }
                                 else
                                 {

BlazorFrontend/Components/Pages/BorrowingsManage.razor

@@ -11,13 +11,13 @@
 <div class="mb-10 animate-in fade-in slide-in-from-top-4 duration-500">
     <div class="flex items-center justify-between mb-4">
         <div>
-            <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 border-b border-slate-100 pb-4 mb-2">Manage All Borrowings</h1>
-            <p class="text-slate-500 font-medium">Monitor and process library loans across all members.</p>
+            <h1 class="text-3xl font-extrabold tracking-tight text-mystic-900 border-b border-mystic-100 pb-4 mb-2">Manage All Borrowings</h1>
+            <p class="text-mystic-500 font-medium">Monitor and process library loans across all members.</p>
         </div>
         <div class="flex gap-3">
-            <div class="card px-4 py-2 flex items-center gap-2 bg-slate-50 border-slate-200">
-                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Total Active:</span>
-                <span class="text-lg font-bold text-slate-900">@_borrowings.Count(m => m.Status == "Borrowed")</span>
+            <div class="card px-4 py-2 flex items-center gap-2 bg-mystic-50 border-mystic-200">
+                <span class="text-xs font-bold text-mystic-400 uppercase tracking-widest">Total Active:</span>
+                <span class="text-lg font-bold text-mystic-900">@_borrowings.Count(m => m.Status == "Borrowed")</span>
             </div>
         </div>
     </div>
@@ -26,7 +26,7 @@
 @if (_isLoading)
 {
     <div class="py-20 flex justify-center">
-        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-mystic-900"></div>
     </div>
 }
 else
@@ -35,52 +35,52 @@ else
         <div class="overflow-x-auto">
             <table class="w-full text-left border-collapse">
                 <thead>
-                    <tr class="bg-slate-50 border-b border-slate-200">
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Book & Loan Info</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Member Details</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Loan Dates</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center">Status</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Fines</th>
-                        <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Actions</th>
+                    <tr class="bg-mystic-50 border-b border-mystic-200">
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Book & Loan Info</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Member Details</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Loan Dates</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest text-center">Status</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Fines</th>
+                        <th class="px-6 py-4 text-[10px] font-bold text-mystic-400 uppercase tracking-widest text-right">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-slate-100">
+                <tbody class="divide-y divide-mystic-100">
                     @if (!_borrowings.Any())
                     {
                         <tr>
-                            <td colspan="6" class="px-6 py-16 text-center text-slate-400 italic bg-white">
+                            <td colspan="6" class="px-6 py-16 text-center text-mystic-400 italic bg-white">
                                 No borrowing records found in the system.
                             </td>
                         </tr>
                     }
                     @foreach (var loan in _borrowings.OrderByDescending(l => l.BorrowDate))
                     {
-                        <tr class="hover:bg-slate-50/80 transition-colors">
+                        <tr class="hover:bg-mystic-50/80 transition-colors">
                             <td class="px-6 py-5">
                                 <div class="flex items-center gap-4">
-                                    <div class="w-10 h-14 bg-slate-900/5 rounded-lg flex items-center justify-center text-slate-400 border border-slate-100">
+                                    <div class="w-10 h-14 bg-mystic-900/5 rounded-lg flex items-center justify-center text-mystic-400 border border-mystic-100">
                                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                                     </div>
                                     <div class="min-w-0">
-                                        <p class="text-sm font-bold text-slate-900 truncate mb-0.5">@loan.BookTitle</p>
-                                        <p class="text-[10px] font-mono text-slate-400 uppercase tracking-tight">ID: #@loan.Id</p>
+                                        <p class="text-sm font-bold text-mystic-900 truncate mb-0.5">@loan.BookTitle</p>
+                                        <p class="text-[10px] font-mono text-mystic-400 uppercase tracking-tight">ID: #@loan.Id</p>
                                     </div>
                                 </div>
                             </td>
                             <td class="px-6 py-5">
                                 <div class="flex flex-col gap-1">
-                                    <p class="text-sm font-semibold text-slate-800">@loan.UserEmail</p>
-                                    <p class="text-[10px] text-slate-500 font-medium tracking-wide">UID: #@loan.UserId</p>
+                                    <p class="text-sm font-semibold text-mystic-800">@loan.UserEmail</p>
+                                    <p class="text-[10px] text-mystic-500 font-medium tracking-wide">UID: #@loan.UserId</p>
                                 </div>
                             </td>
                             <td class="px-6 py-5">
                                 <div class="grid gap-1">
                                     <div class="flex items-center gap-2 text-[11px]">
-                                        <span class="text-slate-400 w-12">Out:</span>
-                                        <span class="font-bold text-slate-700">@loan.BorrowDate.ToString("MMM dd, yyyy")</span>
+                                        <span class="text-mystic-400 w-12">Out:</span>
+                                        <span class="font-bold text-mystic-700">@loan.BorrowDate.ToString("MMM dd, yyyy")</span>
                                     </div>
                                     <div class="flex items-center gap-2 text-[11px]">
-                                        <span class="text-slate-400 w-12">Due:</span>
+                                        <span class="text-mystic-400 w-12">Due:</span>
                                         @{
                                             var isOverdue = loan.DueDate < DateTime.Now && loan.Status == "Borrowed";
                                         }
@@ -89,7 +89,7 @@ else
                                     @if (loan.ReturnDate.HasValue)
                                     {
                                         <div class="flex items-center gap-2 text-[11px]">
-                                            <span class="text-slate-400 w-12">Back:</span>
+                                            <span class="text-mystic-400 w-12">Back:</span>
                                             <span class="font-bold text-emerald-600">@loan.ReturnDate.Value.ToString("MMM dd, yyyy")</span>
                                         </div>
                                     }
@@ -107,7 +107,7 @@ else
                                 @if (loan.FineAmount > 0)
                                 {
                                     <div class="flex flex-col">
-                                        <span class="text-sm font-extrabold @(loan.IsFinePaid ? "text-slate-400 line-through" : "text-rose-600")">
+                                        <span class="text-sm font-extrabold @(loan.IsFinePaid ? "text-mystic-400 line-through" : "text-rose-600")">
                                             MMK @loan.FineAmount.ToString("N0")
                                         </span>
                                         @if (loan.IsFinePaid)
@@ -122,7 +122,7 @@ else
                                 }
                                 else
                                 {
-                                    <span class="text-[10px] text-slate-300 font-bold italic">No Fines</span>
+                                    <span class="text-[10px] text-mystic-300 font-bold italic">No Fines</span>
                                 }
                             </td>
                             <td class="px-6 py-5 text-right">
@@ -137,7 +137,7 @@ else
                                 else if (loan.Status == "Borrowed")
                                 {
                                     <button @onclick="() => ForceReturnAsync(loan)"
-                                            class="inline-flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-slate-800 transition-all shadow-sm active:scale-95">
+                                            class="inline-flex items-center gap-2 bg-mystic-900 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-mystic-800 transition-all shadow-sm active:scale-95">
                                         Process Return
                                     </button>
                                 }

BlazorFrontend/Components/Pages/Home.razor

@@ -9,14 +9,14 @@
 <PageTitle>Dashboard</PageTitle>
 
 <div class="mb-10 animate-in fade-in slide-in-from-top-4 duration-500">
-    <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 border-b border-slate-100 pb-4 mb-2">Welcome Back</h1>
-    <p class="text-slate-500 font-medium">Here's what's happening with the library today.</p>
+    <h1 class="text-3xl font-extrabold tracking-tight text-mystic-900 border-b border-mystic-100 pb-4 mb-2">Welcome Back</h1>
+    <p class="text-mystic-500 font-medium">Here's what's happening with the library today.</p>
 </div>
 
 @if (_isLoading)
 {
     <div class="flex items-center justify-center min-h-[400px]">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div>
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-mystic-900"></div>
     </div>
 }
 else
@@ -56,38 +56,38 @@ else
 
     <!-- Stats Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
-        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 transition-all duration-300">
+        <div class="card p-6 flex flex-col gap-3 group hover:border-mystic-300 transition-all duration-300">
             <div class="flex items-center justify-between">
-                <div class="p-2 bg-slate-50 rounded-lg group-hover:bg-slate-100 transition-colors">
-                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                <div class="p-2 bg-mystic-50 rounded-lg group-hover:bg-mystic-100 transition-colors">
+                    <svg class="w-5 h-5 text-mystic-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                 </div>
-                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Books</span>
+                <span class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Books</span>
             </div>
             <div>
-                <div class="text-3xl font-bold text-slate-900">@_totalBooks</div>
-                <div class="text-xs text-slate-500 mt-1 font-medium italic">Total in catalog</div>
+                <div class="text-3xl font-bold text-mystic-900">@_totalBooks</div>
+                <div class="text-xs text-mystic-500 mt-1 font-medium italic">Total in catalog</div>
             </div>
         </div>
 
-        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 transition-all duration-300">
+        <div class="card p-6 flex flex-col gap-3 group hover:border-mystic-300 transition-all duration-300">
             <div class="flex items-center justify-between">
                 <div class="p-2 bg-emerald-50 rounded-lg group-hover:bg-emerald-100 transition-colors">
                     <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                 </div>
-                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Loans</span>
+                <span class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Active Loans</span>
             </div>
             <div>
-                <div class="text-3xl font-bold text-slate-900">@_activeLoans</div>
-                <div class="text-xs text-slate-500 mt-1 font-medium italic">Checking out right now</div>
+                <div class="text-3xl font-bold text-mystic-900">@_activeLoans</div>
+                <div class="text-xs text-mystic-500 mt-1 font-medium italic">Checking out right now</div>
             </div>
         </div>
 
-        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 border-l-4 border-l-rose-500 transition-all duration-300">
+        <div class="card p-6 flex flex-col gap-3 group hover:border-mystic-300 border-l-4 border-l-rose-500 transition-all duration-300">
             <div class="flex items-center justify-between">
                 <div class="p-2 bg-rose-50 rounded-lg group-hover:bg-rose-100 transition-colors">
                     <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                 </div>
-                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest text-rose-500">Overdue</span>
+                <span class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest text-rose-500">Overdue</span>
             </div>
             <div>
                 <div class="text-3xl font-bold text-rose-600">@_overdueLoans</div>
@@ -95,16 +95,16 @@ else
             </div>
         </div>
 
-        <div class="card p-6 flex flex-col gap-3 group hover:border-slate-300 transition-all duration-300">
+        <div class="card p-6 flex flex-col gap-3 group hover:border-mystic-300 transition-all duration-300">
             <div class="flex items-center justify-between">
                 <div class="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
                     <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                 </div>
-                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Active Members</span>
+                <span class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest">Active Members</span>
             </div>
             <div>
-                <div class="text-3xl font-bold text-slate-900">@_totalMembers</div>
-                <div class="text-xs text-slate-500 mt-1 font-medium italic">In the community</div>
+                <div class="text-3xl font-bold text-mystic-900">@_totalMembers</div>
+                <div class="text-xs text-mystic-500 mt-1 font-medium italic">In the community</div>
             </div>
         </div>
     </div>
@@ -114,8 +114,8 @@ else
     {
         <div class="mb-12 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-150">
             <div class="flex items-center justify-between mb-8">
-                <h2 class="text-2xl font-bold text-slate-900 tracking-tight">Recent Arrivals</h2>
-                <a href="Books" class="text-sm font-bold text-slate-500 hover:text-slate-900 flex items-center group">
+                <h2 class="text-2xl font-bold text-mystic-900 tracking-tight">Recent Arrivals</h2>
+                <a href="Books" class="text-sm font-bold text-mystic-500 hover:text-mystic-900 flex items-center group">
                     Browse All 
                     <svg class="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                 </a>
@@ -126,17 +126,17 @@ else
                 {
                     <div class="group cursor-pointer">
                         <a href="Books">
-                            <div class="aspect-[2/3] w-full bg-slate-100 rounded-xl mb-3 flex items-center justify-center text-slate-300 group-hover:shadow-lg transition-all duration-300 relative overflow-hidden">
+                            <div class="aspect-[2/3] w-full bg-mystic-100 rounded-xl mb-3 flex items-center justify-center text-mystic-300 group-hover:shadow-lg transition-all duration-300 relative overflow-hidden">
                                 <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                                 @if (book.AvailableCopies <= 0)
                                 {
-                                    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-[1px] flex items-center justify-center">
-                                        <span class="bg-white text-slate-900 text-[8px] font-bold uppercase px-2 py-1 rounded">Out</span>
+                                    <div class="absolute inset-0 bg-mystic-900/40 backdrop-blur-[1px] flex items-center justify-center">
+                                        <span class="bg-white text-mystic-900 text-[8px] font-bold uppercase px-2 py-1 rounded">Out</span>
                                     </div>
                                 }
                             </div>
-                            <h3 class="text-xs font-bold text-slate-900 truncate group-hover:text-amber-600 transition-colors">@book.Title</h3>
-                            <p class="text-[10px] text-slate-500 truncate mt-0.5 font-medium">@book.Author</p>
+                            <h3 class="text-xs font-bold text-mystic-900 truncate group-hover:text-mystic-600 transition-colors">@book.Title</h3>
+                            <p class="text-[10px] text-mystic-500 truncate mt-0.5 font-medium">@book.Author</p>
                         </a>
                     </div>
                 }
@@ -146,26 +146,26 @@ else
 
     <!-- Quick Actions -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-300">
-        <div class="bg-slate-900 text-white rounded-3xl p-8 flex flex-col justify-between overflow-hidden relative group">
+        <div class="bg-mystic-900 text-white rounded-3xl p-8 flex flex-col justify-between overflow-hidden relative group">
             <div class="relative z-10">
                 <h2 class="text-2xl font-bold mb-2">Explore the Library</h2>
-                <p class="text-slate-400 text-sm max-w-[280px]">Access thousands of books across all categories with a premium member account.</p>
+                <p class="text-mystic-400 text-sm max-w-[280px]">Access thousands of books across all categories with a premium member account.</p>
             </div>
             <div class="mt-8 relative z-10">
-                <a href="Books" class="inline-flex items-center bg-white text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold hover:bg-slate-100 transition-colors">
+                <a href="Books" class="inline-flex items-center bg-white text-mystic-900 px-6 py-2.5 rounded-full text-sm font-bold hover:bg-mystic-100 transition-colors">
                     View Catalog
                 </a>
             </div>
-            <svg class="absolute bottom-0 right-0 w-48 h-48 text-slate-800 -mb-12 -mr-12 opacity-50 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+            <svg class="absolute bottom-0 right-0 w-48 h-48 text-mystic-800 -mb-12 -mr-12 opacity-50 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
         </div>
 
-        <div class="bg-amber-50 rounded-3xl p-8 flex flex-col justify-between group border border-amber-100">
+        <div class="bg-mystic-50 rounded-3xl p-8 flex flex-col justify-between group border border-mystic-100">
             <div>
-                <h2 class="text-2xl font-bold text-slate-900 mb-2">My Current Loans</h2>
-                <p class="text-slate-600 text-sm max-w-[280px]">Don't forget to return your books on time to avoid late fees.</p>
+                <h2 class="text-2xl font-bold text-mystic-900 mb-2">My Current Loans</h2>
+                <p class="text-mystic-600 text-sm max-w-[280px]">Don't forget to return your books on time to avoid late fees.</p>
             </div>
             <div class="mt-8">
-                <a href="Borrowings" class="inline-flex items-center text-slate-900 px-6 py-2.5 rounded-full text-sm font-bold border-2 border-slate-900 hover:bg-slate-900 hover:text-white transition-all">
+                <a href="Borrowings" class="inline-flex items-center text-mystic-900 px-6 py-2.5 rounded-full text-sm font-bold border-2 border-mystic-900 hover:bg-mystic-900 hover:text-white transition-all">
                     Manage My Loans
                 </a>
             </div>

BlazorFrontend/Components/Pages/Login.razor

@@ -11,13 +11,13 @@
 <PageTitle>Sign In</PageTitle>
 
 <div class="min-h-[calc(100vh-200px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl border border-slate-200 shadow-xl">
+    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl border border-mystic-200 shadow-xl">
         <div>
-            <div class="mx-auto h-12 w-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-4">
+            <div class="mx-auto h-12 w-12 bg-mystic-900 rounded-xl flex items-center justify-center text-white mb-4">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
             </div>
-            <h2 class="text-center text-3xl font-extrabold text-slate-900 tracking-tight">Welcome back</h2>
-            <p class="mt-2 text-center text-sm text-slate-500">
+            <h2 class="text-center text-3xl font-extrabold text-mystic-900 tracking-tight">Welcome back</h2>
+            <p class="mt-2 text-center text-sm text-mystic-500">
                 Continue where you left off.
             </p>
         </div>
@@ -34,21 +34,21 @@
             
             <div class="space-y-4">
                 <div>
-                    <label class="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
-                    <InputText @bind-Value="_loginRequest.Email" type="email" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="name@example.com" />
+                    <label class="block text-sm font-medium text-mystic-700 mb-1">Email Address</label>
+                    <InputText @bind-Value="_loginRequest.Email" type="email" required class="appearance-none relative block w-full px-3 py-2 border border-mystic-300 placeholder-mystic-400 text-mystic-900 rounded-md focus:outline-none focus:ring-mystic-900 focus:border-mystic-900 focus:z-10 sm:text-sm" placeholder="name@example.com" />
                     <ValidationMessage For="@(() => _loginRequest.Email)" class="text-xs text-red-500 mt-1" />
                 </div>
                 <div>
                     <div class="flex items-center justify-between mb-1">
-                        <label class="block text-sm font-medium text-slate-700">Password</label>
+                        <label class="block text-sm font-medium text-mystic-700">Password</label>
                     </div>
-                    <InputText type="password" @bind-Value="_loginRequest.Password" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="••••••••" />
+                    <InputText type="password" @bind-Value="_loginRequest.Password" required class="appearance-none relative block w-full px-3 py-2 border border-mystic-300 placeholder-mystic-400 text-mystic-900 rounded-md focus:outline-none focus:ring-mystic-900 focus:border-mystic-900 focus:z-10 sm:text-sm" placeholder="••••••••" />
                     <ValidationMessage For="@(() => _loginRequest.Password)" class="text-xs text-red-500 mt-1" />
                 </div>
             </div>
 
             <div>
-                <button type="submit" disabled="@_isLoading" class="group relative w-full flex justify-center py-2.5 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 transition-all disabled:opacity-50">
+                <button type="submit" disabled="@_isLoading" class="group relative w-full flex justify-center py-2.5 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-mystic-900 hover:bg-mystic-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mystic-900 transition-all disabled:opacity-50">
                     @if (_isLoading)
                     {
                         <span>Signing in...</span>
@@ -61,8 +61,8 @@
             </div>
             
             <div class="text-center">
-                <span class="text-sm text-slate-500">Don't have an account?</span>
-                <a href="/register" class="text-sm font-medium text-slate-900 hover:underline ml-1">Create one for free</a>
+                <span class="text-sm text-mystic-500">Don't have an account?</span>
+                <a href="/register" class="text-sm font-medium text-mystic-900 hover:underline ml-1">Create one for free</a>
             </div>
         </EditForm>
     </div>

BlazorFrontend/Components/Pages/Members.razor

@@ -14,10 +14,10 @@
 {
     <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 animate-in fade-in slide-in-from-top-4 duration-500">
         <div>
-            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Members Directory</h1>
-            <p class="mt-2 text-slate-500">
+            <h1 class="text-3xl font-bold tracking-tight text-mystic-900">Members Directory</h1>
+            <p class="mt-2 text-mystic-500">
                 Manage library members and administrator accounts.
-                <span class="ml-2 text-xs text-slate-400">(@(_allUsers?.Count() ?? 0) total)</span>
+                <span class="ml-2 text-xs text-mystic-400">(@(_allUsers?.Count() ?? 0) total)</span>
             </p>
         </div>
         <div class="flex items-center gap-3">
@@ -31,46 +31,46 @@
     @if (_isLoading)
     {
         <div class="flex items-center justify-center min-h-[400px]">
-            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div>
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-mystic-900"></div>
         </div>
     }
     else if (_pagedResult != null)
     {
         <div class="card overflow-hidden animate-in fade-in duration-700">
             <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-slate-200">
-                    <thead class="bg-slate-50">
+                <table class="min-w-full divide-y divide-mystic-200">
+                    <thead class="bg-mystic-50">
                         <tr>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Member</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Contact</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Role</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-mystic-500 uppercase tracking-wider">Member</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-mystic-500 uppercase tracking-wider">Contact</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-mystic-500 uppercase tracking-wider">Role</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-mystic-500 uppercase tracking-wider">Status</th>
                             <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
                         </tr>
                     </thead>
-                    <tbody class="bg-white divide-y divide-slate-200">
+                    <tbody class="bg-white divide-y divide-mystic-200">
                         @foreach (var user in _pagedResult.Items)
                         {
-                            <tr class="hover:bg-slate-50 transition-colors">
+                            <tr class="hover:bg-mystic-50 transition-colors">
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <div class="flex items-center">
-                                        <div class="h-10 w-10 flex-shrink-0 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-sm">
+                                        <div class="h-10 w-10 flex-shrink-0 rounded-full bg-mystic-900 flex items-center justify-center text-white font-bold text-sm">
                                             @(user.FullName?.Substring(0, Math.Min(2, user.FullName.Length)).ToUpper() ?? "U")
                                         </div>
                                         <div class="ml-4">
-                                            <div class="text-sm font-medium text-slate-900">
+                                            <div class="text-sm font-medium text-mystic-900">
                                                 <button @onclick="() => ShowDetails(user.Id)" class="hover:underline text-left">@user.FullName</button>
                                             </div>
                                             @if (!string.IsNullOrEmpty(user.StudentId))
                                             {
-                                                <div class="text-xs text-slate-500">ID: @user.StudentId</div>
+                                                <div class="text-xs text-mystic-500">ID: @user.StudentId</div>
                                             }
                                         </div>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-sm text-slate-900">@user.Email</div>
-                                    <div class="text-xs text-slate-500">@(string.IsNullOrEmpty(user.PhoneNumber) ? "No phone" : user.PhoneNumber)</div>
+                                    <div class="text-sm text-mystic-900">@user.Email</div>
+                                    <div class="text-xs text-mystic-500">@(string.IsNullOrEmpty(user.PhoneNumber) ? "No phone" : user.PhoneNumber)</div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 @(user.Role == "Admin" ? "bg-amber-100 text-amber-800" : "bg-blue-100 text-blue-800")">
@@ -92,14 +92,14 @@
                                     }
                                     else
                                     {
-                                        <span class="inline-flex rounded-full bg-slate-100 px-2 text-xs font-semibold leading-5 text-slate-800">
+                                        <span class="inline-flex rounded-full bg-mystic-100 px-2 text-xs font-semibold leading-5 text-mystic-800">
                                             Inactive
                                         </span>
                                     }
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                     <div class="flex items-center justify-end gap-3">
-                                        <button @onclick="() => ShowDetails(user.Id)" class="text-slate-600 hover:text-slate-900 transition-colors">Details</button>
+                                        <button @onclick="() => ShowDetails(user.Id)" class="text-mystic-600 hover:text-mystic-900 transition-colors">Details</button>
                                         <button @onclick="() => ShowEdit(user.Id)" class="text-indigo-600 hover:text-indigo-900 transition-colors">Edit</button>
                                     </div>
                                 </td>
@@ -112,17 +112,17 @@
             @* Pagination *@
             @if (_pagedResult.TotalPages > 1)
             {
-                <div class="px-6 py-4 border-t border-slate-200 flex items-center justify-between bg-white">
-                    <p class="text-sm text-slate-500">
-                        Showing <span class="font-medium text-slate-700">@((_pagedResult.CurrentPage - 1) * _pagedResult.PageSize + 1)</span>
+                <div class="px-6 py-4 border-t border-mystic-200 flex items-center justify-between bg-white">
+                    <p class="text-sm text-mystic-500">
+                        Showing <span class="font-medium text-mystic-700">@((_pagedResult.CurrentPage - 1) * _pagedResult.PageSize + 1)</span>
                         –
-                        <span class="font-medium text-slate-700">@(Math.Min(_pagedResult.CurrentPage * _pagedResult.PageSize, _pagedResult.TotalCount))</span>
-                        of <span class="font-medium text-slate-700">@_pagedResult.TotalCount</span> members
+                        <span class="font-medium text-mystic-700">@(Math.Min(_pagedResult.CurrentPage * _pagedResult.PageSize, _pagedResult.TotalCount))</span>
+                        of <span class="font-medium text-mystic-700">@_pagedResult.TotalCount</span> members
                     </p>
                     <nav class="flex items-center gap-1" aria-label="Pagination">
                         @* Previous *@
                         <button @onclick="() => ChangePage(_pagedResult.CurrentPage - 1)" disabled="@(!_pagedResult.HasPreviousPage)"
-                                class="inline-flex items-center px-3 py-1.5 rounded-md border @(_pagedResult.HasPreviousPage ? "border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900" : "border-slate-100 text-slate-300 cursor-not-allowed") text-sm font-medium transition-colors">
+                                class="inline-flex items-center px-3 py-1.5 rounded-md border @(_pagedResult.HasPreviousPage ? "border-mystic-200 text-mystic-600 hover:bg-mystic-50 hover:text-mystic-900" : "border-mystic-100 text-mystic-300 cursor-not-allowed") text-sm font-medium transition-colors">
                             <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                             </svg>
@@ -135,22 +135,22 @@
                             var pageNumber = p;
                             if (p == _pagedResult.CurrentPage)
                             {
-                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-md bg-slate-900 text-white text-sm font-semibold">@p</span>
+                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-md bg-mystic-900 text-white text-sm font-semibold">@p</span>
                             }
                             else if (p == 1 || p == _pagedResult.TotalPages || (p >= _pagedResult.CurrentPage - 2 && p <= _pagedResult.CurrentPage + 2))
                             {
                                 <button @onclick="() => ChangePage(pageNumber)"
-                                        class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">@p</button>
+                                        class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-mystic-200 text-sm font-medium text-mystic-600 hover:bg-mystic-50 hover:text-mystic-900 transition-colors">@p</button>
                             }
                             else if (p == _pagedResult.CurrentPage - 3 || p == _pagedResult.CurrentPage + 3)
                             {
-                                <span class="inline-flex items-center justify-center w-8 h-8 text-sm text-slate-400">…</span>
+                                <span class="inline-flex items-center justify-center w-8 h-8 text-sm text-mystic-400">…</span>
                             }
                         }
 
                         @* Next *@
                         <button @onclick="() => ChangePage(_pagedResult.CurrentPage + 1)" disabled="@(!_pagedResult.HasNextPage)"
-                                class="inline-flex items-center px-3 py-1.5 rounded-md border @(_pagedResult.HasNextPage ? "border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900" : "border-slate-100 text-slate-300 cursor-not-allowed") text-sm font-medium transition-colors">
+                                class="inline-flex items-center px-3 py-1.5 rounded-md border @(_pagedResult.HasNextPage ? "border-mystic-200 text-mystic-600 hover:bg-mystic-50 hover:text-mystic-900" : "border-mystic-100 text-mystic-300 cursor-not-allowed") text-sm font-medium transition-colors">
                             Next
                             <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
@@ -165,14 +165,14 @@
 else if (_currentView == ViewMode.Details && _selectedUser != null)
 {
     <div class="animate-in fade-in slide-in-from-left-4 duration-500">
-        <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-mystic-500 hover:text-mystic-900 mb-6 group">
             <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
             Back to Directory
         </button>
         
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
             <div class="lg:col-span-1">
-                <div class="aspect-square w-full rounded-2xl bg-slate-900 flex flex-col items-center justify-center text-white p-6 shadow-xl">
+                <div class="aspect-square w-full rounded-2xl bg-mystic-900 flex flex-col items-center justify-center text-white p-6 shadow-xl">
                     <div class="text-6xl font-black mb-4 tracking-tighter">
                         @(_selectedUser.User.FullName?.Substring(0, Math.Min(2, _selectedUser.User.FullName.Length)).ToUpper() ?? "U")
                     </div>
@@ -185,7 +185,7 @@ else if (_currentView == ViewMode.Details && _selectedUser != null)
 
             <div class="lg:col-span-2 space-y-8">
                 <div>
-                    <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight mb-2">Member Profile</h1>
+                    <h1 class="text-4xl font-extrabold text-mystic-900 tracking-tight mb-2">Member Profile</h1>
                     <div class="flex items-center gap-3">
                         @if (_selectedUser.User.BanStatus == true)
                         {
@@ -198,31 +198,31 @@ else if (_currentView == ViewMode.Details && _selectedUser != null)
                     </div>
                 </div>
 
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 border-y border-slate-100 py-6">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 border-y border-mystic-100 py-6">
                     <div>
-                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Email</h4>
-                        <p class="text-sm font-semibold text-slate-900">@_selectedUser.User.Email</p>
+                        <h4 class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest mb-1">Email</h4>
+                        <p class="text-sm font-semibold text-mystic-900">@_selectedUser.User.Email</p>
                     </div>
                     <div>
-                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Phone</h4>
-                        <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(_selectedUser.User.PhoneNumber) ? "-" : _selectedUser.User.PhoneNumber)</p>
+                        <h4 class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest mb-1">Phone</h4>
+                        <p class="text-sm font-semibold text-mystic-900">@(string.IsNullOrEmpty(_selectedUser.User.PhoneNumber) ? "-" : _selectedUser.User.PhoneNumber)</p>
                     </div>
                     <div>
-                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Student ID</h4>
-                        <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(_selectedUser.User.StudentId) ? "-" : _selectedUser.User.StudentId)</p>
+                        <h4 class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest mb-1">Student ID</h4>
+                        <p class="text-sm font-semibold text-mystic-900">@(string.IsNullOrEmpty(_selectedUser.User.StudentId) ? "-" : _selectedUser.User.StudentId)</p>
                     </div>
                     <div>
-                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Joined</h4>
-                        <p class="text-sm font-semibold text-slate-900">@_selectedUser.User.CreatedAt.ToString("MMM dd, yyyy")</p>
+                        <h4 class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest mb-1">Joined</h4>
+                        <p class="text-sm font-semibold text-mystic-900">@_selectedUser.User.CreatedAt.ToString("MMM dd, yyyy")</p>
                     </div>
                     <div class="sm:col-span-2">
-                        <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Address</h4>
-                        <p class="text-sm font-semibold text-slate-900">@(string.IsNullOrEmpty(_selectedUser.User.Address) ? "-" : _selectedUser.User.Address)</p>
+                        <h4 class="text-[10px] font-bold text-mystic-400 uppercase tracking-widest mb-1">Address</h4>
+                        <p class="text-sm font-semibold text-mystic-900">@(string.IsNullOrEmpty(_selectedUser.User.Address) ? "-" : _selectedUser.User.Address)</p>
                     </div>
                 </div>
 
                 <div class="flex items-center gap-4 pt-4 flex-wrap">
-                    <button @onclick="() => ShowEdit(_selectedUser.User.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-slate-200">Edit Details</button>
+                    <button @onclick="() => ShowEdit(_selectedUser.User.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-mystic-200">Edit Details</button>
                     
                     <button @onclick="UpdateRole" class="btn-secondary py-3 px-8 text-base">
                         Make @(_selectedUser.User.Role == "Admin" ? "Member" : "Admin")
@@ -234,8 +234,8 @@ else if (_currentView == ViewMode.Details && _selectedUser != null)
                 </div>
                 
                 <!-- Subscription Management -->
-                <div class="mt-8 pt-8 border-t border-slate-100">
-                    <h3 class="text-2xl font-bold text-slate-900 mb-6">Manage Subscription</h3>
+                <div class="mt-8 pt-8 border-t border-mystic-100">
+                    <h3 class="text-2xl font-bold text-mystic-900 mb-6">Manage Subscription</h3>
                     
                     @if (_selectedUser.CurrentSubscription != null && _selectedUser.CurrentSubscription.IsActive)
                     {
@@ -254,23 +254,23 @@ else if (_currentView == ViewMode.Details && _selectedUser != null)
                     }
                     else
                     {
-                        <div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6">
-                            <p class="text-slate-600 font-medium">No active subscription for this member.</p>
+                        <div class="bg-mystic-50 border border-mystic-200 rounded-xl p-4 mb-6">
+                            <p class="text-mystic-600 font-medium">No active subscription for this member.</p>
                         </div>
                     }
 
-                    <h4 class="text-lg font-semibold text-slate-900 mb-4">Assign New Plan</h4>
+                    <h4 class="text-lg font-semibold text-mystic-900 mb-4">Assign New Plan</h4>
                     <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                         @foreach (var plan in _selectedUser.AvailableMemberships)
                         {
                             var isCurrent = _selectedUser.CurrentSubscription?.IsActive == true && _selectedUser.CurrentSubscription.MembershipId == plan.Id;
-                            <div class="card p-4 relative @(isCurrent ? "ring-2 ring-slate-900 border-slate-900" : "")">
+                            <div class="card p-4 relative @(isCurrent ? "ring-2 ring-mystic-900 border-mystic-900" : "")">
                                 @if (isCurrent)
                                 {
-                                    <div class="absolute top-0 right-0 -mt-2 -mr-2 bg-slate-900 text-white text-xs font-bold px-2 py-1 rounded-md">Current</div>
+                                    <div class="absolute top-0 right-0 -mt-2 -mr-2 bg-mystic-900 text-white text-xs font-bold px-2 py-1 rounded-md">Current</div>
                                 }
-                                <h5 class="font-bold text-slate-900 text-lg mb-1">@plan.Type</h5>
-                                <p class="text-slate-500 font-medium text-sm mb-4">@plan.Price.ToString("N0") MMK / @plan.DurationMonths mo</p>
+                                <h5 class="font-bold text-mystic-900 text-lg mb-1">@plan.Type</h5>
+                                <p class="text-mystic-500 font-medium text-sm mb-4">@plan.Price.ToString("N0") MMK / @plan.DurationMonths mo</p>
                                 
                                 @if (!isCurrent)
                                 {
@@ -291,15 +291,15 @@ else if (_currentView == ViewMode.Details && _selectedUser != null)
 else if (_currentView == ViewMode.Create || _currentView == ViewMode.Edit)
 {
     <div class="animate-in fade-in slide-in-from-bottom-4 duration-500">
-        <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
+        <button @onclick="BackToList" class="inline-flex items-center text-sm font-medium text-mystic-500 hover:text-mystic-900 mb-6 group">
             <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
             Back to Directory
         </button>
 
         <div class="max-w-3xl mx-auto">
             <div class="mb-8">
-                <h1 class="text-3xl font-bold tracking-tight text-slate-900">@(_currentView == ViewMode.Create ? "Add New Member" : "Edit Member Details")</h1>
-                <p class="mt-2 text-slate-500">@(_currentView == ViewMode.Create ? "Register a new member to the library system." : $"Update details for {_editUser?.FullName}.")</p>
+                <h1 class="text-3xl font-bold tracking-tight text-mystic-900">@(_currentView == ViewMode.Create ? "Add New Member" : "Edit Member Details")</h1>
+                <p class="mt-2 text-mystic-500">@(_currentView == ViewMode.Create ? "Register a new member to the library system." : $"Update details for {_editUser?.FullName}.")</p>
             </div>
 
             <div class="card p-6 sm:p-8">
@@ -309,46 +309,46 @@ else if (_currentView == ViewMode.Create || _currentView == ViewMode.Edit)
                         <DataAnnotationsValidator />
                         <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                             <div class="sm:col-span-2">
-                                <label class="block text-sm font-medium text-slate-700">Full Name <span class="text-rose-500">*</span></label>
+                                <label class="block text-sm font-medium text-mystic-700">Full Name <span class="text-rose-500">*</span></label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_createRequest.FullName" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="John Doe" />
+                                    <InputText @bind-Value="_createRequest.FullName" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="John Doe" />
                                     <ValidationMessage For="@(() => _createRequest.FullName)" class="mt-1 text-xs text-rose-500" />
                                 </div>
                             </div>
-                            <div>
-                                <label class="block text-sm font-medium text-slate-700">Email Address <span class="text-rose-500">*</span></label>
+                             <div>
+                                <label class="block text-sm font-medium text-mystic-700">Email Address <span class="text-rose-500">*</span></label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_createRequest.Email" type="email" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="you@domain.com" />
+                                    <InputText @bind-Value="_createRequest.Email" type="email" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="you@domain.com" />
                                     <ValidationMessage For="@(() => _createRequest.Email)" class="mt-1 text-xs text-rose-500" />
                                 </div>
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-slate-700">Password <span class="text-rose-500">*</span></label>
+                                <label class="block text-sm font-medium text-mystic-700">Password <span class="text-rose-500">*</span></label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_createRequest.Password" type="password" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                    <InputText @bind-Value="_createRequest.Password" type="password" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" />
                                     <ValidationMessage For="@(() => _createRequest.Password)" class="mt-1 text-xs text-rose-500" />
                                 </div>
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-slate-700">Phone Number</label>
+                                <label class="block text-sm font-medium text-mystic-700">Phone Number</label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_createRequest.PhoneNumber" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="+123456789" />
+                                    <InputText @bind-Value="_createRequest.PhoneNumber" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="+123456789" />
                                 </div>
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-slate-700">Student ID</label>
+                                <label class="block text-sm font-medium text-mystic-700">Student ID</label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_createRequest.StudentId" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Optional" />
+                                    <InputText @bind-Value="_createRequest.StudentId" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Optional" />
                                 </div>
                             </div>
                             <div class="sm:col-span-2">
-                                <label class="block text-sm font-medium text-slate-700">Address</label>
+                                <label class="block text-sm font-medium text-mystic-700">Address</label>
                                 <div class="mt-1">
-                                    <InputTextArea @bind-Value="_createRequest.Address" rows="3" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Full address details" />
+                                    <InputTextArea @bind-Value="_createRequest.Address" rows="3" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Full address details" />
                                 </div>
                             </div>
                         </div>
-                        <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                        <div class="pt-5 border-t border-mystic-100 flex justify-end gap-3">
                             <button type="button" @onclick="BackToList" class="btn-secondary">Cancel</button>
                             <button type="submit" class="btn-primary">Create Member</button>
                         </div>
@@ -360,32 +360,32 @@ else if (_currentView == ViewMode.Create || _currentView == ViewMode.Edit)
                         <DataAnnotationsValidator />
                         <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                             <div class="sm:col-span-2">
-                                <label class="block text-sm font-medium text-slate-700">Full Name <span class="text-rose-500">*</span></label>
+                                <label class="block text-sm font-medium text-mystic-700">Full Name <span class="text-rose-500">*</span></label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_updateRequest.FullName" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                    <InputText @bind-Value="_updateRequest.FullName" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" />
                                     <ValidationMessage For="@(() => _updateRequest.FullName)" class="mt-1 text-xs text-rose-500" />
                                 </div>
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-slate-700">Phone Number</label>
+                                <label class="block text-sm font-medium text-mystic-700">Phone Number</label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_updateRequest.PhoneNumber" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                    <InputText @bind-Value="_updateRequest.PhoneNumber" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" />
                                 </div>
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-slate-700">Student ID</label>
+                                <label class="block text-sm font-medium text-mystic-700">Student ID</label>
                                 <div class="mt-1">
-                                    <InputText @bind-Value="_updateRequest.StudentId" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                    <InputText @bind-Value="_updateRequest.StudentId" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" />
                                 </div>
                             </div>
                             <div class="sm:col-span-2">
-                                <label class="block text-sm font-medium text-slate-700">Address</label>
+                                <label class="block text-sm font-medium text-mystic-700">Address</label>
                                 <div class="mt-1">
-                                    <InputTextArea @bind-Value="_updateRequest.Address" rows="3" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" />
+                                    <InputTextArea @bind-Value="_updateRequest.Address" rows="3" class="block w-full rounded-md border-mystic-300 shadow-sm focus:border-mystic-900 focus:ring-mystic-900 sm:text-sm px-3 py-2 border bg-white" />
                                 </div>
                             </div>
                         </div>
-                        <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
+                        <div class="pt-5 border-t border-mystic-100 flex justify-end gap-3">
                             <button type="button" @onclick="BackToList" class="btn-secondary">Cancel</button>
                             <button type="submit" class="btn-primary">Update Member</button>
                         </div>

BlazorFrontend/Components/Pages/Membership.razor

@@ -11,7 +11,7 @@
 @if (_isLoading)
 {
     <div class="flex items-center justify-center min-h-[400px]">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div>
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-mystic-900"></div>
     </div>
 }
 else if (_viewModel != null)
@@ -20,21 +20,21 @@ else if (_viewModel != null)
 
     <div class="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
         <!-- Header with Loyalty Summary -->
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white p-8 rounded-2xl shadow-sm border border-slate-100">
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white p-8 rounded-2xl shadow-sm border border-mystic-100">
             <div>
-                <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight">Membership</h1>
-                <p class="text-slate-500 mt-1">Manage your subscription and library benefits</p>
+                <h1 class="text-3xl font-extrabold text-mystic-900 tracking-tight">Membership</h1>
+                <p class="text-mystic-500 mt-1">Manage your subscription and library benefits</p>
             </div>
             
             @if (_viewModel.LoyaltyAccount != null)
             {
-                <div class="flex items-center gap-4 bg-slate-50 px-6 py-4 rounded-xl border border-slate-200/60">
+                <div class="flex items-center gap-4 bg-mystic-50 px-6 py-4 rounded-xl border border-mystic-200/60">
                     <div class="bg-amber-100 p-2.5 rounded-lg text-amber-600">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></svg>
                     </div>
                     <div>
-                        <div class="text-xs font-bold text-slate-400 uppercase tracking-widest">Available Points</div>
-                        <div class="text-2xl font-black text-slate-900 leading-none">@_viewModel.LoyaltyAccount.CurrentBalance.ToString("N0")</div>
+                        <div class="text-xs font-bold text-mystic-400 uppercase tracking-widest">Available Points</div>
+                        <div class="text-2xl font-black text-mystic-900 leading-none">@_viewModel.LoyaltyAccount.CurrentBalance.ToString("N0")</div>
                     </div>
                 </div>
             }
@@ -51,7 +51,7 @@ else if (_viewModel != null)
                     
                     @if (hasActiveSub && _viewModel.CurrentSubscription != null)
                     {
-                        <div class="relative overflow-hidden bg-slate-900 rounded-3xl p-8 text-white group shadow-xl">
+                        <div class="relative overflow-hidden bg-mystic-900 rounded-3xl p-8 text-white group shadow-xl">
                             <!-- Decorative element -->
                             <div class="absolute -right-20 -top-20 w-64 h-64 bg-white/5 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-500"></div>
                             
@@ -68,16 +68,16 @@ else if (_viewModel != null)
                                 
                                 <div class="grid grid-cols-2 gap-8 py-8 border-t border-white/10">
                                     <div>
-                                        <div class="text-slate-400 text-sm font-medium mb-1">Start Date</div>
+                                        <div class="text-mystic-400 text-sm font-medium mb-1">Start Date</div>
                                         <div class="text-lg font-bold">@_viewModel.CurrentSubscription.StartDate.ToString("MMM dd, yyyy")</div>
                                     </div>
                                     <div>
-                                        <div class="text-slate-400 text-sm font-medium mb-1">Expiry Date</div>
+                                        <div class="text-mystic-400 text-sm font-medium mb-1">Expiry Date</div>
                                         <div class="text-lg font-bold">@_viewModel.CurrentSubscription.ExpiryDate.ToString("MMM dd, yyyy")</div>
                                     </div>
                                 </div>
                                 
-                                <div class="pt-6 flex items-center gap-2 text-slate-400 text-sm italic">
+                                <div class="pt-6 flex items-center gap-2 text-mystic-400 text-sm italic">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                                     Pro-tip: Maintain your subscription to earn loyalty points every month!
                                 </div>
@@ -86,13 +86,13 @@ else if (_viewModel != null)
                     }
                     else
                     {
-                        <div class="bg-white border-2 border-dashed border-slate-200 rounded-3xl p-12 text-center">
-                            <div class="bg-slate-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-400">
+                        <div class="bg-white border-2 border-dashed border-mystic-200 rounded-3xl p-12 text-center">
+                            <div class="bg-mystic-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-mystic-400">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                             </div>
-                            <h3 class="text-xl font-bold text-slate-900">No Active Subscription</h3>
-                            <p class="text-slate-500 mt-2 mb-8 max-w-xs mx-auto">Get a membership to borrow books and unlock premium library features.</p>
-                            <a href="Membership#plans" class="btn-primary px-8 py-3 rounded-xl shadow-lg shadow-slate-900/10">Browse Plans</a>
+                            <h3 class="text-xl font-bold text-mystic-900">No Active Subscription</h3>
+                            <p class="text-mystic-500 mt-2 mb-8 max-w-xs mx-auto">Get a membership to borrow books and unlock premium library features.</p>
+                            <a href="Membership#plans" class="btn-primary px-8 py-3 rounded-xl shadow-lg shadow-mystic-900/10">Browse Plans</a>
                         </div>
                     }
                 </section>
@@ -101,7 +101,7 @@ else if (_viewModel != null)
                 @if (_viewModel.QueuedMemberships.Any())
                 {
                     <section>
-                        <h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
+                        <h2 class="text-xl font-bold text-mystic-900 mb-4 flex items-center gap-2">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500"><path d="M10 10 2.5 2.5"/><path d="M21.5 2.5 14 10"/><path d="m21.5 21.5-7.5-7.5"/><path d="M10 14 2.5 21.5"/><circle cx="12" cy="12" r="3"/></svg>
                             Queued Memberships (@_viewModel.QueuedMemberships.Count)
                         </h2>
@@ -114,15 +114,15 @@ else if (_viewModel != null)
                                             <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                                         </div>
                                         <div>
-                                            <div class="font-bold text-slate-900">@queued.MembershipType Membership</div>
-                                            <div class="text-sm text-slate-500">
+                                            <div class="font-bold text-mystic-900">@queued.MembershipType Membership</div>
+                                            <div class="text-sm text-mystic-500">
                                                 Activates on @queued.StartDate.ToString("MMM dd, yyyy") &bull; Expires @queued.ExpiryDate.ToString("MMM dd, yyyy")
                                             </div>
                                         </div>
                                     </div>
                                     <div class="text-right">
                                         <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700 border border-amber-200 uppercase tracking-wider">Queued</span>
-                                        <div class="text-xs text-slate-400 mt-1">Will activate automatically</div>
+                                        <div class="text-xs text-mystic-400 mt-1">Will activate automatically</div>
                                     </div>
                                 </div>
                             }
@@ -133,8 +133,8 @@ else if (_viewModel != null)
 
             <!-- Right Side Panel: Benefits -->
             <div class="space-y-8">
-                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
-                    <h3 class="text-lg font-bold text-slate-900 mb-6">Your Benefits</h3>
+                <div class="bg-white border border-mystic-100 rounded-3xl p-8 shadow-sm">
+                    <h3 class="text-lg font-bold text-mystic-900 mb-6">Your Benefits</h3>
                     <ul class="space-y-6">
                         @{
                             var currentPlan = _viewModel.AvailableMemberships.FirstOrDefault(m => hasActiveSub && _viewModel.CurrentSubscription != null && m.Type == _viewModel.CurrentSubscription.MembershipType);
@@ -142,15 +142,15 @@ else if (_viewModel != null)
                         <li class="flex gap-4">
                             <div class="shrink-0 h-10 w-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center font-bold">@((currentPlan?.MaxBooks ?? 1))</div>
                             <div>
-                                <div class="font-bold text-slate-900">Max Books</div>
-                                <div class="text-sm text-slate-500">Number of books you can borrow simultaneously.</div>
+                                <div class="font-bold text-mystic-900">Max Books</div>
+                                <div class="text-sm text-mystic-500">Number of books you can borrow simultaneously.</div>
                             </div>
                         </li>
                         <li class="flex gap-4">
                             <div class="shrink-0 h-10 w-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center font-bold">@((currentPlan?.BorrowingDays ?? 14))</div>
                             <div>
-                                <div class="font-bold text-slate-900">Borrowing Days</div>
-                                <div class="text-sm text-slate-500">Duration you can keep each borrowed book.</div>
+                                <div class="font-bold text-mystic-900">Borrowing Days</div>
+                                <div class="text-sm text-mystic-500">Duration you can keep each borrowed book.</div>
                             </div>
                         </li>
                         <li class="flex gap-4">
@@ -158,13 +158,13 @@ else if (_viewModel != null)
                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
                             </div>
                             <div>
-                                <div class="font-bold text-slate-900">Digital Access</div>
-                                <div class="text-sm text-slate-500">Browse and search the full library catalog online.</div>
+                                <div class="font-bold text-mystic-900">Digital Access</div>
+                                <div class="text-sm text-mystic-500">Browse and search the full library catalog online.</div>
                             </div>
                         </li>
                     </ul>
                     
-                    <div class="mt-10 p-5 bg-slate-900 rounded-2xl text-white text-center">
+                    <div class="mt-10 p-5 bg-mystic-900 rounded-2xl text-white text-center">
                         <p class="text-sm font-medium mb-3">Want more books?</p>
                         <a href="Membership#plans" class="text-sm font-bold text-indigo-400 hover:text-indigo-300 transition-colors">Upgrade Plan &rarr;</a>
                     </div>
@@ -175,8 +175,8 @@ else if (_viewModel != null)
         <!-- Explore All Plans Section -->
         <section id="plans" class="pt-10">
             <div class="text-center mb-10">
-                <h2 class="text-3xl font-black text-slate-900">Explore Membership Plans</h2>
-                <p class="text-slate-500 mt-2">Find the perfect library experience for your reading habits</p>
+                <h2 class="text-3xl font-black text-mystic-900">Explore Membership Plans</h2>
+                <p class="text-mystic-500 mt-2">Find the perfect library experience for your reading habits</p>
             </div>
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -184,33 +184,33 @@ else if (_viewModel != null)
                 {
                     var isCurrent = hasActiveSub && _viewModel.CurrentSubscription != null && plan.Type == _viewModel.CurrentSubscription.MembershipType;
                     
-                    <div class="group relative bg-white border @(isCurrent ? "border-slate-900 ring-2 ring-slate-900 ring-offset-2" : "border-slate-200") rounded-3xl p-8 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
+                    <div class="group relative bg-white border @(isCurrent ? "border-mystic-900 ring-2 ring-mystic-900 ring-offset-2" : "border-mystic-200") rounded-3xl p-8 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
                         @if (isCurrent)
                         {
-                            <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl">Current Plan</div>
+                            <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-mystic-900 text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl">Current Plan</div>
                         }
 
                         <div class="mb-8">
-                            <h3 class="text-sm font-black text-slate-400 uppercase tracking-widest mb-2">@plan.Type</h3>
+                            <h3 class="text-sm font-black text-mystic-400 uppercase tracking-widest mb-2">@plan.Type</h3>
                             <div class="flex items-baseline">
-                                <span class="text-3xl font-black text-slate-900">@plan.Price.ToString("N0")</span>
-                                <span class="text-slate-500 font-bold ml-1 text-sm uppercase">MMK</span>
+                                <span class="text-3xl font-black text-mystic-900">@plan.Price.ToString("N0")</span>
+                                <span class="text-mystic-500 font-bold ml-1 text-sm uppercase">MMK</span>
                             </div>
-                            <div class="text-slate-400 text-xs font-bold mt-1">/ @(plan.DurationMonths == 1 ? "Month" : $"{plan.DurationMonths} Months")</div>
+                            <div class="text-mystic-400 text-xs font-bold mt-1">/ @(plan.DurationMonths == 1 ? "Month" : $"{plan.DurationMonths} Months")</div>
                         </div>
 
                         <ul class="space-y-4 mb-10">
                             <li class="flex items-center gap-3 text-sm">
-                                <div class="h-5 w-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-900">
+                                <div class="h-5 w-5 rounded-full bg-mystic-100 flex items-center justify-center text-mystic-900">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                 </div>
-                                <span class="text-slate-600 font-bold">@plan.MaxBooks Books limit</span>
+                                <span class="text-mystic-600 font-bold">@plan.MaxBooks Books limit</span>
                             </li>
                             <li class="flex items-center gap-3 text-sm">
-                                <div class="h-5 w-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-900">
+                                <div class="h-5 w-5 rounded-full bg-mystic-100 flex items-center justify-center text-mystic-900">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                 </div>
-                                <span class="text-slate-600 font-bold">@plan.BorrowingDays Days keep</span>
+                                <span class="text-mystic-600 font-bold">@plan.BorrowingDays Days keep</span>
                             </li>
                             @if (!string.IsNullOrEmpty(plan.RewardId) && _viewModel.RewardPointCosts.TryGetValue(plan.RewardId, out var pointCost))
                             {
@@ -225,17 +225,17 @@ else if (_viewModel != null)
 
                         @if (isCurrent)
                         {
-                            <button disabled class="w-full py-4 rounded-2xl bg-slate-100 text-slate-400 font-bold text-sm cursor-not-allowed">Active Now</button>
+                            <button disabled class="w-full py-4 rounded-2xl bg-mystic-100 text-mystic-400 font-bold text-sm cursor-not-allowed">Active Now</button>
                         }
                         else
                         {
                             <div class="space-y-3">
-                                <a href="Borrowings" class="block w-full py-4 rounded-2xl bg-white border-2 border-slate-900 text-slate-900 text-center font-bold text-sm transition-all duration-200 hover:bg-slate-900 hover:text-white">Pay Cash</a>
+                                <a href="Borrowings" class="block w-full py-4 rounded-2xl bg-white border-2 border-mystic-900 text-mystic-900 text-center font-bold text-sm transition-all duration-200 hover:bg-mystic-900 hover:text-white">Pay Cash</a>
                                 
                                 @if (!string.IsNullOrEmpty(plan.RewardId) && _viewModel.RewardPointCosts.ContainsKey(plan.RewardId))
                                 {
                                     <button @onclick="() => RedeemMembership(plan.RewardId, plan.Type, _viewModel.RewardPointCosts[plan.RewardId])" 
-                                            class="w-full py-4 rounded-2xl bg-amber-400 text-slate-900 font-black text-sm hover:bg-amber-500 transition-all shadow-lg shadow-amber-400/20">
+                                            class="w-full py-4 rounded-2xl bg-amber-400 text-mystic-900 font-black text-sm hover:bg-amber-500 transition-all shadow-lg shadow-amber-400/20">
                                         Redeem with Points
                                     </button>
                                 }

BlazorFrontend/Components/Pages/Register.razor

@@ -10,13 +10,13 @@
 <PageTitle>Register</PageTitle>
 
 <div class="min-h-[calc(100vh-200px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl border border-slate-200 shadow-xl">
+    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl border border-mystic-200 shadow-xl">
         <div>
-            <div class="mx-auto h-12 w-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-4">
+            <div class="mx-auto h-12 w-12 bg-mystic-900 rounded-xl flex items-center justify-center text-white mb-4">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
             </div>
-            <h2 class="text-center text-3xl font-extrabold text-slate-900 tracking-tight">Join our Library</h2>
-            <p class="mt-2 text-center text-sm text-slate-500">
+            <h2 class="text-center text-3xl font-extrabold text-mystic-900 tracking-tight">Join our Library</h2>
+            <p class="mt-2 text-center text-sm text-mystic-500">
                 Start your reading journey today.
             </p>
         </div>
@@ -33,29 +33,29 @@
             
             <div class="space-y-4">
                 <div>
-                    <label class="block text-sm font-medium text-slate-700 mb-1">Full Name</label>
-                    <InputText @bind-Value="_registerRequest.FullName" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="John Doe" />
+                    <label class="block text-sm font-medium text-mystic-700 mb-1">Full Name</label>
+                    <InputText @bind-Value="_registerRequest.FullName" required class="appearance-none relative block w-full px-3 py-2 border border-mystic-300 placeholder-mystic-400 text-mystic-900 rounded-md focus:outline-none focus:ring-mystic-900 focus:border-mystic-900 focus:z-10 sm:text-sm" placeholder="John Doe" />
                     <ValidationMessage For="@(() => _registerRequest.FullName)" class="text-xs text-red-500 mt-1" />
                 </div>
                 <div>
-                    <label class="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
-                    <InputText type="email" @bind-Value="_registerRequest.Email" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="name@example.com" />
+                    <label class="block text-sm font-medium text-mystic-700 mb-1">Email Address</label>
+                    <InputText type="email" @bind-Value="_registerRequest.Email" required class="appearance-none relative block w-full px-3 py-2 border border-mystic-300 placeholder-mystic-400 text-mystic-900 rounded-md focus:outline-none focus:ring-mystic-900 focus:border-mystic-900 focus:z-10 sm:text-sm" placeholder="name@example.com" />
                     <ValidationMessage For="@(() => _registerRequest.Email)" class="text-xs text-red-500 mt-1" />
                 </div>
                 <div>
-                    <label class="block text-sm font-medium text-slate-700 mb-1">Phone Number</label>
-                    <InputText type="tel" @bind-Value="_registerRequest.PhoneNumber" class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="09123456789" />
+                    <label class="block text-sm font-medium text-mystic-700 mb-1">Phone Number</label>
+                    <InputText type="tel" @bind-Value="_registerRequest.PhoneNumber" class="appearance-none relative block w-full px-3 py-2 border border-mystic-300 placeholder-mystic-400 text-mystic-900 rounded-md focus:outline-none focus:ring-mystic-900 focus:border-mystic-900 focus:z-10 sm:text-sm" placeholder="09123456789" />
                     <ValidationMessage For="@(() => _registerRequest.PhoneNumber)" class="text-xs text-red-500 mt-1" />
                 </div>
                 <div>
-                    <label class="block text-sm font-medium text-slate-700 mb-1">Password</label>
-                    <InputText type="password" @bind-Value="_registerRequest.Password" required class="appearance-none relative block w-full px-3 py-2 border border-slate-300 placeholder-slate-400 text-slate-900 rounded-md focus:outline-none focus:ring-slate-900 focus:border-slate-900 focus:z-10 sm:text-sm" placeholder="••••••••" />
+                    <label class="block text-sm font-medium text-mystic-700 mb-1">Password</label>
+                    <InputText type="password" @bind-Value="_registerRequest.Password" required class="appearance-none relative block w-full px-3 py-2 border border-mystic-300 placeholder-mystic-400 text-mystic-900 rounded-md focus:outline-none focus:ring-mystic-900 focus:border-mystic-900 focus:z-10 sm:text-sm" placeholder="••••••••" />
                     <ValidationMessage For="@(() => _registerRequest.Password)" class="text-xs text-red-500 mt-1" />
                 </div>
             </div>
 
             <div>
-                <button type="submit" disabled="@_isLoading" class="group relative w-full flex justify-center py-2.5 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 transition-all disabled:opacity-50">
+                <button type="submit" disabled="@_isLoading" class="group relative w-full flex justify-center py-2.5 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-mystic-900 hover:bg-mystic-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mystic-900 transition-all disabled:opacity-50">
                     @if (_isLoading)
                     {
                         <span>Creating account...</span>
@@ -68,8 +68,8 @@
             </div>
             
             <div class="text-center">
-                <span class="text-sm text-slate-500">Already have an account?</span>
-                <a href="/login" class="text-sm font-medium text-slate-900 hover:underline ml-1">Sign in</a>
+                <span class="text-sm text-mystic-500">Already have an account?</span>
+                <a href="/login" class="text-sm font-medium text-mystic-900 hover:underline ml-1">Sign in</a>
             </div>
         </EditForm>
     </div>

BlazorFrontend/Components/Pages/Rewards.razor

@@ -8,29 +8,29 @@
 
 <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-6 animate-in fade-in slide-in-from-top-4 duration-500">
     <div>
-        <h1 class="text-3xl font-extrabold tracking-tight text-slate-900">Loyalty Rewards</h1>
-        <p class="text-slate-500 mt-1">Earn points, redeem rewards, and track your loyalty journey.</p>
+        <h1 class="text-3xl font-extrabold tracking-tight text-mystic-900">Loyalty Rewards</h1>
+        <p class="text-mystic-900 mt-1">Earn points, redeem rewards, and track your loyalty journey.</p>
     </div>
     @if (_account != null)
     {
         <div class="flex items-center gap-4">
             <div class="text-center bg-amber-50 border border-amber-200 px-6 py-3 rounded-2xl shadow-sm">
                 <p class="text-[10px] font-bold text-amber-600 uppercase tracking-widest">Balance</p>
-                <p class="text-2xl font-black text-slate-900">@_account.CurrentBalance.ToString("N0")</p>
+                <p class="text-2xl font-black text-mystic-900">@_account.CurrentBalance.ToString("N0")</p>
                 <p class="text-xs text-amber-600 font-semibold">Points</p>
             </div>
-            <div class="text-center bg-slate-50 border border-slate-200 px-6 py-3 rounded-2xl shadow-sm">
-                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Tier</p>
-                <p class="text-lg font-black text-slate-900">@_account.Tier</p>
+            <div class="text-center bg-mystic-50 border border-mystic-200 px-6 py-3 rounded-2xl shadow-sm">
+                <p class="text-[10px] font-bold text-mystic-500 uppercase tracking-widest">Tier</p>
+                <p class="text-lg font-black text-mystic-900">@_account.Tier</p>
             </div>
         </div>
     }
 </div>
 
-<div class="mb-6 border-b border-slate-200">
+<div class="mb-6 border-b border-mystic-200">
     <nav class="-mb-px flex gap-6">
         <button @onclick='() => _activeTab = "redeem"'
-                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "redeem" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "redeem" ? "border-mystic-900 text-mystic-900" : "border-transparent text-mystic-400 hover:text-mystic-700")'>
             <span class="inline-flex items-center gap-1.5">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12v7a2 2 0 01-2 2H6a2 2 0 01-2-2v-7m16 0H4m16 0l-2.586-2.586a2 2 0 00-2.828 0L12 12m0 0L9.414 9.414a2 2 0 00-2.828 0L4 12m8 0V5" />
@@ -39,7 +39,7 @@
             </span>
         </button>
         <button @onclick='() => _activeTab = "pending"'
-                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "pending" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "pending" ? "border-mystic-900 text-mystic-900" : "border-transparent text-mystic-400 hover:text-mystic-700")'>
             <span class="inline-flex items-center gap-1.5">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -48,14 +48,14 @@
             </span>
             @if (_pendingRedemptions.Any())
             {
-                <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-[10px] font-black rounded-full bg-amber-400 text-slate-900">@_pendingRedemptions.Count()</span>
+                <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-[10px] font-black rounded-full bg-amber-400 text-mystic-900">@_pendingRedemptions.Count()</span>
             }
         </button>
         <button @onclick='() => _activeTab = "history"'
-                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "history" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "history" ? "border-mystic-900 text-mystic-900" : "border-transparent text-mystic-400 hover:text-mystic-700")'>
             <span class="inline-flex items-center gap-1.5">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6m4 6V7m4 10v-3M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6m4 6V7m4 10v-3M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z" />
                 </svg>
                 Points History
             </span>
@@ -66,7 +66,7 @@
 @if (_isLoading)
 {
     <div class="py-20 flex justify-center">
-        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-mystic-900"></div>
     </div>
 }
 else
@@ -76,8 +76,8 @@ else
         <div class="animate-in fade-in duration-300">
             @if (!_availableRewards.Any())
             {
-                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
-                    <p class="text-slate-400 font-medium">No active rewards available. Check back soon!</p>
+                <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                    <p class="text-mystic-400 font-medium">No active rewards available. Check back soon!</p>
                 </div>
             }
             else
@@ -86,32 +86,32 @@ else
                     @foreach (var reward in _availableRewards)
                     {
                         var canAfford = _account != null && _account.CurrentBalance >= reward.PointCost;
-                        <div class="group relative bg-white border border-slate-200 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden">
-                            <div class="h-1.5 @(canAfford ? "bg-gradient-to-r from-amber-400 to-orange-400" : "bg-slate-200")"></div>
+                        <div class="group relative bg-white border border-mystic-200 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden">
+                            <div class="h-1.5 @(canAfford ? "bg-gradient-to-r from-amber-400 to-orange-400" : "bg-mystic-200")"></div>
                             <div class="p-6">
                                 <div class="flex justify-between items-start mb-4">
-                                    <div class="p-3 @(canAfford ? "bg-amber-50 text-amber-600" : "bg-slate-100 text-slate-400") rounded-xl">
+                                    <div class="p-3 @(canAfford ? "bg-amber-50 text-amber-600" : "bg-mystic-100 text-mystic-400") rounded-xl">
                                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
                                     </div>
                                     <div class="text-right">
-                                        <span class="text-2xl font-black text-slate-900">@reward.PointCost.ToString("N0")</span>
-                                        <span class="text-[10px] block font-bold text-slate-400 uppercase">pts required</span>
+                                        <span class="text-2xl font-black text-mystic-900">@reward.PointCost.ToString("N0")</span>
+                                        <span class="text-[10px] block font-bold text-mystic-400 uppercase">pts required</span>
                                     </div>
                                 </div>
-                                <h3 class="text-base font-bold text-slate-900 mb-1 truncate">@reward.Name</h3>
-                                <p class="text-sm text-slate-500 mb-5 line-clamp-2 h-10">@reward.Description</p>
-                                <div class="flex items-center justify-between pt-4 border-t border-slate-100">
-                                    <span class="text-xs font-semibold text-slate-500">@reward.StockQuantity in stock</span>
+                                <h3 class="text-base font-bold text-mystic-900 mb-1 truncate">@reward.Name</h3>
+                                <p class="text-sm text-mystic-500 mb-5 line-clamp-2 h-10">@reward.Description</p>
+                                <div class="flex items-center justify-between pt-4 border-t border-mystic-100">
+                                    <span class="text-xs font-semibold text-mystic-500">@reward.StockQuantity in stock</span>
                                     @if (canAfford)
                                     {
                                         <button @onclick="() => RedeemAsync(reward)"
-                                                class="bg-slate-900 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-amber-500 transition-all active:scale-95">
+                                                class="bg-mystic-900 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-amber-500 transition-all active:scale-95">
                                             Redeem
                                         </button>
                                     }
                                     else
                                     {
-                                        <span class="text-xs font-bold text-slate-400 bg-slate-100 px-3 py-2 rounded-xl">Need more pts</span>
+                                        <span class="text-xs font-bold text-mystic-400 bg-mystic-100 px-3 py-2 rounded-xl">Need more pts</span>
                                     }
                                 </div>
                             </div>
@@ -123,12 +123,12 @@ else
                     }
                 </div>
             }
-            <div class="mt-8 p-7 bg-slate-900 rounded-3xl text-white flex flex-col md:flex-row items-center justify-between gap-5">
+            <div class="mt-8 p-7 bg-mystic-900 rounded-3xl text-white flex flex-col md:flex-row items-center justify-between gap-5">
                 <div>
                     <h2 class="text-lg font-bold mb-1">How to earn more points?</h2>
-                    <p class="text-slate-400 text-sm">Borrow books, subscribe, and return on time to earn points!</p>
+                    <p class="text-mystic-400 text-sm">Borrow books, subscribe, and return on time to earn points!</p>
                 </div>
-                <a href="Books" class="bg-amber-400 text-slate-900 px-6 py-3 rounded-2xl font-black hover:bg-amber-300 transition-all text-sm whitespace-nowrap">Browse Books →</a>
+                <a href="Books" class="bg-amber-400 text-mystic-900 px-6 py-3 rounded-2xl font-black hover:bg-amber-300 transition-all text-sm whitespace-nowrap">Browse Books →</a>
             </div>
         </div>
     }
@@ -137,8 +137,8 @@ else
         <div class="animate-in fade-in duration-300">
             @if (!_pendingRedemptions.Any())
             {
-                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
-                    <p class="text-slate-400 font-medium">No pending redemptions — you're all clear!</p>
+                <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                    <p class="text-mystic-400 font-medium">No pending redemptions — you're all clear!</p>
                 </div>
             }
             else
@@ -152,8 +152,8 @@ else
                                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
                                 </div>
                                 <div>
-                                    <p class="font-bold text-slate-900 text-sm">@r.RewardName</p>
-                                    <p class="text-xs text-slate-400">Claimed @r.RedeemedAt.ToString("MMM dd, yyyy") · @r.PointCost.ToString("N0") pts</p>
+                                    <p class="font-bold text-mystic-900 text-sm">@r.RewardName</p>
+                                    <p class="text-xs text-mystic-400">Claimed @r.RedeemedAt.ToString("MMM dd, yyyy") · @r.PointCost.ToString("N0") pts</p>
                                 </div>
                             </div>
                             <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">
@@ -171,44 +171,44 @@ else
         <div class="animate-in fade-in duration-300">
             @if (!_pointsHistory.Any())
             {
-                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
-                    <p class="text-slate-400 font-medium">No points history yet. Start borrowing books to earn points!</p>
+                <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                    <p class="text-mystic-400 font-medium">No points history yet. Start borrowing books to earn points!</p>
                 </div>
             }
             else
             {
-                <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-                    <table class="min-w-full divide-y divide-slate-100">
-                        <thead class="bg-slate-50">
+                <div class="bg-white border border-mystic-200 rounded-2xl overflow-hidden shadow-sm">
+                    <table class="min-w-full divide-y divide-mystic-100">
+                        <thead class="bg-mystic-50">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Date</th>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Type</th>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Details</th>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Spent on</th>
-                                <th class="px-6 py-3 text-right text-xs font-bold text-slate-500 uppercase tracking-wider">Points</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Date</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Type</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Details</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Spent on</th>
+                                <th class="px-6 py-3 text-right text-xs font-bold text-mystic-500 uppercase tracking-wider">Points</th>
                             </tr>
                         </thead>
-                        <tbody class="divide-y divide-slate-50">
+                        <tbody class="divide-y divide-mystic-50">
                             @foreach (var h in _pointsHistory.OrderByDescending(x => x.CreatedAt))
                             {
                                 var isPos = h.PointDelta >= 0;
                                 var label = PrettyEvent(h.EventKey, h.PointDelta);
                                 string? spentOn = h.RewardName;
                                 
-                                <tr class="hover:bg-slate-50 transition-colors">
-                                    <td class="px-6 py-3 text-sm text-slate-500 whitespace-nowrap">@h.CreatedAt.ToString("MMM dd, yyyy")</td>
+                                <tr class="hover:bg-mystic-50 transition-colors">
+                                    <td class="px-6 py-3 text-sm text-mystic-500 whitespace-nowrap">@h.CreatedAt.ToString("MMM dd, yyyy")</td>
                                     <td class="px-6 py-3">
                                         <span class="px-2.5 py-0.5 rounded-full text-xs font-bold @(isPos ? "bg-emerald-100 text-emerald-700" : "bg-rose-100 text-rose-700")">@label</span>
                                     </td>
-                                    <td class="px-6 py-3 text-sm text-slate-600 max-w-xs truncate">@h.Description</td>
-                                    <td class="px-6 py-3 text-sm text-slate-600 max-w-xs truncate">
+                                    <td class="px-6 py-3 text-sm text-mystic-600 max-w-xs truncate">@h.Description</td>
+                                    <td class="px-6 py-3 text-sm text-mystic-600 max-w-xs truncate">
                                         @if (!string.IsNullOrWhiteSpace(spentOn))
                                         {
-                                            <span class="font-semibold text-slate-700">@spentOn</span>
+                                            <span class="font-semibold text-mystic-700">@spentOn</span>
                                         }
                                         else
                                         {
-                                            <span class="text-slate-400">—</span>
+                                            <span class="text-mystic-400">—</span>
                                         }
                                     </td>
                                     <td class="px-6 py-3 text-right font-black text-base @(isPos ? "text-emerald-600" : "text-rose-600")">

BlazorFrontend/Components/Pages/RewardsManage.razor

@@ -10,25 +10,25 @@
 
 <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4 animate-in fade-in slide-in-from-top-4 duration-500">
     <div>
-        <h1 class="text-3xl font-extrabold tracking-tight text-slate-900">Rewards Management</h1>
-        <p class="text-slate-500 mt-1">Fulfill pending redemptions and review all members' loyalty activity.</p>
+        <h1 class="text-3xl font-extrabold tracking-tight text-mystic-900">Rewards Management</h1>
+        <p class="text-mystic-900 mt-1">Fulfill pending redemptions and review all members' loyalty activity.</p>
     </div>
     <div class="flex items-center gap-4">
         <div class="bg-amber-50 border border-amber-200 px-5 py-2.5 rounded-xl text-center shadow-sm">
             <p class="text-[10px] font-bold text-amber-600 uppercase tracking-widest">Pending</p>
-            <p class="text-2xl font-black text-slate-900">@_pendingRedemptions.Count()</p>
+            <p class="text-2xl font-black text-mystic-900">@_pendingRedemptions.Count()</p>
         </div>
-        <div class="bg-slate-50 border border-slate-200 px-5 py-2.5 rounded-xl text-center shadow-sm">
-            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Members w/ History</p>
-            <p class="text-2xl font-black text-slate-900">@_allMembersHistory.Count()</p>
+        <div class="bg-mystic-50 border border-mystic-200 px-5 py-2.5 rounded-xl text-center shadow-sm">
+            <p class="text-[10px] font-bold text-mystic-500 uppercase tracking-widest">Members w/ History</p>
+            <p class="text-2xl font-black text-mystic-900">@_allMembersHistory.Count()</p>
         </div>
     </div>
 </div>
 
-<div class="mb-6 border-b border-slate-200">
+<div class="mb-6 border-b border-mystic-200">
     <nav class="-mb-px flex gap-6">
         <button @onclick='() => _activeTab = "pending"'
-                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "pending" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "pending" ? "border-mystic-900 text-mystic-900" : "border-transparent text-mystic-400 hover:text-mystic-700")'>
             <span class="inline-flex items-center gap-1.5">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -41,7 +41,7 @@
             }
         </button>
         <button @onclick='() => _activeTab = "history"'
-                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "history" ? "border-slate-900 text-slate-900" : "border-transparent text-slate-400 hover:text-slate-700")'>
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "history" ? "border-mystic-900 text-mystic-900" : "border-transparent text-mystic-400 hover:text-mystic-700")'>
             <span class="inline-flex items-center gap-1.5">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6m4 6V7m4 10v-3M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
@@ -55,7 +55,7 @@
 @if (_isLoading)
 {
     <div class="py-20 flex justify-center">
-        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900"></div>
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-mystic-900"></div>
     </div>
 }
 else
@@ -65,43 +65,43 @@ else
         <div class="animate-in fade-in duration-300">
             @if (!_pendingRedemptions.Any())
             {
-                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
-                    <svg class="w-16 h-16 mx-auto opacity-20 text-slate-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                    <p class="text-slate-500 font-medium">No pending redemptions. All caught up!</p>
+                <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                    <svg class="w-16 h-16 mx-auto opacity-20 text-mystic-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    <p class="text-mystic-500 font-medium">No pending redemptions. All caught up!</p>
                 </div>
             }
             else
             {
-                <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-                    <table class="min-w-full divide-y divide-slate-100">
-                        <thead class="bg-slate-50">
+                <div class="bg-white border border-mystic-200 rounded-2xl overflow-hidden shadow-sm">
+                    <table class="min-w-full divide-y divide-mystic-100">
+                        <thead class="bg-mystic-50">
                             <tr>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Member</th>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Reward</th>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Points</th>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Claimed</th>
-                                <th class="px-6 py-3 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">Status</th>
-                                <th class="px-6 py-3 text-right text-xs font-bold text-slate-500 uppercase tracking-wider">Action</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Member</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Reward</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Points</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Claimed</th>
+                                <th class="px-6 py-3 text-left text-xs font-bold text-mystic-500 uppercase tracking-wider">Status</th>
+                                <th class="px-6 py-3 text-right text-xs font-bold text-mystic-500 uppercase tracking-wider">Action</th>
                             </tr>
                         </thead>
-                        <tbody class="divide-y divide-slate-100">
+                        <tbody class="divide-y divide-mystic-100">
                             @foreach (var r in _pendingRedemptions.OrderBy(x => x.RedeemedAt))
                             {
                                 <tr class="hover:bg-amber-50/40 transition-colors">
                                     <td class="px-6 py-4">
                                         <div class="flex items-center gap-3">
-                                            <div class="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
+                                            <div class="w-8 h-8 rounded-full bg-mystic-900 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                                                 @(r.ExternalUserId.Length >= 2 ? r.ExternalUserId.Substring(0, 2).ToUpper() : "U")
                                             </div>
-                                            <span class="text-sm font-medium text-slate-700 font-mono text-xs">@r.ExternalUserId</span>
+                                            <span class="text-sm font-medium text-mystic-700 font-mono text-xs">@r.ExternalUserId</span>
                                         </div>
                                     </td>
                                     <td class="px-6 py-4">
-                                        <p class="text-sm font-bold text-slate-900">@r.RewardName</p>
-                                        <p class="text-xs text-slate-400">ID: @(r.Id.Length > 8 ? r.Id[..8] : r.Id)...</p>
+                                        <p class="text-sm font-bold text-mystic-900">@r.RewardName</p>
+                                        <p class="text-xs text-mystic-400">ID: @(r.Id.Length > 8 ? r.Id[..8] : r.Id)...</p>
                                     </td>
-                                    <td class="px-6 py-4 text-sm font-bold text-slate-700">@r.PointCost.ToString("N0") pts</td>
-                                    <td class="px-6 py-4 text-sm text-slate-500 whitespace-nowrap">@r.RedeemedAt.ToString("MMM dd, yyyy")</td>
+                                    <td class="px-6 py-4 text-sm font-bold text-mystic-700">@r.PointCost.ToString("N0") pts</td>
+                                    <td class="px-6 py-4 text-sm text-mystic-500 whitespace-nowrap">@r.RedeemedAt.ToString("MMM dd, yyyy")</td>
                                     <td class="px-6 py-4">
                                         <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">
                                             <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
@@ -128,8 +128,8 @@ else
         <div class="animate-in fade-in duration-300">
             @if (!_allMembersHistory.Any())
             {
-                <div class="py-20 text-center bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
-                    <p class="text-slate-400 font-medium">No loyalty history found for any members yet.</p>
+                <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                    <p class="text-mystic-400 font-medium">No loyalty history found for any members yet.</p>
                 </div>
             }
             else
@@ -137,40 +137,40 @@ else
                 <!-- Search bar -->
                 <div class="mb-4">
                     <input type="text" placeholder="Filter by member name or email..."
-                           class="w-full max-w-sm px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-slate-900 bg-white"
+                           class="w-full max-w-sm px-4 py-2.5 border border-mystic-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-mystic-900 bg-white"
                            @bind="_searchQuery" @bind:event="oninput" />
                 </div>
 
                 <div class="space-y-4">
                     @foreach (var member in FilteredMembers)
                     {
-                        <div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+                        <div class="bg-white border border-mystic-200 rounded-2xl overflow-hidden shadow-sm">
                             <!-- Member header -->
-                            <div class="flex items-center justify-between px-6 py-4 bg-slate-50 border-b border-slate-100 cursor-pointer"
+                            <div class="flex items-center justify-between px-6 py-4 bg-mystic-50 border-b border-mystic-100 cursor-pointer"
                                  @onclick="() => ToggleMember(member.AccountId)">
                                 <div class="flex items-center gap-4">
-                                    <div class="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
+                                    <div class="w-10 h-10 rounded-full bg-mystic-900 flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
                                         @(member.UserName.Length >= 2 ? member.UserName.Substring(0, 2).ToUpper() : "?")
                                     </div>
                                     <div>
-                                        <p class="font-bold text-slate-900 text-sm">@member.UserName</p>
-                                        <p class="text-xs text-slate-400">@member.UserEmail</p>
+                                        <p class="font-bold text-mystic-900 text-sm">@member.UserName</p>
+                                        <p class="text-xs text-mystic-400">@member.UserEmail</p>
                                     </div>
                                 </div>
                                 <div class="flex items-center gap-6">
                                     <div class="text-right">
-                                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Balance</p>
-                                        <p class="font-black text-slate-900">@member.CurrentBalance.ToString("N0") pts</p>
+                                        <p class="text-xs font-bold text-mystic-400 uppercase tracking-widest">Balance</p>
+                                        <p class="font-black text-mystic-900">@member.CurrentBalance.ToString("N0") pts</p>
                                     </div>
                                     <div class="text-right">
-                                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Tier</p>
-                                        <span class="text-xs font-bold px-2 py-0.5 rounded-full bg-slate-200 text-slate-700">@member.Tier</span>
+                                        <p class="text-xs font-bold text-mystic-400 uppercase tracking-widest">Tier</p>
+                                        <span class="text-xs font-bold px-2 py-0.5 rounded-full bg-mystic-200 text-mystic-700">@member.Tier</span>
                                     </div>
                                     <div class="text-right">
-                                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Transactions</p>
-                                        <p class="font-black text-slate-900">@member.History.Count()</p>
+                                        <p class="text-xs font-bold text-mystic-400 uppercase tracking-widest">Transactions</p>
+                                        <p class="font-black text-mystic-900">@member.History.Count()</p>
                                     </div>
-                                    <svg class="w-4 h-4 text-slate-400 transition-transform @(_expandedMembers.Contains(member.AccountId) ? "rotate-180" : "")" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                                    <svg class="w-4 h-4 text-mystic-400 transition-transform @(_expandedMembers.Contains(member.AccountId) ? "rotate-180" : "")" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                 </div>
                             </div>
                             
@@ -180,41 +180,41 @@ else
                                 <div class="overflow-x-auto animate-in slide-in-from-top-2 duration-300">
                                     @if (!member.History.Any())
                                     {
-                                        <p class="px-6 py-4 text-sm text-slate-400 italic">No transactions found for this member.</p>
+                                        <p class="px-6 py-4 text-sm text-mystic-400 italic">No transactions found for this member.</p>
                                     }
                                     else
                                     {
-                                        <table class="min-w-full divide-y divide-slate-50">
+                                        <table class="min-w-full divide-y divide-mystic-50">
                                             <thead>
-                                                <tr class="bg-slate-50/50">
-                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Date</th>
-                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Type</th>
-                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Details</th>
-                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-slate-400 uppercase tracking-wider">Spent on</th>
-                                                    <th class="px-6 py-2 text-right text-[10px] font-bold text-slate-400 uppercase tracking-wider">Points</th>
+                                                <tr class="bg-mystic-50/50">
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-mystic-400 uppercase tracking-wider">Date</th>
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-mystic-400 uppercase tracking-wider">Type</th>
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-mystic-400 uppercase tracking-wider">Details</th>
+                                                    <th class="px-6 py-2 text-left text-[10px] font-bold text-mystic-400 uppercase tracking-wider">Spent on</th>
+                                                    <th class="px-6 py-2 text-right text-[10px] font-bold text-mystic-400 uppercase tracking-wider">Points</th>
                                                 </tr>
                                             </thead>
-                                            <tbody class="divide-y divide-slate-50">
+                                            <tbody class="divide-y divide-mystic-50">
                                                 @foreach (var h in member.History.OrderByDescending(x => x.CreatedAt))
                                                 {
                                                     var isPos = h.PointDelta >= 0;
                                                     var label = PrettyEvent(h.EventKey, h.PointDelta);
                                                     string? spentOn = h.RewardName;
                                                     
-                                                    <tr class="hover:bg-slate-50 transition-colors">
-                                                        <td class="px-6 py-2.5 text-xs text-slate-500 whitespace-nowrap">@h.CreatedAt.ToString("MMM dd, yyyy")</td>
+                                                    <tr class="hover:bg-mystic-50 transition-colors">
+                                                        <td class="px-6 py-2.5 text-xs text-mystic-500 whitespace-nowrap">@h.CreatedAt.ToString("MMM dd, yyyy")</td>
                                                         <td class="px-6 py-2.5">
                                                             <span class="px-2 py-0.5 rounded-full text-[10px] font-bold @(isPos ? "bg-emerald-100 text-emerald-700" : "bg-rose-100 text-rose-700")">@label</span>
                                                         </td>
-                                                        <td class="px-6 py-2.5 text-xs text-slate-600 max-w-xs truncate">@h.Description</td>
-                                                        <td class="px-6 py-2.5 text-xs text-slate-600 max-w-xs truncate">
+                                                        <td class="px-6 py-2.5 text-xs text-mystic-600 max-w-xs truncate">@h.Description</td>
+                                                        <td class="px-6 py-2.5 text-xs text-mystic-600 max-w-xs truncate">
                                                             @if (!string.IsNullOrWhiteSpace(spentOn))
                                                             {
-                                                                <span class="font-semibold text-slate-700">@spentOn</span>
+                                                                <span class="font-semibold text-mystic-700">@spentOn</span>
                                                             }
                                                             else
                                                             {
-                                                                <span class="text-slate-400">—</span>
+                                                                <span class="text-mystic-400">—</span>
                                                             }
                                                         </td>
                                                         <td class="px-6 py-2.5 text-right font-black text-sm @(isPos ? "text-emerald-600" : "text-rose-600")">