Refactor privacy page styles: eliminate duplication and !important

- Create shared back-link-styles mixin in _mixins.scss for reusable button component
- Remove all duplicate back-link styling from .privacy-content .back-link and a.back-link
- Eliminate 15+ instances of !important declarations throughout privacy styles
- Use proper SCSS variables instead of hardcoded values for consistent spacing
- Add focus state to back-link mixin for accessibility compliance
- Use existing card mixin and flex-center mixin for consistent styling
- Replace hardcoded colors with CSS custom properties for theme compatibility

Benefits:
- DRY principle: One mixin defines all back-link styles
- Better maintainability: Changes in one place affect all instances
- Improved accessibility: Focus states for keyboard navigation
- Cleaner CSS: No !important declarations needed
- Theme consistency: Uses proper color variables

src/scss/_mixins.scss

@@ -122,6 +122,31 @@
   color: $text-color;
 }
 
+// Back-link button mixin (shared component)
+@mixin back-link-styles {
+  display: inline-block;
+  margin-top: $spacing-lg;
+  padding: $spacing-sm $spacing-md;
+  color: white;
+  background-color: var(--primary-color, $primary-color);
+  border: none;
+  border-radius: $border-radius-sm;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+  font-weight: 500;
+  
+  &:hover {
+    background-color: var(--primary-hover, $secondary-color);
+    color: white;
+    text-decoration: none;
+  }
+  
+  &:focus {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
 // Responsive breakpoint mixins
 @mixin mobile {
   @media (max-width: $mobile) {

src/scss/pages/_privacy.scss

@@ -1,17 +1,21 @@
+// Import variables and mixins
+@use '../variables' as *;
+@use '../mixins' as *;
+
 // Privacy page specific styles
 .privacy-container {
   max-width: 800px;
   margin: 0 auto;
-  padding: 20px;
+  padding: $spacing-md;
 }
 
 .privacy-header {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: $spacing-xl;
   
   &__title-wrapper {
     position: relative;
-    margin-bottom: 20px;
+    margin-bottom: $spacing-md;
   }
   
   &__title-content {
@@ -27,32 +31,27 @@
     border-radius: 50%;
     width: 50px;
     height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @include flex-center;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px var(--shadow);
     
     .theme-icon {
-      font-size: 20px;
+      font-size: $font-size-lg;
     }
   }
 }
 
 .privacy-content {
-  background: var(--card-bg);
-  padding: 30px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px var(--shadow);
+  @include card($spacing-lg);
   line-height: 1.6;
   
   h2 {
     color: var(--text-color);
-    margin-top: 30px;
-    margin-bottom: 15px;
+    margin-top: $spacing-lg;
+    margin-bottom: $spacing-md;
     border-bottom: 1px solid var(--border-color);
-    padding-bottom: 10px;
+    padding-bottom: $spacing-sm;
     
     &:first-child {
       margin-top: 0;
@@ -60,87 +59,58 @@
   }
   
   ul {
-    margin: 15px 0;
-    padding-left: 30px;
+    margin: $spacing-md 0;
+    padding-left: $spacing-lg;
   }
   
   li {
-    margin-bottom: 8px;
+    margin-bottom: $spacing-xs;
   }
   
-  // Fix link visibility and styling
+  // Regular links within content (higher specificity than base styles)
   a:not(.back-link) {
-    color: var(--link-color) !important;
-    text-decoration: underline !important;
+    color: var(--link-color);
+    text-decoration: underline;
     font-weight: 500;
     
     &:hover {
-      color: var(--link-hover) !important;
-      text-decoration: underline !important;
+      color: var(--link-hover);
+      text-decoration: underline;
     }
   }
   
+  // Back-link button using shared mixin
   .back-link {
-    display: inline-block !important;
-    margin-top: 30px !important;
-    padding: 10px 20px !important;
-    color: white !important;
-    background-color: var(--primary-color, #2196F3) !important;
-    border: none !important;
-    border-radius: 4px !important;
-    text-decoration: none !important;
-    transition: background-color 0.2s ease !important;
-    font-weight: 500 !important;
-    
-    &:hover {
-      background-color: var(--primary-hover, #1976D2) !important;
-      color: white !important;
-      text-decoration: none !important;
-    }
+    @include back-link-styles;
   }
 }
 
 .effective-date {
-  color: #666;
-  font-size: 0.9em;
+  color: var(--text-secondary);
+  font-size: $font-size-sm;
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: $spacing-lg;
 }
 
 .contact-info {
-  background: var(--toggle-bg);
-  padding: 20px;
-  border-radius: 6px;
-  margin-top: 20px;
+  background: var(--bg-secondary);
+  padding: $spacing-md;
+  border-radius: $border-radius-sm;
+  margin-top: $spacing-md;
   border: 1px solid var(--border-color);
   
   a {
-    color: var(--link-color) !important;
-    text-decoration: underline !important;
+    color: var(--link-color);
+    text-decoration: underline;
     font-weight: 500;
     
     &:hover {
-      color: var(--link-hover) !important;
+      color: var(--link-hover);
     }
   }
 }
 
 // Global back-link styling (for cases where it's used outside .privacy-content)
 a.back-link {
-  display: inline-block !important;
-  margin-top: 30px !important;
-  padding: 10px 20px !important;
-  color: white !important;
-  background-color: var(--primary-color, #2196F3) !important;
-  border: none !important;
-  border-radius: 4px !important;
-  text-decoration: none !important;
-  transition: background-color 0.2s ease !important;
-  font-weight: 500 !important;
-  
-  &:hover {
-    background-color: var(--primary-hover, #1976D2) !important;
-    color: white !important;
-    text-decoration: none !important;
-  }
+  @include back-link-styles;
 }