✨ Add default Light theme and theme-aware map tiles

📝 Summary:
Changes default theme from "System" to "Light Mode" for first-time users.
Implements theme-aware map tiles that automatically switch appearance based
on the current app theme using CartoDB Voyager with color inversion for dark mode.

🔧 Changes:
- 🌞 Set default theme to Light Mode (was System)
- 🗺️ Add theme-aware map tiles with inverted Voyager for dark mode
- 🎨 Implement ColorFiltered widget to invert light tiles in dark theme
- 📚 Add comprehensive CartoDB basemap research documentation
- ✅ Update tests for new default theme setting

📁 Files Changed:
- lib/main.dart (default theme fallback)
- lib/src/services/settings_service.dart (default theme value)
- lib/src/services/offline/offline_map_service.dart (inverted Voyager tiles)
- lib/src/presentation/widgets/map_selection_widget.dart (dark mode filter)
- lib/src/presentation/screens/map_picker_screen.dart (dark mode filter)
- test/services/settings_service_test.dart (test expectations)
- docs/research/cartodb_basemap_dark_mode_visibility.md (new research doc)

✅ Verification: All 289 tests pass, no analyzer issues

Author: MasuRii

docs/research/cartodb_basemap_dark_mode_visibility.md

@@ -20,7 +20,7 @@ Future<void> main() async {
   // Pre-initialize static notifiers from SharedPreferences to avoid race condition
   // This ensures ValueListenableBuilders have correct values when the widget tree is built
   final prefs = await SharedPreferences.getInstance();
-  final themeMode = prefs.getString('themeMode') ?? 'system';
+  final themeMode = prefs.getString('themeMode') ?? 'light';
   final languageCode = prefs.getString('locale') ?? 'en';
 
   SettingsService.themeModeNotifier.value = themeMode;

lib/main.dart

@@ -249,17 +249,29 @@ class _MapPickerScreenState extends State<MapPickerScreen>
   }
 
   /// Builds the tile layer, using cached tiles when available.
+  /// The tile style automatically adjusts based on the current theme (light/dark).
+  /// For dark mode, CartoDB Voyager tiles are inverted using ColorFiltered.
   Widget _buildTileLayer() {
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
+    Widget tileLayer;
+
     try {
       final offlineMapService = getIt<OfflineMapService>();
-      return offlineMapService.getCachedTileLayer();
+      tileLayer = offlineMapService.getThemedCachedTileLayer(
+        isDarkMode: isDarkMode,
+      );
     } catch (_) {
       // Fall back to network tiles if service not initialized
-      return TileLayer(
-        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-        userAgentPackageName: 'com.ph_fare_calculator',
-      );
+      tileLayer = OfflineMapService.getNetworkTileLayer(isDarkMode: isDarkMode);
     }
+
+    // Apply color inversion for dark mode to create dark appearance from Voyager tiles
+    if (isDarkMode) {
+      return OfflineMapService.wrapWithDarkModeFilter(tileLayer);
+    }
+
+    return tileLayer;
   }
 
   Widget _buildAnimatedCenterPin(ColorScheme colorScheme) {

lib/src/presentation/screens/map_picker_screen.dart

@@ -258,20 +258,35 @@ class _MapSelectionWidgetState extends State<MapSelectionWidget>
   }
 
   /// Builds the tile layer, using cached tiles when available.
+  /// The tile style automatically adjusts based on the current theme (light/dark).
+  /// For dark mode, CartoDB Voyager tiles are inverted using ColorFiltered.
   Widget _buildTileLayer() {
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
+    Widget tileLayer;
+
     if (widget.useCachedTiles) {
       try {
         final offlineMapService = getIt<OfflineMapService>();
-        return offlineMapService.getCachedTileLayer();
+        tileLayer = offlineMapService.getThemedCachedTileLayer(
+          isDarkMode: isDarkMode,
+        );
       } catch (_) {
         // Fall back to network tiles if service not initialized
+        tileLayer = OfflineMapService.getNetworkTileLayer(
+          isDarkMode: isDarkMode,
+        );
       }
+    } else {
+      tileLayer = OfflineMapService.getNetworkTileLayer(isDarkMode: isDarkMode);
     }
 
-    return TileLayer(
-      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-      userAgentPackageName: 'com.ph_fare_calculator',
-    );
+    // Apply color inversion for dark mode to create dark appearance from Voyager tiles
+    if (isDarkMode) {
+      return OfflineMapService.wrapWithDarkModeFilter(tileLayer);
+    }
+
+    return tileLayer;
   }
 
   List<Marker> _buildMarkers(BuildContext context) {

lib/src/presentation/widgets/map_selection_widget.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'dart:math' as math;
 
+import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:flutter_map_tile_caching/flutter_map_tile_caching.dart' as fmtc;
 import 'package:hive/hive.dart';
@@ -532,21 +533,92 @@ class OfflineMapService {
     await _regionsBox?.clear();
   }
 
+  /// CartoDB Voyager tile URL - used for both light and dark mode
+  /// Voyager has excellent road visibility and supports zoom levels 0-20
+  /// For dark mode, we apply a color inversion filter at the widget level
+  static const String _voyagerTileUrl =
+      'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png';
+
+  /// Subdomains for CartoDB tile servers (load balancing)
+  static const List<String> _cartoSubdomains = ['a', 'b', 'c', 'd'];
+
+  /// Color inversion matrix for dark mode
+  /// This inverts the light Voyager tiles to create a dark appearance with visible roads
+  static const ColorFilter darkModeInvertFilter = ColorFilter.matrix(<double>[
+    -1,
+    0,
+    0,
+    0,
+    255,
+    0,
+    -1,
+    0,
+    0,
+    255,
+    0,
+    0,
+    -1,
+    0,
+    255,
+    0,
+    0,
+    0,
+    1,
+    0,
+  ]);
+
+  /// Wraps a widget with the dark mode color inversion filter
+  ///
+  /// Use this to wrap TileLayer widgets when displaying maps in dark mode.
+  /// The filter inverts the light Voyager tiles to create a dark appearance.
+  static Widget wrapWithDarkModeFilter(Widget child) {
+    return ColorFiltered(colorFilter: darkModeInvertFilter, child: child);
+  }
+
   /// Gets a tile layer that uses the FMTC cache.
   ///
   /// Falls back to network tiles when cache misses occur.
+  /// Uses light mode tiles by default.
   TileLayer getCachedTileLayer() {
+    return getThemedCachedTileLayer(isDarkMode: false);
+  }
+
+  /// Gets a theme-aware tile layer that uses the FMTC cache.
+  ///
+  /// Uses CartoDB Voyager tiles for both light and dark mode.
+  /// For dark mode, the calling widget should wrap this with [wrapWithDarkModeFilter].
+  /// Falls back to network tiles when cache misses occur.
+  TileLayer getThemedCachedTileLayer({required bool isDarkMode}) {
     _ensureInitialized();
 
+    // Both light and dark mode use Voyager tiles
+    // Dark mode applies color inversion at the widget level
     return TileLayer(
-      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      urlTemplate: _voyagerTileUrl,
+      subdomains: _cartoSubdomains,
       userAgentPackageName: 'com.ph_fare_calculator',
+      maxZoom: 20, // Voyager supports up to zoom 20
       tileProvider: fmtc.FMTCTileProvider(
         stores: {_storeName: fmtc.BrowseStoreStrategy.readUpdateCreate},
       ),
     );
   }
 
+  /// Gets a tile layer without FMTC caching (for fallback scenarios).
+  ///
+  /// Uses CartoDB Voyager tiles for both light and dark mode.
+  /// For dark mode, the calling widget should wrap this with [wrapWithDarkModeFilter].
+  static TileLayer getNetworkTileLayer({required bool isDarkMode}) {
+    // Both light and dark mode use Voyager tiles
+    // Dark mode applies color inversion at the widget level
+    return TileLayer(
+      urlTemplate: _voyagerTileUrl,
+      subdomains: _cartoSubdomains,
+      userAgentPackageName: 'com.ph_fare_calculator',
+      maxZoom: 20, // Voyager supports up to zoom 20
+    );
+  }
+
   /// Checks if a point is within any downloaded region.
   bool isPointCached(LatLng point) {
     for (final region in _allRegions) {

lib/src/services/offline/offline_map_service.dart

@@ -20,9 +20,8 @@ class SettingsService {
   static const String _keyLastLocationName = 'last_known_location_name';
 
   /// Notifier for theme mode changes. Values: 'system', 'light', 'dark'
-  static final ValueNotifier<String> themeModeNotifier = ValueNotifier(
-    'system',
-  );
+  /// Default is 'light' for first-time users.
+  static final ValueNotifier<String> themeModeNotifier = ValueNotifier('light');
   static final ValueNotifier<Locale> localeNotifier = ValueNotifier(
     const Locale('en'),
   );
@@ -64,10 +63,10 @@ class SettingsService {
   }
 
   /// Get the theme mode preference. Returns 'system', 'light', or 'dark'.
-  /// Default is 'system' (follows device settings).
+  /// Default is 'light' for first-time users.
   Future<String> getThemeMode() async {
     final prefs = await SharedPreferences.getInstance();
-    final value = prefs.getString(_keyThemeMode) ?? 'system';
+    final value = prefs.getString(_keyThemeMode) ?? 'light';
     // Validate the value
     if (value != 'system' && value != 'light' && value != 'dark') {
       return 'system';

lib/src/services/settings_service.dart

@@ -14,7 +14,8 @@ void main() {
   test('Default values are correct', () async {
     expect(await settingsService.getProvincialMode(), false);
     expect(await settingsService.getTrafficFactor(), TrafficFactor.medium);
-    expect(await settingsService.getThemeMode(), 'system');
+    // Default theme is 'light' for first-time users (changed from 'system')
+    expect(await settingsService.getThemeMode(), 'light');
   });
 
   test('Provincial mode is saved and retrieved', () async {