diff --git a/css/base.css b/css/base.css
index d4d43c7..fe02d2e 100644
--- a/css/base.css
+++ b/css/base.css
@@ -22,13 +22,13 @@ body {
 }
 
 a {
-    color: var(--color-primary);
+    color: var(--color-accent);
     text-decoration: none;
     transition: color var(--transition-fast);
 }
 
 a:hover {
-    color: var(--color-primary-hover);
+    color: var(--color-accent-hover);
 }
 
 img, svg {
@@ -87,17 +87,8 @@ p + p {
 }
 
 ::selection {
-    background-color: var(--color-primary);
-    color: white;
-}
-
-/* Grayscale all emoji icons */
-.emoji-icon,
-.upload-icon,
-.empty-state-icon,
-[class*="encrypted"],
-.listing-location {
-    filter: grayscale(1);
+    background-color: var(--color-accent);
+    color: var(--color-accent-text, white);
 }
 
 .sr-only {
diff --git a/css/components.css b/css/components.css
index d1385cd..fa55358 100644
--- a/css/components.css
+++ b/css/components.css
@@ -70,7 +70,7 @@
 
 .input:focus-visible,
 .btn:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-accent);
     outline-offset: 2px;
 }
 
@@ -375,7 +375,7 @@ app-shell main {
     width: 40px;
     height: 40px;
     border: 3px solid var(--color-border);
-    border-top-color: var(--color-primary);
+    border-top-color: var(--color-accent);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
diff --git a/js/components/listing-card.js b/js/components/listing-card.js
index d14cc0b..5149554 100644
--- a/js/components/listing-card.js
+++ b/js/components/listing-card.js
@@ -315,7 +315,7 @@ style.textContent = /* css */`
     listing-card .listing-price {
         font-size: var(--font-size-sm);
         font-weight: var(--font-weight-bold);
-        color: var(--color-primary);
+        color: var(--color-accent);
         margin: 0;
         white-space: nowrap;
         overflow: hidden;