refactor: setup Tailwind color foundation with semantic aliases and updated defaults

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 || '#ffff00'}
+            selectedColor={settings.highlightColorMine || '#facc15'}
             onColorChange={(color) => onUpdate({ highlightColorMine: color })}
           />
         </div>

src/styles/base/variables.css

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

src/utils/colorHelpers.ts

@@ -6,11 +6,12 @@ export function hexToRgb(hex: string): string {
     : '255, 255, 0'
 }
 
+// Tailwind color palette for highlight colors
 export const HIGHLIGHT_COLORS = [
-  { name: 'Yellow', value: '#ffff00' },
+  { name: 'Yellow', value: '#facc15' },  // yellow-400
-  { name: 'Orange', value: '#f97316' },
+  { name: 'Orange', value: '#f97316' },  // orange-500
-  { name: 'Pink', value: '#ff69b4' },
+  { name: 'Pink', value: '#ec4899' },    // pink-500
-  { name: 'Green', value: '#00ff7f' },
+  { name: 'Green', value: '#22c55e' },   // green-500
-  { name: 'Blue', value: '#4da6ff' },
+  { name: 'Blue', value: '#3b82f6' },    // blue-500
-  { name: 'Purple', value: '#9333ea' }
+  { name: 'Purple', value: '#9333ea' }   // purple-600
 ]

tailwind.config.js

@@ -6,6 +6,19 @@ export default {
   ],
   theme: {
     extend: {
+      colors: {
+        // Semantic color aliases for the app
+        'app-bg': '#18181b',           // zinc-900
+        'app-bg-elevated': '#27272a',  // zinc-800
+        'app-bg-subtle': '#1e1e1e',    // Custom between 800-900
+        'app-border': '#3f3f46',       // zinc-700
+        'app-border-subtle': '#52525b', // zinc-600
+        'app-text': '#e4e4e7',         // zinc-200
+        'app-text-secondary': '#a1a1aa', // zinc-400
+        'app-text-muted': '#71717a',   // zinc-500
+        'primary': '#6366f1',          // indigo-500
+        'primary-hover': '#4f46e5',    // indigo-600
+      },
       keyframes: {
         shimmer: {
           '0%': { transform: 'translateX(-100%)' },