tag colors

frontend/src/styles/sidebar/sidebar.css

@@ -676,49 +676,45 @@
   flex-wrap: wrap;
   gap: 0.35rem;
   padding: 0.25rem 0 0.1rem;
+  --tag-chip-base-default: var(--surface-soft);
 }
 
-.sidebar-tag-pill {
+.sidebar-tag-cloud .tag-chip {
   border-radius: 999px;
   padding: 0.25rem 0.6rem;
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
-  background: var(--surface-soft);
-  color: var(--fg);
-  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
-    opacity 0.12s ease;
-  box-shadow: 0 1px 2px var(--shadow-faint);
+  transition: transform 0.15s ease, opacity 0.12s ease;
 }
 
-.sidebar-tag-pill:hover {
-  transform: none;
-  box-shadow: 0 2px 6px var(--shadow-pop);
-  border-color: var(--accent-soft);
-}
-
-.sidebar-tag-pill:focus-visible {
-  outline: 2px solid var(--accent);
+.sidebar-tag-cloud .tag-chip:focus-visible {
+  outline: 2px solid var(--tag-chip-outline-color, var(--accent));
   outline-offset: 2px;
 }
 
-.sidebar-tag-pill.active {
-  border-color: var(--sidebar-active-pill-border);
-  box-shadow: 0 0 0 1.5px var(--sidebar-active-pill-border);
+.sidebar-tag-cloud .tag-chip.active {
+  outline: 2px solid var(--tag-chip-outline-color, var(--accent));
+  outline-offset: 0;
 }
 
-.sidebar-tag-pill--untagged {
-  border: 1px dashed var(--border);
-  background: var(--surface-subtle);
+.sidebar-tag-cloud .tag-chip:hover {
+  transform: none;
+  outline: 3px solid var(--tag-chip-outline-color, var(--accent));
+  outline-offset: 0;
+}
+
+.sidebar-tag-cloud .tag-chip--untagged {
+  --tag-chip-base: var(--surface-subtle);
   color: var(--muted);
 }
 
-.sidebar-tag-pill--untagged.active {
+.sidebar-tag-cloud .tag-chip--untagged.active {
   color: var(--fg);
 }
 
-.sidebar-tag-cloud--has-active .sidebar-tag-pill:not(.active) {
+.sidebar-tag-cloud--has-active .tag-chip:not(.active) {
   opacity: 0.45;
 }