Standardize UI to design system tokens

Refactor multiple UI components to use design system tokens and primitives. Added new UiIcons (coffee, wifi, xCircle, ban) and typography color getters (primary, accent). Replaced hardcoded paddings, spacings, radii, borderRadius, and icon imports (lucide_icons -> UiIcons) with UiConstants, UiColors, UiTypography and UiIcons, and switched to UiColors.withValues for opacity. Changes apply across authentication, availability, clock_in (and its widgets), commute tracker, lunch break modal, location map placeholder, attendance card, date selector, and related presentation files to improve visual consistency.

apps/mobile/packages/features/staff/authentication/lib/src/presentation/pages/get_started_page.dart

@@ -1,3 +1,4 @@
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_modular/flutter_modular.dart';
 
@@ -36,7 +37,7 @@ class GetStartedPage extends StatelessWidget {
 
             // Content Overlay
             Padding(
-              padding: const EdgeInsets.all(24.0),
+              padding: const EdgeInsets.all(UiConstants.space6),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.end,
                 crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -44,7 +45,7 @@ class GetStartedPage extends StatelessWidget {
                   // Main text and actions
                   const GetStartedHeader(),
 
-                  const SizedBox(height: 48),
+                  const SizedBox(height: UiConstants.space10),
 
                   // Actions
                   GetStartedActions(
@@ -52,7 +53,7 @@ class GetStartedPage extends StatelessWidget {
                     onLoginPressed: onLoginPressed,
                   ),
 
-                  const SizedBox(height: 32),
+                  const SizedBox(height: UiConstants.space8),
                 ],
               ),
             ),

apps/mobile/packages/features/staff/authentication/lib/src/presentation/widgets/get_started_page/get_started_background.dart

@@ -8,7 +8,7 @@ class GetStartedBackground extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        const SizedBox(height: 32),
+        const SizedBox(height: UiConstants.space8),
         // Logo
         Image.asset(UiImageAssets.logoBlue, height: 40),
         Expanded(
@@ -18,9 +18,9 @@ class GetStartedBackground extends StatelessWidget {
               height: 288,
               decoration: BoxDecoration(
                 shape: BoxShape.circle,
-                color: const Color(0xFF3A4A5A).withOpacity(0.05),
+                color: UiColors.bgSecondary.withValues(alpha: 0.5),
               ),
-              padding: const EdgeInsets.all(8.0),
+              padding: const EdgeInsets.all(UiConstants.space2),
               child: ClipOval(
                 child: Image.network(
                   'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=400&h=400&fit=crop&crop=faces',
@@ -50,7 +50,7 @@ class GetStartedBackground extends StatelessWidget {
               width: 8,
               height: 8,
               decoration: BoxDecoration(
-                color: UiColors.primary.withOpacity(0.2),
+                color: UiColors.primary.withValues(alpha: 0.2),
                 borderRadius: BorderRadius.circular(4),
               ),
             ),
@@ -59,7 +59,7 @@ class GetStartedBackground extends StatelessWidget {
               width: 8,
               height: 8,
               decoration: BoxDecoration(
-                color: UiColors.primary.withOpacity(0.2),
+                color: UiColors.primary.withValues(alpha: 0.2),
                 borderRadius: BorderRadius.circular(4),
               ),
             ),