feat: add branding and theme control to auth

src/lib/components/BrandLogo.svelte

@@ -26,8 +26,9 @@
   .brand-mark {
     width: 32px;
     height: 32px;
-    background-size: 144px 144px;
-    background-position: -106px -9px;
+    background-image: url('/brand/zarinpal-mark.png');
+    background-size: contain;
+    background-position: center;
   }
   :global(html.dark) .brand-wordmark {
     width: 124px;

src/lib/components/Login.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { ApiError, api, type AuthSession } from '$lib/api/client';
+  import BrandLogo from '$lib/components/BrandLogo.svelte';
+  import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 
   let { onAuthenticated }: { onAuthenticated: (session: AuthSession) => void } = $props();
   let username = $state('merchant-0001');
@@ -32,7 +34,7 @@
   >
     <div class="bg-primary absolute -top-20 -left-20 size-80 rounded-full opacity-30 blur-3xl"></div>
     <div class="relative flex items-center gap-3 text-xl font-bold">
-      <span class="grid size-11 place-items-center rounded-xl bg-[#ffd400] text-[#19191a]">ز</span>
+      <BrandLogo compact />
       تحلیل عملکرد زرین‌پال
     </div>
     <div class="relative max-w-xl">
@@ -45,11 +47,13 @@
     <p class="relative text-sm text-white/50">داده‌ها در محدوده حساب پذیرنده شما نمایش داده می‌شوند.</p>
   </section>
 
-  <section class="flex min-h-screen items-center justify-center p-5 sm:p-10">
+  <section class="relative flex min-h-screen items-center justify-center p-5 sm:p-10">
+    <div class="absolute top-5 left-5 sm:top-8 sm:left-8">
+      <ThemeToggle />
+    </div>
     <div class="w-full max-w-md">
       <div class="mb-10 flex items-center gap-3 lg:hidden">
-        <span class="grid size-11 place-items-center rounded-xl bg-[#ffd400] font-bold text-[#19191a]">ز</span
-        >
+        <BrandLogo compact />
         <span class="text-lg font-bold">تحلیل عملکرد زرین‌پال</span>
       </div>
       <p class="mb-2 text-sm font-semibold text-[var(--brand)]">خوش آمدید</p>

src/lib/components/ThemeToggle.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
+  import MoonIcon from '@lucide/svelte/icons/moon';
+  import SunIcon from '@lucide/svelte/icons/sun';
+
   let dark = $state(document.documentElement.dataset.theme === 'dark');
 
   function toggle() {
     dark = !dark;
     document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+    document.documentElement.classList.toggle('dark', dark);
     localStorage.setItem('zpa-theme', dark ? 'dark' : 'light');
   }
 </script>
 
 <button
-  class="button-secondary grid min-w-11 place-items-center px-3"
+  class="text-foreground hover:text-primary focus-visible:ring-ring flex size-11 shrink-0 items-center justify-center bg-transparent p-0 transition-colors focus-visible:ring-2 focus-visible:outline-none"
   onclick={toggle}
   aria-label={dark ? 'فعال‌کردن نمای روشن' : 'فعال‌کردن نمای تیره'}
   title={dark ? 'نمای روشن' : 'نمای تیره'}
 >
-  <span aria-hidden="true">{dark ? '☀' : '◐'}</span>
+  {#if dark}<SunIcon class="block size-5" />{:else}<MoonIcon class="block size-5" />{/if}
 </button>