docs(mobile-client): redirect theming guide to centralized customization resource

- Remove detailed theming instructions from mobile client docs
- Point readers to centralized Architecture & Customization section
- Emphasize shared ui_kit package for consistent theming
- Update imports and remove unused components

Author: fulleni

src/content/docs/mobile-client/guides/styling-and-theming.mdx

@@ -2,51 +2,16 @@
 title: 'Guide: Styling & Theming'
 description: Learn how to customize the application's visual appearance.
 ---
-import { Card, CardGrid, Aside } from '@astrojs/starlight/components';
+import { Aside } from '@astrojs/starlight/components';
 
-The mobile client's visual appearance is managed by a centralized theming system located in the `ui_kit` package. This allows for consistent styling and easy customization of the app's look and feel. The system is built on top of the powerful `flex_color_scheme` package.
+The visual appearance of the Mobile Client—including colors, fonts, and spacing—is managed centrally to ensure consistency with the Web Dashboard. This is achieved through a shared `ui_kit` package.
 
-### Core Theming Files
+Because this is a cross-application concern, the primary, hands-on guide for making theme customizations is located in our new **Architecture & Customization** section. This central guide walks you through the entire process, from taking ownership of the `ui_kit` package to seeing your changes reflected in both the mobile and web apps.
 
-All theme-related logic is located in `packages/ui-kit/lib/src/theme/app_theme.dart`. This file contains:
+<Aside type="tip" title="Start Here for Customization">
+To learn how to properly customize the UI, please follow our comprehensive, step-by-step tutorial:
 
--   **`lightTheme()` and `darkTheme()`**: These functions generate the `ThemeData` for the light and dark modes of the application.
--   **`_commonSubThemesData`**: A constant that defines shared customizations for common widgets like `Card`, `AppBar`, and `InputDecorator`.
--   **`_customizeTextTheme()`**: A helper function that applies user-selected font sizes and weights to the base `TextTheme`.
--   **`_getGoogleFontTextTheme()`**: A helper that maps a font family name (e.g., "Roboto") to the corresponding text theme function from the `google_fonts` package.
-
-### How to Customize the Theme
-
-#### 1. Changing Colors
-
-The application uses predefined color schemes from `FlexColorScheme`. You can change the active color scheme by modifying the `AppAccentTheme` enum in `packages/core/lib/src/enums/app_enums.dart` and updating the `_mapAppAccentTheme` helper in `lib/app/bloc/app_bloc.dart`.
-
-To add a completely new custom color scheme:
-1.  Define your custom `FlexSchemeData` in `app_theme.dart`.
-2.  Add a new value to the `AppAccentTheme` enum.
-3.  Update the `_mapAppAccentTheme` helper in `AppBloc` to map your new enum value to your custom scheme.
-
-#### 2. Customizing Widget Styles
-
-You can change the default appearance of common widgets by modifying the `_commonSubThemesData` constant in `app_theme.dart`.
-
-For example, to change the default elevation of all cards in the app:
-
-```dart title="packages/ui-kit/lib/src/theme/app_theme.dart"
-const FlexSubThemesData _commonSubThemesData = FlexSubThemesData(
-  // ...
-  cardElevation: 4.0,
-  // ...
-);
-```
-
-#### 3. Adding a New Font
-
-To make a new font available for users to select:
-1.  Add the font to your project assets and declare it in `pubspec.yaml`.
-2.  Add the new font name to the list of available fonts in `lib/settings/view/font_settings_page.dart`.
-3.  Update the `_getGoogleFontTextTheme` helper in `app_theme.dart` to map the new font name to its `GoogleFonts` text theme function.
-
-<Aside>
-For a deep dive into the capabilities of `flex_color_scheme`, please refer to its excellent [official documentation](https://docs.flexcolorscheme.com/).
+[**Guide: Customizing the UI Theme &rarr;**](/docs/architecture/03-guide-customizing-the-ui/)
 </Aside>
+
+This approach ensures that you learn the correct workflow for modifying shared code, which is the key to unlocking the full power of the toolkit.