feat(home): inline items grid, drop share button, add planet/newborn theme, rename to Chá do Martin

app/globals.css

@@ -3,15 +3,45 @@
 @variant dark (.dark &);
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #fbf7ff;
+  --foreground: #2c2740;
+  --ink: #2c2740;
+  --ink-soft: #5a527a;
+  --muted: #8a83a8;
+  --card: #ffffff;
+  --card-soft: #f6f1ff;
+  --border: #ece5fa;
+  --accent: #8a7be3;
+  --accent-soft: #efeafd;
+  --success: #7fb89c;
+  --success-soft: #eaf6ef;
+  --success-border: #c9e3d4;
+  --success-ink: #305a45;
+  --halo-1: rgba(255, 213, 232, 0.55); /* soft pink */
+  --halo-2: rgba(204, 224, 255, 0.55); /* baby blue */
+  --halo-3: rgba(232, 218, 255, 0.55); /* lavender */
   color-scheme: light;
 }
 
 :root[data-theme="dark"],
 .dark {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+  --background: #0f0c1f;
+  --foreground: #e9e4f6;
+  --ink: #ece8fa;
+  --ink-soft: #b9b1d6;
+  --muted: #8a83a8;
+  --card: #1a1530;
+  --card-soft: #221c3d;
+  --border: #2c2548;
+  --accent: #b1a3ff;
+  --accent-soft: #2a2350;
+  --success: #7fb89c;
+  --success-soft: #1d2e26;
+  --success-border: #2f4d3d;
+  --success-ink: #b9e0c9;
+  --halo-1: rgba(120, 70, 130, 0.35);
+  --halo-2: rgba(60, 90, 160, 0.35);
+  --halo-3: rgba(80, 60, 150, 0.35);
   color-scheme: dark;
 }
 
@@ -25,38 +55,81 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Quicksand', 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/* Light mode form elements */
+/* Cosmic-newborn background: soft radial halos + pinpoint stars */
+.bg-cosmic {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
+    radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
+    radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
+    radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.7) 50%, transparent 51%),
+    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.6) 50%, transparent 51%),
+    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6) 50%, transparent 51%),
+    radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.7) 50%, transparent 51%),
+    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.6) 50%, transparent 51%);
+  background-attachment: fixed;
+}
+
+.dark .bg-cosmic {
+  background-image:
+    radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
+    radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
+    radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
+    radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.85) 50%, transparent 51%),
+    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.75) 50%, transparent 51%),
+    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7) 50%, transparent 51%),
+    radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.8) 50%, transparent 51%),
+    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.7) 50%, transparent 51%);
+}
+
+.bg-card {
+  background-color: var(--card);
+}
+
+.bg-card-soft {
+  background-color: var(--card-soft);
+}
+
+.shadow-soft {
+  box-shadow: 0 6px 20px -10px rgba(138, 123, 227, 0.25), 0 2px 6px -2px rgba(44, 39, 64, 0.06);
+}
+
+.shadow-lifted {
+  box-shadow: 0 18px 40px -18px rgba(138, 123, 227, 0.35), 0 6px 14px -6px rgba(44, 39, 64, 0.08);
+}
+
+/* Form elements */
 :root input,
 :root textarea,
 :root select {
-  color: #171717;
-  background-color: #ffffff;
+  color: var(--ink);
+  background-color: var(--card);
+  border-color: var(--border);
 }
 
 :root input::placeholder,
 :root textarea::placeholder {
-  color: #9ca3af;
+  color: var(--muted);
 }
 
-/* Dark mode form elements */
 :root[data-theme="dark"] input,
 :root[data-theme="dark"] textarea,
 :root[data-theme="dark"] select,
 .dark input,
 .dark textarea,
 .dark select {
-  color: #ededed;
-  background-color: #1f2937;
-  border-color: #374151;
+  color: var(--ink);
+  background-color: var(--card-soft);
+  border-color: var(--border);
 }
 
 :root[data-theme="dark"] input::placeholder,
 :root[data-theme="dark"] textarea::placeholder,
 .dark input::placeholder,
 .dark textarea::placeholder {
-  color: #6b7280;
+  color: var(--muted);
 }