refactor: switch to brighter yellow-300 for highlight defaults and add semantic color aliases

src/components/Settings/ReadingDisplaySettings.tsx

@@ -73,7 +73,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         <label className="setting-label">My Highlights</label>
         <div className="setting-control">
           <ColorPicker
-            selectedColor={settings.highlightColorMine || '#facc15'}
+            selectedColor={settings.highlightColorMine || '#fde047'}
             onColorChange={(color) => onUpdate({ highlightColorMine: color })}
           />
         </div>

src/components/ThreePaneLayout.tsx

@@ -252,7 +252,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             right: 'calc(1rem + env(safe-area-inset-right))',
             width: '40px',
             height: '40px',
-            backgroundColor: `${props.settings.highlightColorMine || '#facc15'}B3`,
+            backgroundColor: `${props.settings.highlightColorMine || '#fde047'}B3`,
             color: '#000'
           }}
           onClick={props.onToggleHighlightsPanel}

src/hooks/useSettings.ts

@@ -61,7 +61,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       root.setProperty('--reading-font-size', `${settings.fontSize || 21}px`)
       
       // Set highlight colors for three levels
-      root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#facc15')
+      root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#fde047')
       root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
       root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
       

src/styles/base/variables.css

@@ -18,11 +18,11 @@
   --reading-font-size: 18px;
   
   /* Highlight color variables (user-settable) */
-  /* Defaults use Tailwind color palette: yellow-400, orange-500, purple-600 */
-  --highlight-color-mine: #facc15;      /* yellow-400 (was #ffff00) */
-  --highlight-color-friends: #f97316;   /* orange-500 (Tailwind native) */
-  --highlight-color-nostrverse: #9333ea; /* purple-600 (Tailwind native) */
-  --highlight-color: #facc15;           /* Default highlight color */
+  /* Defaults use Tailwind color palette: yellow-300, orange-500, purple-600 */
+  --highlight-color-mine: #fde047;      /* yellow-300 */
+  --highlight-color-friends: #f97316;   /* orange-500 */
+  --highlight-color-nostrverse: #9333ea; /* purple-600 */
+  --highlight-color: #fde047;           /* Default highlight color */
   
   /* Layout variables */
   --sidebar-width: 320px;

src/styles/components/me.css

@@ -39,8 +39,8 @@
 
 /* Highlights tab uses the user's custom "my highlights" color */
 .me-tab[data-tab="highlights"].active {
-  color: var(--highlight-color-mine, rgb(250 204 21)); /* yellow-400 */
-  border-bottom-color: var(--highlight-color-mine, rgb(250 204 21)); /* yellow-400 */
+  color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */
+  border-bottom-color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */
 }
 
 /* Reading List tab uses blue color to match bookmarks icon */

src/utils/colorHelpers.ts

@@ -8,7 +8,7 @@ export function hexToRgb(hex: string): string {
 
 // Tailwind color palette for highlight colors
 export const HIGHLIGHT_COLORS = [
-  { name: 'Yellow', value: '#facc15' },  // yellow-400
+  { name: 'Yellow', value: '#fde047' },  // yellow-300
   { name: 'Orange', value: '#f97316' },  // orange-500
   { name: 'Pink', value: '#ec4899' },    // pink-500
   { name: 'Green', value: '#22c55e' },   // green-500

tailwind.config.js

@@ -18,6 +18,9 @@ export default {
         'app-text-muted': '#71717a',   // zinc-500
         'primary': '#6366f1',          // indigo-500
         'primary-hover': '#4f46e5',    // indigo-600
+        'highlight-mine': '#fde047',   // yellow-300
+        'highlight-friends': '#f97316', // orange-500
+        'highlight-nostrverse': '#9333ea', // purple-600
       },
       keyframes: {
         shimmer: {