refactor(ui/card): update badge import and props, add CSS variables

- Changed import path for BadgeStatus to badge-status.tsx
- Updated CardWrapper border radius to rounded-lg for consistency
- Modified BadgeStatus prop from 'mode' to 'status' for clarity
- Added new CSS variables for badge in-progress and success states to enhance UI theming

Author: CharlyMartin

src/components/ui/card.tsx

@@ -1,5 +1,5 @@
 import type { UploadProgress } from '../upload/upload-progress.tsx'
-import { BadgeStatus } from './badge.tsx'
+import { BadgeStatus } from './badge-status.tsx'
 
 type CardWrapperProps = {
   children: React.ReactNode
@@ -16,14 +16,14 @@ type CardContentProps = {
 }
 
 function CardWrapper({ children }: CardWrapperProps) {
-  return <div className="bg-zinc-900 p-6 rounded-md">{children}</div>
+  return <div className="bg-zinc-900 p-6 rounded-lg">{children}</div>
 }
 
 function CardHeader({ title, status }: CardHeaderProps) {
   return (
     <div className="flex items-center justify-between">
       <h3 className="font-medium">{title}</h3>
-      {status !== 'in-progress' && <BadgeStatus mode={status} />}
+      {status !== 'in-progress' && <BadgeStatus status={status} />}
     </div>
   )
 }

src/index.css

@@ -7,6 +7,13 @@
 
   --color-button-brand: #086dc5;
   --color-button-brand-disabled: #005280;
+
+  --color-badge-in-progress: #3B1400;
+  --color-badge-in-progress-text: #FF8C3B;
+  --color-badge-in-progress-border: #662100;
+  
+  --color-badge-success: #001D3B;
+  --color-badge-success-border: #003669;
 }
 
 :root {