feat: frontend redesign

src/index.css

@@ -3,37 +3,31 @@
 @tailwind utilities;
 
 :root {
-  /* Light theme — warm paper + ink */
-  --bg: #f4f2ea;
-  --bg-grain: #ece9dd;
-  --surface: #fffdf7;
-  --surface-2: #f6f3e9;
-  --ink: #16170f;
-  --ink-solid: #16170f;
-  --muted: #6b6c5e;
-  --line: #e2decf;
-  --ring: #16170f;
-  --accent: #c6f24e;
-  --accent-ink: #16170f;
-  --glow: rgba(198, 242, 78, 0.45);
-  --dot: rgba(22, 23, 15, 0.06);
+  /* Light — clean neutral paper */
+  --bg: #fbfbfa;
+  --surface: #ffffff;
+  --surface-2: #f4f4f5;
+  --ink: #18181b;
+  --muted: #71717a;
+  --line: #e9e9eb;
+  --ring: #d4d4d8;
+  --accent: #2563eb;
+  --accent-soft: rgba(37, 99, 235, 0.1);
+  --accent-ink: #ffffff;
 }
 
 .dark {
-  /* Dark theme — deep moss + lime */
-  --bg: #0e100a;
-  --bg-grain: #14160e;
-  --surface: #181b11;
-  --surface-2: #1f2317;
-  --ink: #f1efe3;
-  --ink-solid: #000000;
-  --muted: #9b9d8a;
-  --line: #2c3020;
-  --ring: #3a3f2a;
-  --accent: #c6f24e;
-  --accent-ink: #16170f;
-  --glow: rgba(198, 242, 78, 0.22);
-  --dot: rgba(241, 239, 227, 0.05);
+  /* Dark — near-black */
+  --bg: #09090b;
+  --surface: #111113;
+  --surface-2: #19191c;
+  --ink: #fafafa;
+  --muted: #a1a1aa;
+  --line: #232327;
+  --ring: #2e2e33;
+  --accent: #60a5fa;
+  --accent-soft: rgba(96, 165, 250, 0.14);
+  --accent-ink: #09090b;
 }
 
 * {
@@ -48,41 +42,14 @@ body {
   margin: 0;
   background-color: var(--bg);
   color: var(--ink);
-  font-family: "General Sans", ui-sans-serif, system-ui, sans-serif;
+  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   min-height: 100vh;
-  transition: background-color 0.5s ease, color 0.4s ease;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/* Atmospheric layered background: dotted grid + soft lime glows */
-.app-bg::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -2;
-  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
-  background-size: 26px 26px;
-  background-position: -13px -13px;
-  pointer-events: none;
-}
-
-.app-bg::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -3;
-  background:
-    radial-gradient(60% 50% at 12% 8%, var(--glow), transparent 60%),
-    radial-gradient(50% 40% at 92% 22%, var(--glow), transparent 60%),
-    radial-gradient(70% 60% at 78% 96%, var(--glow), transparent 65%);
-  filter: blur(8px);
-  opacity: 0.9;
-  pointer-events: none;
-  transition: opacity 0.5s ease;
-}
-
-/* Use CSS vars through Tailwind-friendly utility classes */
+/* Semantic token utilities (kept stable so components stay theme-driven) */
 .bg-surface { background-color: var(--surface); }
 .bg-surface-2 { background-color: var(--surface-2); }
 .text-ink { color: var(--ink); }
@@ -91,43 +58,29 @@ body {
 .bg-accent { background-color: var(--accent); }
 .text-accent { color: var(--accent); }
 .text-accent-ink { color: var(--accent-ink); }
-.ring-ink { --tw-ring-color: var(--ring); }
 
 .card {
   background-color: var(--surface);
-  border: 1.5px solid var(--line);
-  border-radius: 1.5rem;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
 }
 
-/* Selection */
 ::selection {
   background: var(--accent);
   color: var(--accent-ink);
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar { width: 11px; height: 11px; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
   background: var(--line);
   border-radius: 99px;
   border: 3px solid var(--bg);
 }
-::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+::-webkit-scrollbar-thumb:hover { background: var(--ring); }
 
-/* Focus ring */
+/* Focus ring — single subtle accent ring */
 .focusable:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--accent);
-}
-
-/* Grain overlay for texture */
-.grain::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  pointer-events: none;
-  opacity: 0.035;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
 }