UI System

┌─────────────────────────────────────────────┐
│                 App Shell                    │
│  ┌─────────┬──────────┬──────────┬────────┐ │
│  │Dashboard│Schedules │Reminders │Settings│ │
│  └────┬────┴────┬─────┴────┬─────┴───┬────┘ │
│       │         │          │         │       │
│   Overview   Schedule   Reminder   Profile  │
│   Feed       Grid       List       Theme    │
│              Detail     Detail     About    │
│              Edit       Edit       Devices  │
└─────────────────────────────────────────────┘

final router = GoRouter(
  initialLocation: '/dashboard',
  redirect: _authGuard,
  routes: [
    // Auth routes (no shell)
    GoRoute(path: '/auth/sign-in', builder: (_, __) => SignInScreen()),
    GoRoute(path: '/auth/sign-up', builder: (_, __) => SignUpScreen()),

    // Main app (with bottom nav shell)
    ShellRoute(
      builder: (_, __, child) => AppShell(child: child),
      routes: [
        GoRoute(
          path: '/dashboard',
          builder: (_, __) => DashboardScreen(),
        ),
        GoRoute(
          path: '/schedules',
          builder: (_, __) => ScheduleListScreen(),
          routes: [
            GoRoute(
              path: ':id',
              builder: (_, state) => ScheduleDetailScreen(
                id: state.pathParameters['id']!,
              ),
            ),
          ],
        ),
        GoRoute(
          path: '/reminders',
          builder: (_, __) => ReminderListScreen(),
        ),
        GoRoute(
          path: '/settings',
          builder: (_, __) => SettingsScreen(),
        ),
      ],
    ),
  ],
);

// lib/ui/theme/app_colors.dart
class AppColors {
  // Primary
  static const primary = Color(0xFF007AFF);      // iOS blue
  static const primaryLight = Color(0xFF4DA3FF);
  static const primaryDark = Color(0xFF0055B3);

  // Semantic
  static const success = Color(0xFF34C759);
  static const warning = Color(0xFFFF9500);
  static const error = Color(0xFFFF3B30);

  // Neutral
  static const background = Color(0xFFF2F2F7);
  static const surface = Color(0xFFFFFFFF);
  static const textPrimary = Color(0xFF000000);
  static const textSecondary = Color(0xFF8E8E93);
  static const separator = Color(0xFFC6C6C8);

  // Dark mode variants
  static const backgroundDark = Color(0xFF000000);
  static const surfaceDark = Color(0xFF1C1C1E);
  static const textPrimaryDark = Color(0xFFFFFFFF);
  static const textSecondaryDark = Color(0xFF8E8E93);
}

// lib/ui/theme/app_typography.dart
class AppTypography {
  static const headline = TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    letterSpacing: -0.5,
  );
  static const title = TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w600,
  );
  static const body = TextStyle(
    fontSize: 17,
    fontWeight: FontWeight.normal,
    height: 1.4,
  );
  static const caption = TextStyle(
    fontSize: 13,
    fontWeight: FontWeight.normal,
    color: AppColors.textSecondary,
  );
}

// lib/ui/theme/app_spacing.dart
class AppSpacing {
  static const xs = 4.0;
  static const sm = 8.0;
  static const md = 16.0;
  static const lg = 24.0;
  static const xl = 32.0;
  static const xxl = 48.0;
}

MaterialApp.router(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: AppColors.primary),
    scaffoldBackgroundColor: AppColors.background,
    appBarTheme: AppBarTheme(
      backgroundColor: AppColors.surface,
      foregroundColor: AppColors.textPrimary,
      elevation: 0,
    ),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: AppColors.primary,
      brightness: Brightness.dark,
    ),
    scaffoldBackgroundColor: AppColors.backgroundDark,
  ),
  routerConfig: router,
)

// Semantic labels for all interactive elements
Semantics(
  label: 'Delete class: CS 101',
  hint: 'Double tap to delete this class',
  button: true,
  child: IconButton(
    icon: Icon(Icons.delete),
    onPressed: () => _deleteClass(classItem),
  ),
)

// Excluding decorative elements
Semantics(
  excludeSemantics: true,
  child: DecorativeIcon(Icons.star),
)