feat: Initialize Svelte frontend with Vite, TailwindCSS, custom theme, and a basic "Hello World" component.

Provider/frontend/src/App.svelte

@@ -1,67 +1,19 @@
 <script>
-  let title = 'Calendink Provider';
-  let subtitle = 'ESP32-S3 System Dashboard';
+  let title = "Calendink Provider";
+  let subtitle = "ESP32-S3 System Dashboard";
 </script>
 
-<main>
-  <div class="card">
-    <h1>{title}</h1>
-    <p class="subtitle">{subtitle}</p>
-    <div class="status">
-      <span class="dot"></span>
-      <span>Hello World — Frontend is running!</span>
+<main class="min-h-screen bg-bg-primary flex items-center justify-center p-4">
+  <div class="w-full max-w-xl">
+    <div class="bg-bg-card border border-border rounded-xl p-8 text-center">
+      <h1 class="text-2xl font-bold text-accent mb-2">{title}</h1>
+      <p class="text-text-secondary text-sm mb-6">{subtitle}</p>
+      <div
+        class="inline-flex items-center gap-2 bg-accent/10 border border-accent/20 rounded-full px-4 py-2 text-sm text-accent"
+      >
+        <span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
+        <span>Hello World — Frontend is running!</span>
+      </div>
     </div>
   </div>
 </main>
-
-<style>
-  main {
-    width: 100%;
-  }
-
-  .card {
-    background-color: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 0.75rem;
-    padding: 2rem;
-    text-align: center;
-  }
-
-  h1 {
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: var(--accent);
-    margin-bottom: 0.5rem;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .status {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    background-color: rgba(56, 189, 248, 0.1);
-    border: 1px solid rgba(56, 189, 248, 0.2);
-    border-radius: 9999px;
-    padding: 0.5rem 1rem;
-    font-size: 0.85rem;
-    color: var(--accent);
-  }
-
-  .dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: #22c55e;
-    animation: pulse 2s ease-in-out infinite;
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
-  }
-</style>