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/components/layout/Header.tsx

@@ -1,19 +1,38 @@
-import { Logo, LogoIcon } from '../brand'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from '../../context/ThemeProvider'
+import { Logo } from '../brand'
 import { Breadcrumb } from './Breadcrumb'
 import { UserMenu } from './UserMenu'
 
+function ThemeToggle() {
+  const { isDark, setTheme } = useTheme()
+
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+      aria-label={isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}
+      className="flex size-9 items-center justify-center rounded-full border border-border text-foreground/70 transition-colors hover:bg-primary-soft hover:text-primary"
+    >
+      {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+    </button>
+  )
+}
+
 export function Header() {
   return (
     <header className="sticky top-0 z-40 h-16 w-full border-b border-border bg-background/90 backdrop-blur">
       <div className="mx-auto flex h-full w-full max-w-7xl items-center justify-between px-4 lg:px-6">
         <div className="flex min-w-0 items-center">
-          <a href="/" className="flex items-center gap-2 lg:hidden" aria-label="Gruperly inicio">
-            <LogoIcon className="size-7" />
-            <Logo className="text-lg tracking-tight" />
+          <a href="/" className="flex items-center lg:hidden" aria-label="Gruperly inicio">
+            <Logo className="h-8" />
           </a>
           <Breadcrumb />
         </div>
-        <UserMenu />
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+          <UserMenu />
+        </div>
       </div>
     </header>
   )