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

frontend/src/components/admin/CustomerDashboardBrandingCard.tsx

@@ -120,7 +120,7 @@ export const CustomerDashboardBrandingCard: React.FC = () => {
   return (
     <Card padding="md">
       <div className="flex items-start gap-3 mb-4">
-        <div className="w-10 h-10 rounded-lg bg-accent-soft text-accent-dark flex items-center justify-center flex-shrink-0">
+        <div className="w-10 h-10 rounded-lg bg-accent-soft text-on-accent-soft flex items-center justify-center flex-shrink-0">
           <UserCog className="w-5 h-5" />
         </div>
         <div>

frontend/src/features/settings/components/FeatureCard.tsx

@@ -47,14 +47,14 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
   >
     <div className="flex items-start gap-4 p-5">
       {/* Icon tile — enabled state uses the admin's CI accent (via
-          .bg-accent-soft / .text-accent-dark from index.css) so the
+          .bg-accent-soft + .text-on-accent-soft) so it follows the
-          tile colour follows the configured brand palette. Previously
+          configured brand palette. The foreground token resolves to
-          hard-coded to Tailwind's primary-50 green. */}
+          a high-contrast colour in both light and dark mode. */}
       <div
         className={clsx(
           'flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center',
           enabled
-            ? 'bg-accent-soft text-accent-dark'
+            ? 'bg-accent-soft text-on-accent-soft'
             : 'bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400',
         )}
       >

frontend/src/features/settings/components/SidebarPreview.tsx

@@ -61,10 +61,11 @@ export const SidebarPreview: React.FC<SidebarPreviewProps> = ({ staged }) => {
             className={clsx(
               'inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-medium border',
               // Feature-driven pills pick up the admin's CI accent via
-              // .bg-accent-soft / .border-accent-soft / .text-accent-dark
+              // .bg-accent-soft / .border-accent-soft, with
-              // — previously hard-coded to Tailwind primary-50 green.
+              // .text-on-accent-soft as the legible foreground (the
+              // accent token itself washes out on its own tint).
               item.featureDriven
-                ? 'border-accent-soft bg-accent-soft text-accent-dark'
+                ? 'border-accent-soft bg-accent-soft text-on-accent-soft'
                 : 'border-neutral-200 bg-neutral-50 text-neutral-700 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
             )}
           >

frontend/src/features/settings/tabs/FeaturesTab.tsx

@@ -69,7 +69,7 @@ export const FeaturesTab: React.FC = () => {
         {/* Header */}
         <div className="mb-6 pb-4 border-b border-neutral-200 dark:border-neutral-700">
           <div className="flex items-start gap-3">
-            <div className="w-10 h-10 rounded-lg bg-accent-soft text-accent-dark flex items-center justify-center">
+            <div className="w-10 h-10 rounded-lg bg-accent-soft text-on-accent-soft flex items-center justify-center">
               <ToggleRight className="w-5 h-5" />
             </div>
             <div>

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