adding appearance toggle (light/dark mode)

app/cookies/page.tsx

@@ -13,6 +13,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { site } from "@/content";
+import ThemeToggle from "@/components/ThemeToggle";
 
 const lastUpdated = "2 May 2026";
 
@@ -37,7 +38,7 @@ export default function CookiePolicyPage() {
 
       {/* Lightweight header — just a back-link */}
       <header className="border-b border-[var(--border)]">
-        <div className="mx-auto flex h-20 w-full max-w-3xl items-center px-6 sm:px-8">
+        <div className="mx-auto flex h-20 w-full max-w-3xl items-center justify-between gap-4 px-6 sm:px-8">
           <Link
             href="/"
             className="inline-flex items-center gap-2 text-sm text-[var(--text-soft)] transition-colors hover:text-[var(--text)]"
@@ -45,6 +46,7 @@ export default function CookiePolicyPage() {
             <span aria-hidden="true">←</span>
             Back to Novarix Networks
           </Link>
+          <ThemeToggle />
         </div>
       </header>
 
@@ -78,7 +80,7 @@ export default function CookiePolicyPage() {
               What we store
             </h2>
             <p className="mt-3">
-              We use one small browser storage entry. It is first-party,
+              We use two small browser storage entries. Both are first-party,
               confined to your browser, and never shared with anyone:
             </p>
 
@@ -96,6 +98,21 @@ export default function CookiePolicyPage() {
                   every page. Persists until you clear your browser data.
                 </p>
               </div>
+
+              <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-5 backdrop-blur sm:p-6">
+                <p className="font-mono text-sm font-semibold text-[var(--text)]">
+                  novarix-theme
+                </p>
+                <p className="mt-2 text-sm">
+                  <span className="font-semibold text-[var(--text)]">
+                    Preference.
+                  </span>{" "}
+                  Stored in <code>localStorage</code>. Remembers whether you
+                  chose light mode or dark mode so the site uses your preferred
+                  theme on future visits. Persists until you clear your browser
+                  data.
+                </p>
+              </div>
             </div>
           </section>