feat: Theme studio v2

toju-app/src/app/shared/components/profile-card/profile-card.component.html

@@ -1,4 +1,5 @@
 <div
+  appThemeNode="profileCardSurface"
   class="w-72 rounded-lg border border-border bg-card shadow-xl"
   style="animation: profile-card-in 120ms cubic-bezier(0.2, 0, 0, 1) both"
 >
@@ -8,7 +9,10 @@
   @let statusColor = currentStatusColor();
   @let statusLabel = currentStatusLabel();
 
-  <div class="h-20 rounded-t-lg bg-gradient-to-r from-primary/30 to-primary/10"></div>
+  <div
+    appThemeNode="profileCardBanner"
+    class="h-20 rounded-t-lg bg-gradient-to-r from-primary/30 to-primary/10"
+  ></div>
 
   <div class="relative px-4">
     <div class="-mt-8">
@@ -36,7 +40,10 @@
     </div>
   </div>
 
-  <div class="px-4 pb-3 pt-2.5">
+  <div
+    appThemeNode="profileCardBody"
+    class="px-4 pb-3 pt-2.5"
+  >
     @if (isEditable) {
       <div class="space-y-2">
         <div>