phase 1-3 css refactor

frontend/src/components/ui/card/Card.tsx

@@ -1,19 +1,62 @@
 import { ReactNode } from "react";
+import clsx from "clsx";
+import Button from "../button/Button";
+
+type CardVariant = "surface" | "panel" | "frosted" | "borderless" | "gradient";
+type CardPadding = "none" | "sm" | "md" | "lg";
+type CardShadow = "none" | "sm" | "md";
 
 interface CardProps {
   children: ReactNode;
   className?: string;
   onClick?: () => void;
+  variant?: CardVariant;
+  padding?: CardPadding;
+  shadow?: CardShadow;
 }
 
 export const Card: React.FC<CardProps> = ({
   children,
   className = "",
   onClick,
+  variant = "surface",
+  padding = "md",
+  shadow = "sm",
 }) => {
+  const variantClasses: Record<CardVariant, string> = {
+    surface:
+      "bg-white border border-gray-200 dark:bg-white/[0.03] dark:border-white/10",
+    panel:
+      "bg-gray-50 border border-gray-100 dark:bg-white/[0.04] dark:border-white/[0.04]",
+    frosted:
+      "bg-white/80 backdrop-blur-xl border border-white/60 dark:bg-white/[0.08] dark:border-white/20",
+    borderless: "bg-transparent border border-transparent",
+    gradient:
+      "bg-[linear-gradient(180deg,var(--color-panel),var(--color-panel-alt))] border border-white/20 dark:border-white/10",
+  };
+
+  const paddingClasses: Record<CardPadding, string> = {
+    none: "p-0",
+    sm: "p-4 sm:p-5",
+    md: "p-5 sm:p-6",
+    lg: "p-6 sm:p-8",
+  };
+
+  const shadowClasses: Record<CardShadow, string> = {
+    none: "",
+    sm: "shadow-theme-sm",
+    md: "shadow-theme-lg",
+  };
+
   return (
     <div
-      className={`rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6 ${className}`}
+      className={clsx(
+        "rounded-2xl transition-shadow duration-200",
+        variantClasses[variant],
+        paddingClasses[padding],
+        shadowClasses[shadow],
+        className,
+      )}
       onClick={onClick}
     >
       {children}
@@ -108,31 +151,34 @@ export const CardAction: React.FC<CardActionProps> = ({
   variant = "button",
   className = "",
 }) => {
-  const baseClasses =
-    variant === "button"
-      ? "inline-flex items-center gap-2 px-4 py-3 mt-4 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
-      : "inline-flex items-center gap-1 mt-4 text-sm text-brand-500 hover:text-brand-600";
-
-  if (href) {
+  if (variant === "button") {
     return (
-      <a
-        href={href}
-        className={`${baseClasses} ${className}`}
-        onClick={onClick}
-      >
-        {children}
-      </a>
+      <div className={clsx("mt-4 inline-flex", className)}>
+        <Button
+          size="sm"
+          variant="solid"
+          tone="brand"
+          as={href ? "a" : "button"}
+          href={href}
+          onClick={onClick}
+        >
+          {children}
+        </Button>
+      </div>
     );
   }
 
   return (
-    <button
-      className={`${baseClasses} ${className}`}
+    <a
+      href={href}
       onClick={onClick}
-      type="button"
+      className={clsx(
+        "mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand-600 hover:text-brand-700 dark:text-brand-300",
+        className,
+      )}
     >
       {children}
-    </button>
+    </a>
   );
 };