fix(features-tab): icon tiles + preview pills follow CI accent

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

@@ -46,12 +46,15 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
     )}
   >
     <div className="flex items-start gap-4 p-5">
-      {/* Icon tile */}
+      {/* 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. */}
       <div
         className={clsx(
           'flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center',
           enabled
-            ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'
+            ? 'bg-accent-soft text-accent-dark'
             : 'bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400',
         )}
       >

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

@@ -60,8 +60,11 @@ export const SidebarPreview: React.FC<SidebarPreviewProps> = ({ staged }) => {
             key={item.key}
             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.
               item.featureDriven
-                ? 'border-primary-200 bg-primary-50 text-primary-800 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-200'
+                ? 'border-accent-soft bg-accent-soft text-accent-dark'
                 : 'border-neutral-200 bg-neutral-50 text-neutral-700 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
             )}
           >
@@ -73,7 +76,7 @@ export const SidebarPreview: React.FC<SidebarPreviewProps> = ({ staged }) => {
       <p className="mt-3 text-xs text-neutral-500 dark:text-neutral-400">
         {t(
           'settings.features.preview.legend',
-          'Green tinted items are controlled by toggles above.',
+          'Accent-tinted items are controlled by toggles above.',
         )}
       </p>
     </Card>

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-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300 flex items-center justify-center">
+            <div className="w-10 h-10 rounded-lg bg-accent-soft text-accent-dark flex items-center justify-center">
               <ToggleRight className="w-5 h-5" />
             </div>
             <div>