chore: initialize repository with deployment baseline

src/index.css

@@ -0,0 +1,201 @@
+@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --font-sans: "Public Sans", "Segoe UI", sans-serif;
+    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+    --background: 210 33% 98%;
+    --foreground: 220 34% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 34% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220 34% 16%;
+    --primary: 214 84% 45%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 32% 95%;
+    --secondary-foreground: 220 25% 24%;
+    --muted: 210 26% 94%;
+    --muted-foreground: 215 15% 44%;
+    --accent: 207 90% 94%;
+    --accent-foreground: 215 64% 26%;
+    --destructive: 0 76% 48%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 214 22% 86%;
+    --input: 214 22% 82%;
+    --ring: 214 84% 45%;
+
+    --chart-1: 214 84% 45%;
+    --chart-2: 193 79% 40%;
+    --chart-3: 27 92% 46%;
+    --chart-4: 143 72% 38%;
+    --chart-5: 0 76% 48%;
+
+    --sidebar-background: 210 33% 97%;
+    --sidebar-foreground: 220 23% 23%;
+    --sidebar-primary: 214 84% 45%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 210 28% 92%;
+    --sidebar-accent-foreground: 220 34% 16%;
+    --sidebar-border: 214 24% 84%;
+    --sidebar-ring: 214 84% 45%;
+
+    --success: 145 70% 34%;
+    --warning: 32 96% 44%;
+    --radius: 0.8rem;
+  }
+
+  .dark {
+    --background: 222 34% 10%;
+    --foreground: 210 22% 95%;
+    --card: 222 33% 13%;
+    --card-foreground: 210 22% 95%;
+    --popover: 222 33% 13%;
+    --popover-foreground: 210 22% 95%;
+    --primary: 212 100% 64%;
+    --primary-foreground: 222 34% 10%;
+    --secondary: 222 24% 17%;
+    --secondary-foreground: 210 22% 90%;
+    --muted: 223 22% 16%;
+    --muted-foreground: 216 14% 71%;
+    --accent: 212 62% 25%;
+    --accent-foreground: 210 22% 95%;
+    --destructive: 0 79% 59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 222 18% 22%;
+    --input: 222 18% 24%;
+    --ring: 212 100% 64%;
+
+    --chart-1: 212 100% 64%;
+    --chart-2: 190 90% 54%;
+    --chart-3: 34 90% 57%;
+    --chart-4: 143 74% 47%;
+    --chart-5: 0 79% 59%;
+
+    --sidebar-background: 222 34% 11%;
+    --sidebar-foreground: 213 20% 82%;
+    --sidebar-primary: 212 100% 64%;
+    --sidebar-primary-foreground: 222 34% 10%;
+    --sidebar-accent: 222 22% 16%;
+    --sidebar-accent-foreground: 210 22% 95%;
+    --sidebar-border: 222 18% 22%;
+    --sidebar-ring: 212 100% 64%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/40;
+  }
+
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+    background-image:
+      radial-gradient(circle at 10% -10%, hsl(214 84% 45% / 0.08), transparent 45%),
+      radial-gradient(circle at 100% 0%, hsl(193 79% 40% / 0.08), transparent 35%);
+  }
+}
+
+@layer components {
+  .app-shell-bg {
+    background-image:
+      linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background))),
+      radial-gradient(circle at 80% 0%, hsl(var(--primary) / 0.07), transparent 35%);
+  }
+
+  .surface-card {
+    @apply rounded-xl border border-border/90 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.06)] transition-shadow;
+  }
+
+  .surface-card-quiet {
+    @apply rounded-xl border border-border/80 bg-card/75;
+  }
+
+  .chart-panel {
+    @apply rounded-xl border border-border/80 bg-gradient-to-b from-card to-card/90 p-4;
+  }
+
+  .panel-head {
+    @apply mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between;
+  }
+
+  .panel-title {
+    @apply text-sm font-semibold tracking-tight text-foreground;
+  }
+
+  .panel-subtitle {
+    @apply text-[11px] text-muted-foreground;
+  }
+
+  .data-grid-wrap {
+    @apply overflow-x-auto rounded-xl border border-border/85 bg-card;
+  }
+
+  .data-grid-table {
+    @apply w-full border-collapse;
+  }
+
+  .data-grid-table thead th {
+    @apply whitespace-nowrap border-b border-border bg-muted/40 px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground;
+  }
+
+  .data-grid-table tbody td {
+    @apply px-4 py-3 text-sm text-foreground;
+  }
+
+  .data-grid-table tbody tr {
+    @apply border-b border-border/70 transition-colors;
+  }
+
+  .data-grid-table tbody tr:hover {
+    @apply bg-muted/35;
+  }
+
+  .kpi-chip {
+    @apply inline-flex items-center rounded-full border border-border/80 bg-muted/55 px-2.5 py-1 text-[11px] font-medium text-muted-foreground;
+  }
+
+  .page-enter {
+    animation: page-enter 420ms ease-out both;
+  }
+}
+
+@keyframes page-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 12px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(215 16% 70%);
+  border: 2px solid hsl(var(--muted));
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(215 16% 58%);
+}