diff --git a/src/routes/core/+layout.svelte b/src/routes/core/+layout.svelte
index 1d6e4636..3c6db072 100644
--- a/src/routes/core/+layout.svelte
+++ b/src/routes/core/+layout.svelte
@@ -30,31 +30,31 @@
 <div class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto p-4">
     {#if $ae_loc.manager_access}
         <nav class="flex flex-wrap gap-2 mb-6 border-b border-surface-500/30 pb-4">
-            <a href="/core" class="btn btn-sm variant-soft-surface">
+            <a href="/core" class="btn btn-sm preset-tonal-surface">
                 <LayoutDashboard size={14} class="mr-1" /> Dashboard
             </a>
-            <a href="/core/accounts" class="btn btn-sm variant-soft-primary">
+            <a href="/core/accounts" class="btn btn-sm preset-tonal-primary">
                 <Building size={14} class="mr-1" /> Accounts
             </a>
-            <a href="/core/sites" class="btn btn-sm variant-soft-secondary">
+            <a href="/core/sites" class="btn btn-sm preset-tonal-secondary">
                 <Globe size={14} class="mr-1" /> Sites
             </a>
-            <a href="/core/users" class="btn btn-sm variant-soft-error">
+            <a href="/core/users" class="btn btn-sm preset-tonal-error">
                 <ShieldCheck size={14} class="mr-1" /> Users
             </a>
-            <a href="/core/people" class="btn btn-sm variant-soft-warning">
+            <a href="/core/people" class="btn btn-sm preset-tonal-warning">
                 <Users size={14} class="mr-1" /> People
             </a>
-            <a href="/core/activity_logs" class="btn btn-sm variant-soft-success">
+            <a href="/core/activity_logs" class="btn btn-sm preset-tonal-success">
                 <History size={14} class="mr-1" /> Logs
             </a>
-            <a href="/core/addresses" class="btn btn-sm variant-soft-surface">
+            <a href="/core/addresses" class="btn btn-sm preset-tonal-surface">
                 <MapPin size={14} class="mr-1" /> Addresses
             </a>
-            <a href="/core/contacts" class="btn btn-sm variant-soft-surface">
+            <a href="/core/contacts" class="btn btn-sm preset-tonal-surface">
                 <Phone size={14} class="mr-1" /> Contacts
             </a>
-            <a href="/core/lookups" class="btn btn-sm variant-soft-surface">
+            <a href="/core/lookups" class="btn btn-sm preset-tonal-surface">
                 <List size={14} class="mr-1" /> Lookups
             </a>
         </nav>
@@ -70,7 +70,7 @@
             <h1 class="h1 font-black">Access Restricted</h1>
             <p class="max-w-md opacity-70">The area you are trying to access is reserved for system managers. If you believe you should have access, please sign in with an authorized account.</p>
             <div class="flex gap-4 pt-4">
-                <a href="/" class="btn variant-filled-primary font-bold">Return Home</a>
+                <a href="/" class="btn preset-filled-primary font-bold">Return Home</a>
             </div>
         </section>
     {/if}
diff --git a/src/routes/core/+page.svelte b/src/routes/core/+page.svelte
index 6940cbe7..ec01aaff 100644
--- a/src/routes/core/+page.svelte
+++ b/src/routes/core/+page.svelte
@@ -33,7 +33,7 @@
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
         <!-- Account Management Card -->
-        <div class="card p-6 space-y-4 variant-soft-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div class="card p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -43,13 +43,13 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">Manage client accounts and high-level system settings.</p>
             </div>
-            <a class="btn variant-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
+            <a class="btn preset-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
                 Manage
             </a>
         </div>
 
         <!-- Site Management Card -->
-        <div class="card p-6 space-y-4 variant-soft-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div class="card p-6 space-y-4 preset-tonal-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -59,13 +59,13 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">Configure sites and domains associated with the active account.</p>
             </div>
-            <a class="btn variant-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
+            <a class="btn preset-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
                 Manage
             </a>
         </div>
 
         <!-- User Management Card -->
-        <div class="card p-6 space-y-4 variant-soft-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div class="card p-6 space-y-4 preset-tonal-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -75,13 +75,13 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">Manage system access, permissions, and user credentials.</p>
             </div>
-            <a class="btn variant-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
+            <a class="btn preset-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
                 Manage
             </a>
         </div>
 
         <!-- Person Management Card -->
-        <div class="card p-6 space-y-4 variant-soft-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div class="card p-6 space-y-4 preset-tonal-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -91,13 +91,13 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">Search and manage person records and their user linking.</p>
             </div>
-            <a class="btn variant-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
+            <a class="btn preset-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
                 Manage
             </a>
         </div>
 
         <!-- Address Management Card -->
-        <div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
+        <div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -107,13 +107,13 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">Manage physical locations, shipping, and billing addresses.</p>
             </div>
-            <a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
+            <a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
                 Manage
             </a>
         </div>
 
         <!-- Contact Management Card -->
-        <div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
+        <div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -123,13 +123,13 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">Maintain support contacts, office numbers, and digital links.</p>
             </div>
-            <a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
+            <a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
                 Manage
             </a>
         </div>
 
         <!-- Activity Log Card -->
-        <div class="card p-6 space-y-4 variant-soft-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div class="card p-6 space-y-4 preset-tonal-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -139,13 +139,13 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">Monitor system actions and historical changes for the account.</p>
             </div>
-            <a class="btn variant-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
+            <a class="btn preset-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
                 View Logs
             </a>
         </div>
 
         <!-- Lookups Card -->
-        <div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
+        <div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
@@ -155,7 +155,7 @@
                 </div>
                 <p class="text-sm opacity-80 leading-relaxed">View system lookup tables (countries, time zones, etc).</p>
             </div>
-            <a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
+            <a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
                 View
             </a>
         </div>
diff --git a/src/routes/core/accounts/+page.svelte b/src/routes/core/accounts/+page.svelte
index 9a046178..32904163 100644
--- a/src/routes/core/accounts/+page.svelte
+++ b/src/routes/core/accounts/+page.svelte
@@ -68,12 +68,12 @@
                 <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Client Entities & Billing</p>
             </div>
         </div>
-        <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_add_account}>
+        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_account}>
             <Plus size={16} class="mr-2" /> Add Account
         </button>
     </header>
 
-    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
+    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Accounts</span>
@@ -87,7 +87,7 @@
                         bind:value={qry_str}
                         placeholder="Search by name or code..."
                     />
-                    <button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_accounts} disabled={loading}>
+                    <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_accounts} disabled={loading}>
                         {#if loading}
                             <span class="animate-spin text-xl">⏳</span>
                         {:else}
@@ -100,7 +100,7 @@
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div class="space-y-1">
                     <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
-                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
+                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
                         <option value="all">All Statuses</option>
                         <option value="enabled">Enabled Only</option>
                         <option value="not_enabled">Disabled Only</option>
@@ -109,7 +109,7 @@
 
                 <div class="space-y-1">
                     <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
-                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
+                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
                         <option value="all">All Visibility</option>
                         <option value="not_hidden">Not Hidden Only</option>
                         <option value="hidden">Hidden Only</option>
@@ -124,33 +124,33 @@
             <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Building size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Accounts Found</h3>
             <p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your filters or add a new client account.</p>
         </div>
     {:else}
-        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
             <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Directory Results
-                <span class="badge variant-soft-secondary ml-auto">{filtered_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as acct (acct.account_id_random)}
-                    <div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4 flex gap-1">
                             {#if acct.hide}
-                                <span class="badge variant-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
+                                <span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
                             {/if}
-                            <span class="badge {acct.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span class="badge {acct.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {acct.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <header class="flex items-center gap-3">
-                            <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
+                            <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
                                 <Building size={24} />
                             </div>
                             <div class="pr-12">
@@ -170,7 +170,7 @@
                             </div>
                         </div>
 
-                        <a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/accounts/{acct.account_id_random}">
+                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/accounts/{acct.account_id_random}">
                             Manage Account
                         </a>
                     </div>
diff --git a/src/routes/core/accounts/[account_id]/+page.svelte b/src/routes/core/accounts/[account_id]/+page.svelte
index c3c11f4c..d9448dd6 100644
--- a/src/routes/core/accounts/[account_id]/+page.svelte
+++ b/src/routes/core/accounts/[account_id]/+page.svelte
@@ -72,7 +72,7 @@
 <div class="container mx-auto p-4 space-y-6">
     <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/accounts">
+            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/accounts">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-2">
@@ -83,10 +83,10 @@
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
+            <button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
                 <Trash2 size={16} class="mr-2" /> Disable
             </button>
-            <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
+            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
                 {#if saving}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -103,31 +103,31 @@
         </div>
     {:else if account}
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Info size={18} class="text-primary-500" /> Basic Information
                 </h3>
                 <div class="space-y-4">
                     <div class="space-y-1">
                         <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Name</span>
-                        <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
+                        <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
                     </div>
                     <div class="space-y-1">
                         <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Short Name</span>
-                        <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
+                        <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
                     </div>
                     <div class="space-y-1">
                         <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Code</span>
-                        <input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
+                        <input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
                     </div>
                     <div class="space-y-1">
                         <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
-                        <textarea class="textarea variant-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
+                        <textarea class="textarea preset-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
                     </div>
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Settings size={18} class="text-secondary-500" /> Settings & Status
                 </h3>
@@ -148,21 +148,21 @@
                 <div class="space-y-4 border-t border-surface-500/30 pt-4">
                     <div class="space-y-1">
                         <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Group</span>
-                        <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
+                        <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
                     </div>
                     <div class="space-y-1">
                         <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Sort Order</span>
-                        <input class="input variant-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
+                        <input class="input preset-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
                     </div>
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 md:col-span-2 shadow-xl variant-glass-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 md:col-span-2 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Activity size={18} class="text-tertiary-500" /> Internal Notes
                 </h3>
                 <div class="space-y-1">
-                    <textarea class="textarea variant-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
+                    <textarea class="textarea preset-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
                 </div>
             </div>
         </div>
diff --git a/src/routes/core/activity_logs/+page.svelte b/src/routes/core/activity_logs/+page.svelte
index 3e738d4c..cfd1ad2c 100644
--- a/src/routes/core/activity_logs/+page.svelte
+++ b/src/routes/core/activity_logs/+page.svelte
@@ -58,7 +58,7 @@
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={load_logs} disabled={loading}>
+            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_logs} disabled={loading}>
                 {#if loading}
                     <RefreshCcw size={16} class="mr-2 animate-spin" /> Updating...
                 {:else}
@@ -69,7 +69,7 @@
     </header>
 
     <!-- Filter Bar -->
-    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
+    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Keywords</span>
@@ -83,7 +83,7 @@
                         bind:value={qry_str}
                         placeholder="Action, name, description..."
                     />
-                    <button type="submit" class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" disabled={loading}>
+                    <button type="submit" class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" disabled={loading}>
                         <span class="whitespace-nowrap tracking-wide">Search</span>
                     </button>
                 </form>
@@ -91,7 +91,7 @@
 
             <div class="space-y-1">
                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Display Limit</span>
-                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={limit} onchange={load_logs}>
+                <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={limit} onchange={load_logs}>
                     <option value={25}>Latest 25</option>
                     <option value={50}>Latest 50</option>
                     <option value={100}>Latest 100</option>
@@ -106,17 +106,17 @@
             <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
         </div>
     {:else if log_li.length === 0}
-        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Activity size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Logs Found</h3>
             <p class="opacity-60 max-w-xs mx-auto mt-2">Try broadening your search or check another account.</p>
         </div>
     {:else}
-        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
             <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 System Events
-                <span class="badge variant-soft-secondary ml-auto">{log_li.length} entries shown</span>
+                <span class="badge preset-tonal-secondary ml-auto">{log_li.length} entries shown</span>
             </h3>
 
             <div class="table-container">
@@ -149,7 +149,7 @@
                                 <!-- User/Person -->
                                 <td>
                                     <div class="flex items-center gap-2">
-                                        <div class="avatar variant-soft-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
+                                        <div class="avatar preset-tonal-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
                                             <User size={14} class="opacity-60" />
                                         </div>
                                         <div class="flex flex-col max-w-[180px]">
@@ -168,7 +168,7 @@
                                 <!-- Action -->
                                 <td>
                                     <div class="flex flex-col gap-1">
-                                        <span class="badge variant-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
+                                        <span class="badge preset-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
                                             {log.action}
                                         </span>
                                         {#if log.action_with}
diff --git a/src/routes/core/addresses/+page.svelte b/src/routes/core/addresses/+page.svelte
index 1faf3729..4a6736be 100644
--- a/src/routes/core/addresses/+page.svelte
+++ b/src/routes/core/addresses/+page.svelte
@@ -52,7 +52,7 @@
             <h1 class="h2 font-black tracking-tight">Address Management</h1>
         </div>
         <button
-            class="btn btn-sm variant-filled-primary font-bold shadow-lg"
+            class="btn btn-sm preset-filled-primary font-bold shadow-lg"
             onclick={() => show_add_form = !show_add_form}
         >
             {#if show_add_form}
@@ -78,7 +78,7 @@
         </div>
     {/if}
 
-    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10">
+    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
         <div class="max-w-2xl space-y-1">
             <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
             <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
@@ -91,7 +91,7 @@
                     bind:value={qry_str}
                     placeholder="Search by city, state, organization, or street..."
                 />
-                <button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
+                <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
                     {#if loading}
                         <span class="animate-spin text-xl">⏳</span>
                     {:else}
@@ -107,30 +107,30 @@
             <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <MapPinned size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Addresses Found</h3>
             <p class="opacity-60 max-w-xs mx-auto mt-2">Addresses associated with this account will appear here.</p>
         </div>
     {:else}
-        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
             <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Linked Addresses
-                <span class="badge variant-soft-secondary ml-auto">{filtered_li.length} entries</span>
+                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as addr (addr.address_id_random)}
-                    <div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4">
-                            <span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span class="badge {addr.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {addr.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <div class="flex items-center gap-3">
-                            <div class="avatar variant-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
+                            <div class="avatar preset-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
                                 <MapPin size={20} />
                             </div>
                             <div class="pr-12">
@@ -152,7 +152,7 @@
                             </div>
                         </div>
 
-                        <a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
+                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
                             View Details
                         </a>
                     </div>
diff --git a/src/routes/core/addresses/[address_id]/+page.svelte b/src/routes/core/addresses/[address_id]/+page.svelte
index 21fa75cf..a0e796b9 100644
--- a/src/routes/core/addresses/[address_id]/+page.svelte
+++ b/src/routes/core/addresses/[address_id]/+page.svelte
@@ -50,7 +50,7 @@
 <div class="container mx-auto p-4 space-y-6">
     <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/addresses">
+            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/addresses">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-3">
@@ -64,14 +64,14 @@
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm variant-soft-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
+            <button class="btn btn-sm preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
                 {#if is_editing}
                     <Eye size={16} class="mr-2" /> View Mode
                 {:else}
                     <Edit size={16} class="mr-2" /> Edit Mode
                 {/if}
             </button>
-            <button class="btn btn-sm variant-soft-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
+            <button class="btn btn-sm preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
                 <Trash2 size={16} class="mr-2" /> Delete
             </button>
         </div>
@@ -96,7 +96,7 @@
         {:else}
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
                 <div class="lg:col-span-2 space-y-6">
-                    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                         <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <MapPinned size={20} class="text-primary-500" />
                             Location Information
@@ -132,12 +132,12 @@
                                 <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Globe size={10} /> Postal Code / Country
                                 </p>
-                                <p class="font-bold">{address.postal_code || '--'} / <span class="badge variant-soft-surface">{address.country_name || address.country || '--'}</span></p>
+                                <p class="font-bold">{address.postal_code || '--'} / <span class="badge preset-tonal-surface">{address.country_name || address.country || '--'}</span></p>
                             </div>
                         </div>
                     </div>
 
-                    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                         <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <Activity size={20} class="text-secondary-500" />
                             Technical Details
@@ -168,7 +168,7 @@
                 </div>
 
                 <div class="space-y-6">
-                    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                         <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <ShieldCheck size={20} class="text-warning-500" />
                             Visibility & Status
@@ -176,26 +176,26 @@
                         <div class="space-y-4">
                             <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
                                 <span class="text-sm font-bold opacity-75">Enabled</span>
-                                <span class="badge {address.enable ? 'variant-filled-success' : 'variant-filled-error'} px-4 py-1 shadow-sm">
+                                <span class="badge {address.enable ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
                                     {address.enable ? 'ACTIVE' : 'DISABLED'}
                                 </span>
                             </div>
                             <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
                                 <span class="text-sm font-bold opacity-75">Hidden</span>
-                                <span class="badge {address.hide ? 'variant-filled-warning' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="badge {address.hide ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {address.hide ? 'YES' : 'NO'}
                                 </span>
                             </div>
                             <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
                                 <span class="text-sm font-bold opacity-75">Priority</span>
-                                <span class="badge {address.priority ? 'variant-filled-secondary' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="badge {address.priority ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {address.priority ? 'YES' : 'NO'}
                                 </span>
                             </div>
                         </div>
                     </div>
 
-                    <div class="card p-5 variant-soft-surface shadow-inner border border-surface-500/10 space-y-3">
+                    <div class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
                         <p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
                         <div class="space-y-2 text-[10px] font-mono opacity-60">
                             <p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{address.address_id_random}</span></p>
diff --git a/src/routes/core/addresses/ae_comp__address_form.svelte b/src/routes/core/addresses/ae_comp__address_form.svelte
index b77388d8..3ad7f2e7 100644
--- a/src/routes/core/addresses/ae_comp__address_form.svelte
+++ b/src/routes/core/addresses/ae_comp__address_form.svelte
@@ -111,7 +111,7 @@
     }
 </script>
 
-<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
+<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
     <header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
         <h3 class="h3 flex items-center gap-2">
             <MapPin size={24} />
@@ -119,11 +119,11 @@
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
+                <button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
+            <button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -135,7 +135,7 @@
     </header>
 
     {#if error_msg}
-        <aside class="alert variant-filled-error">
+        <aside class="alert preset-filled-error">
             <div class="alert-message">
                 <p>{error_msg}</p>
             </div>
@@ -149,27 +149,27 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="addr-attention-to">Attention To / Name</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
+                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="addr-org-name">Organization Name</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
+                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="addr-line-1">Address Line 1</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
+                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-line-2">Line 2</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-line-3">Line 3</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
                 </div>
             </div>
         </fieldset>
@@ -181,22 +181,22 @@
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-city">City</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-state">State / Province</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
                 </div>
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-postal">Postal Code</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-country">Country (Code)</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Globe size={16} /></div>
                         <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-country" type="text" bind:value={formData.country} placeholder="USA" />
                     </div>
@@ -210,7 +210,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="addr-timezone">Timezone</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Clock size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-timezone" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
                 </div>
@@ -219,14 +219,14 @@
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-latitude">Latitude</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Navigation size={16} /></div>
                         <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-latitude" type="text" bind:value={formData.latitude} placeholder="40.7128" />
                     </div>
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="addr-longitude">Longitude</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Navigation size={16} /></div>
                         <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-longitude" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
                     </div>
@@ -255,13 +255,13 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="addr-notes">Internal Notes</label>
-                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
+                <textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
             </div>
         </fieldset>
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
+        <button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}
diff --git a/src/routes/core/ae_comp__person_obj_tbl.svelte b/src/routes/core/ae_comp__person_obj_tbl.svelte
index 7a58365d..808de963 100644
--- a/src/routes/core/ae_comp__person_obj_tbl.svelte
+++ b/src/routes/core/ae_comp__person_obj_tbl.svelte
@@ -124,7 +124,7 @@
                                             <span class="text-[10px] opacity-50 font-mono">{person_obj.user_id_random}</span>
                                         </div>
                                     {:else}
-                                        <span class="badge variant-soft-warning">
+                                        <span class="badge preset-tonal-warning">
                                             <span class="fas fa-link-slash mr-1"></span>
                                             Not Linked
                                         </span>
@@ -132,9 +132,9 @@
                                 </td>
                                 <td class="px-4 py-2">
                                     <div class="flex flex-wrap gap-1">
-                                        {#if person_obj?.user_super}<span class="badge variant-filled-error text-[10px]">Super</span>{/if}
-                                        {#if person_obj?.user_manager}<span class="badge variant-filled-warning text-[10px]">Manager</span>{/if}
-                                        {#if person_obj?.user_administrator}<span class="badge variant-filled-primary text-[10px]">Admin</span>{/if}
+                                        {#if person_obj?.user_super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
+                                        {#if person_obj?.user_manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
+                                        {#if person_obj?.user_administrator}<span class="badge preset-filled-primary text-[10px]">Admin</span>{/if}
                                         {#if !person_obj?.user_id_random}<span class="opacity-30">--</span>{/if}
                                     </div>
                                 </td>
diff --git a/src/routes/core/contacts/+page.svelte b/src/routes/core/contacts/+page.svelte
index 0b468604..a469ece4 100644
--- a/src/routes/core/contacts/+page.svelte
+++ b/src/routes/core/contacts/+page.svelte
@@ -52,7 +52,7 @@
             <h1 class="h2 font-black tracking-tight">Contact Management</h1>
         </div>
         <button
-            class="btn btn-sm variant-filled-primary font-bold shadow-lg"
+            class="btn btn-sm preset-filled-primary font-bold shadow-lg"
             onclick={() => show_add_form = !show_add_form}
         >
             {#if show_add_form}
@@ -78,7 +78,7 @@
         </div>
     {/if}
 
-    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10">
+    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
         <div class="max-w-2xl space-y-1">
             <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
             <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
@@ -91,7 +91,7 @@
                     bind:value={qry_str}
                     placeholder="Search by name, title, email, or phone..."
                 />
-                <button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_contacts} disabled={loading}>
+                <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_contacts} disabled={loading}>
                     {#if loading}
                         <span class="animate-spin text-xl">⏳</span>
                     {:else}
@@ -107,30 +107,30 @@
             <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Contact size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Contacts Found</h3>
             <p class="opacity-60 max-w-xs mx-auto mt-2">Business and support contacts will appear here.</p>
         </div>
     {:else}
-        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
             <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Directory Results
-                <span class="badge variant-soft-secondary ml-auto">{filtered_li.length} entries</span>
+                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as con (con.contact_id_random)}
-                    <div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4">
-                            <span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span class="badge {con.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {con.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <header class="flex items-center gap-3">
-                            <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
+                            <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
                                 <User size={24} />
                             </div>
                             <div class="pr-12">
@@ -150,7 +150,7 @@
                             </div>
                         </div>
 
-                        <a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/contacts/{con.contact_id_random}">
+                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/contacts/{con.contact_id_random}">
                             Manage Contact
                         </a>
                     </div>
diff --git a/src/routes/core/contacts/[contact_id]/+page.svelte b/src/routes/core/contacts/[contact_id]/+page.svelte
index 5dac540d..f560825b 100644
--- a/src/routes/core/contacts/[contact_id]/+page.svelte
+++ b/src/routes/core/contacts/[contact_id]/+page.svelte
@@ -50,7 +50,7 @@
 <div class="container mx-auto p-4 space-y-6">
     <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/contacts">
+            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/contacts">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-3">
@@ -64,14 +64,14 @@
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm variant-soft-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
+            <button class="btn btn-sm preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
                 {#if is_editing}
                     <Eye size={16} class="mr-2" /> View Mode
                 {:else}
                     <Edit size={16} class="mr-2" /> Edit Mode
                 {/if}
             </button>
-            <button class="btn btn-sm variant-soft-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
+            <button class="btn btn-sm preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
                 <Trash2 size={16} class="mr-2" /> Delete
             </button>
         </div>
@@ -96,7 +96,7 @@
         {:else}
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
                 <div class="lg:col-span-2 space-y-6">
-                    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                         <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <Contact size={20} class="text-primary-500" />
                             Core Information
@@ -135,7 +135,7 @@
                         </div>
                     </div>
 
-                    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                         <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <Phone size={20} class="text-secondary-500" />
                             Communication & Social
@@ -172,7 +172,7 @@
                 </div>
 
                 <div class="space-y-6">
-                    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                         <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <ShieldCheck size={20} class="text-warning-500" />
                             Status & Flags
@@ -180,26 +180,26 @@
                         <div class="space-y-4">
                             <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
                                 <span class="text-sm font-bold opacity-75">Enabled</span>
-                                <span class="badge {contact.enable ? 'variant-filled-success' : 'variant-filled-error'} px-4 py-1 shadow-sm">
+                                <span class="badge {contact.enable ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
                                     {contact.enable ? 'ACTIVE' : 'DISABLED'}
                                 </span>
                             </div>
                             <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
                                 <span class="text-sm font-bold opacity-75">Hidden</span>
-                                <span class="badge {contact.hide ? 'variant-filled-warning' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="badge {contact.hide ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {contact.hide ? 'YES' : 'NO'}
                                 </span>
                             </div>
                             <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
                                 <span class="text-sm font-bold opacity-75">Priority</span>
-                                <span class="badge {contact.priority ? 'variant-filled-secondary' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="badge {contact.priority ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {contact.priority ? 'YES' : 'NO'}
                                 </span>
                             </div>
                         </div>
                     </div>
 
-                    <div class="card p-5 variant-soft-surface shadow-inner border border-surface-500/10 space-y-3">
+                    <div class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
                         <p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
                         <div class="space-y-2 text-[10px] font-mono opacity-60">
                             <p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{contact.contact_id_random}</span></p>
diff --git a/src/routes/core/contacts/ae_comp__contact_form.svelte b/src/routes/core/contacts/ae_comp__contact_form.svelte
index 96b749b8..b6ea43d2 100644
--- a/src/routes/core/contacts/ae_comp__contact_form.svelte
+++ b/src/routes/core/contacts/ae_comp__contact_form.svelte
@@ -105,7 +105,7 @@
     }
 </script>
 
-<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
+<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
     <header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
         <h3 class="h3 flex items-center gap-2">
             <UserPlus size={24} />
@@ -113,11 +113,11 @@
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
+                <button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
+            <button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -129,7 +129,7 @@
     </header>
 
     {#if error_msg}
-        <aside class="alert variant-filled-error">
+        <aside class="alert preset-filled-error">
             <div class="alert-message">
                 <p>{error_msg}</p>
             </div>
@@ -143,17 +143,17 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="contact-title">Title / Name</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" type="text" bind:value={formData.title} required placeholder="Business Office" />
+                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" type="text" bind:value={formData.title} required placeholder="Business Office" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="contact-tagline">Tagline</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
+                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="contact-email">Email Address</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-email" type="email" bind:value={formData.email} placeholder="contact@example.com" />
                 </div>
@@ -167,14 +167,14 @@
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="contact-phone-mobile">Mobile Phone</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
                         <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-mobile" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
                     </div>
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="contact-phone-office">Office Phone</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
                         <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-office" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
                     </div>
@@ -183,7 +183,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="contact-website">Website URL</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Globe size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-website" type="url" bind:value={formData.website_url} placeholder="https://..." />
                 </div>
@@ -196,7 +196,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="contact-linkedin">LinkedIn URL</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Linkedin size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-linkedin" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
                 </div>
@@ -205,14 +205,14 @@
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="contact-facebook">Facebook URL</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Facebook size={16} /></div>
                         <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-facebook" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
                     </div>
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75" for="contact-instagram">Instagram URL</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Instagram size={16} /></div>
                         <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-instagram" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
                     </div>
@@ -241,13 +241,13 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="contact-notes">Internal Notes</label>
-                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+                <textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
             </div>
         </fieldset>
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
+        <button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}
diff --git a/src/routes/core/lookups/+page.svelte b/src/routes/core/lookups/+page.svelte
index 76b1259f..8d16e586 100644
--- a/src/routes/core/lookups/+page.svelte
+++ b/src/routes/core/lookups/+page.svelte
@@ -68,7 +68,7 @@
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
+            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
                 {#if loading}
                     <RefreshCcw size={16} class="mr-2 animate-spin" /> Loading...
                 {:else}
@@ -85,11 +85,11 @@
     {:else}
         <div class="space-y-6 animate-fade-in">
             <!-- 1. Countries -->
-            <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+            <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Globe size={20} class="text-secondary-500" />
                     Country Reference
-                    <span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
+                    <span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
                 </h3>
 
                 <div class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
@@ -104,7 +104,7 @@
                             {#each lookups.countries as c (c.alpha_2_code)}
                                 <tr class="transition-colors">
                                     <td class="font-bold">{c.name || c.english_short_name}</td>
-                                    <td class="text-center"><span class="badge variant-soft-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
+                                    <td class="text-center"><span class="badge preset-tonal-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -113,11 +113,11 @@
             </div>
 
             <!-- 2. Subdivisions -->
-            <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+            <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <MapPin size={20} class="text-primary-500" />
                     Country Subdivisions (States/Provinces)
-                    <span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
+                    <span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
                 </h3>
 
                 <div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
@@ -134,7 +134,7 @@
                                 <tr class="transition-colors">
                                     <td class="opacity-60">{s.country_alpha_2_code}</td>
                                     <td class="font-bold">{s.name}</td>
-                                    <td class="text-center"><span class="badge variant-soft-surface font-mono">{s.code}</span></td>
+                                    <td class="text-center"><span class="badge preset-tonal-surface font-mono">{s.code}</span></td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -143,15 +143,15 @@
             </div>
 
             <!-- 3. Time Zones -->
-            <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+            <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
                 <div class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
                     <h3 class="h4 font-bold flex items-center gap-2">
                         <Clock size={20} class="text-tertiary-500" />
                         Time Zone Reference
-                        <span class="badge variant-soft-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
+                        <span class="badge preset-tonal-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
                     </h3>
                     <button
-                        class="btn btn-sm transition-all {tz_only_priority ? 'variant-filled-warning' : 'variant-soft-surface'}"
+                        class="btn btn-sm transition-all {tz_only_priority ? 'preset-filled-warning' : 'preset-tonal-surface'}"
                         onclick={toggle_tz_priority}
                         disabled={loading}
                     >
@@ -172,7 +172,7 @@
                             {#each lookups.time_zones as tz (tz.name)}
                                 <tr class="transition-colors">
                                     <td class="font-bold">{tz.name}</td>
-                                    <td class="text-right"><span class="badge variant-soft-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
+                                    <td class="text-right"><span class="badge preset-tonal-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -181,7 +181,7 @@
             </div>
         </div>
 
-        <div class="card p-4 variant-soft-surface border border-surface-500/10 flex items-center gap-3">
+        <div class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
             <Info size={16} class="text-primary-500" />
             <p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>
         </div>
diff --git a/src/routes/core/people/+page.svelte b/src/routes/core/people/+page.svelte
index f453ae35..a3ba9d90 100644
--- a/src/routes/core/people/+page.svelte
+++ b/src/routes/core/people/+page.svelte
@@ -31,7 +31,7 @@
         <button
             type="button"
             onclick={() => show_add_form = !show_add_form}
-            class="btn btn-sm variant-filled-primary font-bold shadow-lg"
+            class="btn btn-sm preset-filled-primary font-bold shadow-lg"
             class:hidden={!$ae_loc.edit_mode}
         >
             {#if show_add_form}
@@ -60,11 +60,11 @@
     }} />
 
     {#if $ae_sess.person.show_report__person_li}
-        <div class="card p-6 variant-glass-surface shadow-xl space-y-4 border border-surface-500/10">
+        <div class="card p-6 preset-tonal-surface shadow-xl space-y-4 border border-surface-500/10">
             <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Search Results 
-                <span class="badge variant-soft-secondary ml-auto">{person_id_random_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto">{person_id_random_li.length} found</span>
             </h3>
             <div class="overflow-x-auto">
                 <Comp_person_obj_tbl
diff --git a/src/routes/core/people/[person_id]/+page.svelte b/src/routes/core/people/[person_id]/+page.svelte
index 2bcf9c4a..58f361c7 100644
--- a/src/routes/core/people/[person_id]/+page.svelte
+++ b/src/routes/core/people/[person_id]/+page.svelte
@@ -185,7 +185,7 @@
                 <button
                     type="button"
                     onclick={() => is_editing = !is_editing}
-                    class="btn btn-sm variant-soft-secondary mx-1"
+                    class="btn btn-sm preset-tonal-secondary mx-1"
                 >
                     {#if is_editing}
                         <Eye size={16} class="mr-2" /> View Mode
@@ -249,19 +249,19 @@
     </div>
 
     {#if $ae_loc.manager_access}
-        <div class="card p-4 variant-soft-surface space-y-4 mx-4">
+        <div class="card p-4 preset-tonal-surface space-y-4 mx-4">
             <header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
                 <div class="flex items-center gap-2 font-bold">
                     <ShieldCheck size={18} />
                     <span>User Account Linking</span>
                 </div>
                 {#if $lq__person_obj?.user_id}
-                    <button class="btn btn-sm variant-soft-error" onclick={handle_unlink_user}>
+                    <button class="btn btn-sm preset-tonal-error" onclick={handle_unlink_user}>
                         <Unlink size={14} class="mr-2" /> Unlink User
                     </button>
                 {:else}
                     <button
-                        class="btn btn-sm variant-soft-primary"
+                        class="btn btn-sm preset-tonal-primary"
                         onclick={() => { show_link_ui = !show_link_ui; if(show_link_ui) load_unlinked_users(); }}
                     >
                         <Link size={14} class="mr-2" /> {show_link_ui ? 'Cancel Linking' : 'Link to User'}
@@ -271,7 +271,7 @@
 
             {#if $lq__person_obj?.user_id}
                 <div class="flex items-center gap-4 py-2">
-                    <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
+                    <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
                         <Users size={24} />
                     </div>
                     <div>
@@ -291,7 +291,7 @@
                         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                             {#each available_users as user (user.user_id)}
                                 <button
-                                    class="card p-3 variant-soft-primary hover:variant-filled-primary text-left transition-all flex flex-col gap-1"
+                                    class="card p-3 preset-tonal-primary hover:preset-filled-primary text-left transition-all flex flex-col gap-1"
                                     onclick={() => handle_link_user(user.user_id)}
                                 >
                                     <span class="font-bold flex items-center gap-2">
@@ -300,8 +300,8 @@
                                     </span>
                                     <span class="text-xs opacity-70 truncate">{user.email}</span>
                                     <div class="flex gap-1 mt-1">
-                                        {#if user.super}<span class="badge variant-filled-error text-[10px]">Super</span>{/if}
-                                        {#if user.manager}<span class="badge variant-filled-warning text-[10px]">Manager</span>{/if}
+                                        {#if user.super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
+                                        {#if user.manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
                                     </div>
                                 </button>
                             {/each}
@@ -317,7 +317,7 @@
         </div>
 
         <!-- Activity & Content Section -->
-        <div class="card p-4 variant-soft-surface space-y-4 mx-4">
+        <div class="card p-4 preset-tonal-surface space-y-4 mx-4">
             <header class="flex items-center gap-2 font-bold border-b border-surface-500/30 pb-2">
                 <History size={18} />
                 <span>Linked Activity & Content</span>
@@ -336,7 +336,7 @@
                     {:else}
                         <div class="space-y-2">
                             {#each related_events as ev (ev.event_id)}
-                                <a href="/events/{ev.event_id}" class="card p-3 variant-soft flex flex-col gap-1 hover:variant-soft-primary transition-all">
+                                <a href="/events/{ev.event_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
                                     <span class="font-bold text-sm">{ev.name}</span>
                                     <span class="text-[10px] opacity-60">{new Date(ev.start_datetime).toLocaleDateString()}</span>
                                 </a>
@@ -357,11 +357,11 @@
                     {:else}
                         <div class="space-y-2">
                             {#each related_posts as post (post.post_id)}
-                                <a href="/idaa/bb/{post.post_id}" class="card p-3 variant-soft flex flex-col gap-1 hover:variant-soft-primary transition-all">
+                                <a href="/idaa/bb/{post.post_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
                                     <span class="font-bold text-sm">{post.title}</span>
                                     <div class="flex justify-between items-center text-[10px] opacity-60">
                                         <span>{new Date(post.created_on).toLocaleDateString()}</span>
-                                        <span class="badge variant-soft-surface scale-75">{post.post_comment_count || 0} comments</span>
+                                        <span class="badge preset-tonal-surface scale-75">{post.post_comment_count || 0} comments</span>
                                     </div>
                                 </a>
                             {/each}
@@ -381,9 +381,9 @@
                     {:else}
                         <div class="space-y-2">
                             {#each related_activity_logs as log, index (index)}
-                                <div class="card p-3 variant-soft flex flex-col gap-1">
+                                <div class="card p-3 preset-tonal-surface flex flex-col gap-1">
                                     <div class="flex justify-between items-start gap-2">
-                                        <span class="badge variant-filled-surface text-[9px] uppercase tracking-tighter">{log.action}</span>
+                                        <span class="badge preset-filled-surface text-[9px] uppercase tracking-tighter">{log.action}</span>
                                         <span class="text-[9px] opacity-50">{new Date(log.created_on).toLocaleDateString()}</span>
                                     </div>
                                     {#if log.summary}
@@ -391,7 +391,7 @@
                                     {/if}
                                 </div>
                             {/each}
-                            <a href="/core/activity_logs?person_id={$slct.person_id}" class="btn btn-sm variant-soft-surface w-full text-[10px]">
+                            <a href="/core/activity_logs?person_id={$slct.person_id}" class="btn btn-sm preset-tonal-surface w-full text-[10px]">
                                 View All Activity
                             </a>
                         </div>
diff --git a/src/routes/core/people/ae_comp__person_form.svelte b/src/routes/core/people/ae_comp__person_form.svelte
index a0590540..a5dfff09 100644
--- a/src/routes/core/people/ae_comp__person_form.svelte
+++ b/src/routes/core/people/ae_comp__person_form.svelte
@@ -130,7 +130,7 @@
     }
 </script>
 
-<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
+<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
     <header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
         <h3 class="h3 flex items-center gap-2">
             <User size={24} />
@@ -138,11 +138,11 @@
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
+                <button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
+            <button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -154,7 +154,7 @@
     </header>
 
     {#if error_msg}
-        <aside class="alert variant-filled-error">
+        <aside class="alert preset-filled-error">
             <div class="alert-message">
                 <p>{error_msg}</p>
             </div>
@@ -169,30 +169,30 @@
             <div class="grid grid-cols-4 gap-2">
                 <div class="space-y-1 col-span-1">
                     <label class="label text-xs font-bold opacity-75" for="person-prefix">Prefix</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-prefix" type="text" bind:value={formData.prefix} placeholder="Mr." />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-prefix" type="text" bind:value={formData.prefix} placeholder="Mr." />
                 </div>
                 <div class="space-y-1 col-span-3">
                     <label class="label text-xs font-bold opacity-75" for="person-given-name">Given Name</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-given-name" type="text" bind:value={formData.given_name} required placeholder="Jane" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-given-name" type="text" bind:value={formData.given_name} required placeholder="Jane" />
                 </div>
             </div>
 
             <div class="grid grid-cols-4 gap-2">
                 <div class="space-y-1 col-span-3">
                     <label class="label text-xs font-bold opacity-75" for="person-family-name">Family Name</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-family-name" type="text" bind:value={formData.family_name} required placeholder="Doe" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-family-name" type="text" bind:value={formData.family_name} required placeholder="Doe" />
                 </div>
                 <div class="space-y-1 col-span-1">
                     <label class="label text-xs font-bold opacity-75" for="person-suffix">Suffix</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-suffix" type="text" bind:value={formData.suffix} placeholder="PhD" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-suffix" type="text" bind:value={formData.suffix} placeholder="PhD" />
                 </div>
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="person-middle-name">Middle Name / Informal Name (Nickname)</label>
                 <div class="grid grid-cols-2 gap-2">
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-middle-name" type="text" bind:value={formData.middle_name} placeholder="Middle" />
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-middle-name" type="text" bind:value={formData.middle_name} placeholder="Middle" />
+                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
                 </div>
             </div>
         </fieldset>
@@ -203,7 +203,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="person-primary-email">Primary Email</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-primary-email" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
                 </div>
@@ -211,7 +211,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="person-phone">Phone Number</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Phone size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-phone" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
                 </div>
@@ -220,7 +220,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="person-tagline">Tagline</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Tag size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-tagline" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
                 </div>
@@ -233,7 +233,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="person-professional-title">Professional Title</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Briefcase size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-professional-title" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
                 </div>
@@ -241,7 +241,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="person-affiliations">Affiliations</label>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Building size={16} /></div>
                     <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-affiliations" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
                 </div>
@@ -269,7 +269,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75" for="person-notes">Notes (Internal)</label>
-                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-notes" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+                <textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-notes" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
             </div>
         </fieldset>
 
@@ -280,7 +280,7 @@
 
                 <div class="space-y-1 max-w-md">
                     <label class="label text-xs font-bold opacity-75" for="person-user-id-random">Linked User ID (Random)</label>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Link size={16} /></div>
                         <input
                             class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400 p-2"
@@ -297,7 +297,7 @@
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
+        <button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}
diff --git a/src/routes/core/people/ae_comp__person_search.svelte b/src/routes/core/people/ae_comp__person_search.svelte
index a1041b8a..1b3fb115 100644
--- a/src/routes/core/people/ae_comp__person_search.svelte
+++ b/src/routes/core/people/ae_comp__person_search.svelte
@@ -42,7 +42,7 @@
     }
 </script>
 
-<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
+<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
     <div class="flex flex-wrap gap-6 items-end">
         <div class="flex-1 min-w-[280px] space-y-1">
             <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search People</span>
@@ -57,7 +57,7 @@
                     placeholder="Search by name, email, or ID..." 
                     onkeydown={(e) => e.key === 'Enter' && handle_search()} 
                 />
-                <button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={handle_search} disabled={loading}>
+                <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={handle_search} disabled={loading}>
                     {#if loading}
                         <span class="animate-spin text-xl">⏳</span>
                     {:else}
@@ -70,7 +70,7 @@
         <div class="grid grid-cols-2 gap-4">
             <div class="space-y-1">
                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</span>
-                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
+                <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
                     <option value="all">All Records</option>
                     <option value="enabled">Enabled Only</option>
                     <option value="not_enabled">Disabled Only</option>
@@ -79,7 +79,7 @@
 
             <div class="space-y-1">
                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
-                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
+                <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
                     <option value="all">All Visible</option>
                     <option value="not_hidden">Publicly Visible</option>
                     <option value="hidden">System Hidden</option>
diff --git a/src/routes/core/sites/+page.svelte b/src/routes/core/sites/+page.svelte
index a06fa115..324ec882 100644
--- a/src/routes/core/sites/+page.svelte
+++ b/src/routes/core/sites/+page.svelte
@@ -71,12 +71,12 @@
                 <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Digital Properties & Domains</p>
             </div>
         </div>
-        <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
+        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
             <Plus size={16} class="mr-2" /> Add Site
         </button>
     </header>
 
-    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
+    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</span>
@@ -90,7 +90,7 @@
                         bind:value={qry_str}
                         placeholder="Search by name or code..."
                     />
-                    <button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_sites} disabled={loading}>
+                    <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_sites} disabled={loading}>
                         {#if loading}
                             <span class="animate-spin text-xl">⏳</span>
                         {:else}
@@ -103,7 +103,7 @@
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div class="space-y-1">
                     <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
-                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
+                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
                         <option value="all">All Statuses</option>
                         <option value="enabled">Enabled Only</option>
                         <option value="not_enabled">Disabled Only</option>
@@ -112,7 +112,7 @@
 
                 <div class="space-y-1">
                     <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
-                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
+                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
                         <option value="all">All Visibility</option>
                         <option value="not_hidden">Not Hidden Only</option>
                         <option value="hidden">Hidden Only</option>
@@ -127,33 +127,33 @@
             <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Globe size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Sites Found</h3>
             <p class="opacity-60 max-w-xs mx-auto mt-2">Sites for this account will appear here. Add your first site to get started.</p>
         </div>
     {:else}
-        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
             <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Linked Properties
-                <span class="badge variant-soft-secondary ml-auto">{filtered_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as site (site.site_id_random)}
-                    <div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4 flex gap-1">
                             {#if site.hide}
-                                <span class="badge variant-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
+                                <span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
                             {/if}
-                            <span class="badge {site.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span class="badge {site.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {site.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <header class="flex items-center gap-3">
-                            <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
+                            <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
                                 <Globe size={24} />
                             </div>
                             <div class="pr-12">
@@ -173,7 +173,7 @@
                             </div>
                         </div>
 
-                        <a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
+                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
                             Manage Site
                         </a>
                     </div>
diff --git a/src/routes/core/sites/[site_id]/+page.svelte b/src/routes/core/sites/[site_id]/+page.svelte
index 0463bbfb..a8fc6f05 100644
--- a/src/routes/core/sites/[site_id]/+page.svelte
+++ b/src/routes/core/sites/[site_id]/+page.svelte
@@ -109,7 +109,7 @@
 <div class="container mx-auto p-4 space-y-6">
     <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/sites">
+            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/sites">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-2">
@@ -119,7 +119,7 @@
                 <h1 class="h2 font-black tracking-tight">{site?.name ?? 'Loading...'}</h1>
             </div>
         </div>
-        <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
+        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
             {#if saving}
                 <span class="animate-spin mr-2">⏳</span>
             {:else}
@@ -137,32 +137,32 @@
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <!-- Site Config -->
             <div class="lg:col-span-2 space-y-6">
-                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                     <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                         <Settings size={18} class="text-primary-500" /> Site Configuration
                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div class="space-y-1">
                             <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Name</span>
-                            <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
+                            <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
                         </div>
                         <div class="space-y-1">
                             <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Code</span>
-                            <input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
+                            <input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
                         </div>
                         <div class="space-y-1 md:col-span-2">
                             <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Tagline</span>
-                            <input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
+                            <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
                         </div>
                         <div class="space-y-1 md:col-span-2">
                             <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
-                            <textarea class="textarea variant-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
+                            <textarea class="textarea preset-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
                         </div>
                     </div>
                 </div>
 
                 <!-- Advanced Site JSON Config -->
-                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                     <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                         <Database size={18} class="text-warning-500" /> Site Settings (cfg_json)
                     </h3>
@@ -172,7 +172,7 @@
                     />
                 </div>
 
-                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                     <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                         <Key size={18} class="text-secondary-500" /> Access Control
                     </h3>
@@ -184,7 +184,7 @@
                         {#if site.restrict_access}
                             <div class="space-y-1 max-w-md animate-fade-in">
                                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Access Key</span>
-                                <input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
+                                <input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
                             </div>
                         {/if}
                     </div>
@@ -193,12 +193,12 @@
 
             <!-- Domains Management -->
             <div class="space-y-6">
-                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                     <header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
                         <h3 class="h4 font-bold flex items-center gap-2">
                             <Globe size={18} class="text-tertiary-500" /> Site Domains
                         </h3>
-                        <button class="btn btn-icon btn-sm variant-filled-secondary shadow-md" onclick={handle_add_domain} title="Add Domain">
+                        <button class="btn btn-icon btn-sm preset-filled-secondary shadow-md" onclick={handle_add_domain} title="Add Domain">
                             <Plus size={14} />
                         </button>
                     </header>
@@ -208,7 +208,7 @@
                     {:else}
                         <div class="space-y-3">
                             {#each domain_li as dom (dom.site_domain_id_random)}
-                                <div class="card p-3 variant-soft shadow-sm border border-surface-500/10 flex justify-between items-center group">
+                                <div class="card p-3 preset-tonal-surface shadow-sm border border-surface-500/10 flex justify-between items-center group">
                                     <div class="flex flex-col">
                                         <span class="font-bold text-sm flex items-center gap-1">
                                             {dom.fqdn}
@@ -221,10 +221,10 @@
                                         </span>
                                     </div>
                                     <div class="flex gap-1">
-                                        <button class="btn btn-icon btn-sm {dom.enable ? 'variant-soft-success' : 'variant-soft-error'}" onclick={() => handle_toggle_domain(dom)} title="Toggle Active">
+                                        <button class="btn btn-icon btn-sm {dom.enable ? 'preset-tonal-success' : 'preset-tonal-error'}" onclick={() => handle_toggle_domain(dom)} title="Toggle Active">
                                             <Save size={14} />
                                         </button>
-                                        <button class="btn btn-icon btn-sm variant-soft-error" onclick={() => handle_delete_domain(dom)} title="Delete Domain">
+                                        <button class="btn btn-icon btn-sm preset-tonal-error" onclick={() => handle_delete_domain(dom)} title="Delete Domain">
                                             <Trash2 size={14} />
                                         </button>
                                     </div>
@@ -234,7 +234,7 @@
                     {/if}
                 </div>
 
-                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                     <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                         <Activity size={18} class="text-error-500" /> System Status
                     </h3>
diff --git a/src/routes/core/users/+page.svelte b/src/routes/core/users/+page.svelte
index 8578dc6c..54ba7990 100644
--- a/src/routes/core/users/+page.svelte
+++ b/src/routes/core/users/+page.svelte
@@ -70,7 +70,7 @@
             </div>
             <h1 class="h2 font-black tracking-tight">User Management</h1>
         </div>
-        <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
+        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
             {#if show_add_form}
                 <X size={16} class="mr-2" /> Cancel
             {:else}
@@ -79,7 +79,7 @@
         </button>
     </header>
 
-    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
+    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
                 <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</span>
@@ -94,7 +94,7 @@
                         placeholder="Search username or email..."
                         onkeydown={(e) => e.key === 'Enter' && load_users()}
                     />
-                    <button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_users} disabled={loading}>
+                    <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_users} disabled={loading}>
                         {#if loading}
                             <span class="animate-spin text-xl">⏳</span>
                         {:else}
@@ -107,7 +107,7 @@
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div class="space-y-1">
                     <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Scope</span>
-                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
+                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
                         <option value="all">All (Current + Global)</option>
                         <option value="account">Account Only</option>
                         <option value="global">Global Only</option>
@@ -116,7 +116,7 @@
 
                 <div class="space-y-1">
                     <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
-                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
+                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
                         <option value="all">All</option>
                         <option value="enabled">Enabled</option>
                         <option value="not_enabled">Disabled</option>
@@ -131,25 +131,25 @@
             <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
         </div>
     {:else if user_li.length === 0}
-        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Fingerprint size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Users Found</h3>
             <p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your search or scope filters.</p>
         </div>
     {:else}
-        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
             <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Directory Results
-                <span class="badge variant-soft-secondary ml-auto">{user_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto">{user_li.length} found</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each user_li as user (user.user_id_random)}
-                    <div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
+                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
                         <header class="flex justify-between items-start">
                             <div class="flex items-center gap-3">
-                                <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
+                                <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
                                     <User size={24} />
                                 </div>
                                 <div>
@@ -159,16 +159,16 @@
                             </div>
                             <div class="flex flex-col items-end gap-1">
                                 {#if user.super}
-                                    <span class="badge variant-filled-error text-[8px] uppercase font-bold">Super</span>
+                                    <span class="badge preset-filled-error text-[8px] uppercase font-bold">Super</span>
                                 {:else if user.manager}
-                                    <span class="badge variant-filled-warning text-[8px] uppercase font-bold">Manager</span>
+                                    <span class="badge preset-filled-warning text-[8px] uppercase font-bold">Manager</span>
                                 {/if}
                                 {#if !user.account_id && !user.account_id_random}
-                                    <span class="badge variant-soft-secondary text-[8px] uppercase font-bold flex items-center gap-1">
+                                    <span class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
                                         <Globe size={8} /> Global
                                     </span>
                                 {:else}
-                                    <span class="badge variant-soft-primary text-[8px] uppercase font-bold flex items-center gap-1">
+                                    <span class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
                                         <Landmark size={8} /> Account
                                     </span>
                                 {/if}
@@ -186,7 +186,7 @@
                             </div>
                         </div>
 
-                        <a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/users/{user.user_id_random}">
+                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/users/{user.user_id_random}">
                             Manage User
                         </a>
                     </div>
diff --git a/src/routes/core/users/[user_id]/+page.svelte b/src/routes/core/users/[user_id]/+page.svelte
index 43e925d1..9720f57f 100644
--- a/src/routes/core/users/[user_id]/+page.svelte
+++ b/src/routes/core/users/[user_id]/+page.svelte
@@ -80,11 +80,11 @@
 <div class="container mx-auto p-4 space-y-6">
     <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/users">
+            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/users">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-3">
-                <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
+                <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
                     <UserIcon size={24} />
                 </div>
                 <div>
@@ -94,10 +94,10 @@
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
+            <button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
                 <Trash2 size={16} class="mr-2" /> Disable
             </button>
-            <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
+            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
                 {#if saving}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -111,22 +111,22 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Main Info -->
         <div class="lg:col-span-2 space-y-6">
-            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <UserIcon size={18} class="text-primary-500" /> Basic Profile
                 </h3>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75" for="user-display-name">Display Name</label>
-                        <input class="input variant-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
+                        <input class="input preset-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
                     </div>
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75" for="user-email">Email Address</label>
-                        <input class="input variant-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
+                        <input class="input preset-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
                     </div>
                     <div class="space-y-1 md:col-span-2">
                         <label class="label text-xs font-bold opacity-75" for="user-username">Username</label>
-                        <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-lg overflow-hidden border border-surface-500/20">
+                        <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
                             <div class="input-group-shim !pl-4 !pr-0"><Fingerprint size={16} /></div>
                             <input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" id="user-username" type="text" bind:value={user.username} disabled />
                         </div>
@@ -135,33 +135,33 @@
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <ShieldCheck size={18} class="text-secondary-500" /> System Permissions
                 </h3>
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <label class="flex items-center space-x-3 card p-4 variant-soft-error cursor-pointer border border-error-500/20 hover:variant-filled-error transition-all group">
+                    <label class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.super} />
                         <div class="flex flex-col">
                             <span class="font-black uppercase text-xs tracking-widest">Super User</span>
                             <span class="text-[10px] opacity-70 group-hover:opacity-100">Full system override access</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-4 variant-soft-warning cursor-pointer border border-warning-500/20 hover:variant-filled-warning transition-all group">
+                    <label class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.manager} />
                         <div class="flex flex-col">
                             <span class="font-black uppercase text-xs tracking-widest">Manager</span>
                             <span class="text-[10px] opacity-70 group-hover:opacity-100">Global account & user management</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-4 variant-soft-primary cursor-pointer border border-primary-500/20 hover:variant-filled-primary transition-all group">
+                    <label class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.administrator} />
                         <div class="flex flex-col">
                             <span class="font-black uppercase text-xs tracking-widest">Administrator</span>
                             <span class="text-[10px] opacity-70 group-hover:opacity-100">Account-level administrative access</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-4 variant-soft-secondary cursor-pointer border border-secondary-500/20 hover:variant-filled-secondary transition-all group">
+                    <label class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.verified} />
                         <div class="flex flex-col">
                             <span class="font-black uppercase text-xs tracking-widest">Verified User</span>
@@ -174,7 +174,7 @@
 
         <!-- Sidebar / Meta -->
         <div class="space-y-6">
-            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Activity size={18} class="text-tertiary-500" /> Account Status
                 </h3>
@@ -194,7 +194,7 @@
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl variant-soft-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Lock size={18} class="text-surface-500" /> Linking Info
                 </h3>
@@ -218,7 +218,7 @@
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Clock size={18} class="text-surface-500" /> Timestamps
                 </h3>
diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
index 6da00339..cf2e9c60 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
@@ -66,7 +66,7 @@
 
     // V2: auto-scaling text component
     import Element_fit_text from '$lib/elements/element_fit_text.svelte';
-    import { Asterisk, Biohazard, Star, Wifi } from 'lucide-svelte';
+    import { Asterisk, Biohazard, Bone, Carrot, Fish, Hand, Star, Utensils, Wifi } from 'lucide-svelte';
 
     // --- Badge type list from template ---
     // Each item: { code: string, name: string }. Drives footer display + (in controls) dropdown.
@@ -294,23 +294,31 @@
     let option_other_1_display_opt = 'back_html';
     let option_other_2_display_opt = 'back_html';
 
-    let code_to_html: any = { option_1: {}, option_2: {} };
-    code_to_html.option_1['1'] = '<span class="fas fa-biohazard"></span>';
-    code_to_html.option_1['true'] = '<span class="fas fa-biohazard"></span>';
-    code_to_html.option_1['True'] = '<span class="fas fa-biohazard"></span>';
-    code_to_html.option_1['Dairy Free'] = '<span class="fas fa-utensils"></span>';
-    code_to_html.option_1['Gluten Free'] = '<span class="fas fa-utensils"></span>';
-    code_to_html.option_1['Halal'] = '<span class="fas fa-utensils"></span>';
-    code_to_html.option_1['Kosher'] = '<span class="fas fa-utensils"></span>';
-    code_to_html.option_1['Meat'] = '<span class="fas fa-bone"></span>';
-    code_to_html.option_1['Pescatarian'] = '<span class="fas fa-fish"></span>';
-    code_to_html.option_1['Vegan'] = '<span class="fas fa-utensils"></span>';
-    code_to_html.option_1['Vegetarian'] = '<span class="fas fa-carrot"></span>';
-
-    code_to_html.option_2['1'] = '<span class="fas fa-star-of-life"></span>';
-    code_to_html.option_2['true'] = '<span class="fas fa-star-of-life"></span>';
-    code_to_html.option_2['True'] = '<span class="fas fa-star-of-life"></span>';
-    code_to_html.option_2['First Time '] = '<span class="fas fa-hand-paper"></span>';
+    // Maps badge option field values → Lucide icon components.
+    // option_1 = dietary/allergy flag; option_2 = special designation (first-time, etc.)
+    // WHY: Replaces the old code_to_html FA string map — no FontAwesome dependency.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const code_to_icon: { option_1: Record<string, any>; option_2: Record<string, any> } = {
+        option_1: {
+            '1':           Biohazard,
+            'true':        Biohazard,
+            'True':        Biohazard,
+            'Dairy Free':  Utensils,
+            'Gluten Free': Utensils,
+            'Halal':       Utensils,
+            'Kosher':      Utensils,
+            'Meat':        Bone,
+            'Pescatarian': Fish,
+            'Vegan':       Utensils,
+            'Vegetarian':  Carrot,
+        },
+        option_2: {
+            '1':           Asterisk,
+            'true':        Asterisk,
+            'True':        Asterisk,
+            'First Time ': Hand,
+        }
+    };
     /* *** END *** Legacy ticket/option state */
 </script>
 
@@ -580,9 +588,10 @@
                         ><Biohazard size="1em" /></span
                     >
                 {:else if option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt)}
-                    <span class="badge_footer_special_left"
-                        >{@html option_other_1_override}</span
-                    >
+                    {@const Icon1 = code_to_icon.option_1[option_other_1_override]}
+                    <span class="badge_footer_special_left">
+                        {#if Icon1}<Icon1 size="1em" />{/if}
+                    </span>
                 {/if}
 
                 <!-- badge_type_code is the CSS class hook for per-event stylesheets;
@@ -597,9 +606,10 @@
                         ><Asterisk size="1em" /></span
                     >
                 {:else if option_other_2_override && ['front_html', 'front_back_html'].includes(option_other_2_display_opt)}
-                    <span class="badge_footer_special_right"
-                        >{@html option_other_2_override}</span
-                    >
+                    {@const Icon2 = code_to_icon.option_2[option_other_2_override]}
+                    <span class="badge_footer_special_right">
+                        {#if Icon2}<Icon2 size="1em" />{/if}
+                    </span>
                 {/if}
             </div>
 
@@ -796,7 +806,8 @@
                                     {#if option_other_1_override && ['back_bool', 'front_back_bool'].includes(option_other_1_display_opt)}
                                         - {option_other_1_override}
                                     {:else if option_other_1_override && ['back_html', 'front_back_html'].includes(option_other_1_display_opt)}
-                                        - {@html option_other_1_override}
+                                        {@const BIcon1 = code_to_icon.option_1[option_other_1_override]}
+                                        - {option_other_1_override}{#if BIcon1} <BIcon1 size="0.85em" class="inline" />{/if}
                                     {/if}
                                 </div>
                             {/if}
@@ -806,7 +817,8 @@
                                     {#if option_other_2_override && ['back_bool', 'front_back_bool'].includes(option_other_2_display_opt)}
                                         - {option_other_2_override}
                                     {:else if option_other_2_override && ['back_html', 'front_back_html'].includes(option_other_2_display_opt)}
-                                        - {@html option_other_2_override}
+                                        {@const BIcon2 = code_to_icon.option_2[option_other_2_override]}
+                                        - {option_other_2_override}{#if BIcon2} <BIcon2 size="0.85em" class="inline" />{/if}
                                     {/if}
                                 </div>
                             {/if}