style: accent color for links, prices, selection, focus outlines and spinner; remove grayscale filter

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);
+    background-color: var(--color-accent);
-    color: white;
+    color: var(--color-accent-text, white);
-}
-
-/* Grayscale all emoji icons */
-.emoji-icon,
-.upload-icon,
-.empty-state-icon,
-[class*="encrypted"],
-.listing-location {
-    filter: grayscale(1);
 }
 
 .sr-only {

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;
 }

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;