feat: enhance badge component with dark tech theme variants

src/components/ui/badge.tsx

@@ -5,19 +5,20 @@ import { cva, type VariantProps } from "class-variance-authority"
 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 px-3 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-[var(--color-tech-blue)] focus-visible:ring-2 focus-visible:ring-[var(--color-tech-blue)]/50 transition-all duration-300 overflow-hidden",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default: "bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] text-white border-transparent shadow-lg shadow-[var(--color-tech-blue)]/30",
         secondary:
-          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+          "bg-[var(--color-bg-tertiary)] text-gray-300 border-gray-700 hover:border-[var(--color-tech-blue)] hover:text-[var(--color-tech-blue)]",
         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-red-600 text-white border-transparent hover:bg-red-700",
         outline:
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+          "border-[var(--color-tech-blue)] text-[var(--color-tech-blue)] hover:bg-[var(--color-tech-blue)]/10 hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "text-gray-400 hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        success: "bg-green-600 text-white border-transparent hover:bg-green-700",
+        warning: "bg-yellow-600 text-white border-transparent hover:bg-yellow-700",
       },
     },
     defaultVariants: {