feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/Welcome.tsx

@@ -37,6 +37,8 @@ import { MODE_URL, type Mode } from "./welcomeMode";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
+import { LinkButton } from "./ui/LinkButton";
 
 const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
 const PASSWORD_MIN = 10;
@@ -198,7 +200,7 @@ const FEATURES: { key: string; icon: LucideIcon }[] = [
 function FeatureCard({ icon: Icon, k }: { icon: LucideIcon; k: string }) {
   const { t } = useTranslation();
   return (
-    <div className="glass-card rounded-2xl p-5">
+    <div className={`${SURFACE.panel} p-5`}>
       <div className="w-10 h-10 rounded-xl bg-accent/15 text-accent grid place-items-center mb-3">
         <Icon className="w-5 h-5" />
       </div>
@@ -225,7 +227,7 @@ function Preview({
   const [failed, setFailed] = useState(false);
   if (failed) {
     return (
-      <div className={`glass-card rounded-2xl overflow-hidden ${className ?? ""}`}>
+      <div className={`${SURFACE.card} overflow-hidden ${className ?? ""}`}>
         <div className="w-full h-full grid place-items-center bg-linear-to-br from-accent/10 to-card text-muted text-sm p-6 text-center">
           {label}
         </div>
@@ -236,7 +238,7 @@ function Preview({
     <Pressable
       onClick={() => onOpen?.(src, label)}
       aria-label={label}
-      className={`group relative glass-card rounded-2xl overflow-hidden block cursor-zoom-in ${className ?? ""}`}
+      className={`group relative ${SURFACE.card} overflow-hidden block cursor-zoom-in ${className ?? ""}`}
     >
       <img
         src={src}
@@ -566,7 +568,7 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
   const StateIcon = blocked ? BLOCKED_ICON[blocked.reason] : deadReset ? Link2Off : null;
 
   return (
-    <div className="glass rounded-2xl p-6 sm:p-7 w-full max-w-md lg:justify-self-end">
+    <div className={`${SURFACE.panel} p-6 sm:p-7 w-full max-w-md lg:justify-self-end`}>
       <h2 className="text-lg font-semibold mb-1 flex items-center gap-2.5">
         {StateIcon && (
           <span className="w-8 h-8 rounded-xl bg-warn/15 text-warn grid place-items-center shrink-0">
@@ -748,12 +750,9 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
                 <span className="h-px flex-1 bg-border" />
               </div>
               {googleEnabled && (
-                <a
-                  href="/auth/login"
-                  className="block text-center px-4 py-2.5 rounded-xl text-sm font-semibold bg-card border border-border hover:border-accent transition"
-                >
+                <LinkButton href="/auth/login" size="lg" fullWidth>
                   {t("welcome.auth.google")}
-                </a>
+                </LinkButton>
               )}
               {!showDemo ? (
                 <Button