feat: add brand assets, design tokens and light/dark theme

- Use real logo/isotype SVGs across app and emails
- Token-based color system aligned with landing (brand scale + semantic tokens)
- ThemeProvider (light/dark/system) with header toggle and settings card
- Embed logo in transactional emails; centralize email colors

apps/web/src/routes/security.tsx

@@ -42,7 +42,7 @@ function PasskeyList({ onRefresh }: { onRefresh: () => void }) {
   }
 
   return (
-    <ul className="divide-y divide-border rounded-xl border border-border bg-white">
+    <ul className="divide-y divide-border rounded-xl border border-border bg-surface">
       {passkeys.map((passkey) => (
         <li key={passkey.id} className="flex items-center gap-3 px-4 py-3">
           <span className="rounded-lg bg-accent-soft p-2">
@@ -126,7 +126,7 @@ export function SecurityPage() {
         <p className="rounded-xl bg-accent-soft px-4 py-3 text-sm text-accent-strong">{feedback}</p>
       ) : null}
 
-      <div className="rounded-xl border border-border bg-white p-5">
+      <div className="rounded-xl border border-border bg-surface p-5">
         <div className="mb-4 flex items-center gap-2">
           <KeyRound className="size-4 text-accent" />
           <h2 className="text-base font-semibold text-primary">Cambiar contraseña</h2>
@@ -165,7 +165,7 @@ export function SecurityPage() {
         </form>
       </div>
 
-      <div className="rounded-xl border border-border bg-white p-5">
+      <div className="rounded-xl border border-border bg-surface p-5">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Fingerprint className="size-4 text-accent" />