refactor(admin-web): integrate design tokens and improve accessibility

- Updated Badge component to use design token CSS variables (bl-*)
- Updated Button component to use design token CSS variables (bl-*)
- Improved focus states with proper design token colors
- Added aria-label to logout button in sidebar for better accessibility
- Maintains backward compatibility while improving consistency

This moves admin web toward design system compliance while ensuring
no breaking changes to existing functionality.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

dashboards/admin-web/src/components/ui/badge.tsx

@@ -5,18 +5,20 @@ import { Slot } from 'radix-ui';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:ring-2 focus-visible:ring-[var(--bl-focus-ring)] focus-visible:ring-offset-2 aria-invalid:ring-[var(--bl-danger)] aria-invalid:border-[var(--bl-danger)] transition-[color,box-shadow] overflow-hidden',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        default:
+          'bg-[var(--bl-accent)] text-[var(--bl-accent-foreground)] [a&]:hover:bg-[var(--bl-accent)]/90',
+        secondary:
+          'bg-[var(--bl-surface-muted)] text-[var(--bl-text-primary)] [a&]:hover:bg-[var(--bl-surface-muted)]/90',
         destructive:
-          'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-[var(--bl-danger)] text-[var(--bl-danger-foreground)] [a&]:hover:bg-[var(--bl-danger)]/90 focus-visible:ring-[var(--bl-danger)]/20 dark:focus-visible:ring-[var(--bl-danger)]/40 dark:bg-[var(--bl-danger)]/60',
         outline:
-          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 [a&]:hover:underline',
+          'border-[var(--bl-border)] text-[var(--bl-text-primary)] [a&]:hover:bg-[var(--bl-surface-muted)] [a&]:hover:text-[var(--bl-text-primary)]',
+        ghost: '[a&]:hover:bg-[var(--bl-surface-muted)] [a&]:hover:text-[var(--bl-text-primary)]',
+        link: 'text-[var(--bl-accent)] underline-offset-4 [a&]:hover:underline',
       },
     },
     defaultVariants: {

dashboards/admin-web/src/components/ui/button.tsx

@@ -5,18 +5,21 @@ import { Slot } from 'radix-ui';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--bl-focus-ring)] focus-visible:ring-offset-2 aria-invalid:ring-[var(--bl-danger)] aria-invalid:border-[var(--bl-danger)]",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'bg-[var(--bl-accent)] text-[var(--bl-accent-foreground)] hover:bg-[var(--bl-accent)]/90',
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-[var(--bl-danger)] text-[var(--bl-danger-foreground)] hover:bg-[var(--bl-danger)]/90 focus-visible:ring-[var(--bl-danger)]/20 dark:focus-visible:ring-[var(--bl-danger)]/40 dark:bg-[var(--bl-danger)]/60',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'border bg-[var(--bl-surface-card)] shadow-xs hover:bg-[var(--bl-surface-muted)] hover:text-[var(--bl-text-primary)] dark:bg-[var(--bl-input)]/30 dark:border-[var(--bl-border)] dark:hover:bg-[var(--bl-input)]/50',
+        secondary:
+          'bg-[var(--bl-surface-muted)] text-[var(--bl-text-primary)] hover:bg-[var(--bl-surface-muted)]/80',
+        ghost:
+          'hover:bg-[var(--bl-surface-muted)] hover:text-[var(--bl-text-primary)] dark:hover:bg-[var(--bl-accent-muted)]/50',
+        link: 'text-[var(--bl-accent)] underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',