feat(frontend): add react spa with wishlist flows and public profile

apps/frontend/src/styles/global.css

@@ -0,0 +1,102 @@
+@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+  body {
+    @apply bg-background text-ink font-sans antialiased;
+    background-image:
+      radial-gradient(1200px 600px at 0% -10%, rgba(244, 192, 78, 0.18), transparent 60%),
+      radial-gradient(900px 500px at 100% 110%, rgba(226, 120, 150, 0.18), transparent 55%);
+    background-attachment: fixed;
+  }
+  h1,
+  h2,
+  h3 {
+    @apply font-display text-ink;
+    letter-spacing: -0.01em;
+  }
+  a {
+    @apply transition-colors;
+  }
+}
+
+@layer components {
+  /* BEM-friendly classes: kept parallel to Tailwind utilities where possible. */
+  .wish-card {
+    @apply relative flex flex-col overflow-hidden rounded-lg bg-surface shadow-card transition-transform duration-200;
+  }
+  .wish-card:hover {
+    transform: translateY(-2px);
+  }
+  .wish-card--completed {
+    filter: saturate(0.45) brightness(0.98);
+  }
+  .wish-card--completed .wish-card__title {
+    text-decoration: line-through;
+    text-decoration-thickness: 2px;
+    text-decoration-color: rgb(var(--color-muted) / 0.6);
+  }
+
+  .wish-card__image-wrap {
+    @apply relative aspect-[4/3] bg-surface-muted overflow-hidden;
+  }
+  .wish-card__image {
+    @apply h-full w-full object-cover;
+  }
+  .wish-card__body {
+    @apply flex flex-col gap-2 p-4;
+  }
+  .wish-card__title {
+    @apply text-lg font-semibold leading-snug text-ink;
+  }
+  .wish-card__price {
+    @apply text-sm font-medium text-muted;
+  }
+  .wish-card__comment {
+    @apply text-sm text-muted line-clamp-2;
+  }
+
+  .wish-badge {
+    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide;
+  }
+  .wish-badge--new {
+    @apply bg-primary text-primary-foreground;
+  }
+  .wish-badge--completed {
+    @apply bg-ink/5 text-ink;
+  }
+  .wish-badge--archived {
+    @apply bg-warning/20 text-warning;
+  }
+  .wish-badge--deleted {
+    @apply bg-danger/15 text-danger;
+  }
+
+  .field {
+    @apply flex flex-col gap-1.5;
+  }
+  .field__label {
+    @apply text-sm font-medium text-ink;
+  }
+  .field__input,
+  .field__textarea,
+  .field__select {
+    @apply w-full rounded-md border border-border bg-surface px-3 py-2.5 text-ink outline-none transition-all duration-150 placeholder:text-muted focus:border-primary focus:shadow-[var(--shadow-focus)];
+  }
+  .field__error {
+    @apply text-xs text-danger;
+  }
+}
+
+@layer utilities {
+  .container-page {
+    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
+  }
+}

apps/frontend/src/styles/tokens.css

@@ -0,0 +1,35 @@
+:root {
+  /* Colors (RGB triplets so Tailwind <alpha-value> works) */
+  --color-background: 255 247 240;
+  --color-surface: 255 255 255;
+  --color-surface-muted: 250 242 235;
+  --color-text: 42 33 53;
+  --color-muted: 142 128 153;
+  --color-border: 235 224 215;
+
+  --color-primary: 226 120 150;
+  --color-primary-50: 255 236 243;
+  --color-primary-600: 200 82 118;
+  --color-primary-foreground: 255 255 255;
+
+  --color-accent: 244 192 78;
+  --color-accent-foreground: 70 48 10;
+
+  --color-success: 97 186 129;
+  --color-warning: 240 168 104;
+  --color-danger: 226 107 107;
+
+  /* Radii */
+  --radius-sm: 8px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+
+  /* Shadows */
+  --shadow-card: 0 1px 2px rgba(42, 33, 53, 0.04), 0 10px 28px rgba(42, 33, 53, 0.07);
+  --shadow-pop: 0 8px 32px rgba(42, 33, 53, 0.18);
+  --shadow-focus: 0 0 0 3px rgba(226, 120, 150, 0.3);
+
+  /* Transitions */
+  --transition-base: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}