complete story 9.1 with qa tests

resources/css/app.css

@@ -9,35 +9,32 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+    /* Font definitions - to be updated in typography story */
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --font-arabic: 'Cairo', 'Tajawal', ui-sans-serif, system-ui, sans-serif;
     --font-english: 'Montserrat', 'Lato', ui-sans-serif, system-ui, sans-serif;
 
-    --color-zinc-50: #fafafa;
-    --color-zinc-100: #f5f5f5;
-    --color-zinc-200: #e5e5e5;
-    --color-zinc-300: #d4d4d4;
-    --color-zinc-400: #a3a3a3;
-    --color-zinc-500: #737373;
-    --color-zinc-600: #525252;
-    --color-zinc-700: #404040;
-    --color-zinc-800: #262626;
-    --color-zinc-900: #171717;
-    --color-zinc-950: #0a0a0a;
-
-    --color-accent: var(--color-neutral-800);
-    --color-accent-content: var(--color-neutral-800);
-    --color-accent-foreground: var(--color-white);
-
-    /* Brand colors from PRD */
+    /* Primary Brand Colors */
     --color-navy: #0A1F44;
     --color-gold: #D4AF37;
+
+    /* Supporting Colors */
     --color-gold-light: #F4E4B8;
     --color-cream: #F9F7F4;
     --color-charcoal: #2C3E50;
+
+    /* Status Colors */
     --color-success: #27AE60;
     --color-danger: #E74C3C;
     --color-warning: #F39C12;
+
+    /* Semantic Aliases - used by components */
+    --color-primary: var(--color-navy);
+    --color-accent: var(--color-gold);
+    --color-accent-content: var(--color-gold);
+    --color-accent-foreground: var(--color-navy);
+    --color-background: var(--color-cream);
+    --color-text: var(--color-charcoal);
 }
 
 @layer theme {