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>

Provider/frontend/src/app.css

@@ -1,31 +1,19 @@
-:root {
-  --bg-primary: #0f172a;
-  --bg-card: #1e293b;
-  --text-primary: #f1f5f9;
-  --text-secondary: #94a3b8;
-  --accent: #38bdf8;
-  --accent-hover: #7dd3fc;
-  --border: #334155;
-}
+@import "tailwindcss";
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: system-ui, -apple-system, sans-serif;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#app {
-  width: 100%;
-  max-width: 640px;
-  padding: 1rem;
-}
+/*
+ * Custom theme overrides for Calendink ESP32 dashboard.
+ * TailwindCSS v4 uses CSS-based configuration via @theme.
+ */
+@theme {
+  --color-bg-primary: #0f172a;
+  --color-bg-card: #1e293b;
+  --color-bg-card-hover: #263548;
+  --color-text-primary: #f1f5f9;
+  --color-text-secondary: #94a3b8;
+  --color-accent: #38bdf8;
+  --color-accent-hover: #7dd3fc;
+  --color-border: #334155;
+  --color-success: #22c55e;
+  --color-danger: #ef4444;
+  --color-danger-hover: #f87171;
+}