Fix font size controls using CSS classes instead of Tailwind utilities

frontend/src/components/BibleReader.tsx

@@ -55,11 +55,11 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
   const getFontSizeClass = () => {
     switch (fontSize) {
       case 'small':
-        return 'text-sm leading-relaxed';
+        return 'font-size-small';
       case 'large':
-        return 'text-2xl leading-relaxed';
+        return 'font-size-large';
       default:
-        return 'text-lg leading-relaxed';
+        return 'font-size-medium';
     }
   };
 

frontend/src/index.css

@@ -16,22 +16,47 @@
 
 @layer components {
   .bible-text {
-    @apply text-lg leading-relaxed text-gray-800 dark:text-gray-200;
-    font-family: 'Georgia', 'Times New Roman', serif;
+    @apply leading-relaxed text-gray-800 dark:text-gray-200;
+    font-family: 'Times New Roman', 'Georgia', serif;
   }
 
   .verse-number {
-    @apply text-sm font-semibold text-blue-600 dark:text-blue-400 mr-1;
+    @apply font-semibold text-blue-600 dark:text-blue-400 mr-1;
     font-family: 'Arial', sans-serif;
   }
 
   .book-title {
     @apply text-2xl font-bold text-center mb-6 text-gray-900 dark:text-gray-100;
-    font-family: 'Georgia', 'Times New Roman', serif;
+    font-family: 'Times New Roman', 'Georgia', serif;
   }
 
   .chapter-title {
     @apply text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300;
-    font-family: 'Georgia', 'Times New Roman', serif;
+    font-family: 'Times New Roman', 'Georgia', serif;
+  }
+
+  /* Font size utility classes that override CSS classes */
+  .font-size-small .bible-text {
+    @apply text-sm;
+  }
+  
+  .font-size-small .verse-number {
+    @apply text-xs;
+  }
+
+  .font-size-medium .bible-text {
+    @apply text-lg;
+  }
+  
+  .font-size-medium .verse-number {
+    @apply text-sm;
+  }
+
+  .font-size-large .bible-text {
+    @apply text-2xl;
+  }
+  
+  .font-size-large .verse-number {
+    @apply text-lg;
   }
 }