fix(settings): readable contrast on accent-tinted icon tiles + pills

frontend/src/index.css

@@ -312,21 +312,45 @@
    * hardcoded `primary-50` palette which stayed green regardless of
    * branding settings.
    *
+   * Mix weights bumped from 12% / 28% to 18% / 55% so the tint reads
+   * as "tinted" rather than "barely there" on dark backgrounds. The
+   * pill foreground intentionally falls back to a high-contrast theme
+   * colour rather than the accent itself (.text-accent-dark on an
+   * accent-soft bg disappears because both come from the same
+   * source).
+   *
    * color-mix is supported on every browser we ship (Chromium 111+,
    * Safari 16.2+, Firefox 113+ — see baseline). Older browsers fall
    * back to the var(--color-accent-dark) below.
    */
   .bg-accent-soft {
     background-color: var(--color-accent-dark);
-    background-color: color-mix(in srgb, var(--color-accent-dark) 12%, transparent);
+    background-color: color-mix(in srgb, var(--color-accent-dark) 18%, transparent);
   }
   .dark .bg-accent-soft {
     background-color: var(--color-accent-dark);
-    background-color: color-mix(in srgb, var(--color-accent-dark) 28%, transparent);
+    background-color: color-mix(in srgb, var(--color-accent-dark) 55%, transparent);
   }
   .border-accent-soft {
     border-color: var(--color-accent-dark);
-    border-color: color-mix(in srgb, var(--color-accent-dark) 30%, transparent);
+    border-color: color-mix(in srgb, var(--color-accent-dark) 45%, transparent);
+  }
+  .dark .border-accent-soft {
+    border-color: color-mix(in srgb, var(--color-accent-dark) 70%, transparent);
+  }
+
+  /*
+   * Foreground for content sitting on .bg-accent-soft. Uses the
+   * theme's text token (already high-contrast against both light
+   * backgrounds and dark surfaces) instead of the accent itself —
+   * accent-on-accent-soft was the reason the Sidebar Preview pills
+   * read as "barely visible".
+   */
+  .text-on-accent-soft {
+    color: var(--color-accent-dark);
+  }
+  .dark .text-on-accent-soft {
+    color: #ffffff;
   }
 
   /*