feat : unify interactive stats and boarders in dark mode (#110)

src/app/globals.css

@@ -16,6 +16,14 @@
   --color-ink-faint: #64748b;
   --color-paper: #f6f7f9;
   --color-line: #e2e8f0;
+
+  /* Dark-mode visual polish tokens */
+  --color-surface-hover: #1e2330;
+  --color-surface-active: #2b3145;
+  --color-border-dark: #232a36;
+  --color-brand-hover: #4338ca;
+  --color-brand-dark: #6366f1;
+  --color-brand-dark-hover: #818cf8;
 }
 
 @layer base {
@@ -247,3 +255,27 @@ html.dark .react-flow__controls-button svg {
 html.dark .react-flow__attribution {
   color: rgba(255, 255, 255, 0.3);
 }
+
+/* ---- React Flow Custom Node & Selection overrides ---- */
+.react-flow__node {
+  transition: border-color 0.25s, box-shadow 0.25s !important;
+}
+
+.react-flow__node:hover {
+  border-color: var(--color-brand) !important;
+}
+
+html.dark .react-flow__node:hover {
+  border-color: var(--color-brand-dark) !important;
+}
+
+.react-flow__node.selected {
+  border-color: var(--color-brand) !important;
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) !important;
+}
+
+html.dark .react-flow__node.selected {
+  border-color: var(--color-brand-dark) !important;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4) !important;
+}
+

src/components/docs/DocsSidebar.tsx

@@ -23,7 +23,7 @@ export default function DocsSidebar({
           {t.documentation}
         </p>
       )}
-      <div className="flex flex-col border-l border-[#e2e8f0] dark:border-[#232a36]">
+      <div className="flex flex-col border-l border-line dark:border-border-dark">
         {DOC_NAV.map((d) => {
           const href = `/${lang}/docs/${d.slug}`;
           const active = pathname === href;
@@ -34,8 +34,8 @@ export default function DocsSidebar({
               aria-current={active ? "page" : undefined}
               className={`-ml-px border-l-2 px-4 py-2 text-sm transition-colors ${
                 active
-                  ? "border-[#4f46e5] font-medium text-[#4f46e5] dark:text-[#a5b4fc]"
-                  : "border-transparent text-[#475569] dark:text-[#9aa6b8] hover:border-[#cbd5e1] hover:text-[#0f172a]"
+                  ? "border-brand font-medium text-brand dark:border-brand-dark dark:text-brand-dark-hover"
+                  : "border-transparent text-ink-soft dark:text-muted hover:border-slate-300 dark:hover:border-muted hover:text-ink dark:hover:text-fg"
               }`}
             >
               {d.title[lang] ?? d.title["en"]}

src/components/layout/Header.tsx

@@ -55,19 +55,19 @@ const GitHubIcon = (
 );
 
 const linkClass =
-  "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] text-[#475569] hover:text-[#0f172a] hover:bg-black/[0.04] transition-colors dark:text-[#94a3b8] dark:hover:text-[#e6e9ef] dark:hover:bg-white/[0.06]";
+  "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] text-ink-soft hover:text-ink hover:bg-black/[0.04] transition-colors dark:text-muted dark:hover:text-fg dark:hover:bg-surface-hover";
 
 const pillClass =
-  "flex items-center gap-1.5 rounded-full border border-[#e2e8f0] dark:border-[#232a36] px-3 py-1.5 text-[13px] font-medium text-[#475569] dark:text-[#9aa6b8] hover:border-[#4f46e5] hover:text-[#0f172a] dark:hover:text-[#e6e9ef] transition-colors";
+  "flex items-center gap-1.5 rounded-full border border-line dark:border-border-dark px-3 py-1.5 text-[13px] font-medium text-ink-soft dark:text-muted hover:border-brand hover:text-ink dark:hover:border-brand-dark dark:hover:text-fg dark:hover:bg-surface-hover transition-colors";
 
 const ctaClass =
-  "shrink-0 whitespace-nowrap rounded-full bg-[#4f46e5] px-3.5 py-1.5 text-[13px] font-semibold text-white transition hover:-translate-y-px hover:bg-[#4338ca] sm:px-4 dark:bg-[#6366f1] dark:hover:bg-[#4f46e5]";
+  "shrink-0 whitespace-nowrap rounded-full bg-brand px-3.5 py-1.5 text-[13px] font-semibold text-white transition hover:-translate-y-px hover:bg-brand-hover sm:px-4 dark:bg-brand-dark dark:hover:bg-brand-dark-hover";
 
 const signInClass =
-  "whitespace-nowrap rounded-full border border-[#e2e8f0] px-3.5 py-1.5 text-[13px] font-semibold text-[#0f172a] transition hover:bg-black/[0.04] dark:border-white/[0.14] dark:text-[#e6e9ef] dark:hover:bg-white/[0.06]";
+  "whitespace-nowrap rounded-full border border-line px-3.5 py-1.5 text-[13px] font-semibold text-ink transition hover:bg-black/[0.04] dark:border-border-dark dark:text-fg dark:hover:bg-surface-hover";
 
 const menuItemClass =
-  "flex w-full items-center px-3 py-2 rounded-lg text-left text-[13px] font-medium text-[#475569] hover:bg-[#f8fafc] hover:text-[#0f172a] dark:text-[#94a3b8] dark:hover:bg-white/[0.04] dark:hover:text-white transition-colors";
+  "flex w-full items-center px-3 py-2 rounded-lg text-left text-[13px] font-medium text-ink-soft hover:bg-slate-50 hover:text-ink dark:text-muted dark:hover:bg-surface-hover dark:hover:text-fg transition-colors";
 
 export default function Header({
   lang,
@@ -171,7 +171,7 @@ export default function Header({
               aria-expanded={dropdownOpen}
               aria-haspopup="listbox"
               aria-label="Select language"
-              className="flex items-center gap-1.5 px-3.5 py-[6px] rounded-full border text-[13px] font-semibold transition-all bg-black/[0.04] border-[#e2e8f0] text-[#0f172a] hover:bg-black/[0.08] dark:bg-white/[0.08] dark:border-white/[0.14] dark:text-[#cbd5e1] dark:hover:bg-white/[0.16]"
+              className="flex items-center gap-1.5 px-3.5 py-[6px] rounded-full border text-[13px] font-semibold transition-all bg-black/[0.04] border-line text-ink hover:bg-black/[0.08] dark:bg-surface dark:border-border-dark dark:text-fg dark:hover:bg-surface-hover"
             >
               <span>🌐</span>
               <span>{LANGUAGE_NAMES[lang] ?? lang.toUpperCase()}</span>
@@ -194,8 +194,8 @@ export default function Header({
                         onClick={() => setDropdownOpen(false)}
                         className={`flex items-center justify-between w-full px-3 py-1.5 rounded-lg text-left text-[13px] font-medium transition-colors ${
                           active
-                            ? "bg-[#f1f5f9] text-[#4f46e5] dark:bg-white/[0.08] dark:text-white"
-                            : "text-[#475569] hover:bg-[#f8fafc] hover:text-[#0f172a] dark:text-[#94a3b8] dark:hover:bg-white/[0.04] dark:hover:text-white"
+                            ? "bg-slate-100 text-brand dark:bg-surface-active dark:text-fg"
+                            : "text-ink-soft hover:bg-slate-50 hover:text-ink dark:text-muted dark:hover:bg-surface-hover dark:hover:text-fg"
                         }`}
                       >
                         <span>
@@ -220,7 +220,7 @@ export default function Header({
                 onClick={() => setUserMenuOpen(!userMenuOpen)}
                 aria-expanded={userMenuOpen}
                 aria-haspopup="menu"
-                className="flex items-center gap-2 rounded-full border border-[#e2e8f0] p-0.5 pr-2.5 text-[13px] font-medium text-[#0f172a] transition-colors hover:bg-black/[0.04] dark:border-white/[0.14] dark:text-[#e6e9ef] dark:hover:bg-white/[0.06]"
+                className="flex items-center gap-2 rounded-full border border-line p-0.5 pr-2.5 text-[13px] font-medium text-ink transition-colors hover:bg-black/[0.04] dark:border-border-dark dark:text-fg dark:hover:bg-surface-hover"
               >
                 {avatar(26)}
                 <span className="max-w-[120px] truncate">
@@ -237,7 +237,7 @@ export default function Header({
                     className="fixed inset-0 z-10"
                     onClick={() => setUserMenuOpen(false)}
                   />
-                  <div className="absolute right-0 rtl:left-0 rtl:right-auto z-20 mt-2 w-48 rounded-xl border p-1 shadow-lg bg-white border-[#e2e8f0] dark:bg-[#0b0d12] dark:border-[#232a36]">
+                  <div className="absolute right-0 rtl:left-0 rtl:right-auto z-20 mt-2 w-48 rounded-xl border p-1 shadow-lg bg-white border-line dark:bg-[#0b0d12] dark:border-border-dark">
                     <div className="flex items-center gap-2 px-3 py-2">
                       {avatar(32)}
                       <div className="min-w-0">
@@ -290,7 +290,7 @@ export default function Header({
             onClick={() => setMenuOpen(true)}
             aria-label="Menu"
             aria-expanded={menuOpen}
-            className="grid place-items-center h-8 w-8 rounded-full border border-[#e2e8f0] text-[#0f172a] transition-colors hover:bg-black/[0.04] dark:border-white/[0.14] dark:text-[#e6e9ef] dark:hover:bg-white/[0.06]"
+            className="grid place-items-center h-8 w-8 rounded-full border border-line text-ink transition-colors hover:bg-black/[0.04] dark:border-border-dark dark:text-fg dark:hover:bg-surface-hover"
           >
             <svg
               width="18"
@@ -315,14 +315,14 @@ export default function Header({
             className="fixed inset-0 z-40 bg-black/20 sm:hidden"
             onClick={() => setMenuOpen(false)}
           />
-          <div className="fixed inset-x-3 top-[68px] z-50 rounded-2xl border p-2 shadow-xl sm:hidden bg-white border-[#e2e8f0] dark:bg-[#0b0d12] dark:border-[#232a36]">
+          <div className="fixed inset-x-3 top-[68px] z-50 rounded-2xl border p-2 shadow-xl sm:hidden bg-white border-line dark:bg-[#0b0d12] dark:border-border-dark">
             <div className="flex flex-col">
               <div onClick={() => setMenuOpen(false)}>{docsLink("w-full")}</div>
               <div onClick={() => setMenuOpen(false)} className="mt-1">
                 {starsLink("w-full justify-center")}
               </div>
 
-              <div className="my-2 border-t border-[#eef1f5] dark:border-[#232a36]" />
+              <div className="my-2 border-t border-line dark:border-border-dark" />
 
               {/* Languages */}
               <div className="grid grid-cols-2 gap-1">
@@ -335,8 +335,8 @@ export default function Header({
                       onClick={() => setMenuOpen(false)}
                       className={`flex items-center justify-between rounded-lg px-3 py-2 text-[13px] font-medium transition-colors ${
                         active
-                          ? "bg-[#f1f5f9] text-[#4f46e5] dark:bg-white/[0.08] dark:text-white"
-                          : "text-[#475569] hover:bg-[#f8fafc] hover:text-[#0f172a] dark:text-[#94a3b8] dark:hover:bg-white/[0.04] dark:hover:text-white"
+                          ? "bg-slate-100 text-brand dark:bg-surface-active dark:text-fg"
+                          : "text-ink-soft hover:bg-slate-50 hover:text-ink dark:text-muted dark:hover:bg-surface-hover dark:hover:text-fg"
                       }`}
                     >
                       <span>{LANGUAGE_NAMES[locale] ?? locale.toUpperCase()}</span>
@@ -346,7 +346,7 @@ export default function Header({
                 })}
               </div>
 
-              <div className="my-2 border-t border-[#eef1f5] dark:border-[#232a36]" />
+              <div className="my-2 border-t border-line dark:border-border-dark" />
 
               {/* Auth + CTA */}
               <Link

src/components/layout/ThemeToggle.tsx

@@ -16,7 +16,7 @@ export default function ThemeToggle() {
       type="button"
       onClick={toggle}
       aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
-      className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[#e2e8f0] bg-white text-[#475569] transition-colors hover:text-[#0f172a] dark:border-[#232a36] dark:bg-[#12151c] dark:text-[#94a3b8] dark:hover:text-[#e6e9ef]"
+      className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-line bg-white text-ink-soft transition-colors hover:bg-slate-50 hover:text-ink dark:border-border-dark dark:bg-surface dark:text-muted dark:hover:bg-surface-hover dark:hover:text-fg"
     >
       {isDark ? (
         <svg

src/components/sections/Hero.tsx

@@ -90,13 +90,13 @@ export default function Hero({
           <div className="js-actions flex flex-wrap gap-3 mt-8">
             <Link
               href={appHref}
-              className="rounded-full bg-[#4f46e5] dark:bg-[#6366f1] px-7 py-3.5 text-base font-semibold text-white shadow-[0_8px_24px_-8px_rgba(79,70,229,0.6)] transition hover:-translate-y-px hover:bg-[#4338ca]"
+              className="rounded-full bg-brand dark:bg-brand-dark px-7 py-3.5 text-base font-semibold text-white shadow-[0_8px_24px_-8px_rgba(79,70,229,0.6)] transition hover:-translate-y-px hover:bg-brand-hover dark:hover:bg-brand-dark-hover"
             >
               {getStarted}
             </Link>
             <Link
               href="#about"
-              className="rounded-full border border-[#e2e8f0] dark:border-[#232a36] bg-white dark:bg-[#12151c] px-7 py-3.5 text-base font-semibold text-[#0f172a] dark:text-[#e6e9ef] transition hover:-translate-y-px hover:border-slate-300 hover:bg-slate-50"
+              className="rounded-full border border-line dark:border-border-dark bg-white dark:bg-surface px-7 py-3.5 text-base font-semibold text-ink dark:text-fg transition hover:-translate-y-px hover:border-slate-300 dark:hover:border-muted hover:bg-slate-50 dark:hover:bg-surface-hover dark:hover:text-white"
             >
               {learnMore}
             </Link>

src/components/sections/HowItWorks.tsx

@@ -48,17 +48,17 @@ export default function HowItWorks({
       <SectionHeading index="02" title={heading} />
 
       {/* Hairline grid: gap-px over a bordered container draws crisp rules between cells. */}
-      <ol className="mt-12 grid grid-cols-3 gap-px overflow-hidden rounded-2xl border border-[#e2e8f0] dark:border-[#232a36] bg-[#e2e8f0] shadow-[0_1px_3px_rgba(15,23,42,0.06)] max-[760px]:grid-cols-1">
+      <ol className="mt-12 grid grid-cols-3 gap-px overflow-hidden rounded-2xl border border-line dark:border-border-dark bg-line dark:bg-border-dark shadow-[0_1px_3px_rgba(15,23,42,0.06)] max-[760px]:grid-cols-1">
         {steps.map((step, i) => (
           <li
             key={step.title}
-            className="js-reveal group flex flex-col bg-white dark:bg-[#12151c] p-8 transition-colors duration-300 hover:bg-[#f8fafc]"
+            className="js-reveal group flex flex-col bg-white dark:bg-surface p-8 transition-colors duration-300 hover:bg-slate-50 dark:hover:bg-surface-hover"
           >
             <div className="flex items-center justify-between">
-              <span className="font-mono text-2xl tracking-tight text-[#cbd5e1] transition-colors group-hover:text-[#4f46e5]">
+              <span className="font-mono text-2xl tracking-tight text-slate-300 transition-colors group-hover:text-brand dark:group-hover:text-brand-dark">
                 {`0${i + 1}`}
               </span>
-              <span className="flex h-10 w-10 items-center justify-center rounded-lg border border-[#e2e8f0] dark:border-[#232a36] bg-[#f1f5f9] dark:bg-[#1a1f29] text-[#4f46e5] dark:text-[#a5b4fc] transition-colors group-hover:border-[#c7d2fe]">
+              <span className="flex h-10 w-10 items-center justify-center rounded-lg border border-line dark:border-border-dark bg-slate-100 dark:bg-surface-active text-brand dark:text-brand-dark-hover transition-colors group-hover:border-indigo-200 dark:group-hover:border-brand-dark">
                 {ICONS[i]}
               </span>
             </div>

src/components/sections/Showcase.tsx

@@ -171,8 +171,8 @@ export default function Showcase({
     >
       <SectionHeading index="04" title={title} />
 
-      <div className="mt-12 grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-[#e2e8f0] dark:border-[#232a36] bg-[#e2e8f0] shadow-[0_1px_3px_rgba(15,23,42,0.06)] max-[860px]:grid-cols-1">
-        <div className="group flex flex-col bg-white dark:bg-[#12151c] p-8 transition-colors duration-300 hover:bg-[#f8fafc]">
+      <div className="mt-12 grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-line dark:border-border-dark bg-line dark:bg-border-dark shadow-[0_1px_3px_rgba(15,23,42,0.06)] max-[860px]:grid-cols-1">
+        <div className="group flex flex-col bg-white dark:bg-surface p-8 transition-colors duration-300 hover:bg-slate-50 dark:hover:bg-surface-hover">
           <div className="flex flex-1 items-center justify-center py-4 transition-transform duration-500 ease-out group-hover:scale-[1.03]">
             <CallGraphMini />
           </div>
@@ -183,7 +183,7 @@ export default function Showcase({
             {callDesc}
           </p>
         </div>
-        <div className="group flex flex-col bg-white dark:bg-[#12151c] p-8 transition-colors duration-300 hover:bg-[#f8fafc]">
+        <div className="group flex flex-col bg-white dark:bg-surface p-8 transition-colors duration-300 hover:bg-slate-50 dark:hover:bg-surface-hover">
           <div className="flex flex-1 items-center justify-center py-4 transition-transform duration-500 ease-out group-hover:scale-[1.03]">
             <SchemaMini />
           </div>

src/components/sections/SupportedLanguages.tsx

@@ -19,13 +19,13 @@ export default function SupportedLanguages({ title, subtitle, rows }: Props) {
         {subtitle}
       </p>
 
-      <ul className="mt-10 border-t border-[#e2e8f0] dark:border-[#232a36]">
+      <ul className="mt-10 border-t border-line dark:border-border-dark">
         {rows.map((row) => (
           <li
             key={row.name}
-            className="group grid grid-cols-[1fr_auto] items-baseline gap-x-6 gap-y-1 border-b border-[#e2e8f0] dark:border-[#232a36] py-5 transition-colors hover:bg-white sm:grid-cols-[200px_140px_1fr]"
+            className="group grid grid-cols-[1fr_auto] items-baseline gap-x-6 gap-y-1 border-b border-line dark:border-border-dark py-5 transition-colors hover:bg-slate-50 dark:hover:bg-surface-hover sm:grid-cols-[200px_140px_1fr]"
           >
-            <span className="font-mono text-base text-[#0f172a] dark:text-[#e6e9ef] transition-colors group-hover:text-[#4f46e5]">
+            <span className="font-mono text-base text-ink dark:text-fg transition-colors group-hover:text-brand dark:group-hover:text-brand-dark">
               {row.name}
             </span>
             <span className="font-mono text-[12px] uppercase tracking-[0.14em] text-[#64748b] dark:text-[#7c8696]">

src/components/sections/TestimonialsBoard.tsx

@@ -121,8 +121,8 @@ export default function TestimonialsBoard({
   const chipClass = (active: boolean) =>
     `rounded-full px-3 py-1.5 text-[13px] font-medium transition-colors ${
       active
-        ? "bg-[#4f46e5] text-white dark:bg-[#6366f1]"
-        : "border border-[#e2e8f0] text-[#475569] hover:border-[#4f46e5] hover:text-[#0f172a] dark:border-[#232a36] dark:text-[#9aa6b8]"
+        ? "bg-brand text-white dark:bg-brand-dark"
+        : "border border-line text-ink-soft hover:border-brand hover:text-ink hover:bg-slate-50 dark:border-border-dark dark:text-muted dark:hover:border-brand-dark dark:hover:text-fg dark:hover:bg-surface-hover"
     }`;
 
   return (
@@ -203,7 +203,7 @@ export default function TestimonialsBoard({
               <button
                 type="button"
                 onClick={() => setVisible((v) => v + PAGE)}
-                className="rounded-full border border-[#e2e8f0] dark:border-[#232a36] px-6 py-2.5 text-[14px] font-medium text-[#475569] dark:text-[#9aa6b8] transition-colors hover:border-[#4f46e5] hover:text-[#0f172a] dark:hover:text-[#e6e9ef]"
+                className="rounded-full border border-line dark:border-border-dark px-6 py-2.5 text-[14px] font-medium text-ink-soft dark:text-muted transition-colors hover:border-brand hover:text-ink hover:bg-slate-50 dark:hover:border-brand-dark dark:hover:text-fg dark:hover:bg-surface-hover"
               >
                 {labels.loadMore}
               </button>