fix(branding): comprehensive sweep — replace remaining primary-* legacy colors with accent tokens

frontend/src/components/admin/AdminGuestDetail.tsx

@@ -133,7 +133,7 @@ export const AdminGuestDetail: React.FC<AdminGuestDetailProps> = ({ eventId, gue
                   onClick={() => setTab(k)}
                   className={`px-3 py-2 text-sm font-medium border-b-2 transition ${
                     tab === k
-                      ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                      ? 'border-accent-dark text-accent-dark'
                       : 'border-transparent text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100'
                   }`}
                 >

frontend/src/components/admin/AdminGuestsList.tsx

@@ -245,7 +245,7 @@ export const AdminGuestsList: React.FC<AdminGuestsListProps> = ({ eventId, event
                           type="checkbox"
                           checked={mergeSelection.includes(guest.id)}
                           onChange={() => toggleMergeSelection(guest.id)}
-                          className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                          className="w-4 h-4 text-accent rounded focus:ring-primary-500"
                         />
                       </td>
                     )}
@@ -278,7 +278,7 @@ export const AdminGuestsList: React.FC<AdminGuestsListProps> = ({ eventId, event
                         <button
                           type="button"
                           onClick={() => setSelectedGuest(guest)}
-                          className="p-1 text-neutral-500 hover:text-primary-600"
+                          className="p-1 text-neutral-500 hover:text-accent"
                           title={t('admin.guests.view', 'View details')}
                         >
                           <Eye className="w-4 h-4" />
@@ -286,7 +286,7 @@ export const AdminGuestsList: React.FC<AdminGuestsListProps> = ({ eventId, event
                         <div className="relative group">
                           <button
                             type="button"
-                            className="p-1 text-neutral-500 hover:text-primary-600"
+                            className="p-1 text-neutral-500 hover:text-accent"
                             title={t('admin.guests.export', 'Export')}
                           >
                             <Download className="w-4 h-4" />

frontend/src/components/admin/AdminHeader.tsx

@@ -149,7 +149,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                       {unreadCount > 0 && (
                         <button
                           onClick={() => markAllAsReadMutation.mutate()}
-                          className="text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 flex items-center gap-1"
+                          className="text-xs text-accent hover:opacity-80 flex items-center gap-1"
                           title={t('admin.markAllRead')}
                         >
                           <CheckCircle className="w-3 h-3" />
@@ -178,7 +178,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                           <div
                             key={notification.id}
                             className={`px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer border-l-4 ${
-                              notification.isRead ? 'border-transparent opacity-75' : 'border-primary-500'
+                              notification.isRead ? 'border-transparent opacity-75' : 'border-accent-dark'
                             }`}
                           >
                             <div className="flex items-start gap-3">
@@ -203,7 +203,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                     <div className="px-4 py-2 border-t border-neutral-100 dark:border-neutral-700 text-center">
                       <button
                         onClick={() => setShowNotifications(false)}
-                        className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"
+                        className="text-sm text-accent hover:opacity-80"
                       >
                         {t('admin.close')}
                       </button>
@@ -223,7 +223,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
                   <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{user?.username}</p>
                   <p className="text-xs text-neutral-500 dark:text-neutral-400">{user?.email}</p>
                 </div>
-                <div className="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
+                <div className="w-8 h-8 bg-accent-dark rounded-full flex items-center justify-center">
                   <User className="w-5 h-5 text-white" />
                 </div>
               </button>

frontend/src/components/admin/AdminLayout.tsx

@@ -19,7 +19,7 @@ export const AdminLayout: React.FC = () => {
     return (
       <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center">
         <div className="text-center">
-          <div className="w-16 h-16 border-4 border-primary-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+          <div className="w-16 h-16 border-4 border-accent-dark border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
           <p className="text-neutral-600">Loading...</p>
         </div>
       </div>

frontend/src/components/admin/AdminPhotoGrid.tsx

@@ -284,7 +284,7 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
             >
               <div className={`w-6 h-6 rounded border-2 flex items-center justify-center ${
                 selectedPhotos.has(photo.id)
-                  ? 'bg-primary-600 border-primary-600'
+                  ? 'bg-accent-dark border-accent-dark'
                   : 'bg-white/90 border-white'
               }`}>
                 {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
@@ -419,7 +419,7 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
                 )}
                 {commentCount > 0 && (
                   <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${commentCount} comments`}>
-                    <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
+                    <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
                     <span className="text-xs font-medium text-neutral-700">{commentCount}</span>
                   </div>
                 )}

frontend/src/components/admin/AdminPhotoViewer.tsx

@@ -266,7 +266,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
               </span>
               <button
                 onClick={() => setShowCategoryMenu(!showCategoryMenu)}
-                className="text-xs text-primary-400 hover:text-primary-300"
+                className="text-xs text-accent hover:text-accent-dark"
               >
                 Change
               </button>
@@ -393,7 +393,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
                 <div className="space-y-2">
                   <button
                     onClick={() => setExpandedComments(!expandedComments)}
-                    className="text-xs text-primary-400 hover:text-primary-300 mb-2"
+                    className="text-xs text-accent hover:text-accent-dark mb-2"
                   >
                     {expandedComments ? 'Hide' : 'Show'} Comments ({comments.length})
                   </button>

frontend/src/components/admin/AdminSidebar.tsx

@@ -141,7 +141,7 @@ const StorageInfo: React.FC = () => {
     ? Math.round((storageInfo.total_used / limitInUse) * 100)
     : 0;
   const isOverSoftLimit = limitInUse && storageInfo.total_used >= limitInUse;
-  const progressBarClass = isOverSoftLimit ? 'bg-red-600' : 'bg-primary-600';
+  const progressBarClass = isOverSoftLimit ? 'bg-red-600' : 'bg-accent-dark';
   const containerClass = isOverSoftLimit
     ? 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800'
     : 'bg-neutral-100 dark:bg-neutral-800';

frontend/src/components/admin/BackupConfiguration.jsx

@@ -184,7 +184,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
                 onClick={() => handleChange('backup_destination_type', type.id)}
                 className={`p-4 rounded-lg border-2 transition-all ${
                   formData.backup_destination_type === type.id
-                    ? 'border-primary bg-primary-50 dark:bg-primary-900/30'
+                    ? 'border-primary bg-accent-dark/15'
                     : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
                 }`}
               >

frontend/src/components/admin/BackupHistory.jsx

@@ -385,7 +385,7 @@ export const BackupHistory = () => {
                           onClick={() => setCurrentPage(pageNum)}
                           className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
                             currentPage === pageNum
-                              ? 'z-10 bg-primary-50 dark:bg-primary-900/30 border-primary text-primary'
+                              ? 'z-10 bg-accent-dark/15 border-primary text-primary'
                               : 'bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700'
                           }`}
                         >

frontend/src/components/admin/BulkCategoryModal.tsx

@@ -64,7 +64,7 @@ export const BulkCategoryModal: React.FC<BulkCategoryModalProps> = ({
               id="category-select"
               value={selectedCategoryId ?? ''}
               onChange={(e) => setSelectedCategoryId(e.target.value === '' ? null : Number(e.target.value))}
-              className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+              className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
               disabled={isLoading}
             >
               <option value="">{t('photos.uncategorized', 'Uncategorized')}</option>

frontend/src/components/admin/CMSEditor.tsx

@@ -145,7 +145,7 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
       disabled={disabled}
       className={`p-2 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors ${
         active
-          ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300'
+          ? 'bg-accent-dark/15 text-accent-dark'
           : 'text-neutral-700 dark:text-neutral-200'
       } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
       title={title}
@@ -179,7 +179,7 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
   const viewModeChipClass = (mode: typeof viewMode) =>
     `px-3 py-1.5 text-sm font-medium rounded transition-colors ${
       viewMode === mode
-        ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300'
+        ? 'bg-accent-dark/15 text-accent-dark'
         : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700'
     }`;
 
@@ -428,14 +428,14 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
 
         {/* Link Dialog */}
         {showLinkDialog && (
-          <div className="p-3 bg-primary-50 dark:bg-primary-900/30 border-b border-primary-200 dark:border-primary-800 flex items-center gap-2">
+          <div className="p-3 bg-accent-dark/15 border-b border-accent-dark/30 flex items-center gap-2">
             <input
               type="url"
               value={linkUrl}
               onChange={(e) => setLinkUrl(e.target.value)}
               onKeyPress={(e) => e.key === 'Enter' && addLink()}
               placeholder="Enter URL..."
-              className="flex-1 px-3 py-1 border border-primary-300 dark:border-primary-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500"
+              className="flex-1 px-3 py-1 border border-accent-dark/30 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500"
               autoFocus
             />
             <Button size="sm" onClick={addLink}>Add Link</Button>

frontend/src/components/admin/CategoryManager.tsx

@@ -93,7 +93,7 @@ export const CategoryManager: React.FC = () => {
   if (isLoading) {
     return (
       <div className="flex justify-center items-center py-8">
-        <Loader2 className="w-6 h-6 animate-spin text-primary-600" />
+        <Loader2 className="w-6 h-6 animate-spin text-accent" />
       </div>
     );
   }
@@ -205,7 +205,7 @@ export const CategoryManager: React.FC = () => {
                   <div className="flex gap-1">
                     <button
                       onClick={() => startEdit(category)}
-                      className="p-1.5 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded transition-colors"
+                      className="p-1.5 text-neutral-600 dark:text-neutral-400 hover:text-accent dark:hover:text-accent hover:bg-accent-dark/15 rounded transition-colors"
                       title={t('common.edit')}
                     >
                       <Edit2 className="w-4 h-4" />

frontend/src/components/admin/CssTemplateEditor.tsx

@@ -108,7 +108,7 @@ export const CssTemplateEditor: React.FC = () => {
                 onClick={() => setActiveSlot(slot)}
                 className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                   activeSlot === slot
-                    ? 'border-primary-600 text-primary-600'
+                    ? 'border-accent-dark text-accent-dark'
                     : 'border-transparent text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:border-neutral-300 dark:hover:border-neutral-600'
                 }`}
               >
@@ -138,7 +138,7 @@ export const CssTemplateEditor: React.FC = () => {
                 value={activeTemplate.name}
                 onChange={(e) => updateLocalTemplate({ name: e.target.value })}
                 maxLength={50}
-                className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
               />
             </div>
 
@@ -149,7 +149,7 @@ export const CssTemplateEditor: React.FC = () => {
                   type="checkbox"
                   checked={activeTemplate.is_enabled}
                   onChange={(e) => updateLocalTemplate({ is_enabled: e.target.checked })}
-                  className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
+                  className="rounded border-neutral-300 text-accent focus:ring-primary-500"
                 />
                 <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
                   {t('cssTemplates.enableTemplate', 'Enable this template')}
@@ -169,7 +169,7 @@ export const CssTemplateEditor: React.FC = () => {
                 <textarea
                   value={activeTemplate.css_content}
                   onChange={(e) => updateLocalTemplate({ css_content: e.target.value })}
-                  className="w-full h-96 px-4 py-3 font-mono text-sm border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-neutral-900 text-green-400"
+                  className="w-full h-96 px-4 py-3 font-mono text-sm border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark bg-neutral-900 text-green-400"
                   spellCheck={false}
                   placeholder="/* Enter your custom CSS here */"
                 />

frontend/src/components/admin/EmailPreviewModal.tsx

@@ -27,7 +27,7 @@ export const EmailPreviewModal: React.FC<EmailPreviewModalProps> = ({
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
           <div className="flex items-center gap-3">
-            <Mail className="w-6 h-6 text-primary-600" />
+            <Mail className="w-6 h-6 text-accent" />
             <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">Email Preview</h2>
           </div>
           <button

frontend/src/components/admin/EmailTemplateEditor.tsx

@@ -146,7 +146,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
       disabled={disabled}
       className={`p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-600 transition-colors ${
         active
-          ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300'
+          ? 'bg-accent-dark/15 text-accent-dark'
           : 'text-neutral-700 dark:text-neutral-300'
       } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
       title={title}
@@ -304,7 +304,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
                   onClick={() => setShowVariables(!showVariables)}
                   className={`flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
                     showVariables
-                      ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300'
+                      ? 'bg-accent-dark/15 text-accent-dark'
                       : 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600'
                   }`}
                   type="button"
@@ -322,7 +322,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
                         className="w-full text-left px-3 py-1.5 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
                         type="button"
                       >
-                        <code className="text-primary-600 dark:text-primary-400">{`{{${variable}}}`}</code>
+                        <code className="text-accent">{`{{${variable}}}`}</code>
                       </button>
                     ))}
                   </div>
@@ -348,19 +348,19 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
 
       {/* Link Dialog */}
       {showLinkDialog && (
-        <div className="p-3 bg-primary-50 dark:bg-primary-900/20 border-b border-primary-200 dark:border-primary-800 flex items-center gap-2">
+        <div className="p-3 bg-accent-dark/15 border-b border-accent-dark/30 flex items-center gap-2">
           <input
             type="url"
             value={linkUrl}
             onChange={(e) => setLinkUrl(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && addLink()}
             placeholder={t('email.editor.enterUrl')}
-            className="flex-1 px-3 py-1 text-sm border border-primary-300 dark:border-primary-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500"
+            className="flex-1 px-3 py-1 text-sm border border-accent-dark/30 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500"
             autoFocus
           />
           <button
             onClick={addLink}
-            className="px-3 py-1 text-sm bg-accent-dark text-white rounded-md hover:bg-primary-700"
+            className="px-3 py-1 text-sm bg-accent-dark text-white rounded-md hover:opacity-90"
             type="button"
           >
             {t('email.editor.addLink')}

frontend/src/components/admin/EventCategoryManager.tsx

@@ -102,7 +102,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
   if (isLoading) {
     return (
       <div className="flex justify-center items-center py-4">
-        <Loader2 className="w-5 h-5 animate-spin text-primary-600" />
+        <Loader2 className="w-5 h-5 animate-spin text-accent" />
       </div>
     );
   }
@@ -185,7 +185,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
                   {/* Hero photo thumbnail */}
                   <button
                     onClick={() => setHeroPickerCategoryId(category.id)}
-                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-primary-400 transition-colors flex items-center justify-center"
+                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-accent-dark transition-colors flex items-center justify-center"
                     title={t('categories.setCoverPhoto')}
                   >
                     {heroPhoto ? (
@@ -195,7 +195,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
                         className="w-full h-full object-cover"
                       />
                     ) : category.hero_photo_id ? (
-                      <ImageIcon className="w-4 h-4 text-primary-400" />
+                      <ImageIcon className="w-4 h-4 text-accent" />
                     ) : (
                       <ImageIcon className="w-4 h-4 text-neutral-300" />
                     )}
@@ -234,7 +234,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
                 <div key={cat.id} className="flex items-center gap-3 px-3 py-2 bg-neutral-50 dark:bg-neutral-800 rounded-md">
                   <button
                     onClick={() => setHeroPickerCategoryId(cat.id)}
-                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-primary-400 transition-colors flex items-center justify-center"
+                    className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-accent-dark transition-colors flex items-center justify-center"
                     title={t('categories.setCoverPhoto')}
                   >
                     {heroPhoto ? (
@@ -244,7 +244,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
                         className="w-full h-full object-cover"
                       />
                     ) : cat.hero_photo_id ? (
-                      <ImageIcon className="w-4 h-4 text-primary-400" />
+                      <ImageIcon className="w-4 h-4 text-accent" />
                     ) : (
                       <ImageIcon className="w-4 h-4 text-neutral-300" />
                     )}
@@ -288,7 +288,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
                         onClick={() => handleSelectHeroPhoto(heroPickerCategoryId, photo.id)}
                         className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${
                           isSelected
-                            ? 'border-primary-500 ring-2 ring-primary-500 ring-offset-2'
+                            ? 'border-accent-dark ring-2 ring-primary-500 ring-offset-2'
                             : 'border-transparent hover:border-neutral-300'
                         }`}
                       >
@@ -300,7 +300,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
                           />
                         </div>
                         {isSelected && (
-                          <div className="absolute top-2 right-2 bg-primary-500 text-white rounded-full p-1">
+                          <div className="absolute top-2 right-2 bg-accent-dark/150 text-white rounded-full p-1">
                             <Check className="w-4 h-4" />
                           </div>
                         )}

frontend/src/components/admin/EventRenameDialog.tsx

@@ -198,7 +198,7 @@ export const EventRenameDialog: React.FC<EventRenameDialogProps> = ({
           // Renaming in progress
           <div className="space-y-4 py-8">
             <div className="flex flex-col items-center gap-4">
-              <Loader2 className="w-10 h-10 text-primary-600 animate-spin" />
+              <Loader2 className="w-10 h-10 text-accent animate-spin" />
               <p className="text-neutral-700 font-medium">{renameStatus}</p>
             </div>
           </div>
@@ -258,7 +258,7 @@ export const EventRenameDialog: React.FC<EventRenameDialogProps> = ({
                     type="checkbox"
                     checked={resendEmail}
                     onChange={(e) => setResendEmail(e.target.checked)}
-                    className="mt-1 w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500"
+                    className="mt-1 w-4 h-4 text-accent border-neutral-300 rounded focus:ring-primary-500"
                   />
                   <div>
                     <span className="text-sm font-medium text-neutral-700 flex items-center gap-1">

frontend/src/components/admin/FeedbackModerationPanel.tsx

@@ -191,7 +191,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
             {pendingComments.length > maxItems && !showAll && (
               <button
                 onClick={() => setShowAll(true)}
-                className="w-full text-center py-2 text-sm text-primary-600 hover:text-primary-700 font-medium"
+                className="w-full text-center py-2 text-sm text-accent hover:opacity-80 font-medium"
               >
                 {t('feedback.showAll', 'Show all {{count}} pending comments', { count: pendingComments.length })}
               </button>
@@ -203,7 +203,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
         <div className="mt-4 pt-4 border-t border-neutral-200">
           <a
             href={`/admin/events/${eventId}/feedback`}
-            className="text-sm text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1"
+            className="text-sm text-accent hover:opacity-80 font-medium flex items-center gap-1"
           >
             <MessageSquare className="w-4 h-4" />
             {t('feedback.viewAllFeedback', 'View all feedback & settings')}

frontend/src/components/admin/FeedbackSettings.tsx

@@ -61,7 +61,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
               type="checkbox"
               checked={settings.feedback_enabled}
               onChange={() => handleToggle('feedback_enabled')}
-              className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+              className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
             />
             <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
               {t('feedback.settings.enableFeedback', 'Enable feedback')}
@@ -80,7 +80,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                 <label
                   className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer border transition ${
                     (settings.identity_mode || 'simple') === 'simple'
-                      ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
+                      ? 'border-accent-dark bg-accent-dark/15'
                       : 'border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                   }`}
                 >
@@ -90,7 +90,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     value="simple"
                     checked={(settings.identity_mode || 'simple') === 'simple'}
                     onChange={() => onChange({ ...settings, identity_mode: 'simple' })}
-                    className="mt-0.5 w-4 h-4 text-primary-600 focus:ring-primary-500"
+                    className="mt-0.5 w-4 h-4 text-accent focus:ring-primary-500"
                   />
                   <User className="w-5 h-5 mt-0.5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -109,7 +109,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                 <label
                   className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer border transition ${
                     settings.identity_mode === 'guest'
-                      ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
+                      ? 'border-accent-dark bg-accent-dark/15'
                       : 'border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                   }`}
                 >
@@ -119,7 +119,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     value="guest"
                     checked={settings.identity_mode === 'guest'}
                     onChange={() => onChange({ ...settings, identity_mode: 'guest' })}
-                    className="mt-0.5 w-4 h-4 text-primary-600 focus:ring-primary-500"
+                    className="mt-0.5 w-4 h-4 text-accent focus:ring-primary-500"
                   />
                   <Users className="w-5 h-5 mt-0.5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -150,7 +150,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     type="checkbox"
                     checked={settings.allow_ratings}
                     onChange={() => handleToggle('allow_ratings')}
-                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+                    className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                   />
                   <Star className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -168,7 +168,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     type="checkbox"
                     checked={settings.allow_likes}
                     onChange={() => handleToggle('allow_likes')}
-                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+                    className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                   />
                   <Heart className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -186,7 +186,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     type="checkbox"
                     checked={settings.allow_comments}
                     onChange={() => handleToggle('allow_comments')}
-                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+                    className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                   />
                   <MessageSquare className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -204,7 +204,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     type="checkbox"
                     checked={settings.allow_favorites}
                     onChange={() => handleToggle('allow_favorites')}
-                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+                    className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                   />
                   <Bookmark className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -232,7 +232,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     type="checkbox"
                     checked={settings.require_name_email}
                     onChange={() => handleToggle('require_name_email')}
-                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+                    className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                   />
                   <div className="flex-1">
                     <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
@@ -250,7 +250,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     checked={settings.moderate_comments}
                     onChange={() => handleToggle('moderate_comments')}
                     disabled={!settings.allow_comments}
-                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 disabled:opacity-50"
+                    className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 disabled:opacity-50"
                   />
                   <Shield className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -268,7 +268,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                     type="checkbox"
                     checked={settings.show_feedback_to_guests}
                     onChange={() => handleToggle('show_feedback_to_guests')}
-                    className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+                    className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                   />
                   <Eye className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
                   <div className="flex-1">
@@ -292,7 +292,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                   type="checkbox"
                   checked={settings.enable_rate_limiting}
                   onChange={() => handleToggle('enable_rate_limiting')}
-                  className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
+                  className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
                 />
                 <div className="flex-1">
                   <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
@@ -316,7 +316,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                       max="60"
                       value={settings.rate_limit_window_minutes || 15}
                       onChange={(e) => handleNumberChange('rate_limit_window_minutes', e.target.value)}
-                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-primary-500"
+                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-accent-dark"
                     />
                   </div>
                   <div>
@@ -329,7 +329,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
                       max="100"
                       value={settings.rate_limit_max_requests || 10}
                       onChange={(e) => handleNumberChange('rate_limit_max_requests', e.target.value)}
-                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-primary-500"
+                      className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-accent-dark"
                     />
                   </div>
                 </div>

frontend/src/components/admin/FocalPointPicker.tsx

@@ -102,7 +102,7 @@ export const FocalPointPicker: React.FC<FocalPointPickerProps> = ({
             onClick={() => onChange(p.value)}
             className={
               keywordToPercent(currentValue) === p.value
-                ? 'bg-primary-50 border-primary-300 text-primary-700'
+                ? 'bg-accent-dark/15 border-accent-dark/30 text-accent-dark'
                 : ''
             }
           >

frontend/src/components/admin/GalleryPreview.tsx

@@ -166,7 +166,7 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
             </div>
             <div className="flex justify-center gap-1 mt-3">
               {[0, 1, 2, 3].map((idx) => (
-                <div key={idx} className={`w-2 h-2 rounded-full ${idx === 0 ? 'bg-primary-600' : 'bg-neutral-300'}`} />
+                <div key={idx} className={`w-2 h-2 rounded-full ${idx === 0 ? 'bg-accent-dark' : 'bg-neutral-300'}`} />
               ))}
             </div>
           </div>

frontend/src/components/admin/GuestInviteDialog.tsx

@@ -161,7 +161,7 @@ export const GuestInviteDialog: React.FC<GuestInviteDialogProps> = ({ eventId, o
                             <button
                               type="button"
                               onClick={() => copy(invite)}
-                              className="p-1.5 text-neutral-500 hover:text-primary-600"
+                              className="p-1.5 text-neutral-500 hover:text-accent"
                               title={t('admin.guests.copyLink', 'Copy link')}
                             >
                               {copiedId === invite.id ? (

frontend/src/components/admin/GuestSelectionsAggregate.tsx

@@ -54,7 +54,7 @@ export const GuestSelectionsAggregate: React.FC<GuestSelectionsAggregateProps> =
               alt={p.filename}
               className="w-full aspect-square object-cover rounded"
             />
-            <div className="absolute top-2 right-2 bg-primary-600 text-white text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1 shadow">
+            <div className="absolute top-2 right-2 bg-accent-dark text-white text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1 shadow">
               <Users className="w-3 h-3" />
               {p.picker_count}
             </div>

frontend/src/components/admin/HeroPhotoSelector.tsx

@@ -132,7 +132,7 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({
                       onClick={() => handleSelect(photo.id)}
                       className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${
                         photo.id === selectedPhotoId
-                          ? 'border-primary-500 ring-2 ring-primary-500 ring-offset-2'
+                          ? 'border-accent-dark ring-2 ring-primary-500 ring-offset-2'
                           : 'border-transparent hover:border-neutral-300'
                       }`}
                     >
@@ -144,7 +144,7 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({
                         />
                       </div>
                       {photo.id === selectedPhotoId && (
-                        <div className="absolute top-2 right-2 bg-primary-500 text-white rounded-full p-1">
+                        <div className="absolute top-2 right-2 bg-accent-dark/150 text-white rounded-full p-1">
                           <Check className="w-4 h-4" />
                         </div>
                       )}

frontend/src/components/admin/PasswordResetModal.tsx

@@ -163,7 +163,7 @@ export const PasswordResetModal: React.FC<PasswordResetModalProps> = ({
                   type="checkbox"
                   checked={sendEmail}
                   onChange={(e) => setSendEmail(e.target.checked)}
-                  className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 focus:ring-2"
+                  className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 focus:ring-2"
                 />
                 <div className="flex-1">
                   <div className="flex items-center gap-2">

frontend/src/components/admin/PhotoExportMenu.tsx

@@ -126,7 +126,7 @@ export const PhotoExportMenu: React.FC<PhotoExportMenuProps> = ({
         )}
         {t('export.button', 'Export')}
         {hasSelection && (
-          <span className="bg-primary-100 text-primary-700 text-xs px-2 py-0.5 rounded-full">
+          <span className="bg-accent-dark/15 text-accent-dark text-xs px-2 py-0.5 rounded-full">
             {selectedPhotoIds.length}
           </span>
         )}

frontend/src/components/admin/PhotoFilterPanel.tsx

@@ -85,7 +85,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
           <select
             value={filters.minRating ?? ''}
             onChange={(e) => handleRatingChange(e.target.value === '' ? null : parseFloat(e.target.value))}
-            className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
             disabled={isLoading}
           >
             {RATING_OPTIONS.map(option => (
@@ -103,7 +103,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
               type="checkbox"
               checked={filters.hasLikes || false}
               onChange={() => handleCheckboxChange('hasLikes')}
-              className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
+              className="rounded border-neutral-300 text-accent focus:ring-primary-500"
               disabled={isLoading}
             />
             <Heart className="w-4 h-4 text-red-500" />
@@ -120,7 +120,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
               type="checkbox"
               checked={filters.hasFavorites || false}
               onChange={() => handleCheckboxChange('hasFavorites')}
-              className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
+              className="rounded border-neutral-300 text-accent focus:ring-primary-500"
               disabled={isLoading}
             />
             <Bookmark className="w-4 h-4 text-yellow-500" />
@@ -137,7 +137,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
               type="checkbox"
               checked={filters.hasComments || false}
               onChange={() => handleCheckboxChange('hasComments')}
-              className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
+              className="rounded border-neutral-300 text-accent focus:ring-primary-500"
               disabled={isLoading}
             />
             <MessageCircle className="w-4 h-4 text-blue-500" />

frontend/src/components/admin/PhotoFilters.tsx

@@ -60,7 +60,7 @@ export const PhotoFilters: React.FC<PhotoFiltersProps> = ({
               const numeric = Number(raw);
               onCategoryChange(Number.isNaN(numeric) ? raw : numeric);
             }}
-            className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
           >
             <option value="">{t('gallery.allCategories', 'All Categories')}</option>
             <option value="0">{t('gallery.uncategorized', 'Uncategorized')}</option>
@@ -78,7 +78,7 @@ export const PhotoFilters: React.FC<PhotoFiltersProps> = ({
             <select
               value={mediaType}
               onChange={(e) => onMediaTypeChange(e.target.value as 'all' | 'photo' | 'video')}
-              className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+              className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
             >
               <option value="all">{t('gallery.allMedia', 'All media')}</option>
               <option value="photo">{t('gallery.photosOnly', 'Photos only')}</option>
@@ -92,7 +92,7 @@ export const PhotoFilters: React.FC<PhotoFiltersProps> = ({
           <select
             value={sortBy}
             onChange={(e) => onSortChange(e.target.value as 'date' | 'name' | 'size' | 'rating', sortOrder)}
-            className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+            className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
           >
             <option value="date">{t('gallery.sortByDate', 'Sort by Date')}</option>
             <option value="name">{t('gallery.sortByName', 'Sort by Name')}</option>

frontend/src/components/admin/PhotoUpload.tsx

@@ -342,7 +342,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
           id="replace-by-name"
           checked={replaceByName}
           onChange={(e) => setReplaceByName(e.target.checked)}
-          className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
+          className="rounded border-neutral-300 text-accent focus:ring-primary-500"
         />
         <label htmlFor="replace-by-name" className="text-sm text-neutral-700 dark:text-neutral-300">
           {t('upload.replaceByName', 'Replace existing photos with same name')}
@@ -353,8 +353,8 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
       <div
         className={clsx(
           "border-2 border-dashed rounded-lg p-8 text-center transition-colors",
-          "hover:border-primary-400 hover:bg-primary-50/50",
-          selectedFiles.length > 0 ? "border-primary-400 bg-primary-50/30 dark:bg-primary-900/20" : "border-neutral-300 dark:border-neutral-600"
+          "hover:border-accent-dark hover:bg-accent-dark/15",
+          selectedFiles.length > 0 ? "border-accent-dark bg-accent-dark/15" : "border-neutral-300 dark:border-neutral-600"
         )}
         onClick={() => fileInputRef.current?.click()}
       >
@@ -496,7 +496,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
               </div>
               <div className="w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-2">
                 <div
-                  className="bg-primary-600 h-2 rounded-full transition-all duration-300"
+                  className="bg-accent-dark h-2 rounded-full transition-all duration-300"
                   style={{ width: `${uploadProgress}%` }}
                 />
               </div>

frontend/src/components/admin/RestoreWizard.jsx

@@ -196,7 +196,7 @@ export const RestoreWizard = () => {
           onClick={() => setRestoreData(prev => ({ ...prev, source: 'local' }))}
           className={`p-6 rounded-lg border-2 transition-all ${
             restoreData.source === 'local'
-              ? 'border-primary bg-primary-50 dark:bg-primary-900/30'
+              ? 'border-primary bg-accent-dark/15'
               : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
           }`}
         >
@@ -211,7 +211,7 @@ export const RestoreWizard = () => {
           onClick={() => setRestoreData(prev => ({ ...prev, source: 's3' }))}
           className={`p-6 rounded-lg border-2 transition-all ${
             restoreData.source === 's3'
-              ? 'border-primary bg-primary-50 dark:bg-primary-900/30'
+              ? 'border-primary bg-accent-dark/15'
               : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
           }`}
         >
@@ -226,7 +226,7 @@ export const RestoreWizard = () => {
           onClick={() => setRestoreData(prev => ({ ...prev, source: 'upload' }))}
           className={`p-6 rounded-lg border-2 transition-all ${
             restoreData.source === 'upload'
-              ? 'border-primary bg-primary-50 dark:bg-primary-900/30'
+              ? 'border-primary bg-accent-dark/15'
               : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
           }`}
         >
@@ -312,7 +312,7 @@ export const RestoreWizard = () => {
               key={backup.id}
               className={`p-4 cursor-pointer transition-all ${
                 restoreData.selectedBackup?.id === backup.id
-                  ? 'ring-2 ring-primary bg-primary-50 dark:bg-primary-900/30'
+                  ? 'ring-2 ring-primary bg-accent-dark/15'
                   : 'hover:shadow-md'
               }`}
               onClick={() => setRestoreData(prev => ({ ...prev, selectedBackup: backup }))}
@@ -388,7 +388,7 @@ export const RestoreWizard = () => {
               onClick={() => setRestoreData(prev => ({ ...prev, restoreType: type.id }))}
               className={`p-4 rounded-lg border-2 text-left transition-all ${
                 restoreData.restoreType === type.id
-                  ? 'border-primary bg-primary-50 dark:bg-primary-900/30'
+                  ? 'border-primary bg-accent-dark/15'
                   : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
               }`}
             >

frontend/src/components/admin/ThemeCustomizer.tsx

@@ -100,14 +100,14 @@ export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
               onClick={() => handlePresetSelect(key)}
               className={`relative p-4 rounded-lg border-2 transition-all ${
                 selectedPreset === key
-                  ? 'border-primary-600 bg-primary-50'
+                  ? 'tile-selected'
                   : 'border-neutral-200 hover:border-neutral-300'
               }`}
             >
               <div className="flex items-center justify-between mb-2">
                 <span className="font-medium text-sm">{theme.name}</span>
                 {selectedPreset === key && (
-                  <Check className="w-4 h-4 text-primary-600" />
+                  <Check className="w-4 h-4 text-accent" />
                 )}
               </div>
               <div className="flex gap-2">
@@ -247,7 +247,7 @@ export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
                   onClick={() => handleChange('borderRadius', radius)}
                   className={`px-4 py-2 rounded-lg border-2 transition-all ${
                     localTheme.borderRadius === radius
-                      ? 'border-primary-600 bg-primary-50'
+                      ? 'tile-selected'
                       : 'border-neutral-200 hover:border-neutral-300'
                   }`}
                 >

frontend/src/components/admin/ThemeEditorModal.tsx

@@ -169,7 +169,7 @@ export const ThemeEditorModal: React.FC<ThemeEditorModalProps> = ({
                         onClick={() => setPreviewLayout(layout)}
                         className={`relative p-3 rounded-lg border-2 transition-all ${
                           (previewLayout || theme.galleryLayout || 'grid') === layout
-                            ? 'border-primary-600 bg-primary-50 dark:bg-primary-900/40'
+                            ? 'tile-selected'
                             : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 bg-white dark:bg-neutral-900'
                         }`}
                       >
@@ -185,7 +185,7 @@ export const ThemeEditorModal: React.FC<ThemeEditorModalProps> = ({
                           </span>
                         </div>
                         {(previewLayout || theme.galleryLayout || 'grid') === layout && (
-                          <Check className="absolute top-1 right-1 w-3 h-3 text-primary-600" />
+                          <Check className="absolute top-1 right-1 w-3 h-3 text-accent" />
                         )}
                       </button>
                     ))}

frontend/src/components/admin/WelcomeMessageEditor.tsx

@@ -43,7 +43,7 @@ export const WelcomeMessageEditor: React.FC<WelcomeMessageEditorProps> = ({
           onChange={handleChange}
           placeholder={placeholder}
           rows={rows}
-          className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none font-mono text-sm"
+          className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark transition-colors resize-none font-mono text-sm"
         />
         <div className="absolute top-2 right-2 text-neutral-400" title="Line breaks will be preserved in emails">
           <HelpCircle className="w-4 h-4" aria-hidden="true" />

frontend/src/components/admin/WordFilterManager.tsx

@@ -300,7 +300,7 @@ export const WordFilterManager: React.FC = () => {
                           type="checkbox"
                           checked={filter.is_active}
                           onChange={() => handleToggleActive(filter)}
-                          className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
+                          className="w-4 h-4 text-accent rounded focus:ring-primary-500"
                         />
                         <span className="font-medium text-neutral-900 dark:text-neutral-100">{filter.word}</span>
                         <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getSeverityBadgeClass(filter.severity)}`}>