fix: replace hardcoded colors with CSS variables for dark mode support

frontend/src/components/CampaignCard.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import VerificationBadge from './VerificationBadge';
 import CampaignStatusBadge from './CampaignStatusBadge';
 
 function progressColor(pct, status) {
-  if (status === 'funded' || pct >= 100) return '#10b981';
+  if (status === 'funded' || pct >= 100) return 'var(--color-teal)';
   if (status === 'closed' || status === 'withdrawn' || status === 'refunded' || status === 'failed')
-    return '#6b7280';
-  if (pct >= 75) return '#4f83f1';
-  return '#2563eb';
+    return 'var(--color-text-hint)';
+  if (pct >= 75) return 'var(--color-accent-light)';
+  return 'var(--color-accent)';
 }
 
 function daysLeft(deadline) {
@@ -178,7 +178,7 @@
     display: 'block',
   },
   placeholder: {
-    background: 'linear-gradient(135deg, #e0e7ff 0%, #ccfbf1 100%)',
+    background: 'linear-gradient(135deg, var(--color-accent-lighter) 0%, var(--color-teal-light) 100%)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',

frontend/src/pages/AdminDashboard.jsx

@@ -1006,9 +1006,9 @@ function MilestonesQueue() {
                   fontSize: '0.75rem',
                   padding: '0.35rem 0.8rem',
                   borderRadius: '6px',
-                  border: '1px solid #86efac',
-                  background: '#dcfce7',
-                  color: '#166534',
+                  border: '1px solid var(--color-success-border)',
+                  background: 'var(--color-success-bg)',
+                  color: 'var(--color-success-text)',
                   cursor: 'pointer',
                 }}
               >
@@ -1146,7 +1146,7 @@ function CampaignsQueue() {
                     padding: '0.25rem 0.7rem',
                     borderRadius: '6px',
                     cursor: 'pointer',
-                    background: '#10b981',
+                    background: 'var(--color-teal)',
                     color: '#fff',
                     border: 'none',
                   }}
@@ -1320,7 +1320,7 @@ function FraudQueue() {
                       padding: '0.35rem 0.8rem',
                       borderRadius: '6px',
                       cursor: 'pointer',
-                      background: '#10b981',
+                      background: 'var(--color-teal)',
                       color: '#fff',
                       border: 'none',
                     }}
@@ -1384,7 +1384,7 @@ export default function AdminDashboard() {
               ...badgeStyle,
               cursor: 'pointer',
               background: tab === t.id ? 'var(--color-accent)' : 'var(--color-accent-soft)',
-              color: tab === t.id ? '#fff' : 'var(--color-accent)',
+              color: tab === t.id ? 'var(--color-bg)' : 'var(--color-accent)',
             }}
           >
             {t.label}

frontend/src/pages/Campaign.jsx

@@ -50,11 +50,11 @@ function markdownToHtml(markdown) {
 }
 
 function progressColor(pct, status) {
-  if (status === 'funded' || pct >= 100) return '#10b981'; // green — goal reached
+  if (status === 'funded' || pct >= 100) return 'var(--color-teal)';
   if (status === 'closed' || status === 'withdrawn' || status === 'refunded' || status === 'failed')
-    return '#6b7280'; // grey — ended
-  if (pct >= 75) return '#3b82f6'; // blue — nearly there
-  return '#7c3aed'; // default purple
+    return 'var(--color-text-hint)';
+  if (pct >= 75) return 'var(--color-accent-light)';
+  return 'var(--color-accent)';
 }
 
 function FavoriteToggle({ campaignId }) {
@@ -265,7 +265,7 @@ function ContributionRow({ c }) {
               href={stellarExpertTxUrl(c.tx_hash)}
               target="_blank"
               rel="noopener noreferrer"
-              style={{ fontSize: '0.75rem', color: '#7c3aed', fontWeight: 600 }}
+              style={{ fontSize: '0.75rem', color: 'var(--color-accent)', fontWeight: 600 }}
             >
               View on chain ↗
             </a>
@@ -1138,8 +1138,8 @@ export default function Campaign() {
             disabled={refundBusy}
             onClick={handleInitiateRefund}
             style={{
-              background: refundBusy ? undefined : '#dc2626',
-              borderColor: refundBusy ? undefined : '#dc2626',
+              background: refundBusy ? undefined : 'var(--color-status-error)',
+              borderColor: refundBusy ? undefined : 'var(--color-status-error)',
               fontSize: '0.9rem',
             }}
           >
@@ -1457,7 +1457,7 @@ export default function Campaign() {
               width: '100%',
               background: linkCopied ? 'var(--color-success-text)' : undefined,
               borderColor: linkCopied ? 'var(--color-success-text)' : undefined,
-              color: linkCopied ? '#fff' : undefined,
+              color: linkCopied ? 'var(--color-bg)' : undefined,
               transition: 'all 0.2s ease',
             }}
             onClick={() => {
@@ -1505,7 +1505,7 @@ export default function Campaign() {
               type="button"
               className="btn-secondary"
               style={{
-                color: '#dc2626',
+                color: 'var(--color-status-error)',
                 fontSize: '0.85rem',
                 display: 'flex',
                 alignItems: 'center',
@@ -1829,7 +1829,7 @@ export default function Campaign() {
               onClick={() => setActiveTab('team')}
               style={{
                 background: activeTab === 'team' ? 'var(--color-accent)' : 'transparent',
-                color: activeTab === 'team' ? '#fff' : 'var(--color-text-primary)',
+                color: activeTab === 'team' ? 'var(--color-bg)' : 'var(--color-text-primary)',
                 border: '1px solid var(--color-border-light)',
                 borderRadius: '6px',
                 padding: '0.4rem 0.9rem',
@@ -1848,7 +1848,7 @@ export default function Campaign() {
                 onClick={() => setActiveTab('analytics')}
                 style={{
                   background: activeTab === 'analytics' ? 'var(--color-accent)' : 'transparent',
-                  color: activeTab === 'analytics' ? '#fff' : 'var(--color-text-primary)',
+                  color: activeTab === 'analytics' ? 'var(--color-bg)' : 'var(--color-text-primary)',
                   border: '1px solid var(--color-border-light)',
                   borderRadius: '6px',
                   padding: '0.4rem 0.9rem',
@@ -2250,7 +2250,7 @@ export default function Campaign() {
               onClick={() => setAnalyticsTab('overview')}
               style={{
                 background: analyticsTab === 'overview' ? 'var(--color-accent)' : 'transparent',
-                color: analyticsTab === 'overview' ? '#fff' : 'var(--color-text-primary)',
+                color: analyticsTab === 'overview' ? 'var(--color-bg)' : 'var(--color-text-primary)',
                 border: '1px solid var(--color-border-light)',
                 borderRadius: '6px',
                 padding: '0.4rem 0.9rem',
@@ -2269,7 +2269,7 @@ export default function Campaign() {
               onClick={() => setAnalyticsTab('backers')}
               style={{
                 background: analyticsTab === 'backers' ? 'var(--color-accent)' : 'transparent',
-                color: analyticsTab === 'backers' ? '#fff' : 'var(--color-text-primary)',
+                color: analyticsTab === 'backers' ? 'var(--color-bg)' : 'var(--color-text-primary)',
                 border: '1px solid var(--color-border-light)',
                 borderRadius: '6px',
                 padding: '0.4rem 0.9rem',
@@ -2517,7 +2517,7 @@ export default function Campaign() {
           <div
             ref={editModalRef}
             style={{
-              background: '#fff',
+              background: 'var(--color-bg)',
               borderRadius: '12px',
               padding: '2rem',
               maxWidth: '500px',
@@ -2542,10 +2542,10 @@ export default function Campaign() {
             {editError && (
               <p
                 style={{
-                  color: '#d32f2f',
+                  color: 'var(--color-status-error)',
                   marginBottom: '1rem',
                   padding: '0.75rem',
-                  background: '#ffebee',
+                  background: 'var(--color-status-error-bg)',
                   borderRadius: '6px',
                 }}
               >
@@ -2571,7 +2571,7 @@ export default function Campaign() {
                 style={{
                   width: '100%',
                   padding: '0.75rem',
-                  border: '1px solid #ddd',
+                  border: '1px solid var(--color-border-lightest)',
                   borderRadius: '6px',
                   fontSize: '1rem',
                   boxSizing: 'border-box',
@@ -2580,7 +2580,7 @@ export default function Campaign() {
               <p
                 style={{
                   fontSize: '0.85rem',
-                  color: '#888',
+                  color: 'var(--color-text-muted)',
                   margin: '0.25rem 0 0',
                 }}
               >
@@ -2611,7 +2611,7 @@ export default function Campaign() {
                 style={{
                   width: '100%',
                   padding: '0.75rem',
-                  border: '1px solid #ddd',
+                  border: '1px solid var(--color-border-lightest)',
                   borderRadius: '6px',
                   fontSize: '1rem',
                   fontFamily: 'inherit',
@@ -2621,7 +2621,7 @@ export default function Campaign() {
               <p
                 style={{
                   fontSize: '0.85rem',
-                  color: '#888',
+                  color: 'var(--color-text-muted)',
                   margin: '0.25rem 0 0',
                 }}
               >
@@ -2646,7 +2646,7 @@ export default function Campaign() {
                 style={{
                   width: '100%',
                   padding: '0.75rem',
-                  border: '1px solid #ddd',
+                  border: '1px solid var(--color-border-lightest)',
                   borderRadius: '6px',
                   fontSize: '1rem',
                   boxSizing: 'border-box',
@@ -2796,8 +2796,8 @@ export default function Campaign() {
                 disabled={deleteLoading || deleteConfirmation !== campaign.title}
                 style={{
                   opacity: deleteLoading || deleteConfirmation !== campaign.title ? 0.6 : 1,
-                  background: '#dc2626',
-                  borderColor: '#dc2626',
+                  background: 'var(--color-status-error)',
+                  borderColor: 'var(--color-status-error)',
                 }}
               >
                 {deleteLoading ? 'Deleting...' : 'Delete Campaign'}
@@ -2819,8 +2819,8 @@ const styles = {
     flexWrap: 'wrap',
   },
   asset: {
-    background: '#ede9fe',
-    color: '#7c3aed',
+    background: 'var(--color-accent-lightest)',
+    color: 'var(--color-accent)',
     fontSize: '0.75rem',
     fontWeight: 700,
     padding: '2px 8px',
@@ -2830,13 +2830,13 @@ const styles = {
     fontSize: '1.8rem',
     fontWeight: 800,
     margin: '0.5rem 0',
-    color: '#111',
+    color: 'var(--color-text-primary)',
   },
-  creator: { color: '#666', fontSize: '0.9rem', marginBottom: '0.5rem' },
-  desc: { color: '#555', fontSize: '1rem', lineHeight: 1.6 },
+  creator: { color: 'var(--color-text-hint)', fontSize: '0.9rem', marginBottom: '0.5rem' },
+  desc: { color: 'var(--color-text-secondary)', fontSize: '1rem', lineHeight: 1.6 },
   card: {
-    background: '#fff',
-    border: '1px solid #e5e5e5',
+    background: 'var(--color-bg)',
+    border: '1px solid var(--color-border-light)',
     borderRadius: '10px',
     padding: '1.5rem',
     marginBottom: '1rem',
@@ -2846,19 +2846,19 @@ const styles = {
     justifyContent: 'space-between',
     marginBottom: '1rem',
   },
-  big: { fontSize: '1.5rem', fontWeight: 800, color: '#111' },
-  small: { fontSize: '0.85rem', color: '#888' },
+  big: { fontSize: '1.5rem', fontWeight: 800, color: 'var(--color-text-primary)' },
+  small: { fontSize: '0.85rem', color: 'var(--color-text-muted)' },
   bar: {
-    background: '#f0f0f0',
+    background: 'var(--color-surface)',
     borderRadius: '99px',
     height: '8px',
     marginBottom: '1.25rem',
     overflow: 'hidden',
   },
-  fill: { background: '#7c3aed', height: '100%', borderRadius: '99px' },
+  fill: { background: 'var(--color-accent)', height: '100%', borderRadius: '99px' },
   cta: { width: '100%', padding: '0.85rem', fontSize: '1rem' },
   walletInfo: {
-    background: '#f8f8f8',
+    background: 'var(--color-surface)',
     borderRadius: '8px',
     padding: '0.75rem 1rem',
     marginBottom: '1.75rem',
@@ -2869,10 +2869,10 @@ const styles = {
   walletLabel: {
     fontSize: '0.75rem',
     fontWeight: 600,
-    color: '#888',
+    color: 'var(--color-text-muted)',
     textTransform: 'uppercase',
   },
-  walletKey: { fontSize: '0.8rem', color: '#555', wordBreak: 'break-all' },
+  walletKey: { fontSize: '0.8rem', color: 'var(--color-text-secondary)', wordBreak: 'break-all' },
   detailCoverImage: {
     width: '100%',
     borderRadius: '14px',
@@ -2885,13 +2885,13 @@ const styles = {
     borderRadius: '14px',
     marginBottom: '1.5rem',
     height: '260px',
-    background: 'linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%)',
-    border: '1px solid #ddd6fe',
+    background: 'linear-gradient(135deg, var(--color-accent-lighter) 0%, var(--color-accent-lightest) 100%)',
+    border: '1px solid var(--color-purple-light)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  detailCoverPlaceholderText: { color: '#6d28d9', fontWeight: 700 },
+  detailCoverPlaceholderText: { color: 'var(--color-accent-hover)', fontWeight: 700 },
   sectionTitle: {
     fontSize: '1.1rem',
     fontWeight: 700,
@@ -2901,18 +2901,18 @@ const styles = {
   row: {
     display: 'flex',
     justifyContent: 'space-between',
-    background: '#fff',
-    border: '1px solid #eee',
+    background: 'var(--color-bg)',
+    border: '1px solid var(--color-border-lighter)',
     borderRadius: '6px',
     padding: '0.6rem 0.85rem',
   },
-  sender: { fontSize: '0.85rem', color: '#555', fontFamily: 'monospace' },
+  sender: { fontSize: '0.85rem', color: 'var(--color-text-secondary)', fontFamily: 'monospace' },
   amount: { fontSize: '0.85rem', fontWeight: 600, flexShrink: 0 },
-  convHint: { fontSize: '0.72rem', color: '#888', marginTop: '0.15rem' },
+  convHint: { fontSize: '0.72rem', color: 'var(--color-text-muted)', marginTop: '0.15rem' },
   refundTag: {
     marginTop: '0.45rem',
     fontSize: '0.75rem',
-    color: '#7c3aed',
+    color: 'var(--color-accent)',
     fontWeight: 700,
   },
   liveIndicator: {
@@ -2922,15 +2922,15 @@ const styles = {
     marginLeft: '0.5rem',
     fontSize: '0.72rem',
     fontWeight: 600,
-    color: '#16a34a',
+    color: 'var(--color-success-text)',
     verticalAlign: 'middle',
   },
   liveDot: {
     display: 'inline-block',
     width: '7px',
     height: '7px',
     borderRadius: '50%',
-    background: '#16a34a',
+    background: 'var(--color-success-text)',
     animation: 'pulse 1.5s ease-in-out infinite',
   },