feat: initialize frontend entry point with HTML boilerplate and custom fonts

frontend/src/styles/globals.css

@@ -2,109 +2,101 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --obsidian: #020617;
+  --accent-indigo: #6366f1;
+  --accent-cyan: #06b6d4;
+}
+
 * {
   @apply box-border;
 }
 
 html {
-  scroll-behavior: smooth;
+  @apply scroll-smooth;
 }
 
 body {
-  @apply bg-light-50 text-light-900 antialiased;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-    Arial, sans-serif;
+  @apply bg-obsidian text-slate-200 antialiased font-sans transition-colors duration-500 overflow-x-hidden;
+  background-image: 
+    radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
+  min-height: 100vh;
 }
 
-/* Custom scrollbar */
+/* Scrollbar Style */
 ::-webkit-scrollbar {
-  @apply w-2 h-2;
+  @apply w-1.5 h-1.5;
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-light-100;
+  @apply bg-transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-light-300 rounded-full hover:bg-light-400;
+  @apply bg-white/10 rounded-full hover:bg-white/20 transition-colors;
 }
 
-/* Apple TV Style Glassmorphism */
-.glass {
-  @apply backdrop-blur-xl bg-white/30 border border-white/20 rounded-2xl;
+/* Premium Typography */
+h1, h2, h3, h4 {
+  @apply font-display font-extrabold tracking-tight text-white;
 }
 
-.glass-dark {
-  @apply backdrop-blur-xl bg-black/30 border border-white/10 rounded-2xl;
+/* Premium Glassmorphism */
+.premium-glass {
+  @apply bg-white/[0.03] backdrop-blur-2xl border border-white/[0.08] shadow-glass;
 }
 
-/* Glossy effect with shadows */
-.glossy {
-  @apply shadow-soft;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.premium-glass-hover {
+  @apply transition-all duration-300 hover:bg-white/[0.06] hover:border-white/[0.15] hover:shadow-glow-indigo;
 }
 
-.glossy:hover {
-  @apply shadow-lg;
-  transform: translateY(-2px);
-}
-
-/* Smooth gradient backgrounds */
-.gradient-light {
-  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
-}
-
-.gradient-primary {
-  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+.glass-nav {
+  @apply bg-obsidian/40 backdrop-blur-xl border-white/[0.05];
 }
 
 /* Animations */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+@keyframes aura-fade {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.05); }
 }
 
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.animate-aura {
+  animation: aura-fade 10s ease-in-out infinite;
 }
 
-.animate-fade-in {
-  animation: fadeIn 0.3s ease-in-out;
+@keyframes content-reveal {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.animate-slide-up {
-  animation: slideUp 0.3s ease-out;
+.reveal {
+  animation: content-reveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }
 
-/* Custom components */
-.btn-primary {
-  @apply px-6 py-3 rounded-lg bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+/* Custom UI Components */
+.neon-button {
+  @apply relative overflow-hidden px-6 py-3 rounded-2xl font-bold transition-all duration-300 
+         bg-gradient-to-r from-accent-indigo to-accent-violet text-white shadow-glow-indigo
+         hover:scale-[1.02] hover:shadow-indigo-500/40 active:scale-[0.98];
 }
 
-.btn-secondary {
-  @apply px-6 py-3 rounded-lg bg-light-200 text-light-900 font-medium hover:bg-light-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+.input-premium {
+  @apply w-full px-5 py-4 rounded-2xl bg-white/[0.03] border border-white/[0.08] text-white 
+         focus:outline-none focus:ring-2 focus:ring-accent-indigo/30 focus:border-accent-indigo/50
+         placeholder:text-slate-500 transition-all;
 }
 
-.card {
-  @apply bg-white rounded-2xl p-6 shadow-soft;
+.tab-active {
+  @apply relative text-white after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 
+         after:w-1 after:h-1 after:bg-accent-indigo after:rounded-full after:shadow-[0_0_8px_rgba(99,102,241,1)];
 }
 
-.input {
-  @apply w-full px-4 py-3 rounded-lg border border-light-200 bg-white focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors;
+/* Utils */
+.text-balance {
+  text-wrap: balance;
 }
 
-/* Loading spinner */
-.spinner {
-  @apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent;
+.mask-fade-bottom {
+  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
 }