diff --git a/web/src/tabs/ConfigTab.tsx b/web/src/tabs/ConfigTab.tsx
index 339845a..2f8bbdf 100644
--- a/web/src/tabs/ConfigTab.tsx
+++ b/web/src/tabs/ConfigTab.tsx
@@ -142,7 +142,7 @@ export const ConfigTab = () => {
 
     if (!isAdmin) {
         return (
-            <div className="bg-[#14151a] border border-red-500/20 p-8 rounded-3xl">
+            <div className="bg-[var(--card-elevated)] border border-red-500/20 p-8 rounded-3xl">
                 <div className="max-w-xl">
                     <p className="text-[11px] font-black uppercase tracking-[0.3em] text-red-400">Restricted</p>
                     <h2 className="text-2xl font-black text-white mt-3">Access Denied</h2>
@@ -157,7 +157,7 @@ export const ConfigTab = () => {
     if (loading) {
         return (
             <div className="flex flex-col items-center justify-center h-64 text-gray-500 animate-pulse">
-                <div className="w-10 h-10 border-4 border-[#00ff88]/10 border-t-[#00ff88] rounded-full animate-spin mb-4 shadow-xl" />
+                <div className="w-10 h-10 border-4 border-[var(--bl-success-muted)] border-t-[var(--bl-success)] rounded-full animate-spin mb-4 shadow-xl" />
                 <p className="text-xs font-black uppercase tracking-[0.3em]">Calibrating Infrastructure...</p>
             </div>
         );
@@ -180,9 +180,9 @@ export const ConfigTab = () => {
             )}
 
             {/* 2. ACTION CONTROL CENTER */}
-            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-[#14151a] border border-white/5 p-8 rounded-3xl relative overflow-hidden group shadow-2xl">
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-[var(--card-elevated)] border border-white/5 p-8 rounded-3xl relative overflow-hidden group shadow-2xl">
                 <div className="relative z-10 flex items-center gap-6">
-                    <div className="w-14 h-14 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center text-blue-400 shadow-xl">
+                    <div className="w-14 h-14 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center text-[var(--bl-info-strong)] shadow-xl">
                         <Zap size={30} fill="currentColor" fillOpacity={0.1} />
                     </div>
                     <div>
@@ -206,7 +206,7 @@ export const ConfigTab = () => {
                         onClick={handleSaveAll}
                         disabled={!hasChanges || saving}
                         className={`flex items-center gap-3 px-10 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all shadow-2xl ${hasChanges && !saving
-                            ? 'bg-white text-black hover:bg-blue-400 transition-colors'
+                            ? 'bg-white text-black hover:bg-[var(--bl-info-strong)] transition-colors'
                             : 'bg-white/5 text-gray-600 cursor-not-allowed'
                             }`}
                     >
@@ -215,7 +215,7 @@ export const ConfigTab = () => {
                 </div>
             </div>
 
-            <div className="bg-[#14151a] border border-white/5 p-6 rounded-3xl space-y-4">
+            <div className="bg-[var(--card-elevated)] border border-white/5 p-6 rounded-3xl space-y-4">
                 <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                     <div>
                         <h3 className="text-sm font-black text-white uppercase tracking-widest">Backtest Access Control</h3>
@@ -226,7 +226,7 @@ export const ConfigTab = () => {
                     <button
                         onClick={handleSaveBacktestFlags}
                         disabled={savingBacktestFlags}
-                        className={`px-5 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${savingBacktestFlags ? 'bg-white/5 text-zinc-600 cursor-not-allowed' : 'bg-emerald-400 text-black hover:bg-emerald-300'}`}
+                        className={`px-5 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${savingBacktestFlags ? 'bg-white/5 text-zinc-600 cursor-not-allowed' : 'bg-[var(--bl-success)] text-black hover:opacity-90'}`}
                     >
                         {savingBacktestFlags ? 'Saving...' : 'Save Backtest Flags'}
                     </button>
@@ -322,7 +322,7 @@ export const ConfigTab = () => {
             </div>
 
             {/* 4. IMMUTABLE FOOTER INFO */}
-            <footer className="relative p-12 bg-gradient-to-br from-[#0c0d10] to-[#000] border border-white/5 rounded-[3rem] overflow-hidden group shadow-2xl">
+            <footer className="relative p-12 bg-[var(--bl-surface-overlay)] border border-white/5 rounded-[3rem] overflow-hidden group shadow-2xl">
                 <div className="absolute top-0 right-0 p-12 opacity-[0.03] group-hover:opacity-10 transition-all duration-1000">
                     <ShieldAlert size={160} className="text-blue-400" />
                 </div>