Rebuild UI on the Noo design system

Replaces the Material 3 screens with the Noo design system: warm
neutrals, one violet accent, pill controls, Schibsted Grotesk/
Instrument Sans, Lucide icons, no gradients/shadows.

- New lib/widgets/noo/ component kit (core, lists, files, media, nav,
  overlays) plus lib/theme/design_tokens.dart for the color/type/space/
  radius/motion tokens.
- Rebuilt the app shell (top/bottom bars, drawer, desktop sidebar and
  toolbar), every tab (Files/Offline, Photos, Favorites, Recent,
  Activity, Trash, Shares), Settings, the lock and login screens, the
  media viewer, search, the details/share sheets, and the share-upload
  and move/copy destination pickers.
- Added a design canvas (linked from DESIGN_SYSTEM.md) covering the
  screens the spec didn't already describe, with matching Android and
  iOS chrome; wrote up the approved recipes into DESIGN_SYSTEM.md §4.
- Removed now-dead legacy widgets (media_grid_tile, swipeable_item,
  sync_status_badge, selectable_thumbnail) and updated
  architecture.md/styling.md/standards.md to describe the new
  structure and component/testing conventions.
- Added widget tests for the noo/ component kit.

This is a UI-only rework: no provider/model/service behavior changed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

lib/theme/app_theme.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'design_tokens.dart';
 
 class AppTheme {
   static const Color defaultNextcloudBlue = Color(0xFF0082C9);
@@ -30,6 +31,49 @@ class AppTheme {
     Color(0xFF2E7D32), // Emerald Green
   ];
 
+  // Design-system typefaces (DESIGN_SYSTEM.md 1.3): Schibsted Grotesk for
+  // headings, Instrument Sans for UI/body text. Applied over Flutter's
+  // default TextTheme slots app-wide - screens not yet reworked to the
+  // design system's own named type scale (`NooText`) still benefit from
+  // the new typefaces immediately instead of staying on Inter until their
+  // turn comes.
+  static TextTheme _textTheme(Brightness brightness) {
+    final base = brightness == Brightness.light
+        ? ThemeData.light().textTheme
+        : ThemeData.dark().textTheme;
+    return GoogleFonts.instrumentSansTextTheme(base).copyWith(
+      displayLarge: GoogleFonts.schibstedGrotesk(
+        textStyle: base.displayLarge,
+        fontWeight: FontWeight.w600,
+      ),
+      displayMedium: GoogleFonts.schibstedGrotesk(
+        textStyle: base.displayMedium,
+        fontWeight: FontWeight.w600,
+      ),
+      displaySmall: GoogleFonts.schibstedGrotesk(
+        textStyle: base.displaySmall,
+        fontWeight: FontWeight.w600,
+      ),
+      headlineLarge: GoogleFonts.schibstedGrotesk(
+        textStyle: base.headlineLarge,
+        fontWeight: FontWeight.w600,
+      ),
+      headlineMedium: GoogleFonts.schibstedGrotesk(
+        fontWeight: FontWeight.w600,
+        letterSpacing: -0.5,
+      ),
+      headlineSmall: GoogleFonts.schibstedGrotesk(
+        textStyle: base.headlineSmall,
+        fontWeight: FontWeight.w600,
+      ),
+      titleLarge: GoogleFonts.schibstedGrotesk(
+        fontWeight: FontWeight.w600,
+        letterSpacing: -0.2,
+      ),
+      titleMedium: GoogleFonts.schibstedGrotesk(fontWeight: FontWeight.w500),
+    );
+  }
+
   static ThemeData light(
     Color seedColor, {
     ColorScheme? dynamicScheme,
@@ -41,26 +85,19 @@ class AppTheme {
             seedColor: seedColor,
             brightness: Brightness.light,
           );
+    final nooColors = (useDynamicColor && dynamicScheme != null)
+        ? NooColors.fromDynamicScheme(dynamicScheme)
+        : NooColors.light;
 
     return ThemeData(
       useMaterial3: true,
       brightness: Brightness.light,
       colorScheme: colorScheme,
+      extensions: [nooColors],
       scaffoldBackgroundColor: colorScheme.surface,
       pageTransitionsTheme: _pageTransitionsTheme,
       sliderTheme: _sliderTheme,
-      textTheme: GoogleFonts.interTextTheme(ThemeData.light().textTheme)
-          .copyWith(
-            headlineMedium: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.5,
-            ),
-            titleLarge: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.2,
-            ),
-            titleMedium: GoogleFonts.inter(fontWeight: FontWeight.w500),
-          ),
+      textTheme: _textTheme(Brightness.light),
       cardTheme: CardThemeData(
         elevation: 0,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
@@ -71,7 +108,7 @@ class AppTheme {
         elevation: 0,
         scrolledUnderElevation: 0,
         centerTitle: false,
-        titleTextStyle: GoogleFonts.inter(
+        titleTextStyle: GoogleFonts.schibstedGrotesk(
           fontSize: 22,
           fontWeight: FontWeight.w600,
           color: colorScheme.onSurface,
@@ -92,6 +129,9 @@ class AppTheme {
             seedColor: seedColor,
             brightness: Brightness.dark,
           );
+    var nooColors = (useDynamicColor && dynamicScheme != null)
+        ? NooColors.fromDynamicScheme(dynamicScheme)
+        : NooColors.dark;
 
     if (amoled) {
       // True OLED black across every surface tone Material 3 hands out -
@@ -106,27 +146,18 @@ class AppTheme {
         surfaceContainerHighest: Colors.black,
         surfaceDim: Colors.black,
       );
+      nooColors = nooColors.withAmoled();
     }
 
     return ThemeData(
       useMaterial3: true,
       brightness: Brightness.dark,
       colorScheme: colorScheme,
+      extensions: [nooColors],
       scaffoldBackgroundColor: colorScheme.surface,
       pageTransitionsTheme: _pageTransitionsTheme,
       sliderTheme: _sliderTheme,
-      textTheme: GoogleFonts.interTextTheme(ThemeData.dark().textTheme)
-          .copyWith(
-            headlineMedium: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.5,
-            ),
-            titleLarge: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.2,
-            ),
-            titleMedium: GoogleFonts.inter(fontWeight: FontWeight.w500),
-          ),
+      textTheme: _textTheme(Brightness.dark),
       cardTheme: CardThemeData(
         elevation: 0,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
@@ -137,7 +168,7 @@ class AppTheme {
         elevation: 0,
         scrolledUnderElevation: 0,
         centerTitle: false,
-        titleTextStyle: GoogleFonts.inter(
+        titleTextStyle: GoogleFonts.schibstedGrotesk(
           fontSize: 22,
           fontWeight: FontWeight.w600,
           color: colorScheme.onSurface,