refactor(email): align templates with frontend design tokens from app.css

- @theme now mirrors all :root variables from app.css (background, foreground,
  card, muted, muted-foreground, border, primary, primary-foreground)
- Replaced all zinc-* utilities with semantic token classes (bg-background,
  bg-card, bg-muted, text-foreground, text-muted-foreground, border-border, etc.)
- Added Noto Sans via Google Fonts import (progressive enhancement — skips
  Tailwind processing via `plain` attribute)
- Font family @theme token set to Noto Sans with system-font fallbacks
- Button inline styles updated to use hex equivalent of --primary-foreground

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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>