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

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
-          tile colour follows the configured brand palette. Previously
-          hard-coded to Tailwind's primary-50 green. */}
+          .bg-accent-soft + .text-on-accent-soft) so it follows the
+          configured brand palette. The foreground token resolves to
+          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
-              // — previously hard-coded to Tailwind primary-50 green.
+              // .bg-accent-soft / .border-accent-soft, with
+              // .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>