feat(ui): overhaul frontend with IMPHNEN visual identity

- Update CSS foundation: HSL→oklch color tokens, Poppins font, new utilities
- Replace Three.js sakura particles with CSS glow orbs
- Rebrand Header with IMPHNEN logo and gradient text
- Update all UI components (Button, Card, Badge, Input, Select, Tabs, Toast)
- Apply IMPHNEN design patterns (glass, gradient, grid) to layout
- Remove all hardcoded #7EC8E3/#FFB7C5/#FCA5A5 references
- Standardize rounded-xl across all components
- Replace emoji toasts with Lucide icons

Co-Authored-By: Claude <noreply@anthropic.com>

services/frontend/src/widgets/mascot/MascotChatbot.tsx

@@ -106,7 +106,7 @@ export function MascotChatbot({
         animate={{ opacity: 1, y: 0, scale: 1 }}
         exit={{ opacity: 0, y: 20, scale: 0.95 }}
         className={cn(
-          "w-96 bg-white rounded-2xl shadow-2xl border border-primary/10 overflow-hidden flex flex-col",
+          "w-96 bg-card rounded-xl shadow-2xl border border-border overflow-hidden flex flex-col",
           isMinimized ? "h-16" : "h-[520px]",
           className,
         )}
@@ -155,7 +155,7 @@ export function MascotChatbot({
         {/* Messages */}
         {!isMinimized && (
           <>
-            <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gradient-to-b from-white to-primary/5">
+            <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-card">
               {messages.map((message) => (
                 <motion.div
                   key={message.id}
@@ -177,7 +177,7 @@ export function MascotChatbot({
                     className={cn(
                       "max-w-xs px-3 py-2 rounded-xl text-sm break-words",
                       message.role === "user"
-                        ? "bg-primary text-white rounded-br-none"
+                        ? "bg-primary text-primary-foreground rounded-br-none"
                         : "bg-muted text-foreground rounded-bl-none",
                     )}
                   >
@@ -231,7 +231,7 @@ export function MascotChatbot({
             {/* Input */}
             <form
               onSubmit={handleSendMessage}
-              className="border-t border-primary/10 p-3 bg-white"
+              className="border-t border-border p-3 bg-card"
             >
               <div className="flex gap-2">
                 <input
@@ -240,14 +240,14 @@ export function MascotChatbot({
                   onChange={(e) => setInput(e.target.value)}
                   placeholder="Tanya mascot..."
                   disabled={loading}
-                  className="flex-1 px-3 py-2 rounded-lg border border-primary/20 focus:outline-none focus:border-primary/50 text-sm disabled:opacity-50"
+                  className="flex-1 px-3 py-2 rounded-lg border border-input bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm disabled:opacity-50"
                 />
                 <motion.button
                   whileHover={{ scale: 1.05 }}
                   whileTap={{ scale: 0.95 }}
                   type="submit"
                   disabled={loading || !input.trim()}
-                  className="p-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  className="p-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 >
                   <Send className="h-4 w-4" />
                 </motion.button>

services/frontend/src/widgets/mascot/MascotImage.tsx

@@ -70,7 +70,7 @@ export function MascotImage({
         >
           <div className="relative">
             {/* Chat bubble */}
-            <div className="bg-gradient-to-br from-primary/90 to-primary/80 text-white rounded-2xl px-4 py-2.5 shadow-lg backdrop-blur-sm border border-primary/50">
+            <div className="bg-primary/90 text-primary-foreground rounded-xl px-4 py-2.5 shadow-lg backdrop-blur-sm border border-primary/30">
               <div className="flex items-start gap-2">
                 <MessageCircle className="h-4 w-4 shrink-0 mt-0.5 text-white/80" />
                 <p className="text-xs leading-relaxed font-medium line-clamp-3">