Fix privacy policy light mode and colors

Author: devanshi14malhotra

frontend/pages/privacy-policy.html

@@ -52,8 +52,8 @@
 
       body {
         margin: 0;
-        background: var(--bg-main, #0f1117);
-        color: var(--text-main, #f5f5f5);
+        background: var(--bg-color);
+        color: var(--text-main);
         font-family: "Inter", sans-serif;
         line-height: 1.8;
       }
@@ -66,8 +66,8 @@
         position: absolute;
         top: -40px;
         left: 20px;
-        background: #fff;
-        color: #000;
+        background: var(--surface-elevated);
+        color: var(--text-main);
         padding: 10px 16px;
         border-radius: 8px;
         z-index: 9999;
@@ -84,20 +84,20 @@
         left: 0;
         width: 30%;
         height: 4px;
-        background: #8b5cf6;
+        background: var(--accent-gold);
         z-index: 9999;
       }
 
       .breadcrumb {
         max-width: 1400px;
         margin: 1rem auto;
         padding: 0 2rem;
-        color: rgba(255, 255, 255, 0.6);
+        color: var(--text-muted);
         font-size: 0.95rem;
       }
 
       .breadcrumb a {
-        color: rgba(255, 255, 255, 0.8);
+        color: var(--text-main);
         text-decoration: none;
       }
 
@@ -117,8 +117,8 @@
         gap: 10px;
         padding: 10px 18px;
         border-radius: 999px;
-        background: rgba(139, 92, 246, 0.15);
-        color: #c4b5fd;
+        background: var(--control-focus-ring);
+        color: var(--accent-gold);
         font-size: 0.9rem;
         margin-bottom: 1.5rem;
       }
@@ -131,15 +131,15 @@
       }
 
       .privacy-hero p {
-        color: rgba(255, 255, 255, 0.75);
+        color: var(--text-muted);
         max-width: 700px;
         margin: auto;
         font-size: 1.1rem;
       }
 
       .policy-meta {
         margin-top: 1.5rem;
-        color: rgba(255, 255, 255, 0.6);
+        color: var(--text-muted);
         font-size: 0.95rem;
       }
 
@@ -152,11 +152,11 @@
       }
 
       .hero-meta span {
-        background: rgba(255, 255, 255, 0.05);
+        background: var(--glass-bg);
         padding: 12px 18px;
         border-radius: 14px;
         font-size: 0.95rem;
-        color: rgba(255, 255, 255, 0.85);
+        color: var(--text-main);
       }
 
       .privacy-layout {
@@ -175,8 +175,8 @@
       }
 
       .sidebar-card {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: var(--surface-panel);
+        border: 1px solid var(--glass-border);
         border-radius: 24px;
         padding: 1.5rem;
         backdrop-filter: blur(16px);
@@ -196,15 +196,15 @@
 
       .sidebar-nav a {
         text-decoration: none;
-        color: rgba(255, 255, 255, 0.7);
+        color: var(--text-muted);
         padding: 10px 14px;
         border-radius: 12px;
         transition: all 0.3s ease;
       }
 
       .sidebar-nav a:hover {
-        background: rgba(255, 255, 255, 0.08);
-        color: white;
+        background: var(--nav-active-ring);
+        color: var(--nav-active-color);
         transform: translateX(4px);
       }
 
@@ -215,8 +215,8 @@
       }
 
       .policy-card {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: var(--surface-panel);
+        border: 1px solid var(--glass-border);
         border-radius: 28px;
         padding: 2rem;
         backdrop-filter: blur(14px);
@@ -225,8 +225,8 @@
 
       .policy-card:hover {
         transform: translateY(-4px);
-        border-color: rgba(139, 92, 246, 0.4);
-        box-shadow: 0 10px 40px rgba(139, 92, 246, 0.12);
+        border-color: var(--accent-gold);
+        box-shadow: var(--shadow-panel);
       }
 
       .policy-heading {
@@ -238,7 +238,7 @@
 
       .policy-heading i {
         font-size: 1.2rem;
-        color: #c4b5fd;
+        color: var(--accent-gold);
         margin-top: 6px;
       }
 
@@ -249,13 +249,13 @@
 
       .section-subtitle {
         margin-top: 6px;
-        color: rgba(255, 255, 255, 0.6);
+        color: var(--text-muted);
         font-size: 0.95rem;
       }
 
       .policy-list {
         padding-left: 1.2rem;
-        color: rgba(255, 255, 255, 0.85);
+        color: var(--text-main);
       }
 
       .policy-list li {
@@ -269,33 +269,33 @@
         margin-top: 1rem;
         padding: 14px 24px;
         border-radius: 16px;
-        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-        color: white;
+        background: var(--accent-gold);
+        color: var(--nav-active-color);
         text-decoration: none;
         font-weight: 600;
         transition: all 0.3s ease;
       }
 
       .primary-btn:hover {
         transform: translateY(-2px);
-        box-shadow: 0 10px 30px rgba(139, 92, 246, 0.35);
+        box-shadow: var(--shadow-panel);
       }
 
       .contact-link {
-        color: #c4b5fd;
+        color: var(--accent-gold);
         text-decoration: none;
         font-weight: 600;
       }
 
       .response-note {
-        color: rgba(255, 255, 255, 0.6);
+        color: var(--text-muted);
         font-size: 0.95rem;
       }
 
       .privacy-footer-cta {
         text-align: center;
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: var(--surface-panel);
+        border: 1px solid var(--glass-border);
         border-radius: 28px;
         padding: 3rem 2rem;
       }
@@ -306,7 +306,7 @@
       }
 
       .privacy-footer-cta p {
-        color: rgba(255, 255, 255, 0.7);
+        color: var(--text-muted);
         max-width: 600px;
         margin: auto;
       }