diff --git a/packages/email/templates/layouts/main.html b/packages/email/templates/layouts/main.html
index f8f5699..c03a9c5 100644
--- a/packages/email/templates/layouts/main.html
+++ b/packages/email/templates/layouts/main.html
@@ -9,28 +9,39 @@
   <noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
   <![endif]-->
   <title>{{ page.title || 'sexy.pivoine.art' }}</title>
+
+  <!-- Noto Sans for clients that support web fonts (Gmail, Apple Mail) -->
+  <style plain>
+    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap');
+  </style>
+
   <style>
     @import "@maizzle/tailwindcss";
 
     @theme {
-      /* Brand colors — match frontend app.css */
-      --color-brand: oklch(56.971% 0.27455 319.257);
-      --color-brand-foreground: oklch(0.98 0.01 320);
-      --color-brand-dark: oklch(48% 0.26 319);
+      /* ── Design tokens — exact mirror of frontend app.css :root ── */
+      --color-background:        oklch(0.98 0.01 320);
+      --color-foreground:        oklch(0.08 0.02 280);
+      --color-card:              oklch(0.99 0.005 320);
+      --color-card-foreground:   oklch(0.08 0.02 280);
+      --color-muted:             oklch(0.95 0.01 280);
+      --color-muted-foreground:  oklch(0.4 0.02 280);
+      --color-border:            oklch(0.85 0.02 280);
+      --color-primary:           oklch(56.971% 0.27455 319.257);
+      --color-primary-foreground: oklch(0.98 0.01 320);
 
-      /* Surface */
-      --color-surface: oklch(0.98 0.01 320);
-      --color-on-dark: oklch(0.98 0.01 280);
+      /* ── Font ── */
+      --font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                   Helvetica, Arial, sans-serif;
     }
   </style>
 </head>
-<body class="bg-[oklch(0.95_0.01_310)] m-0 p-0 font-sans">
+<body class="bg-background m-0 p-0 font-sans">
 
   <!-- Preview text (hidden) -->
   <if condition="page.previewText || previewText">
     <div class="hidden max-h-0 overflow-hidden">
       {{ page.previewText || previewText }}
-      <!-- padding to push any trailing content out of preview -->
       &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
     </div>
   </if>
@@ -38,31 +49,31 @@
   <div class="py-8 px-4">
     <table class="w-full max-w-[600px] mx-auto" role="presentation" cellpadding="0" cellspacing="0" border="0">
 
-      <!-- Brand header -->
+      <!-- Brand header — uses --foreground as dark bg -->
       <tr>
-        <td class="bg-[oklch(0.08_0.02_280)] rounded-t-2xl px-8 py-6 text-center">
+        <td class="bg-foreground rounded-t-2xl px-8 py-6 text-center">
           <a href="{{ baseUrl }}" style="text-decoration: none">
-            <span class="text-sm font-semibold tracking-[0.22em] uppercase text-on-dark">
-              sexy<span class="text-brand">.</span>pivoine<span class="text-brand">.</span>art
+            <span class="text-sm font-semibold tracking-[0.22em] uppercase text-background">
+              sexy<span class="text-primary">.</span>pivoine<span class="text-primary">.</span>art
             </span>
           </a>
         </td>
       </tr>
 
-      <!-- Body -->
+      <!-- Card body -->
       <tr>
-        <td class="bg-white px-8 py-10 text-[14px] text-zinc-700 leading-relaxed">
+        <td class="bg-card px-8 py-10 text-[14px] text-card-foreground leading-relaxed">
           <yield />
         </td>
       </tr>
 
       <!-- Footer -->
       <tr>
-        <td class="bg-zinc-50 border-t border-zinc-100 rounded-b-2xl px-8 py-6 text-center">
-          <p class="text-[11px] text-zinc-400 m-0">
+        <td class="bg-muted border-t border-border rounded-b-2xl px-8 py-6 text-center">
+          <p class="text-[11px] text-muted-foreground m-0">
             &copy; {{ new Date().getFullYear() }} sexy.pivoine.art &mdash; For adults only (18+)
           </p>
-          <p class="text-[11px] text-zinc-400 mt-2 mb-0">
+          <p class="text-[11px] text-muted-foreground mt-2 mb-0">
             If you did not request this email, you can safely ignore it.
           </p>
         </td>
diff --git a/packages/email/templates/password-reset.html b/packages/email/templates/password-reset.html
index 83ec6a2..fb32e6d 100644
--- a/packages/email/templates/password-reset.html
+++ b/packages/email/templates/password-reset.html
@@ -5,38 +5,38 @@ previewText: "You requested a password reset. Use the link below to set a new on
 
 <x-main>
 
-  <h1 class="text-[22px] font-semibold text-zinc-900 m-0 mb-2">
+  <h1 class="text-[22px] font-semibold text-foreground m-0 mb-2">
     Reset your password
   </h1>
-  <p class="text-zinc-500 m-0 mb-6">
+  <p class="text-muted-foreground m-0 mb-6">
     We received a request to reset the password for your account. Click the button below to choose a new one.
   </p>
 
-  <!-- CTA button -->
+  <!-- CTA button — inline style needed for Outlook -->
   <table role="presentation" cellpadding="0" cellspacing="0" border="0" class="mb-6">
     <tr>
       <td class="rounded-lg" style="background: #b700d9">
         <a href="{{ url }}"
-           class="inline-block px-8 py-[14px] text-[14px] font-semibold text-white no-underline rounded-lg"
-           style="background: #b700d9">
+           class="inline-block px-8 py-[14px] text-[14px] font-semibold text-primary-foreground no-underline rounded-lg"
+           style="background: #b700d9; color: #faf4fb">
           Reset my password
         </a>
       </td>
     </tr>
   </table>
 
-  <p class="text-[13px] text-zinc-500 m-0 mb-6">
-    This link expires in <strong class="text-zinc-700">1 hour</strong>.
+  <p class="text-[13px] text-muted-foreground m-0 mb-6">
+    This link expires in <strong class="text-foreground">1 hour</strong>.
     If you did not request a password reset, no action is needed — your account remains secure.
   </p>
 
-  <hr class="border-0 border-t border-zinc-100 my-6" />
+  <hr class="border-0 border-t border-border my-6" />
 
-  <p class="text-[12px] text-zinc-400 m-0">
+  <p class="text-[12px] text-muted-foreground m-0">
     Button not working? Copy and paste this link into your browser:
   </p>
   <p class="text-[12px] m-0 mt-1">
-    <a href="{{ url }}" class="text-brand break-all" style="color: #b700d9">
+    <a href="{{ url }}" class="text-primary break-all" style="color: #b700d9">
       {{ url }}
     </a>
   </p>
diff --git a/packages/email/templates/verification.html b/packages/email/templates/verification.html
index 4ba54eb..5a463ac 100644
--- a/packages/email/templates/verification.html
+++ b/packages/email/templates/verification.html
@@ -5,37 +5,37 @@ previewText: "Almost there — confirm your email address to activate your accou
 
 <x-main>
 
-  <h1 class="text-[22px] font-semibold text-zinc-900 m-0 mb-2">
+  <h1 class="text-[22px] font-semibold text-foreground m-0 mb-2">
     Verify your email address
   </h1>
-  <p class="text-zinc-500 m-0 mb-6">
+  <p class="text-muted-foreground m-0 mb-6">
     Thanks for signing up! Click the button below to confirm your email address and activate your account.
   </p>
 
-  <!-- CTA button -->
+  <!-- CTA button — inline style needed for Outlook -->
   <table role="presentation" cellpadding="0" cellspacing="0" border="0" class="mb-6">
     <tr>
       <td class="rounded-lg" style="background: #b700d9">
         <a href="{{ url }}"
-           class="inline-block px-8 py-[14px] text-[14px] font-semibold text-white no-underline rounded-lg"
-           style="background: #b700d9">
+           class="inline-block px-8 py-[14px] text-[14px] font-semibold text-primary-foreground no-underline rounded-lg"
+           style="background: #b700d9; color: #faf4fb">
           Verify my email
         </a>
       </td>
     </tr>
   </table>
 
-  <p class="text-[13px] text-zinc-500 m-0 mb-6">
-    This link expires in <strong class="text-zinc-700">24 hours</strong>.
+  <p class="text-[13px] text-muted-foreground m-0 mb-6">
+    This link expires in <strong class="text-foreground">24 hours</strong>.
   </p>
 
-  <hr class="border-0 border-t border-zinc-100 my-6" />
+  <hr class="border-0 border-t border-border my-6" />
 
-  <p class="text-[12px] text-zinc-400 m-0">
+  <p class="text-[12px] text-muted-foreground m-0">
     Button not working? Copy and paste this link into your browser:
   </p>
   <p class="text-[12px] m-0 mt-1">
-    <a href="{{ url }}" class="text-brand break-all" style="color: #b700d9">
+    <a href="{{ url }}" class="text-primary break-all" style="color: #b700d9">
       {{ url }}
     </a>
   </p>
