feat(web): add MosaicLogo and MosaicSpinner components (MS15-FE-006)

- Add MosaicLogo component with 5-element Mosaic brand icon (4 corner
  squares + center circle), using CSS custom properties for theme-aware
  colors and optional rotation animation
- Add MosaicSpinner wrapper that enables spinning and supports optional
  label and full-page overlay modes
- Replace generic CSS spinner in authenticated layout loading state with
  MosaicSpinner for consistent brand identity

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

apps/web/tailwind.config.ts

@@ -1,10 +1,34 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: "class",
+  // Use data-theme attribute selector for dark mode instead of .dark class
+  darkMode: ["selector", '[data-theme="dark"]'],
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "../../packages/ui/src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-outfit)", "system-ui", "sans-serif"],
+        mono: ["var(--font-fira-code)", "Cascadia Code", "monospace"],
+      },
+      colors: {
+        // Expose Mosaic semantic tokens as Tailwind colors
+        bg: "var(--bg)",
+        "bg-deep": "var(--bg-deep)",
+        "bg-mid": "var(--bg-mid)",
+        surface: "var(--surface)",
+        "surface-2": "var(--surface-2)",
+        border: "var(--border)",
+        text: "var(--text)",
+        "text-2": "var(--text-2)",
+        muted: "var(--muted)",
+        primary: "var(--primary)",
+        "primary-l": "var(--primary-l)",
+        danger: "var(--danger)",
+        success: "var(--success)",
+        warn: "var(--warn)",
+        purple: "var(--purple)",
+      },
+    },
   },
   plugins: [],
 };