Polish navigation, Quran flows, and sharing UX

lib/app/theme/app_colors.dart

@@ -4,29 +4,55 @@ import 'package:flutter/material.dart';
 class AppColors {
   AppColors._();
 
-  // ── Primary ──
-  static const Color primary = Color(0xFF70DF20);
-  static const Color onPrimary = Color(0xFF0A1A00);
+  // ── Brand tokens: logo palette (teal + gold) ──
+  static const Color brandTeal500 = Color(0xFF118A8D);
+  static const Color brandTeal700 = Color(0xFF0C676A);
+  static const Color brandTeal900 = Color(0xFF0A4447);
 
-  // ── Background ──
-  static const Color backgroundLight = Color(0xFFF7F8F6);
-  static const Color backgroundDark = Color(0xFF182111);
+  static const Color brandGold200 = Color(0xFFF6DE96);
+  static const Color brandGold300 = Color(0xFFE9C75B);
+  static const Color brandGold400 = Color(0xFFD6A21D);
+  static const Color brandGold700 = Color(0xFF8B6415);
+
+  // ── Theme base tokens ──
+  static const Color backgroundLight = Color(0xFFF3F4F6);
+  static const Color backgroundDark = Color(0xFF0F1217);
 
-  // ── Surface ──
   static const Color surfaceLight = Color(0xFFFFFFFF);
-  static const Color surfaceDark = Color(0xFF1E2A14);
+  static const Color surfaceLightElevated = Color(0xFFF9FAFB);
 
-  // ── Sage (secondary text / section labels) ──
-  static const Color sage = Color(0xFF728764);
+  static const Color surfaceDark = Color(0xFF171B22);
+  static const Color surfaceDarkElevated = Color(0xFF1D222B);
 
-  // ── Cream (dividers, borders — light mode only) ──
-  static const Color cream = Color(0xFFF2F4F0);
+  static const Color textPrimaryLight = Color(0xFF1F2937);
+  static const Color textPrimaryDark = Color(0xFFE8ECF2);
+  static const Color textSecondaryLight = Color(0xFF6B7280);
+  static const Color textSecondaryDark = Color(0xFF9AA4B2);
 
-  // ── Text ──
-  static const Color textPrimaryLight = Color(0xFF1A2A0A);
-  static const Color textPrimaryDark = Color(0xFFF2F4F0);
-  static const Color textSecondaryLight = Color(0xFF64748B);
-  static const Color textSecondaryDark = Color(0xFF94A3B8);
+  // ── Compatibility aliases (existing UI references) ──
+  static const Color primary = brandTeal500;
+  static const Color onPrimary = Color(0xFFFFFFFF);
+  static const Color sage = brandTeal700;
+  static const Color cream = Color(0xFFE5E7EB);
+
+  // ── Luxury active-state tokens ──
+  static const Color navActiveGold = brandGold400;
+  static const Color navActiveGoldBright = brandGold300;
+  static const Color navActiveGoldPale = brandGold200;
+  static const Color navActiveGoldDeep = brandGold700;
+
+  static const Color navActiveSurfaceDark = surfaceDarkElevated;
+  static const Color navActiveSurfaceLight = surfaceLight;
+
+  static const Color navGlowDark = Color(0x5CD6A21D);
+  static const Color navGlowLight = Color(0x36D6A21D);
+  static const Color navShadowLight = Color(0x1F0F172A);
+  static const Color navStrokeNeutralDark = Color(0x33FFFFFF);
+  static const Color navStrokeNeutralLight = Color(0x220F172A);
+
+  static const Color navEmbossHighlight = Color(0xE6FFFFFF);
+  static const Color navEmbossShadow = Color(0x2B0F172A);
+  static const Color navEmbossGoldShadow = Color(0x42B88912);
 
   // ── Semantic ──
   static const Color errorLight = Color(0xFFEF4444);
@@ -36,25 +62,29 @@ class AppColors {
 
   // ── Convenience helpers for theme building ──
 
-  static ColorScheme get lightColorScheme => ColorScheme.light(
+  static ColorScheme get lightColorScheme => const ColorScheme.light(
         primary: primary,
         onPrimary: onPrimary,
+        primaryContainer: brandTeal700,
+        onPrimaryContainer: Colors.white,
         surface: surfaceLight,
         onSurface: textPrimaryLight,
         error: errorLight,
         onError: Colors.white,
-        secondary: sage,
-        onSecondary: Colors.white,
+        secondary: navActiveGold,
+        onSecondary: brandGold700,
       );
 
-  static ColorScheme get darkColorScheme => ColorScheme.dark(
+  static ColorScheme get darkColorScheme => const ColorScheme.dark(
         primary: primary,
         onPrimary: onPrimary,
+        primaryContainer: brandTeal900,
+        onPrimaryContainer: textPrimaryDark,
         surface: surfaceDark,
         onSurface: textPrimaryDark,
         error: errorDark,
         onError: Colors.black,
-        secondary: sage,
-        onSecondary: Colors.white,
+        secondary: navActiveGold,
+        onSecondary: brandGold200,
       );
 }

lib/app/theme/app_text_styles.dart

@@ -1,11 +1,22 @@
 import 'package:flutter/material.dart';
 
 /// Typography definitions from PRD §3.2.
-/// Plus Jakarta Sans (bundled) for UI text, Amiri (bundled) for Arabic content.
+/// Plus Jakarta Sans (bundled) for UI text.
+/// Scheherazade New (bundled) for Arabic/Quran text, with Uthman/KFGQPC fallback.
 class AppTextStyles {
   AppTextStyles._();
 
   static const String _fontFamily = 'PlusJakartaSans';
+  static const String _arabicFontFamily = 'ScheherazadeNew';
+  static const List<String> _arabicFallbackFamilies = <String>[
+    'UthmanTahaNaskh',
+    'KFGQPCUthmanicHafs',
+    'Amiri',
+    'Noto Naskh Arabic',
+    'Noto Sans Arabic',
+    'Droid Arabic Naskh',
+    'sans-serif',
+  ];
 
   /// Builds the full TextTheme for the app using bundled Plus Jakarta Sans.
   static const TextTheme textTheme = TextTheme(
@@ -52,19 +63,21 @@ class AppTextStyles {
     ),
   );
 
-  // ── Arabic text styles (Amiri — bundled font) ──
+  // ── Arabic text styles (Scheherazade New — bundled font) ──
 
   static const TextStyle arabicBody = TextStyle(
-    fontFamily: 'Amiri',
+    fontFamily: _arabicFontFamily,
+    fontFamilyFallback: _arabicFallbackFamilies,
     fontSize: 24,
     fontWeight: FontWeight.w400,
-    height: 2.0,
+    height: 1.8,
   );
 
   static const TextStyle arabicLarge = TextStyle(
-    fontFamily: 'Amiri',
+    fontFamily: _arabicFontFamily,
+    fontFamilyFallback: _arabicFallbackFamilies,
     fontSize: 28,
     fontWeight: FontWeight.w400,
-    height: 2.2,
+    height: 2.0,
   );
 }

lib/app/theme/app_theme.dart

@@ -29,17 +29,17 @@ class AppTheme {
         ),
         bottomNavigationBarTheme: const BottomNavigationBarThemeData(
           backgroundColor: AppColors.surfaceLight,
-          selectedItemColor: AppColors.primary,
+          selectedItemColor: AppColors.navActiveGoldDeep,
           unselectedItemColor: AppColors.textSecondaryLight,
           type: BottomNavigationBarType.fixed,
           elevation: 0,
         ),
         cardTheme: CardThemeData(
-          color: AppColors.surfaceLight,
+          color: AppColors.surfaceLightElevated,
           elevation: 0,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(16),
-            side: BorderSide(
+            side: const BorderSide(
               color: AppColors.cream,
             ),
           ),
@@ -70,21 +70,21 @@ class AppTheme {
         ),
         bottomNavigationBarTheme: const BottomNavigationBarThemeData(
           backgroundColor: AppColors.surfaceDark,
-          selectedItemColor: AppColors.primary,
+          selectedItemColor: AppColors.navActiveGold,
           unselectedItemColor: AppColors.textSecondaryDark,
           type: BottomNavigationBarType.fixed,
           elevation: 0,
         ),
         cardTheme: CardThemeData(
-          color: AppColors.surfaceDark,
+          color: AppColors.surfaceDarkElevated,
           elevation: 0,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(16),
             side: BorderSide(
-              color: AppColors.primary.withValues(alpha: 0.1),
+              color: AppColors.brandTeal500.withValues(alpha: 0.22),
             ),
           ),
         ),
-        dividerColor: AppColors.surfaceDark,
+        dividerColor: AppColors.surfaceDarkElevated,
       );
 }