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

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

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>

frontend/src/index.css

@@ -300,6 +300,35 @@
     color: var(--color-accent);
   }
 
+  .text-accent-dark {
+    color: var(--color-accent-dark);
+  }
+
+  /*
+   * Low-opacity accent fills used as "icon tile" / "tinted chip"
+   * backgrounds (Features tab feature icons, Sidebar Preview pills,
+   * Customer dashboard branding card header). Picks up the admin's CI
+   * accent automatically — previously these places used Tailwind's
+   * hardcoded `primary-50` palette which stayed green regardless of
+   * branding settings.
+   *
+   * 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);
+  }
+  .dark .bg-accent-soft {
+    background-color: var(--color-accent-dark);
+    background-color: color-mix(in srgb, var(--color-accent-dark) 28%, transparent);
+  }
+  .border-accent-soft {
+    border-color: var(--color-accent-dark);
+    border-color: color-mix(in srgb, var(--color-accent-dark) 30%, transparent);
+  }
+
   /*
    * Selected-tile state for picker grids (Gallery Layout, Filter Bar Style,
    * Header Style, Hero Divider, Theme Presets). Used in place of the dim