complete story 9.2 with qa tests

resources/css/app.css

@@ -1,3 +1,6 @@
+/* Google Fonts - Cairo (Arabic) and Montserrat (English) */
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Montserrat:wght@300;400;600;700&display=swap');
+
 @import 'tailwindcss';
 @import '../../vendor/livewire/flux/dist/flux.css';
 
@@ -14,6 +17,16 @@
     --font-arabic: 'Cairo', 'Tajawal', ui-sans-serif, system-ui, sans-serif;
     --font-english: 'Montserrat', 'Lato', ui-sans-serif, system-ui, sans-serif;
 
+    /* Font Size Scale */
+    --font-size-xs: 0.75rem;     /* 12px */
+    --font-size-sm: 0.875rem;    /* 14px - Small text */
+    --font-size-base: 1rem;      /* 16px - Body text */
+    --font-size-lg: 1.125rem;    /* 18px */
+    --font-size-xl: 1.25rem;     /* 20px */
+    --font-size-2xl: 1.5rem;     /* 24px - H3 */
+    --font-size-3xl: 2rem;       /* 32px - H2 */
+    --font-size-4xl: 2.5rem;     /* 40px - H1 */
+
     /* Primary Brand Colors */
     --color-navy: #0A1F44;
     --color-gold: #D4AF37;
@@ -89,3 +102,41 @@ select:focus[data-flux-control] {
 .prose-navy a:hover {
     color: var(--color-gold-light);
 }
+
+/* Dynamic Font Selection based on language */
+html[lang="ar"] body {
+    font-family: var(--font-arabic);
+}
+
+html[lang="en"] body {
+    font-family: var(--font-english);
+}
+
+/* Typography Base Styles */
+body {
+    font-size: var(--font-size-base);
+    line-height: 1.6;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.3;
+}
+
+h1 {
+    font-size: var(--font-size-4xl);
+    font-weight: 700;
+}
+
+h2 {
+    font-size: var(--font-size-3xl);
+    font-weight: 600;
+}
+
+h3 {
+    font-size: var(--font-size-2xl);
+    font-weight: 600;
+}
+
+small, .text-sm {
+    font-size: var(--font-size-sm);
+}