update styling css file

frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/index.css

@@ -1,37 +1,24 @@
 @import "tailwindcss";
-@plugin "flowbite-react/plugin/tailwindcss";
-@source "../.flowbite-react/class-list.json";
 
 @theme {
-    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    /* ── Fonts ───────────────────────────────────────────────────────────── */
+    --font-body: "IBM Plex Sans", system-ui, sans-serif;
+    --font-data: "IBM Plex Mono", monospace;
 
-    /* Breakpoints */
-    --breakpoint-3xl: 1920px;
+    /* ── Surfaces ────────────────────────────────────────────────────────── */
+    --color-background: #F7F4EE;
+    --color-sidebar: #F2EEE6;
+    --color-card: #FDFBF7;
+    --color-fields: #F4F0E8;
 
-    --color-primary: oklch(0.55 0.21 254);
-    --color-primary-pressed: oklch(0.45 0.21 254);
-    --color-secondary: oklch(0.94 0.01 250);
-    --color-accent: oklch(0.68 0.20 288);
-    --color-text: oklch(0.17 0.01 270);
-    --color-background: oklch(0.97 0.005 250);
-    --color-surface: oklch(1 0 0);
-    --color-border: oklch(0.91 0.008 250);
-
-    /* Easing */
-    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
-    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
-}
-
-#range-slider .range-slider__range {
-    background: var(--color-primary);
-}
-
-#range-slider .range-slider__thumb {
-    background: var(--color-primary);
+    /* ── Ink ─────────────────────────────────────────────────────────────── */
+    --color-text-primary: #2B2620;
+    --color-text-strong: #35302A;
+    --color-text-body: #554D44;
 }
 
 :root {
-    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     line-height: 1.5;
     font-weight: 400;
     font-synthesis: none;
@@ -42,4 +29,12 @@
 
 body {
     background-color: var(--color-background);
+    font-family: "IBM Plex Sans", system-ui, sans-serif;
+    color: var(--color-text-body);
 }
+
+@utility font-heading {
+    font-family: "Newsreader", serif;
+    font-weight: 400;
+    color: #2B2620;
+}