refactor(theme): use design tokens and fix dark mode visuals

- Replace hardcoded Tailwind colors (bg-white, bg-gray-50/100, text-gray-, border-gray-, divide-gray-*, text-blue-600/800, bg-blue-50) with design tokens (bg-card, bg-muted, text-foreground, text-muted-foreground, border-
    border, text-primary, hover:bg-accent, bg-primary/10).
  - ClipboardApp: update RichTextEditor toolbar/editor, FileUploadHandler, ShareCard, FileListDisplay, SendTabPanel, RetrieveTabPanel, FileTransferButton.
  - Blog UI: unify styles in list page, tag page, post page, ArticleListItem, and TableOfContents.
  - MDX/prose: normalize pre/code/table/blockquote/lists and figure captions; switch rehype table divider to theme token.
  - Misc: adjust HomeClient and HowItWorks copy colors to tokens.
  - No functional changes; light mode parity; improved contrast and consistency in dark mode.

frontend/app/[lang]/HomeClient.tsx

@@ -50,13 +50,13 @@ export default function HomeClient({ messages, lang }: PageContentProps) {
           <h2 className="text-3xl font-bold mb-6 text-center">
             {messages.text.home.h2_demo}
           </h2>
-          <p className="text-center mb-6 text-gray-600">
+          <p className="text-center mb-6 text-muted-foreground">
             {messages.text.home.h2P_demo}
           </p>
           <YouTubePlayer videoId={youtube_videoId} />
 
           <div className="mt-4 text-center">
-            <p className="mb-3 text-gray-700">
+            <p className="mb-3 text-foreground">
               {messages.text.home.watch_tips}
             </p>
             <a

frontend/app/[lang]/blog/[slug]/page.tsx

@@ -59,10 +59,10 @@ export default async function BlogPost({
         {/* Article content area */}
         <article className="w-full md:flex-1 max-w-4xl">
           <header className="mb-8">
-            <h1 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
+            <h1 className="text-3xl sm:text-4xl font-bold mb-4 text-foreground">
               {post.frontmatter.title}
             </h1>
-            <div className="flex flex-wrap items-center text-gray-600 gap-2 sm:gap-4">
+            <div className="flex flex-wrap items-center text-muted-foreground gap-2 sm:gap-4">
               <time className="text-sm">
                 {new Date(post.frontmatter.date).toLocaleDateString(params.lang, {
                   year: "numeric",
@@ -83,7 +83,7 @@ export default async function BlogPost({
               components={{
                 ...mdxComponents,
                 wrapper: ({ children }) => (
-                  <div className="space-y-4 text-gray-700 overflow-x-auto">
+                  <div className="space-y-4 text-foreground overflow-x-auto">
                     {children}
                   </div>
                 ),

frontend/app/[lang]/blog/page.tsx

@@ -22,7 +22,7 @@ export default async function BlogPage({
         <main className="lg:col-span-8">
           <div className="mb-12">
             <h1 className="text-4xl font-bold mb-4">{messages.text.blog.list_title}</h1>
-            <p className="text-gray-600 text-lg">{messages.text.blog.list_subtitle}</p>
+            <p className="text-muted-foreground text-lg">{messages.text.blog.list_subtitle}</p>
           </div>
 
           {/* Articles List */}
@@ -37,14 +37,14 @@ export default async function BlogPage({
         <aside className="lg:col-span-4">
           <div className="sticky top-8">
             {/* Recent Posts */}
-            <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
+            <div className="bg-card rounded-xl shadow-lg p-8 mb-8">
               <h2 className="text-xl font-bold mb-6">{messages.text.blog.recent_posts}</h2>
               <div className="space-y-4">
                 {posts.slice(0, 5).map((post) => (
                   <Link
                     key={post.slug}
                     href={`/${lang}/blog/${post.slug}`}
-                    className="block hover:text-blue-600 text-base font-medium"
+                    className="block hover:text-primary text-base font-medium"
                   >
                     {post.frontmatter.title}
                   </Link>
@@ -52,7 +52,7 @@ export default async function BlogPage({
               </div>
             </div>
             {/* tags */}
-            <div className="bg-white rounded-xl shadow-lg p-8">
+            <div className="bg-card rounded-xl shadow-lg p-8">
               <h2 className="text-xl font-bold mb-6">{messages.text.blog.tags}</h2>
               <div className="space-y-3">
                 {/* Get all tags and deduplicate */}
@@ -62,10 +62,10 @@ export default async function BlogPage({
                   <Link
                     key={tag}
                     href={`/${lang}/blog/tag/${slugifyTag(tag)}`} // Jump to the tag filtering page
-                    className="flex items-center justify-between hover:text-blue-600"
+                    className="flex items-center justify-between hover:text-primary"
                   >
-                    <span className="text-gray-700 font-medium">{tag}</span>
-                    <span className="bg-gray-100 px-3 py-1 rounded-full text-sm text-gray-600">
+                    <span className="text-foreground font-medium">{tag}</span>
+                    <span className="bg-muted px-3 py-1 rounded-full text-sm text-muted-foreground">
                       {
                         posts.filter((p) => p.frontmatter.tags.includes(tag))
                           .length

frontend/app/[lang]/blog/tag/[tag]/page.tsx

@@ -51,7 +51,7 @@ export default async function TagPage({
         <main className="lg:col-span-8">
           <div className="mb-12">
             <h1 className="text-4xl font-bold mb-4">{messages.text.blog.tag_title_prefix}: {decodedTag}</h1>
-            <p className="text-gray-600 text-lg">
+            <p className="text-muted-foreground text-lg">
               {messages.text.blog.tag_subtitle_template.replace("{tag}", decodedTag)}
             </p>
           </div>

frontend/app/[lang]/globals.css

@@ -69,15 +69,16 @@
 }
 
 /* Custom prose styles */
+
 .prose {
-  @apply text-gray-600;
+  @apply text-muted-foreground;
 }
 
 .prose h1,
 .prose h2,
 .prose h3,
 .prose h4 {
-  @apply text-gray-900 font-bold mt-8 mb-4;
+  @apply text-foreground font-bold mt-8 mb-4;
 }
 
 .prose h1 {
@@ -106,31 +107,31 @@
 }
 
 .prose code {
-  @apply text-sm bg-gray-50 rounded px-1.5 py-0.5 text-gray-800 border border-gray-200;
+  @apply text-sm bg-muted rounded px-1.5 py-0.5 text-foreground border border-border;
 }
 
 .prose pre {
-  @apply my-6 p-4 bg-gray-50 rounded-lg overflow-x-auto border border-gray-200;
+  @apply my-6 p-4 bg-muted rounded-lg overflow-x-auto border border-border;
 }
 
 .prose pre code {
-  @apply bg-transparent text-gray-800 p-0 border-0;
+  @apply bg-transparent text-foreground p-0 border-0;
 }
 
 .prose blockquote {
-  @apply border-l-4 border-blue-500 pl-4 my-6 italic text-gray-600;
+  @apply border-l-4 border-primary pl-4 my-6 italic text-muted-foreground;
 }
 
 .prose table {
-  @apply min-w-full divide-y divide-gray-200 my-6;
+  @apply min-w-full divide-y divide-border my-6;
 }
 
 .prose th {
-  @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
+  @apply px-6 py-3 bg-muted text-left text-xs font-medium text-muted-foreground uppercase tracking-wider;
 }
 
 .prose td {
-  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
+  @apply px-6 py-4 whitespace-nowrap text-sm text-muted-foreground;
 }
 
 .prose img {
@@ -138,7 +139,7 @@
 }
 
 .prose figure figcaption {
-  @apply text-center text-sm text-gray-600 mt-2 italic;
+  @apply text-center text-sm text-muted-foreground mt-2 italic;
 }
 
 /* Hide GitHub ribbon on small screens */

frontend/components/ClipboardApp/FileListDisplay.tsx

@@ -394,7 +394,7 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
     return (
       <div
         key={item.name}
-        className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2 p-2 sm:p-3 border border-gray-100 rounded-lg"
+        className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2 p-2 sm:p-3 border border-border rounded-lg"
       >
         <Tooltip content={tooltipContent}>
           <div className="flex-1 min-w-0">
@@ -404,7 +404,7 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
                 ? `${item.name.slice(0, filenameDisplayLen - 3)}...`
                 : item.name}
             </span>
-            <span className="text-xs sm:text-sm text-gray-500">
+            <span className="text-xs sm:text-sm text-muted-foreground">
               {isFolder
                 ? `${formatFolderDis(
                     messages!.text.FileListDisplay.folder_dis_template,

frontend/components/ClipboardApp/FileTransferButton.tsx

@@ -59,7 +59,7 @@ const FileTransferButton = ({
     if (isSavedToDisk) {
       return {
         variant: "ghost" as const,
-        className: "mr-2 text-gray-500",
+        className: "mr-2 text-muted-foreground",
       };
     }
     if (isCurrentFileTransferring) {
@@ -70,20 +70,19 @@ const FileTransferButton = ({
     }
     if (isPendingSave) {
       return {
-        variant: "default" as const, // 使用更明显的样式
-        className: "mr-2 bg-green-600 hover:bg-green-700 text-white",
+        variant: "default" as const,
+        className: "mr-2",
       };
     }
     if (isOtherFileTransferring) {
       return {
         variant: "outline" as const,
-        className:
-          "mr-2 cursor-not-allowed bg-gray-100 border-gray-300 text-gray-500",
+        className: "mr-2 cursor-not-allowed bg-muted text-muted-foreground",
       };
     }
     return {
       variant: "outline" as const,
-      className: "mr-2 hover:bg-blue-50",
+      className: "mr-2 hover:bg-accent",
     };
   };
 
@@ -118,10 +117,7 @@ const FileTransferButton = ({
             </Button>
           </span>
         </TooltipTrigger>
-        <TooltipContent
-          side="top"
-          className="bg-gray-800 text-white px-3 py-2 rounded-md text-sm"
-        >
+        <TooltipContent side="top" className="px-3 py-2 rounded-md text-sm">
           {getTooltipContent()}
         </TooltipContent>
       </Tooltip>

frontend/components/ClipboardApp/FileUploadHandler.tsx

@@ -160,14 +160,14 @@ const FileUploadHandler: React.FC<FileUploadHandlerProps> = ({
   return (
     <>
       <div
-        className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer"
+        className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer"
         onClick={handleZoneClick}
       >
-        <p className="text-sm text-gray-600 mb-4">
+        <p className="text-sm text-muted-foreground mb-4">
           {messages.text.fileUploadHandler.chooseFileTips}
         </p>
-        <Upload className="h-12 w-12 mx-auto mb-4 text-blue-500" />
-        <p className="text-sm text-gray-600">{fileText}</p>
+        <Upload className="h-12 w-12 mx-auto mb-4 text-primary" />
+        <p className="text-sm text-muted-foreground">{fileText}</p>
 
         <Input
           id="file-upload"
@@ -202,13 +202,13 @@ const FileUploadHandler: React.FC<FileUploadHandlerProps> = ({
           <div className="flex justify-center gap-4 mt-6">
             <button
               onClick={handleSelectFile}
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+              className="px-4 py-2 rounded transition-colors bg-primary text-primary-foreground hover:bg-primary/90"
             >
               {messages.text.fileUploadHandler.SelectFile_dis}
             </button>
             <button
               onClick={handleSelectFolder}
-              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
+              className="px-4 py-2 rounded transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80"
             >
               {messages.text.fileUploadHandler.SelectFolder_dis}
             </button>

frontend/components/ClipboardApp/RetrieveTabPanel.tsx

@@ -98,7 +98,7 @@ export function RetrieveTabPanel({
 
   return (
     <div id="retrieve-panel" role="tabpanel" aria-labelledby="retrieve-tab">
-      <div className="mb-3 text-sm text-gray-600">
+      <div className="mb-3 text-sm text-muted-foreground">
         {retrieveRoomStatusText ||
           (isReceiverInRoom
             ? messages.text.ClipboardApp.roomStatus.connected_dis
@@ -178,7 +178,7 @@ export function RetrieveTabPanel({
         saveType={getReceiverSaveType()}
       />
       {retrieveMessage && (
-        <p className="mt-3 text-sm text-blue-600">{retrieveMessage}</p>
+        <p className="mt-3 text-sm text-primary">{retrieveMessage}</p>
       )}
     </div>
   );

frontend/components/ClipboardApp/SendTabPanel.tsx

@@ -21,7 +21,7 @@ const RichTextEditor = dynamic(
   {
     ssr: false, // This component is client-side only
     loading: () => (
-      <div className="p-4 border rounded-lg min-h-[200px] md:min-h-[400px] bg-gray-50 flex items-center justify-center">
+      <div className="p-4 border rounded-lg min-h-[200px] md:min-h-[400px] bg-muted flex items-center justify-center">
         Loading Editor...
       </div>
     ),
@@ -136,7 +136,7 @@ export function SendTabPanel({
 
   return (
     <div id="send-panel" role="tabpanel" aria-labelledby="send-tab">
-      <div className="mb-3 text-sm text-gray-600">
+      <div className="mb-3 text-sm text-muted-foreground">
         {shareRoomStatusText ||
           (isSenderInRoom
             ? messages.text.ClipboardApp.roomStatus.onlyOneMsg
@@ -166,7 +166,7 @@ export function SendTabPanel({
       <div className="space-y-3 mb-4">
         {/* Room ID input section */}
         <div className="space-y-2">
-          <p className="text-sm text-gray-600">
+          <p className="text-sm text-muted-foreground">
             {messages.text.ClipboardApp.html.inputRoomId_tips}
           </p>
           <div className="flex flex-col sm:flex-row gap-2">
@@ -243,7 +243,7 @@ export function SendTabPanel({
         </div>
       </div>
       {shareMessage && (
-        <p className="mt-3 text-sm text-blue-600">{shareMessage}</p>
+        <p className="mt-3 text-sm text-primary">{shareMessage}</p>
       )}
     </div>
   );

frontend/components/ClipboardApp/ShareCard.tsx

@@ -120,21 +120,21 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
     return <div>Loading...</div>;
   }
   return (
-    <div className="bg-blue-50 p-2 sm:p-4 rounded-lg border border-blue-200">
-      <p className="text-blue-700 mb-3 sm:mb-4 text-sm sm:text-base">
+    <div className="bg-primary/10 p-2 sm:p-4 rounded-lg border border-primary/20">
+      <p className="text-primary mb-3 sm:mb-4 text-sm sm:text-base">
         {messages.text.RetrieveMethod.P}
       </p>
 
       {/* Mobile-first responsive layout */}
       <div className="space-y-3 sm:space-y-4">
         {/* RoomID section */}
-        <div className="bg-white p-2 sm:p-3 rounded-lg border border-blue-100">
+        <div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
           <div className="space-y-2">
-            <p className="text-sm font-medium text-gray-700">
+            <p className="text-sm font-medium text-foreground">
               {messages.text.RetrieveMethod.RoomId_tips}
             </p>
             <div className="flex flex-col sm:flex-row sm:items-center gap-2">
-              <code className="flex-1 bg-gray-100 px-2 py-1 rounded text-sm font-mono break-all">
+              <code className="flex-1 bg-muted px-2 py-1 rounded text-sm font-mono break-all">
                 {RoomID}
               </code>
               <WriteClipboardButton
@@ -146,12 +146,12 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
         </div>
 
         {/* URL section */}
-        <div className="bg-white p-2 sm:p-3 rounded-lg border border-blue-100">
+        <div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
           <div className="space-y-2">
-            <p className="text-sm font-medium text-gray-700">
+            <p className="text-sm font-medium text-foreground">
               {messages.text.RetrieveMethod.url_tips}
             </p>
-            <div className="bg-gray-100 px-2 py-2 rounded text-xs sm:text-sm break-all font-mono">
+            <div className="bg-muted px-2 py-2 rounded text-xs sm:text-sm break-all font-mono">
               {shareLink}
             </div>
             <div className="flex justify-start">
@@ -164,15 +164,15 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
         </div>
 
         {/* QR Code section */}
-        <div className="bg-white p-2 sm:p-3 rounded-lg border border-blue-100">
+        <div className="bg-card p-2 sm:p-3 rounded-lg border border-border">
           <div className="space-y-3">
-            <p className="text-sm font-medium text-gray-700">
+            <p className="text-sm font-medium text-foreground">
               {messages.text.RetrieveMethod.scanQR_tips}
             </p>
 
             {/* QR Code display area - moved up for better mobile UX */}
             <div className="flex justify-center">
-              <div className="inline-block border-2 p-2 sm:p-4 bg-gray-50 rounded-lg">
+              <div className="inline-block border-2 p-2 sm:p-4 bg-muted rounded-lg">
                 <div ref={qrRef}>
                   <QRCodeSVG
                     value={shareLink}

frontend/components/Editor/EditorToolbar/AlignmentTools.tsx

@@ -9,21 +9,21 @@ export function AlignmentTools({ alignText }: AlignmentToolsProps) {
   return (
     <div className="flex flex-wrap gap-1">
       <button
-        className="p-1.5 hover:bg-gray-200 rounded"
+        className="p-1.5 hover:bg-accent rounded"
         onClick={() => alignText("left")}
         title="Align left"
       >
         <AlignLeft className="w-3.5 h-3.5" />
       </button>
       <button
-        className="p-1.5 hover:bg-gray-200 rounded"
+        className="p-1.5 hover:bg-accent rounded"
         onClick={() => alignText("center")}
         title="Align center"
       >
         <AlignCenter className="w-3.5 h-3.5" />
       </button>
       <button
-        className="p-1.5 hover:bg-gray-200 rounded"
+        className="p-1.5 hover:bg-accent rounded"
         onClick={() => alignText("right")}
         title="Align right"
       >

frontend/components/Editor/EditorToolbar/BasicFormatTools.tsx

@@ -14,7 +14,7 @@ export function BasicFormatTools({
     <div className="flex flex-wrap gap-1">
       <button
         className={`p-1.5 rounded ${
-          isStyleActive("bold") ? "bg-gray-200" : "hover:bg-gray-200"
+          isStyleActive("bold") ? "bg-accent" : "hover:bg-accent"
         }`}
         onClick={() => formatText("bold")}
         title="Bold"
@@ -23,7 +23,7 @@ export function BasicFormatTools({
       </button>
       <button
         className={`p-1.5 rounded ${
-          isStyleActive("italic") ? "bg-gray-200" : "hover:bg-gray-200"
+          isStyleActive("italic") ? "bg-accent" : "hover:bg-accent"
         }`}
         onClick={() => formatText("italic")}
         title="Italic"
@@ -32,7 +32,7 @@ export function BasicFormatTools({
       </button>
       <button
         className={`p-1.5 rounded ${
-          isStyleActive("underline") ? "bg-gray-200" : "hover:bg-gray-200"
+          isStyleActive("underline") ? "bg-accent" : "hover:bg-accent"
         }`}
         onClick={() => formatText("underline")}
         title="Underline"

frontend/components/Editor/EditorToolbar/InsertTools.tsx

@@ -14,21 +14,21 @@ export function InsertTools({
   return (
     <div className="flex flex-wrap gap-1">
       <button
-        className="p-1.5 hover:bg-gray-200 rounded"
+        className="p-1.5 hover:bg-accent rounded"
         onClick={insertLink}
         title="Insert url"
       >
         <Link2 className="w-3.5 h-3.5" />
       </button>
       <button
-        className="p-1.5 hover:bg-gray-200 rounded"
+        className="p-1.5 hover:bg-accent rounded"
         onClick={insertImage}
         title="Upload image"
       >
         <Image className="w-3.5 h-3.5" />
       </button>
       <button
-        className="p-1.5 hover:bg-gray-200 rounded"
+        className="p-1.5 hover:bg-accent rounded"
         onClick={insertCodeBlock}
         title="Insert code"
       >

frontend/components/Editor/RichTextEditor.tsx

@@ -129,7 +129,7 @@ const RichTextEditor: React.FC<EditorProps> = ({ onChange, value = "" }) => {
     <div className="w-full space-x-2 mb-4">
       <div className="border rounded-lg shadow-sm overflow-hidden">
         {/* Toolbar - Add light gray background and bottom border */}
-        <div className="flex flex-wrap gap-1 p-2 bg-gray-50 border-b">
+        <div className="flex flex-wrap gap-1 p-2 bg-muted border-b border-border">
           {/* Basic format tool group */}
           <BasicFormatTools
             isStyleActive={isStyleActive}
@@ -158,10 +158,10 @@ const RichTextEditor: React.FC<EditorProps> = ({ onChange, value = "" }) => {
           />
         </div>
 
-        {/* Editor area - Add pure white background and inner shadow effect */}
+        {/* Editor area - use theme tokens for background */}
         <div
           ref={editorRef}
-          className="p-4 min-h-[200px] md:min-h-[400px] focus:outline-none bg-white shadow-inner"
+          className="p-4 min-h-[200px] md:min-h-[400px] focus:outline-none bg-card shadow-inner"
           contentEditable
           onPaste={handlePaste}
           onInput={handleChange}

frontend/components/Editor/components/SelectMenu.tsx

@@ -10,7 +10,7 @@ export const SelectMenu: React.FC<SelectMenuProps> = ({
 }) => (
   <div className="relative inline-block">
     <select
-      className={`appearance-none bg-transparent border rounded p-1.5 pr-6 hover:bg-gray-200 focus:outline-none ${className}`}
+      className={`appearance-none bg-transparent border border-border rounded p-1.5 pr-6 hover:bg-accent focus:outline-none ${className}`}
       onChange={(e) => onChange(e.target.value)}
     >
       <option value="">{placeholder}</option>

frontend/components/blog/ArticleListItem.tsx

@@ -11,7 +11,7 @@ interface ArticleListItemProps {
 
 export function ArticleListItem({ post, lang, messages }: ArticleListItemProps) {
   return (
-    <article className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
+    <article className="bg-card rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
       <div className="relative h-80 w-full">
         <Image
           src={post.frontmatter.cover}
@@ -24,7 +24,7 @@ export function ArticleListItem({ post, lang, messages }: ArticleListItemProps)
       </div>
 
       <div className="p-8">
-        <div className="flex items-center gap-4 text-sm text-gray-500 mb-4">
+        <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
           <time className="font-medium">
             {new Date(post.frontmatter.date).toLocaleDateString(lang, {
               year: "numeric",
@@ -37,7 +37,7 @@ export function ArticleListItem({ post, lang, messages }: ArticleListItemProps)
             {post.frontmatter.tags.map((tag) => (
               <span
                 key={tag}
-                className="bg-gray-100 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors"
+                className="bg-muted px-3 py-1 rounded-full hover:bg-accent transition-colors"
               >
                 {tag}
               </span>
@@ -45,19 +45,19 @@ export function ArticleListItem({ post, lang, messages }: ArticleListItemProps)
           </div>
         </div>
         <Link href={`/${lang}/blog/${post.slug}`}>
-          <h2 className="text-3xl font-bold mb-4 hover:text-blue-600 transition-colors leading-tight">
+          <h2 className="text-3xl font-bold mb-4 hover:text-primary transition-colors leading-tight">
             {post.frontmatter.title}
           </h2>
         </Link>
 
-        <p className="text-gray-600 mb-6 text-lg leading-relaxed line-clamp-3">
+        <p className="text-muted-foreground mb-6 text-lg leading-relaxed line-clamp-3">
           {post.frontmatter.description}
         </p>
 
-        <div className="flex items-center justify-between pt-4 border-t border-gray-100">
+        <div className="flex items-center justify-between pt-4 border-t border-border">
           <Link
             href={`/${lang}/blog/${post.slug}`}
-            className="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center text-lg"
+            className="text-primary hover:text-primary/80 font-medium inline-flex items-center text-lg"
           >
             {messages.text.blog.read_more}
             <svg

frontend/components/blog/MDXComponents.tsx

@@ -71,7 +71,7 @@ export type MDXComponents = {
 // Custom MDX components
 export const mdxComponents: MDXComponents = {
   p: ({ children, ...props }) => (
-    <div className="mb-6 leading-relaxed text-gray-700" {...props}>
+    <div className="mb-6 leading-relaxed text-foreground" {...props}>
       {children}
     </div>
   ),
@@ -92,7 +92,7 @@ export const mdxComponents: MDXComponents = {
           alt={props.alt || ""}
         />
         {props.alt && (
-          <div className="text-center text-sm text-gray-600 mt-2 italic">
+          <div className="text-center text-sm text-muted-foreground mt-2 italic">
             {props.alt}
           </div>
         )}
@@ -101,7 +101,7 @@ export const mdxComponents: MDXComponents = {
   },
   pre: ({ children, ...props }) => (
     <pre
-      className="relative my-6 rounded-lg bg-gray-50 border border-gray-200 p-4 overflow-x-auto"
+      className="relative my-6 rounded-lg bg-muted border border-border p-4 overflow-x-auto"
       {...props}
     >
       {children}
@@ -111,13 +111,13 @@ export const mdxComponents: MDXComponents = {
     const isInlineCode = !className;
     return isInlineCode ? (
       <code
-        className="bg-gray-50 rounded px-1.5 py-0.5 text-gray-800 border border-gray-200 text-sm"
+        className="bg-muted rounded px-1.5 py-0.5 text-foreground border border-border text-sm"
         {...props}
       >
         {children}
       </code>
     ) : (
-      <code className="block text-gray-800 text-sm" {...props}>
+      <code className="block text-foreground text-sm" {...props}>
         {children}
       </code>
     );
@@ -125,7 +125,7 @@ export const mdxComponents: MDXComponents = {
   table: ({ children, ...props }) => (
     <div className="my-8 w-full overflow-x-auto">
       <table
-        className="min-w-full divide-y divide-gray-300 border border-gray-300"
+        className="min-w-full divide-y divide-border border border-border"
         {...props}
       >
         {children}
@@ -133,23 +133,23 @@ export const mdxComponents: MDXComponents = {
     </div>
   ),
   thead: ({ children, ...props }) => (
-    <thead className="bg-gray-50" {...props}>
+    <thead className="bg-muted" {...props}>
       {children}
     </thead>
   ),
   tbody: ({ children, ...props }) => (
-    <tbody className="divide-y divide-gray-200 bg-white" {...props}>
+    <tbody className="divide-y divide-border bg-card" {...props}>
       {children}
     </tbody>
   ),
   tr: ({ children, ...props }) => (
-    <tr className="hover:bg-gray-50" {...props}>
+    <tr className="hover:bg-accent" {...props}>
       {children}
     </tr>
   ),
   th: ({ children, ...props }) => (
     <th
-      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r last:border-r-0"
+      className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider border-r last:border-r-0"
       {...props}
     >
       {children}
@@ -157,7 +157,7 @@ export const mdxComponents: MDXComponents = {
   ),
   td: ({ children, ...props }) => (
     <td
-      className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 border-r last:border-r-0"
+      className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground border-r last:border-r-0"
       {...props}
     >
       {children}
@@ -165,7 +165,7 @@ export const mdxComponents: MDXComponents = {
   ),
   blockquote: ({ children, ...props }) => (
     <blockquote
-      className="border-l-4 border-blue-500 pl-4 my-4 italic text-gray-600 bg-gray-50 py-2 rounded-r-lg"
+      className="border-l-4 border-primary pl-4 my-4 italic text-muted-foreground bg-muted py-2 rounded-r-lg"
       {...props}
     >
       {children}
@@ -173,7 +173,7 @@ export const mdxComponents: MDXComponents = {
   ),
   ul: ({ children, ...props }) => (
     <ul
-      className="list-disc list-outside ml-6 my-6 space-y-2 text-gray-700"
+      className="list-disc list-outside ml-6 my-6 space-y-2 text-foreground"
       {...props}
     >
       {children}
@@ -181,7 +181,7 @@ export const mdxComponents: MDXComponents = {
   ),
   ol: ({ children, ...props }) => (
     <ol
-      className="list-decimal list-outside ml-6 my-6 space-y-2 text-gray-700"
+      className="list-decimal list-outside ml-6 my-6 space-y-2 text-foreground"
       {...props}
     >
       {children}

frontend/components/blog/TableOfContents.tsx

@@ -111,7 +111,7 @@ export const TableOfContents: React.FC<TableOfContentsProps> = ({
   if (toc.length === 0) return null;
 
   return (
-    <nav className="hidden lg:block sticky top-8 p-6 bg-gray-50 rounded-lg max-h-[calc(100vh-4rem)] overflow-y-auto">
+    <nav className="hidden lg:block sticky top-8 p-6 bg-muted rounded-lg max-h-[calc(100vh-4rem)] overflow-y-auto">
       <h4 className="text-lg font-semibold mb-4">{title}</h4>
       <ul className="space-y-2">
         {toc.map((item) => (
@@ -125,10 +125,10 @@ export const TableOfContents: React.FC<TableOfContentsProps> = ({
             <button
               onClick={() => scrollToHeader(item.id)}
               className={clsx(
-                "block w-full text-left py-1 text-sm hover:text-blue-600 transition-colors",
+                "block w-full text-left py-1 text-sm hover:text-primary transition-colors",
                 activeId === item.id
-                  ? "text-blue-600 font-medium"
-                  : "text-gray-600"
+                  ? "text-primary font-medium"
+                  : "text-muted-foreground"
               )}
             >
               {item.text}

frontend/components/web/HowItWorks.tsx

@@ -33,7 +33,7 @@ export default function HowItWorks({ messages }: PageContentProps) {
         <h2 className="text-3xl md:text-4xl font-bold mb-6">
           {messages.text.HowItWorks.h2}
         </h2>
-        <p className="text-gray-600 mb-8">{messages.text.HowItWorks.h2_P}</p>
+        <p className="text-muted-foreground mb-8">{messages.text.HowItWorks.h2_P}</p>
         <Button className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white rounded-full px-8 py-6 text-lg">
           {messages.text.HowItWorks.btn_try}
         </Button>
@@ -60,7 +60,7 @@ export default function HowItWorks({ messages }: PageContentProps) {
                 </div>
                 <div className="flex-1">
                   <h3 className="text-xl font-bold mb-2">{step.title}</h3>
-                  <p className="text-gray-600">{step.description}</p>
+                  <p className="text-muted-foreground">{step.description}</p>
                 </div>
               </div>
             ))}
@@ -69,7 +69,7 @@ export default function HowItWorks({ messages }: PageContentProps) {
 
         {/* Right Side - Demo Animation */}
         <div className="w-full md:w-1/2">
-          <div className="bg-white rounded-lg shadow-lg overflow-hidden">
+          <div className="bg-card rounded-lg shadow-lg overflow-hidden">
             <video autoPlay loop muted playsInline width="1920" height="75">
               <source src="/HowItWorks.webm" type="video/webm" />
             </video>

frontend/lib/mdx-config.ts

@@ -88,7 +88,7 @@ export const mdxOptions = {
             if (node.tagName === "table") {
               (node as ExtendedElement).properties = {
                 ...((node as ExtendedElement).properties || {}),
-                className: "min-w-full divide-y divide-gray-300",
+                className: "min-w-full divide-y divide-border",
               };
             }
           }) as BuildVisitor<Root, "element">);