diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index ff4289c..75d50b5 100644
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -112,7 +112,7 @@ export default async function ArticlePage({ params }: ArticlePageProps) {
         <header className="mb-8 text-center">
           <div className="flex flex-col items-center justify-center">
             <Badge>Article</Badge>
-            <h1 className="mb-4 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-gray-50 dark:to-gray-300">
+            <h1 className="mb-4 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]">
               {post.frontmatter.title}
             </h1>
           </div>
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index d17efcc..06a9b4c 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -91,7 +91,7 @@ export default async function BlogPage() {
           <Badge>Blog</Badge>
           <h1
             id="blog-title"
-            className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-gray-50 dark:to-gray-300"
+            className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]"
           >
             AI & Content Strategy Insights
           </h1>
diff --git a/app/client-page/page.tsx b/app/client-page/page.tsx
index 3865fed..a796d2c 100644
--- a/app/client-page/page.tsx
+++ b/app/client-page/page.tsx
@@ -12,7 +12,7 @@ export default function HomePage() {
         </p>
         <Link 
           href="/"
-          className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+          className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[rgb(var(--color-foreground))]/90 dark:hover:bg-[rgb(var(--color-foreground))]/80 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
         >
           Go to the main page
         </Link>
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 55e542d..7994035 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -33,13 +33,13 @@ const buttonVariants = tv({
       ],
       secondary: [
         // border
-        "border-gray-300 dark:border-gray-800",
+        "border-[rgb(var(--color-border))]",
         // text color
-        "text-text-secondary-dark dark:text-gray-50",
+        "text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]",
         // background color
-        "bg-white dark:bg-gray-950",
+        "bg-[rgb(var(--color-surface))]",
         //hover color
-        "hover:bg-gray-50 dark:hover:bg-gray-900/60",
+        "hover:bg-[rgb(var(--color-surface))]/90",
         // disabled
         "disabled:text-secondary-light",
         "disabled:dark:text-text-secondary",
@@ -50,14 +50,14 @@ const buttonVariants = tv({
         // border
         "border-transparent",
         // text color
-        "text-text-secondary-dark dark:text-gray-50",
+        "text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]",
         // background color
-        "bg-light dark:bg-gray-900",
+        "bg-light dark:bg-[rgb(var(--color-surface))]",
         // hover color
-        "hover:bg-gray-300/70 dark:hover:bg-gray-800/80",
+        "hover:bg-gray-300/70 dark:hover:bg-[rgb(var(--color-border))]/20",
         // disabled
         "disabled:text-secondary-light disabled:bg-light",
-        "disabled:dark:bg-gray-800 disabled:dark:text-text-secondary",
+        "disabled:dark:bg-[rgb(var(--color-border))]/20 disabled:dark:text-text-secondary",
       ],
       ghost: [
         // base
@@ -65,9 +65,9 @@ const buttonVariants = tv({
         // border
         "border-transparent",
         // text color
-        "text-text-secondary-dark dark:text-gray-50",
+        "text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]",
         // hover color
-        "bg-transparent hover:bg-light dark:hover:bg-gray-800/80",
+        "bg-transparent hover:bg-light dark:hover:bg-[rgb(var(--color-border))]/20",
         // disabled
         "disabled:text-secondary-light",
         "disabled:dark:text-text-secondary",
diff --git a/app/components/DonutChart.tsx b/app/components/DonutChart.tsx
index 002d134..25c2628 100644
--- a/app/components/DonutChart.tsx
+++ b/app/components/DonutChart.tsx
@@ -157,9 +157,9 @@ const ChartTooltip = ({
           // base
           "rounded px-2 py-1 text-xs shadow-md",
           // border color
-          "border border-gray-200 dark:border-gray-800",
+          "border border-[rgb(var(--color-border))]",
           // background color
-          "bg-white dark:bg-gray-950",
+          "bg-[rgb(var(--color-surface))]",
         )}
       >
         {payload.map(({ value, category }, index) => (
@@ -167,10 +167,10 @@ const ChartTooltip = ({
             key={`id-${index}`}
             className="flex items-center justify-between gap-2"
           >
-            <span className="whitespace-nowrap text-gray-700 dark:text-gray-300">
+            <span className="whitespace-nowrap text-gray-700 text-[rgb(var(--color-muted-foreground))]">
               {category}
             </span>
-            <span className="whitespace-nowrap font-medium tabular-nums text-gray-900 dark:text-gray-50">
+            <span className="whitespace-nowrap font-medium tabular-nums text-[rgb(var(--color-foreground))]">
               {valueFormatter(value)}
             </span>
           </div>
@@ -313,7 +313,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(
             <ReChartsDonutChart>
               {isDonut && showLabel && (
                 <text
-                  className="fill-gray-900 text-sm dark:fill-gray-50"
+                  className="text-sm fill-[rgb(var(--color-foreground))]"
                   textAnchor="middle"
                   dominantBaseline="middle"
                   x="50%"
@@ -324,7 +324,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(
               )}
               <Pie
                 className={cx(
-                  "[&_.recharts-pie-sector]:outline-hidden stroke-white dark:stroke-gray-950",
+                  "[&_.recharts-pie-sector]:outline-hidden stroke-[rgb(var(--color-surface))]",
                   onValueChange ? "cursor-pointer" : "cursor-default",
                 )}
                 data={pieData}
diff --git a/app/components/blog/AiMarketShareChart.tsx b/app/components/blog/AiMarketShareChart.tsx
index 9aef1ed..08c6708 100644
--- a/app/components/blog/AiMarketShareChart.tsx
+++ b/app/components/blog/AiMarketShareChart.tsx
@@ -37,10 +37,10 @@ const data: DataItem[] = [
 export const AiMarketShareChart = () => {
   return (
     <div className="mx-auto max-w-2xl pt-4">
-      <h3 className="mb-4 text-center text-lg font-medium text-gray-900 dark:text-gray-50">
+      <h3 className="mb-4 text-center text-lg font-medium text-[rgb(var(--color-foreground))]">
         AI Chatbot Market Share (Usage)
       </h3>
-      <p className="text-center text-sm text-gray-700 dark:text-gray-300">
+      <p className="text-center text-sm text-[rgb(var(--color-muted-foreground))]">
         Market distribution by platform
       </p>
       <DonutChart
diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx
index 74b6954..9622c96 100644
--- a/app/components/mdx.tsx
+++ b/app/components/mdx.tsx
@@ -38,7 +38,7 @@ function CustomHeading(props: any) {
 
 export const H1 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
   <CustomHeading
-    className="text-3xl font-bold normal-case tracking-tight text-text-secondary-dark sm:text-4xl dark:text-gray-50"
+    className="text-3xl font-bold normal-case tracking-tight text-text-secondary-dark sm:text-4xl dark:text-[rgb(var(--color-foreground))]"
     level={1}
   >
     {children}
@@ -47,7 +47,7 @@ export const H1 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
 
 export const H2 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
   <CustomHeading
-    className="mb-4 text-lg font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-gray-50"
+    className="mb-4 text-lg font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]"
     level={2}
   >
     {children}
@@ -56,7 +56,7 @@ export const H2 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
 
 export const H3 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
   <CustomHeading
-    className="mb-2 font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-gray-50"
+    className="mb-2 font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]"
     level={3}
   >
     {children}
@@ -117,7 +117,7 @@ export const Ul = (props: React.HTMLAttributes<HTMLUListElement>) => (
 
 export const Bold = (props: React.HTMLAttributes<HTMLSpanElement>) => (
   <span
-    className="font-semibold text-text-secondary-dark dark:text-gray-50"
+    className="font-semibold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]"
     {...props}
   />
 );
@@ -177,7 +177,7 @@ export const BlogEntry = ({
   };
 
   return (
-    <article className="relative my-20 flex flex-col justify-center gap-x-14 border-b border-light md:flex-row dark:border-gray-800">
+    <article className="relative my-20 flex flex-col justify-center gap-x-14 border-b border-light md:flex-row dark:border-[rgb(var(--color-border))]">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(blogPostSchema) }}
@@ -212,7 +212,7 @@ export const ArticleImage = ({
     alt={alt}
     width={width}
     height={height}
-    className="mb-10 overflow-hidden rounded-xl shadow-md shadow-black/15 ring-1 ring-light/50 dark:ring-gray-800"
+    className="mb-10 overflow-hidden rounded-xl shadow-md shadow-black/15 ring-1 ring-light/50 dark:ring-[rgb(var(--color-border))]"
     {...props}
   />
 );
diff --git a/app/components/ui/Footer.tsx b/app/components/ui/Footer.tsx
index a2eebc8..f79d484 100644
--- a/app/components/ui/Footer.tsx
+++ b/app/components/ui/Footer.tsx
@@ -13,7 +13,7 @@ export default function Footer() {
   return (
     <footer id="footer">
       <div className="mx-auto max-w-6xl px-3 pb-8 ">
-        <div className="flex flex-col items-center justify-between gap-4 border-t border-light pt-8  sm:flex-row dark:border-gray-800">
+        <div className="flex flex-col items-center justify-between gap-4 border-t border-light pt-8  sm:flex-row dark:border-[rgb(var(--color-border))]">
           <a
             href={siteConfig.relensUrl}
             className="dark:text-secondary-light text-sm leading-5 text-text-secondary-semi-light"
diff --git a/app/components/ui/HeroImage.tsx b/app/components/ui/HeroImage.tsx
index 6b52c2f..0764767 100644
--- a/app/components/ui/HeroImage.tsx
+++ b/app/components/ui/HeroImage.tsx
@@ -9,7 +9,7 @@ export default function HeroImage() {
       className="flow-root max-w-[calc(100vw-1.5rem)]"
     >
       <motion.div
-        className="max-w-full rounded-2xl bg-slate-50/40 p-2 ring-1 ring-inset ring-slate-200/50 dark:bg-gray-900/70 dark:ring-white/10"
+        className="max-w-full rounded-2xl bg-[rgb(var(--color-surface))]/70 p-2 ring-1 ring-inset ring-[rgb(var(--color-border))]/50 dark:bg-[rgb(var(--color-surface))]/70 dark:ring-[rgb(var(--color-border))]/50"
         initial={{ opacity: 0, y: 20, scale: 0.95 }}
         whileInView={{ opacity: 1, y: 0, scale: 1 }}
         transition={{
@@ -19,7 +19,7 @@ export default function HeroImage() {
         }}
         viewport={{ once: true, amount: 0.3 }}
       >
-        <div className="max-w-full rounded-xl bg-white ring-1 ring-slate-900/5 dark:bg-slate-950 dark:ring-white/15">
+        <div className="max-w-full rounded-xl bg-[rgb(var(--color-surface))] ring-1 ring-[rgb(var(--color-border))]/50">
           <motion.video
             src="/demo.webm"
             className="max-w-full rounded-xl shadow-2xl sepia-[0.05] dark:shadow-indigo-600/10"
diff --git a/app/components/ui/HowItWorks.tsx b/app/components/ui/HowItWorks.tsx
index c850c0a..62791e1 100644
--- a/app/components/ui/HowItWorks.tsx
+++ b/app/components/ui/HowItWorks.tsx
@@ -44,7 +44,7 @@ export default function HowItWorks({
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.1 }}
               viewport={{ once: true }}
-              className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-3xl font-bold tracking-tighter text-transparent sm:text-5xl dark:from-gray-50 dark:to-gray-300"
+              className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-3xl font-bold tracking-tighter text-transparent sm:text-5xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]"
             >
               {title}
             </motion.h2>
@@ -63,7 +63,7 @@ export default function HowItWorks({
             className="grid grid-cols-1 items-center gap-8 md:grid-cols-2"
           >
             <div className="order-1">
-              <div className="relative aspect-[16/10] w-full overflow-hidden rounded-2xl border border-light bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
+              <div className="relative aspect-[16/10] w-full overflow-hidden rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))]">
                 <Image
                   src={step.imagePath || "/images/preview.png"}
                   alt={step.title}
@@ -74,7 +74,7 @@ export default function HowItWorks({
               </div>
             </div>
             <div className="order-2">
-              <h3 className="text-2xl font-semibold text-text-secondary-dark sm:text-3xl dark:text-gray-50">
+              <h3 className="text-2xl font-semibold text-text-secondary-dark sm:text-3xl dark:text-[rgb(var(--color-foreground))]">
                 {step.title}
               </h3>
               <p className="mt-4 max-w-md text-justify leading-7 text-text-secondary dark:text-secondary-light">
diff --git a/app/components/ui/Navbar.tsx b/app/components/ui/Navbar.tsx
index 0609e44..ecb47c9 100644
--- a/app/components/ui/Navbar.tsx
+++ b/app/components/ui/Navbar.tsx
@@ -54,8 +54,8 @@ export const Navigation: FC<NavigationProps> = ({ sticky = true }) => {
           : "relative",
         open === true ? "h-auto" : "h-18",
         (scrolled || open) && sticky === true
-          ? "backdrop-blur-nav max-w-3xl border-gray-600 bg-background/90 shadow-xl shadow-black/10"
-          : "bg-white/0"
+          ? "backdrop-blur-nav max-w-3xl border-[rgb(var(--color-border))] bg-[rgb(var(--color-background))]/90 shadow-xl shadow-black/10"
+          : "bg-transparent"
       )}
     >
       <div className="w-full md:my-auto">
diff --git a/app/globals.css b/app/globals.css
index a873226..c8a36a5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,15 +3,40 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  color-scheme: light;
+
+  /* Core color tokens (RGB channels) */
+  --color-background: 255 255 255; /* #ffffff */
+  --color-foreground: 23 23 23; /* #171717 */
+  --color-primary: 48 144 254; /* #3090fe */
+  --color-light: 230 246 255; /* #e6f6ff */
+
+  /* Surfaces and borders */
+  --color-surface: 255 255 255; /* cards, panels */
+  --color-border: 229 231 235; /* tailwind gray-200 */
+
+  /* Muted */
+  --color-muted-foreground: 107 114 128; /* tailwind gray-500 */
+
+  --color-text: 20 20 19; /* #141413 */
+  --color-text-secondary-light: 112 112 105; /* #707069 */
+  --color-text-secondary-semi-light: 92 92 85; /* #5c5c55 */
+  --color-text-secondary: 72 60 51; /* #483c33 */
+  --color-text-secondary-dark: 32 32 29; /* #20201d */
+
+  /* Legacy aliases for arbitrary color utilities already in use */
+  --background: rgb(var(--color-background));
+  --foreground: rgb(var(--color-foreground));
+  --primary-color: rgb(var(--color-primary));
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+.dark {
+  color-scheme: dark;
+  --color-background: 10 10 10; /* #0a0a0a */
+  --color-foreground: 237 237 237; /* #ededed */
+  --color-surface: 10 10 10; /* near bg for subtle panels */
+  --color-border: 31 41 55; /* tailwind gray-800 */
+  --color-muted-foreground: 156 163 175; /* tailwind gray-400 */
 }
 
 @theme inline {
@@ -22,7 +47,7 @@
 }
 
 body {
-  background: var(--background);
+  background-color: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -36,10 +61,7 @@ body {
   src: url("/fonts/NanumPenScript.woff2") format("woff2");
 }
 
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-}
+
 
 .backdrop-blur {
   -webkit-backdrop-filter: blur(3px);
@@ -50,7 +72,7 @@ body {
 .backdrop-blur-nav {
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
-  background-color: color-mix(in srgb, var(--background) 80%, transparent);
+  background-color: color-mix(in srgb, var(--background) 75%, transparent);
 }
 
 code {
diff --git a/app/layout.tsx b/app/layout.tsx
index 02509cd..0928200 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -39,6 +39,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head>
         <NextChatSDKBootstrap baseUrl={baseURL} />
+        <ThemeBootstrap />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
@@ -68,9 +69,10 @@ function NextChatSDKBootstrap({ baseUrl }: { baseUrl: string }) {
                   mutation.target === htmlElement
                 ) {
                   const attrName = mutation.attributeName;
-                  if (attrName && attrName !== "suppresshydrationwarning") {
-                    htmlElement.removeAttribute(attrName);
-                  }
+                  // Preserve critical attributes like class and data-theme
+                  if (!attrName) return;
+                  const preserve = ["suppresshydrationwarning", "class", "data-theme"];
+                  if (preserve.includes(attrName)) return;
                 }
               });
             });
@@ -185,3 +187,22 @@ function NextChatSDKBootstrap({ baseUrl }: { baseUrl: string }) {
     </>
   );
 }
+
+function ThemeBootstrap() {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `(() => {
+  try {
+    const stored = localStorage.getItem('theme');
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = stored || (systemDark ? 'dark' : 'light');
+    const root = document.documentElement;
+    if (theme === 'dark') root.classList.add('dark');
+    else root.classList.remove('dark');
+  } catch {}
+})();`,
+      }}
+    />
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 297da19..ddfa765 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -31,7 +31,7 @@ export default function Home() {
             style={{ animationDuration: "1400ms" }}
           >
             <div
-              className="absolute inset-x-0 -bottom-20 -mx-10 h-2/4 bg-gradient-to-t from-[background] via-[background] to-transparent lg:h-1/4 dark:from-gray-950 dark:via-gray-950"
+              className="absolute inset-x-0 -bottom-20 -mx-10 h-2/4 bg-gradient-to-t from-[rgb(var(--color-background))] via-[rgb(var(--color-background))] to-transparent lg:h-1/4"
               aria-hidden="true"
             />
             <HeroImage />
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index e3284da..7bbf614 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -58,7 +58,7 @@ export default function Privacy() {
         <Badge>Privacy Policy</Badge>
         <h1
           id="privacy-overview"
-          className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-gray-50 dark:to-gray-300"
+          className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]"
         >
           <Balancer>Data Protection & Privacy Policy</Balancer>
         </h1>
@@ -89,7 +89,7 @@ export default function Privacy() {
             as applicable.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             1. Provider
           </h3>
           <p>
@@ -108,7 +108,7 @@ export default function Privacy() {
             <p>Email: contact@relens.ai</p>
           </div>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             2. Data Processing to Enable Use
           </h3>
           <p>
@@ -132,7 +132,7 @@ export default function Privacy() {
             para. 1 sentence 1 lit. f GDPR.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             3. Data Processing upon Request
           </h3>
           <p>
@@ -142,7 +142,7 @@ export default function Privacy() {
             certain data needs to be provided.
           </p>
 
-          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             3.1. Demo Booking and Contact
           </h3>
           <p>
@@ -170,7 +170,7 @@ export default function Privacy() {
             (legitimate interest in providing the service).
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             4. Data Processing for Service Optimization
           </h3>
           <p>
@@ -193,7 +193,7 @@ export default function Privacy() {
             Ghostery to prevent tracking.
           </p>
 
-          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             4.1. PostHog Analytics
           </h3>
           <p>
@@ -229,7 +229,7 @@ export default function Privacy() {
             place.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             5. Data Transfer
           </h3>
           <p>
@@ -238,7 +238,7 @@ export default function Privacy() {
             another legal basis applies.
           </p>
 
-          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             5.1. Data Transfer to Non-EU Countries
           </h3>
           <p>
@@ -249,7 +249,7 @@ export default function Privacy() {
             under Art. 49 GDPR.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             6. Storage Duration
           </h3>
           <p>
@@ -257,7 +257,7 @@ export default function Privacy() {
             for which it was processed, or until legal retention periods expire.
           </p>
 
-          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-4 mt-8 text-lg font-semibold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             6.1. Security Measures
           </h3>
           <p>
@@ -265,7 +265,7 @@ export default function Privacy() {
             against unauthorized access and loss.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             7. Your Rights
           </h3>
           <p>
@@ -282,7 +282,7 @@ export default function Privacy() {
             authority if you reside in the EU.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             8. Right to Object
           </h3>
           <p>
@@ -291,7 +291,7 @@ export default function Privacy() {
             para. 1 lit. f GDPR).
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             9. Changes to the Privacy Policy
           </h3>
           <p>
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index 498a780..f1f6564 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -58,7 +58,7 @@ export default function Terms() {
         <Badge>Terms of Use</Badge>
         <h1
           id="terms-overview"
-          className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-gray-50 dark:to-gray-300"
+          className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]"
         >
           <Balancer>Service Terms & Conditions</Balancer>
         </h1>
@@ -76,7 +76,7 @@ export default function Terms() {
         <div className="prose prose-gray max-w-none dark:prose-invert">
           <p>ReLens AI &ndash; Terms of Use</p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             1. Scope and Parties
           </h3>
 
@@ -105,7 +105,7 @@ export default function Terms() {
             expressly agreed to them in writing.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             2. Services Provided by ReLens AI
           </h3>
 
@@ -150,7 +150,7 @@ export default function Terms() {
             improvements, or results from using the Service.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             3. Customer Obligations
           </h3>
 
@@ -174,7 +174,7 @@ export default function Terms() {
             contract for cause pursuant to Section 7.3 below.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             4. Intellectual Property and Data
           </h3>
 
@@ -203,7 +203,7 @@ export default function Terms() {
             to retain it.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             5. Fees, Payment Terms, and Set-off
           </h3>
 
@@ -240,7 +240,7 @@ export default function Terms() {
             final legal judgment.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             6. Limitation of Liability
           </h3>
 
@@ -283,7 +283,7 @@ export default function Terms() {
             such breach.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             7. Term and Termination
           </h3>
 
@@ -336,7 +336,7 @@ export default function Terms() {
             period, except for data we must retain by law.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             8. Governing Law and Jurisdiction
           </h3>
 
@@ -357,7 +357,7 @@ export default function Terms() {
             appropriate jurisdiction if necessary.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             9. Reference Use
           </h3>
 
@@ -374,7 +374,7 @@ export default function Terms() {
             this context.
           </p>
 
-          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-gray-50">
+          <h3 className="mb-6 mt-12 text-xl font-bold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]">
             10. Final Provisions
           </h3>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 600d1cd..770b2d1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,11 +1,13 @@
 import type { Config } from "tailwindcss";
 
-const primary = "#3090fe";
-const background = "#edf2f5";
-const light = "#e6f6ff";
+// All colors flow from CSS variables for easy theming
+const primary = "rgb(var(--color-primary))";
+const background = "rgb(var(--color-background))";
+const light = "rgb(var(--color-light))";
 
 const config: Config = {
-  darkMode: "selector",
+  // Use class strategy; .dark on <html> or <body>
+  darkMode: "class",
   content: [
     "./app/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -17,13 +19,18 @@ const config: Config = {
       colors: {
         primary,
         background,
+        foreground: "rgb(var(--color-foreground))",
+        surface: "rgb(var(--color-surface))",
+        border: "rgb(var(--color-border))",
         white: "#ffffff",
         light,
-        "text-secondary-light": "#707069",
-        "text-secondary-semi-light": "#5c5c55",
-        "text-secondary": "#483c33",
-        "text-secondary-dark": "#20201d",
-        text: "#141413",
+        // Map text tokens to CSS vars for light/dark parity
+        "text-secondary-light": "rgb(var(--color-text-secondary-light))",
+        "text-secondary-semi-light": "rgb(var(--color-text-secondary-semi-light))",
+        "text-secondary": "rgb(var(--color-text-secondary))",
+        "text-secondary-dark": "rgb(var(--color-text-secondary-dark))",
+        text: "rgb(var(--color-text))",
+        "muted-foreground": "rgb(var(--color-muted-foreground))",
       },
       fontFamily: {
         handwriting: ["var(--font-handwriting)", "cursive"],
@@ -35,14 +42,22 @@ const config: Config = {
               borderLeftColor: primary,
             },
             "ul > li::marker": {
-              color: "#141413",
+              color: "rgb(var(--color-text))",
             },
-            color: "#141413",
+            color: "rgb(var(--color-text))",
             h2: {
-              color: "#483c33",
+              color: "rgb(var(--color-text-secondary))",
             },
           },
         },
+        invert: {
+          css: {
+            blockquote: {
+              borderLeftColor: primary,
+            },
+            color: "rgb(var(--color-foreground))",
+          },
+        },
       }),
       keyframes: {
         hide: {