diff --git a/package-lock.json b/package-lock.json
index edfafe2a..17964cbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,31 +23,17 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
-        "@fontsource-variable/comfortaa": "^5.2.8",
-        "@fontsource-variable/dm-sans": "^5.2.8",
         "@fontsource-variable/fredoka": "^5.2.10",
         "@fontsource-variable/inter": "^5.2.6",
-        "@fontsource-variable/jetbrains-mono": "^5.2.8",
-        "@fontsource-variable/lora": "^5.2.8",
-        "@fontsource-variable/merriweather": "^5.2.6",
-        "@fontsource-variable/montserrat": "^5.2.8",
         "@fontsource-variable/nunito": "^5.2.7",
-        "@fontsource-variable/outfit": "^5.2.8",
         "@fontsource-variable/playfair-display": "^5.2.8",
         "@fontsource/bebas-neue": "^5.2.7",
-        "@fontsource/bungee-shade": "^5.2.7",
         "@fontsource/caveat": "^5.2.8",
-        "@fontsource/cherry-bomb-one": "^5.2.7",
-        "@fontsource/comic-neue": "^5.2.7",
-        "@fontsource/comic-relief": "^5.2.2",
-        "@fontsource/courier-prime": "^5.2.8",
         "@fontsource/creepster": "^5.2.7",
-        "@fontsource/luckiest-guy": "^5.2.8",
         "@fontsource/noto-sans-nushu": "^5.2.6",
         "@fontsource/pacifico": "^5.2.7",
         "@fontsource/permanent-marker": "^5.2.7",
         "@fontsource/pirata-one": "^5.2.8",
-        "@fontsource/press-start-2p": "^5.2.7",
         "@fontsource/silkscreen": "^5.2.8",
         "@fontsource/special-elite": "^5.2.8",
         "@getalby/sdk": "^5.1.1",
@@ -1358,24 +1344,6 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
-    "node_modules/@fontsource-variable/comfortaa": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/comfortaa/-/comfortaa-5.2.8.tgz",
-      "integrity": "sha512-8YqOYbeHxywYtMD/AtNc7SHTIk3UufmYdgwVHBwFUe5wxjT7QM1NJ64M5M+qtNTenPEkQl8JU5Be3+EZl8dhMA==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource-variable/dm-sans": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/dm-sans/-/dm-sans-5.2.8.tgz",
-      "integrity": "sha512-AxkvMTvNWgfrmlyjiV05vlHYJa+nRQCf1EfvIrQAPBpFJW0O9VTz7oAFr9S3lvbWdmnFoBk7yFqQL86u64nl2g==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource-variable/fredoka": {
       "version": "5.2.10",
       "resolved": "https://registry.npmjs.org/@fontsource-variable/fredoka/-/fredoka-5.2.10.tgz",
@@ -1394,42 +1362,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource-variable/jetbrains-mono": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
-      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource-variable/lora": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/lora/-/lora-5.2.8.tgz",
-      "integrity": "sha512-cxjTJ9BbOWIzusewR4UMBLVePvTSWV6dtNaNsCkF/oKoyA68fJGWfaYCILOOP1BObE4dmjfZ3xo6m9hdHhtYhg==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource-variable/merriweather": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/merriweather/-/merriweather-5.2.6.tgz",
-      "integrity": "sha512-bHCDt99f/M48eUcFA86uh/oSPyn8r/ZxXR9l578wqLvjTwDzXx8A/XOAI05WfJ3LnH1rDufQX5RJwiZtbXUCkw==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource-variable/montserrat": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/montserrat/-/montserrat-5.2.8.tgz",
-      "integrity": "sha512-d8wykq7GCKhEOlLwEuQIOK3w3qsXNxwDlH0meru4AZZzQ4/+rZyvHWKL6BBtHdmbovSHEEQDkwkD8qYUKlcFtQ==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource-variable/nunito": {
       "version": "5.2.7",
       "resolved": "https://registry.npmjs.org/@fontsource-variable/nunito/-/nunito-5.2.7.tgz",
@@ -1438,15 +1370,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource-variable/outfit": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/outfit/-/outfit-5.2.8.tgz",
-      "integrity": "sha512-4oUDCZx/Tcz6HZP423w/niqEH31Gks5IsqHV2ZZz1qKHaVIZdj2f0/S1IK2n8jl6Xo0o3N+3RjNHlV9R73ozQA==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource-variable/playfair-display": {
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/@fontsource-variable/playfair-display/-/playfair-display-5.2.8.tgz",
@@ -1465,14 +1388,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/bungee-shade": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/@fontsource/bungee-shade/-/bungee-shade-5.2.7.tgz",
-      "integrity": "sha512-lkXUV70wgUtqDU5RuljKchpQY3QGZCkygwET4w57QNLArZ72LJGURuSuakS6ItDGK0tzU2CxjrekRekRngShqw==",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource/caveat": {
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/@fontsource/caveat/-/caveat-5.2.8.tgz",
@@ -1482,39 +1397,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/cherry-bomb-one": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/@fontsource/cherry-bomb-one/-/cherry-bomb-one-5.2.7.tgz",
-      "integrity": "sha512-mWHL64fB4bsEAgDD+F/Rd41eYCpvlqSk73jb9lcvWUwF51QkPSXqY3vaeXwhU4VH+jaAwUDL4rt1gEfwqZGXBQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource/comic-neue": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/@fontsource/comic-neue/-/comic-neue-5.2.7.tgz",
-      "integrity": "sha512-tNi0Nxbz0QMwHvZWJSP5G0SXq8CeX5b+K3l3q/afPmJ/WlQ+i3/NfOYWBzsojCZko1lNplfmjbsOGMuBs4WmcA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource/comic-relief": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/@fontsource/comic-relief/-/comic-relief-5.2.2.tgz",
-      "integrity": "sha512-cTE1AQh4FI/IcfAc/8SB9ZIWuW6B0M9B33V58Qoz4X6TBnpO+gyv+JKeNQJm39Xna3JT2fJvAOttnDFV7IIu/w==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource/courier-prime": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/courier-prime/-/courier-prime-5.2.8.tgz",
-      "integrity": "sha512-M3xOCcXnGuFi9TcGCrz4hm5yeWg4Sn35MALRLPnqNoHhawTFvhyi2KSI2+5RyFtDNJrb58bPh8LLipgiI9KA0w==",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource/creepster": {
       "version": "5.2.7",
       "resolved": "https://registry.npmjs.org/@fontsource/creepster/-/creepster-5.2.7.tgz",
@@ -1523,14 +1405,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/luckiest-guy": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/luckiest-guy/-/luckiest-guy-5.2.8.tgz",
-      "integrity": "sha512-S1k8+PNHSdDkJy9f+0WIx8rfScj3BZTVgBQehMOtpYOwXZ4wZC1+D++NACbfdG9Ve2glVz1boLXjJMCeVPLifA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource/noto-sans-nushu": {
       "version": "5.2.6",
       "resolved": "https://registry.npmjs.org/@fontsource/noto-sans-nushu/-/noto-sans-nushu-5.2.6.tgz",
@@ -1566,14 +1440,6 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/press-start-2p": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/@fontsource/press-start-2p/-/press-start-2p-5.2.7.tgz",
-      "integrity": "sha512-ezSxYRchANoteja170ZHh2Tt4oejmVEvX42VFPOVVvERSZ68pcuZFjbhHfrK/sNjYmaGg656y7B3431ojO9PCQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource/silkscreen": {
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/@fontsource/silkscreen/-/silkscreen-5.2.8.tgz",
diff --git a/package.json b/package.json
index 2572fb4f..fdb08d51 100644
--- a/package.json
+++ b/package.json
@@ -30,31 +30,17 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@fontsource-variable/comfortaa": "^5.2.8",
-    "@fontsource-variable/dm-sans": "^5.2.8",
     "@fontsource-variable/fredoka": "^5.2.10",
     "@fontsource-variable/inter": "^5.2.6",
-    "@fontsource-variable/jetbrains-mono": "^5.2.8",
-    "@fontsource-variable/lora": "^5.2.8",
-    "@fontsource-variable/merriweather": "^5.2.6",
-    "@fontsource-variable/montserrat": "^5.2.8",
     "@fontsource-variable/nunito": "^5.2.7",
-    "@fontsource-variable/outfit": "^5.2.8",
     "@fontsource-variable/playfair-display": "^5.2.8",
     "@fontsource/bebas-neue": "^5.2.7",
-    "@fontsource/bungee-shade": "^5.2.7",
     "@fontsource/caveat": "^5.2.8",
-    "@fontsource/cherry-bomb-one": "^5.2.7",
-    "@fontsource/comic-neue": "^5.2.7",
-    "@fontsource/comic-relief": "^5.2.2",
-    "@fontsource/courier-prime": "^5.2.8",
     "@fontsource/creepster": "^5.2.7",
-    "@fontsource/luckiest-guy": "^5.2.8",
     "@fontsource/noto-sans-nushu": "^5.2.6",
     "@fontsource/pacifico": "^5.2.7",
     "@fontsource/permanent-marker": "^5.2.7",
     "@fontsource/pirata-one": "^5.2.8",
-    "@fontsource/press-start-2p": "^5.2.7",
     "@fontsource/silkscreen": "^5.2.8",
     "@fontsource/special-elite": "^5.2.8",
     "@getalby/sdk": "^5.1.1",
diff --git a/public/theme.js b/public/theme.js
index 0d74d40c..e96e9b43 100644
--- a/public/theme.js
+++ b/public/theme.js
@@ -1,58 +1,33 @@
 // Reads the saved theme from localStorage and applies it to <html> and the
 // preloader background before first paint. Runs as a blocking <script> so
 // there's no flash of the wrong theme.
+//
+// Agora's colors are hardcoded in src/index.css via :root {} and .dark {}
+// blocks. There is no custom-theme branch; the only thing this script
+// does is set the right class on <html> and paint the preloader with the
+// matching background + primary color so the page doesn't flash white
+// in dark mode (or vice versa) before the React bundle boots.
+//
+// The colors below MUST stay in sync with the values in src/index.css.
 (function () {
-  // Builtin themes — must match builtinThemes in src/themes.ts
   var builtins = {
-    dark:  { bg: 'hsl(0 0% 10%)', primary: 'hsl(15 90% 52%)' },
-    light: { bg: 'hsl(0 0% 100%)', primary: 'hsl(15 90% 48%)' }
+    dark:  { bg: 'hsl(0 0% 10%)',  primary: 'hsl(24 100% 50%)' },
+    light: { bg: 'hsl(0 0% 100%)', primary: 'hsl(24 100% 50%)' }
   };
 
-  var theme = 'dark';
-  var colors = builtins.dark;
-  var cfg;
+  var theme = 'system';
   try {
-    cfg = JSON.parse(localStorage.getItem('nostr:app-config') || '{}');
-    if (cfg.theme) theme = cfg.theme;
+    var cfg = JSON.parse(localStorage.getItem('nostr:app-config') || '{}');
+    if (cfg.theme === 'dark' || cfg.theme === 'light' || cfg.theme === 'system') {
+      theme = cfg.theme;
+    }
   } catch (e) {}
 
-  // Resolve "system" to light or dark based on OS preference
   if (theme === 'system') {
     theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
 
-  if (theme === 'custom') {
-    // Custom theme: read colors from customTheme.colors (ThemeConfig format)
-    try {
-      var ct = cfg && cfg.customTheme;
-      if (ct && ct.colors) {
-        var bg = ct.colors.background;
-        var pr = ct.colors.primary;
-        if (bg && pr) {
-          colors = { bg: 'hsl(' + bg + ')', primary: 'hsl(' + pr + ')' };
-        }
-      }
-    } catch (e) {}
-  } else if (theme === 'light' || theme === 'dark') {
-    // Check for configured theme overrides (ThemesConfig in cfg.themes)
-    try {
-      var themes = cfg && cfg.themes;
-      if (themes && themes[theme] && themes[theme].colors) {
-        var tc = themes[theme].colors;
-        if (tc.background && tc.primary) {
-          colors = { bg: 'hsl(' + tc.background + ')', primary: 'hsl(' + tc.primary + ')' };
-        } else {
-          colors = builtins[theme];
-        }
-      } else {
-        colors = builtins[theme];
-      }
-    } catch (e) {
-      colors = builtins[theme];
-    }
-  } else {
-    colors = builtins.dark;
-  }
+  var colors = builtins[theme] || builtins.dark;
 
   document.documentElement.className = theme;
   document.body.style.background = colors.bg;
diff --git a/src/components/AppProvider.tsx b/src/components/AppProvider.tsx
index 68572e11..2793ba8f 100644
--- a/src/components/AppProvider.tsx
+++ b/src/components/AppProvider.tsx
@@ -1,10 +1,8 @@
-import { ReactNode, useLayoutEffect, useEffect, useRef } from 'react';
+import { ReactNode, useLayoutEffect } from 'react';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { AppContext, type AppConfig, type AppContextType, type Theme } from '@/contexts/AppContext';
-import { builtinThemes, buildThemeCssFromCore, resolveTheme, resolveThemeConfig, type ThemeConfig, type ThemesConfig } from '@/themes';
+import { resolveTheme } from '@/themes';
 import { AppConfigSchema } from '@/lib/schemas';
-import { loadAndApplyFont, loadAndApplyTitleFont } from '@/lib/fontLoader';
-import { hslToRgb, parseHsl, rgbToHex } from '@/lib/colorUtils';
 import { z } from 'zod';
 
 interface AppProviderProps {
@@ -84,11 +82,8 @@ export function AppProvider(props: AppProviderProps) {
     updateConfig,
   };
 
-  // Apply theme effects to document
-  useApplyTheme(config.theme, config.customTheme, config.themes);
-  useApplyFonts(config.theme, config.customTheme, config.themes);
-  useApplyBackground(config.theme, config.customTheme, config.themes);
-  useApplyFavicon(config.theme, config.customTheme, config.themes);
+  // Keep the .dark class on <html> in sync with the active theme.
+  useApplyTheme(config.theme);
 
   return (
     <AppContext.Provider value={appContextValue}>
@@ -98,197 +93,32 @@ export function AppProvider(props: AppProviderProps) {
 }
 
 /**
- * Hook to apply theme changes to the document root via an injected <style> tag.
- * When theme is "system", resolves to "light" or "dark" based on OS preference
- * and listens for changes to prefers-color-scheme.
- * When theme is "custom", uses the provided customTheme colors (derived to full tokens).
- * When theme is "light" or "dark", uses configured themes if available, otherwise builtin themes.
+ * Hook to apply the active theme to `<html>` by setting its className.
+ *
+ * Colors are defined statically in `src/index.css` — this hook only flips
+ * the `.dark` class so the right block wins. When the user picks
+ * `"system"`, we also subscribe to `prefers-color-scheme` changes so the
+ * app follows the OS in real time.
+ *
+ * There is no runtime CSS-variable injection, no font loading from event
+ * data, no background image, no recolored favicon. Anything that could
+ * paint untrusted strings into the document has been removed.
  */
-function useApplyTheme(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
+function useApplyTheme(theme: Theme) {
   useLayoutEffect(() => {
     function apply() {
-      const resolved = resolveTheme(theme);
-      let css: string;
-
-      if (resolved === 'custom') {
-        // Use custom theme colors, falling back to dark if not yet set
-        const colors = customTheme?.colors ?? builtinThemes.dark;
-        css = buildThemeCssFromCore(colors);
-      } else {
-        css = buildThemeCssFromCore(resolveThemeConfig(resolved, themes).colors);
-      }
-
-      let el = document.getElementById('theme-vars') as HTMLStyleElement | null;
-      if (!el) {
-        el = document.createElement('style');
-        el.id = 'theme-vars';
-        document.head.appendChild(el);
-      }
-      el.textContent = css;
-      document.documentElement.className = resolved;
-      // Now that CSS variables are set, the inline body background from
-      // theme.js is no longer needed — bg-background will resolve correctly.
+      document.documentElement.className = resolveTheme(theme);
+      // The inline body background set by public/theme.js before React
+      // mounted is no longer needed once Tailwind's bg-background kicks in.
       document.body.removeAttribute('style');
     }
 
     apply();
 
-    // When theme is "system", listen for OS color scheme changes
     if (theme === 'system') {
       const mq = window.matchMedia('(prefers-color-scheme: dark)');
       mq.addEventListener('change', apply);
       return () => mq.removeEventListener('change', apply);
     }
-  }, [theme, customTheme, themes]);
-}
-
-/**
- * Hook to load and apply custom fonts when the theme config changes.
- * Applies fonts from custom themes, or from configured light/dark themes if available.
- */
-function useApplyFonts(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
-  const resolved = resolveTheme(theme);
-  const activeConfig = resolved === 'custom' ? customTheme : resolveThemeConfig(resolved, themes);
-  const fontFamily = activeConfig?.font?.family;
-  const fontUrl = activeConfig?.font?.url;
-  const titleFontFamily = activeConfig?.titleFont?.family;
-  const titleFontUrl = activeConfig?.titleFont?.url;
-
-  useEffect(() => {
-    if (fontFamily) {
-      loadAndApplyFont({ family: fontFamily, url: fontUrl });
-    } else {
-      // Clear any custom font overrides when no font is configured
-      loadAndApplyFont(undefined);
-    }
-  }, [theme, fontFamily, fontUrl]);
-
-  useEffect(() => {
-    if (titleFontFamily) {
-      loadAndApplyTitleFont({ family: titleFontFamily, url: titleFontUrl });
-    } else {
-      // Clear any custom title font overrides when no title font is configured
-      loadAndApplyTitleFont(undefined);
-    }
-  }, [theme, titleFontFamily, titleFontUrl]);
-}
-
-/** Style element ID for background image CSS. */
-const BG_STYLE_ID = 'theme-background';
-
-/**
- * Hook to apply or remove a background image when the theme config changes.
- * Supports backgrounds from custom themes and configured light/dark themes.
- */
-function useApplyBackground(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
-  const resolved = resolveTheme(theme);
-  const activeConfig = resolved === 'custom' ? customTheme : resolveThemeConfig(resolved, themes);
-  const bgUrl = activeConfig?.background?.url;
-  const bgMode = activeConfig?.background?.mode ?? 'cover';
-
-  useEffect(() => {
-    let style = document.getElementById(BG_STYLE_ID) as HTMLStyleElement | null;
-
-    if (!bgUrl) {
-      style?.remove();
-      return;
-    }
-
-    if (!style) {
-      style = document.createElement('style');
-      style.id = BG_STYLE_ID;
-      document.head.appendChild(style);
-    }
-
-    let css: string;
-    if (bgMode === 'tile') {
-      css = `body { background-image: url("${bgUrl}"); background-repeat: repeat; background-size: auto; }`;
-    } else {
-      css = `body { background-image: url("${bgUrl}"); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }`;
-    }
-
-    style.textContent = css;
-
-    return () => {
-      document.getElementById(BG_STYLE_ID)?.remove();
-    };
-  }, [theme, bgUrl, bgMode]);
-}
-
-/**
- * Hook to dynamically recolor the favicon to match the current primary color.
- * Uses a mask approach with /logo.svg: loads the SVG, draws it as a mask
- * on a canvas filled with the primary color, and sets the result as the favicon.
- */
-function useApplyFavicon(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {
-  const resolved = resolveTheme(theme);
-  const colors = resolved === 'custom'
-    ? (customTheme?.colors ?? builtinThemes.dark)
-    : resolveThemeConfig(resolved, themes).colors;
-  const primary = colors.primary;
-
-  // Cache the loaded SVG blob URL across renders.
-  const svgBlobUrlRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function updateFavicon() {
-      // Load the SVG once and cache it as a blob URL for canvas use.
-      if (!svgBlobUrlRef.current) {
-        try {
-          const resp = await fetch('/logo.svg');
-          const text = await resp.text();
-          const blob = new Blob([text], { type: 'image/svg+xml' });
-          svgBlobUrlRef.current = URL.createObjectURL(blob);
-        } catch {
-          return; // Silently fail if SVG can't be loaded
-        }
-      }
-
-      if (cancelled) return;
-
-      const size = 128;
-      const canvas = document.createElement('canvas');
-      canvas.width = size;
-      canvas.height = size;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return;
-
-      const img = new Image();
-      img.src = svgBlobUrlRef.current!;
-
-      await new Promise<void>((resolve, reject) => {
-        img.onload = () => resolve();
-        img.onerror = () => reject();
-      });
-
-      if (cancelled) return;
-
-      // Fill the canvas with the primary color.
-      const { h, s, l } = parseHsl(primary);
-      const [r, g, b] = hslToRgb(h, s, l);
-      ctx.fillStyle = rgbToHex(r, g, b);
-      ctx.fillRect(0, 0, size, size);
-
-      // Use the SVG as a mask (destination-in keeps only the logo shape).
-      ctx.globalCompositeOperation = 'destination-in';
-      ctx.drawImage(img, 0, 0, size, size);
-
-      const dataUrl = canvas.toDataURL('image/png');
-
-      // Update the favicon link element.
-      const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
-      if (link) {
-        link.type = 'image/png';
-        link.href = dataUrl;
-      }
-    }
-
-    updateFavicon();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [primary]);
+  }, [theme]);
 }
diff --git a/src/components/ColorMomentContent.tsx b/src/components/ColorMomentContent.tsx
index 74c31093..6f3c5c83 100644
--- a/src/components/ColorMomentContent.tsx
+++ b/src/components/ColorMomentContent.tsx
@@ -1,8 +1,7 @@
-import { useMemo, useState, useEffect, useId } from 'react';
+import { useMemo } from 'react';
 
 import { cn } from '@/lib/utils';
-import { useTheme } from '@/hooks/useTheme';
-import { getColors, paletteToTheme } from '@/lib/colorMomentUtils';
+import { getColors } from '@/lib/colorMomentUtils';
 import type { NostrEvent } from '@nostrify/nostrify';
 
 type Layout = 'horizontal' | 'vertical' | 'grid' | 'star' | 'checkerboard' | 'diagonalStripes';
@@ -198,61 +197,14 @@ const LAYOUT_MAP: Record<Layout, React.FC<{ colors: string[] }>> = {
   diagonalStripes: DiagonalStripesLayout,
 };
 
-/** Standalone blinking eye button for setting a color moment as the active theme. */
-export function ColorMomentEyeButton({ event }: { event: NostrEvent }) {
-  const colors = useMemo(() => getColors(event.tags), [event.tags]);
-  const { applyCustomTheme } = useTheme();
-  const [isBlinking, setIsBlinking] = useState(false);
-  const uid = useId();
-
-  useEffect(() => {
-    if (isBlinking) {
-      const timer = setTimeout(() => setIsBlinking(false), 500);
-      return () => clearTimeout(timer);
-    }
-  }, [isBlinking]);
-
-  const handleSetTheme = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsBlinking(true);
-    applyCustomTheme(paletteToTheme(colors));
-  };
-
-  if (colors.length === 0) return null;
-
-  const outer = colors[0] ?? '#888';
-  const iris = colors[colors.length - 1] ?? '#888';
-
-  // Build the eye as a data-URI SVG so the browser renders it as an image
-  // (smooth anti-aliasing, no compositing layer on siblings)
-  const eyeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <circle cx="50" cy="50" r="45" fill="${outer}"/>
-    <circle cx="50" cy="50" r="32" fill="white" opacity="0.9"/>
-    <circle cx="50" cy="50" r="20" fill="${iris}"/>
-    <circle cx="50" cy="50" r="10" fill="#1c1917"/>
-    <circle cx="43" cy="43" r="4" fill="white" opacity="0.8"/>
-  </svg>`;
-  const eyeUrl = `data:image/svg+xml,${encodeURIComponent(eyeSvg)}`;
-
-  return (
-    <button
-      onClick={handleSetTheme}
-      className="flex items-center gap-1.5 hover:opacity-80 active:scale-95 transition-all shrink-0"
-      title="Set as theme"
-    >
-      <span className="text-[11px] font-medium text-muted-foreground">Set as theme</span>
-      {/* Eye container — overflow-hidden clips the eyelid, doesn't touch siblings */}
-      <div className="relative size-9 rounded-full overflow-hidden" id={uid}>
-        <img src={eyeUrl} alt="" className="w-9 h-9" />
-        {isBlinking && (
-          <div className="absolute inset-0 animate-eyelid-blink">
-            <div className="absolute rounded-full bg-background w-full h-full bottom-0 left-0" />
-          </div>
-        )}
-      </div>
-    </button>
-  );
-}
+/** Standalone blinking eye button — REMOVED.
+ *
+ * This component used to let any user apply an arbitrary kind-3367 event's
+ * palette as their active theme via `applyCustomTheme(paletteToTheme(...))`.
+ * Agora no longer supports user-customizable themes, so the apply path has
+ * been removed entirely. Color Moments still render as palette art via
+ * `ColorMomentContent` below.
+ */
 
 export function ColorMomentContent({ event }: { event: NostrEvent }) {
   const colors = useMemo(() => getColors(event.tags), [event.tags]);
diff --git a/src/components/NostrSync.tsx b/src/components/NostrSync.tsx
index 65ba6ee1..1a05b250 100644
--- a/src/components/NostrSync.tsx
+++ b/src/components/NostrSync.tsx
@@ -217,10 +217,6 @@ export function NostrSync() {
               updates.theme = "system";
               changed = true;
             }
-            if (current.customTheme !== undefined) {
-              updates.customTheme = undefined;
-              changed = true;
-            }
             // Reset sidebar order and homepage to the app defaults so the previous
             // user's layout doesn't bleed into the new account.
             if ((current.sidebarOrder ?? []).length > 0) {
@@ -289,27 +285,6 @@ export function NostrSync() {
           updates.theme = "system";
           changed = true;
         }
-        if (current.customTheme !== undefined) {
-          updates.customTheme = undefined;
-          changed = true;
-        }
-      }
-
-      if (
-        encryptedSettings.customTheme &&
-        JSON.stringify(encryptedSettings.customTheme) !==
-          JSON.stringify(current.customTheme)
-      ) {
-        updates.customTheme = encryptedSettings.customTheme;
-        changed = true;
-      } else if (
-        isSwitch &&
-        !encryptedSettings.customTheme &&
-        current.customTheme !== undefined
-      ) {
-        // Clear stale custom theme from the previous account.
-        updates.customTheme = undefined;
-        changed = true;
       }
 
       if (
diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx
index 16de2c4f..dc3f6b4b 100644
--- a/src/components/NoteCard.tsx
+++ b/src/components/NoteCard.tsx
@@ -38,10 +38,7 @@ import { BadgeContent } from "@/components/BadgeContent";
 import { CampaignNoteCardContent } from "@/components/CampaignNoteCardContent";
 import { CommunityContent } from "@/components/CommunityContent";
 import { CalendarEventContent } from "@/components/CalendarEventContent";
-import {
-  ColorMomentContent,
-  ColorMomentEyeButton,
-} from "@/components/ColorMomentContent";
+import { ColorMomentContent } from "@/components/ColorMomentContent";
 import { CommentContext, CountryCommentPill } from "@/components/CommentContext";
 import { CommunityContentWarning } from "@/components/CommunityContentWarning";
 import { ContentWarningGuard } from "@/components/ContentWarningGuard";
@@ -1206,7 +1203,6 @@ export const NoteCard = memo(function NoteCard({
           <div className="flex items-center gap-3">
             {avatarElement}
             {authorInfo}
-            {isColor && <ColorMomentEyeButton event={event} />}
             <CountryCommentPill
               event={event}
               className="shrink-0 [text-shadow:none]"
diff --git a/src/components/letter/LetterDetailSheet.tsx b/src/components/letter/LetterDetailSheet.tsx
index 9b7fb7ad..da0df065 100644
--- a/src/components/letter/LetterDetailSheet.tsx
+++ b/src/components/letter/LetterDetailSheet.tsx
@@ -3,23 +3,16 @@
  * Tap backdrop to dismiss.
  */
 
-import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { Loader2, Lock } from 'lucide-react';
 import { InkPenIcon } from '@/components/icons/InkPenIcon';
-import type { NostrEvent } from '@nostrify/nostrify';
 import { useDecryptLetter } from '@/hooks/useLetters';
-import { FONT_OPTIONS, LINE_HEIGHT_RATIO, COLOR_MOMENT_KIND, resolveStationery, colorMomentToStationery, type Letter } from '@/lib/letterTypes';
-import { hexLuminance, backgroundTextColor } from '@/lib/colorUtils';
-import { ColorPaletteDisplay, type PaletteLayout } from './ColorPaletteDisplay';
+import { FONT_OPTIONS, LINE_HEIGHT_RATIO, type Letter } from '@/lib/letterTypes';
 import { ensureLetterFonts } from '@/lib/letterUtils';
-import { sanitizeCssString } from '@/lib/fontLoader';
+import { sanitizeCssString } from '@/lib/cssSanitize';
 import { StationeryBackground } from './StationeryBackground';
 import { useStationeryColors } from '@/hooks/useStationeryColors';
 import { LetterStickers } from './LetterStickers';
-import { useTheme } from '@/hooks/useTheme';
-import { toast } from '@/hooks/useToast';
-import { paletteToTheme, getColors } from '@/lib/colorMomentUtils';
-import type { ThemeConfig } from '@/themes';
 import {
   Dialog,
   DialogContent,
@@ -29,132 +22,6 @@ import { Button } from '@/components/ui/button';
 import { nip19 } from 'nostr-tools';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 
-// ---------------------------------------------------------------------------
-// Attached gift — color moment that can be applied on the spot
-// ---------------------------------------------------------------------------
-
-/** Renders an attached gift — present box overlapping a themed bubble. */
-function LetterAttachment({ event }: { event: NostrEvent }) {
-  const { applyCustomTheme, theme, customTheme, setTheme } = useTheme();
-  const [applied, setApplied] = useState(false);
-  const prevRef = useRef<{ mode: typeof theme; config?: ThemeConfig } | undefined>(undefined);
-
-  const attachment = useMemo(() => {
-    if (event.kind === COLOR_MOMENT_KIND) {
-      const colors = getColors(event.tags);
-      if (colors.length < 2) return null;
-      const core = paletteToTheme(colors);
-      const stationery = colorMomentToStationery(event);
-      const resolved = resolveStationery(stationery);
-      return { type: 'color-moment' as const, label: 'Color Moment', colors, core, resolved };
-    }
-    return null;
-  }, [event]);
-
-  const handleApply = useCallback(() => {
-    if (!attachment) return;
-    prevRef.current = { mode: theme, config: customTheme };
-    applyCustomTheme(attachment.core);
-    setApplied(true);
-    toast({
-      title: 'Theme applied',
-      description: `"${attachment.label}" is now your active theme.`,
-      action: (
-        <button
-          className="text-sm font-medium underline underline-offset-2"
-          onClick={() => {
-            const prev = prevRef.current;
-            if (!prev) return;
-            if (prev.mode === 'custom' && prev.config) applyCustomTheme(prev.config);
-            else setTheme(prev.mode);
-            setApplied(false);
-          }}
-        >
-          Undo
-        </button>
-      ),
-    });
-  }, [attachment, theme, customTheme, applyCustomTheme, setTheme]);
-
-  if (!attachment) return null;
-
-  const { resolved } = attachment;
-  const bg = resolved.color;
-  const primary = `hsl(${attachment.core.primary})`;
-  // Use a visible border when the bg is very light to avoid white-on-white
-  const needsBorder = hexLuminance(bg) > 0.85;
-  const ribbonColor = attachment.colors[Math.floor(attachment.colors.length / 2)] ?? primary;
-  // Derive readable text color from the scrimmed background
-  const textColor = backgroundTextColor(bg);
-
-  return (
-    <div className="relative max-w-[220px] mx-auto mb-12 pointer-events-none">
-      {/* Present box — overlaps the bubble top */}
-      <div className="flex justify-center relative z-10 mb-[-20px]">
-        <svg width="56" height="60" viewBox="0 0 56 60" fill="none" className="drop-shadow-sm">
-          {/* Box body */}
-          <rect x="4" y="26" width="48" height="32" rx="3" fill={bg} stroke={needsBorder ? '#0001' : 'none'} strokeWidth="1" />
-          <rect x="4" y="26" width="48" height="8" rx="3" fill="white" opacity="0.07" />
-          {/* Ribbon vertical */}
-          <rect x="24" y="26" width="8" height="32" fill={ribbonColor} opacity="0.8" />
-          {/* Ribbon horizontal */}
-          <rect x="4" y="38" width="48" height="6" fill={ribbonColor} opacity="0.8" />
-          {/* Lid */}
-          <rect x="2" y="18" width="52" height="10" rx="2.5" fill={bg} stroke={needsBorder ? '#0001' : ribbonColor} strokeWidth={needsBorder ? 1 : 0.5} strokeOpacity={needsBorder ? 1 : 0.2} />
-          <rect x="2" y="18" width="52" height="4" rx="2.5" fill="white" opacity="0.1" />
-          {/* Lid ribbon */}
-          <rect x="24" y="18" width="8" height="10" fill={ribbonColor} opacity="0.8" />
-          {/* Bow — left loop */}
-          <ellipse cx="20" cy="14" rx="8" ry="6" fill={ribbonColor} />
-          <ellipse cx="19.5" cy="12.5" rx="4.5" ry="3" fill="white" opacity="0.2" />
-          {/* Bow — right loop */}
-          <ellipse cx="36" cy="14" rx="8" ry="6" fill={ribbonColor} />
-          <ellipse cx="36.5" cy="12.5" rx="4.5" ry="3" fill="white" opacity="0.2" />
-          {/* Bow — knot */}
-          <ellipse cx="28" cy="16" rx="5" ry="4" fill={ribbonColor} />
-          <ellipse cx="28" cy="15" rx="2.5" ry="2" fill="white" opacity="0.15" />
-        </svg>
-      </div>
-
-      {/* Themed bubble — clickable */}
-      <div
-        onClick={(e) => { e.stopPropagation(); handleApply(); }}
-        role="button"
-        tabIndex={0}
-        title={applied ? 'Theme applied!' : `Tap to use "${attachment.label}" as your theme`}
-        className="relative rounded-2xl overflow-hidden pointer-events-auto cursor-pointer transition-transform duration-200 active:scale-95 hover:scale-[1.02]"
-        style={{
-          background: bg,
-          border: needsBorder ? '1px solid hsl(var(--border))' : `1px solid ${ribbonColor}22`,
-        }}
-      >
-        {/* Background: actual color moment pattern */}
-        {attachment.type === 'color-moment' && attachment.colors.length > 0 && (
-          <ColorPaletteDisplay
-            colors={attachment.colors}
-            layout={(resolved.layout as PaletteLayout) || 'horizontal'}
-            className="absolute inset-0"
-          />
-        )}
-        {/* Scrim for text readability */}
-        <div className="absolute inset-0" style={{ background: `${bg}bb` }} />
-
-        {/* Content */}
-        <div className="relative px-4 pt-7 pb-3.5 text-center">
-          <p className="text-xs font-semibold truncate" style={{ color: textColor }}>
-            {attachment.label}
-          </p>
-          <p className="text-[11px] mt-0.5" style={{ color: textColor, opacity: 0.6 }}>
-            {applied ? 'Applied as your theme' : 'Tap to use as theme'}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-
 interface LetterDetailSheetProps {
   letter: Letter | null;
   onClose: () => void;
@@ -222,13 +89,6 @@ export function LetterDetailSheet({ letter, onClose, onReply }: LetterDetailShee
         {/* Outer click-to-close layer — zero height so dialog centers on the card only */}
         <div className="relative" onClick={onClose}>
 
-          {/* Attached gift — absolutely above the card */}
-          {effectiveStationery?.event && (
-            <div className="absolute bottom-full left-0 right-0 pointer-events-none">
-              <LetterAttachment event={effectiveStationery.event} />
-            </div>
-          )}
-
           <div
             ref={letterRef}
             className="relative"
diff --git a/src/contexts/AppContext.ts b/src/contexts/AppContext.ts
index 8a45cd21..2aa79f70 100644
--- a/src/contexts/AppContext.ts
+++ b/src/contexts/AppContext.ts
@@ -1,12 +1,16 @@
 import { createContext } from "react";
-import type { ThemeConfig, ThemesConfig } from "@/themes";
 
 /**
- * A builtin theme whose colors are defined at build time.
+ * The app theme preference.
+ *
  * "system" resolves to "light" or "dark" based on OS preference.
- * "custom" uses user-defined token values stored in `customTheme`.
+ *
+ * Agora's colors are hardcoded in `src/index.css` and cannot be customized
+ * at runtime. This used to support a `"custom"` value that loaded
+ * user-defined colors, fonts, and backgrounds from localStorage / Nostr
+ * events; that capability has been removed entirely for security reasons.
  */
-export type Theme = "light" | "dark" | "system" | "custom";
+export type Theme = "light" | "dark" | "system";
 
 /**
  * How to handle events with a NIP-36 content-warning tag.
@@ -205,10 +209,6 @@ export interface AppConfig {
   client?: string;
   /** Current theme */
   theme: Theme;
-  /** Custom theme config (colors, fonts, background). Only used when theme === "custom". */
-  customTheme?: ThemeConfig;
-  /** Configured light and dark themes. Overrides the builtin themes when set. */
-  themes?: ThemesConfig;
   /** NIP-65 relay list metadata */
   relayMetadata: RelayMetadata;
   /** Whether to use app default relays in addition to user relays */
diff --git a/src/hooks/useEncryptedSettings.ts b/src/hooks/useEncryptedSettings.ts
index 85af3a8f..6ee0951b 100644
--- a/src/hooks/useEncryptedSettings.ts
+++ b/src/hooks/useEncryptedSettings.ts
@@ -7,7 +7,6 @@ import { useAppContext } from '@/hooks/useAppContext';
 import { useCurrentUser } from './useCurrentUser';
 import { fetchFreshEvent } from '@/lib/fetchFreshEvent';
 import type { Theme, FeedSettings, ContentWarningPolicy, SavedFeed, WidgetConfig } from '@/contexts/AppContext';
-import type { ThemeConfig } from '@/themes';
 import type { ContentFilter } from './useContentFilters';
 import type { LetterPreferences } from '@/lib/letterTypes';
 import { EncryptedSettingsSchema } from '@/lib/schemas';
@@ -46,8 +45,6 @@ export function setLocalSettingsSync(pubkey: string, lastSync: number): void {
 export interface EncryptedSettings {
   /** App theme preference */
   theme?: Theme;
-  /** Custom theme config (colors, fonts, background) */
-  customTheme?: ThemeConfig;
   /** Whether to use app default relays in addition to user relays */
   useAppRelays?: boolean;
   /** Whether to include the user's personal NIP-65 relay list in the effective relay set. */
diff --git a/src/hooks/useInitialSync.ts b/src/hooks/useInitialSync.ts
index 1c073777..876300f4 100644
--- a/src/hooks/useInitialSync.ts
+++ b/src/hooks/useInitialSync.ts
@@ -207,9 +207,6 @@ export function useInitialSync() {
               if (parsed.theme) {
                 updates.theme = parsed.theme;
               }
-              if (parsed.customTheme) {
-                updates.customTheme = parsed.customTheme;
-              }
               if (parsed.useAppRelays !== undefined) {
                 updates.useAppRelays = parsed.useAppRelays;
               }
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 0e5db1e8..909725fe 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,98 +1,49 @@
+import { useCallback } from "react";
 import { type Theme } from "@/contexts/AppContext";
-import { type CoreThemeColors, type ThemeConfig } from "@/themes";
 import { useAppContext } from "@/hooks/useAppContext";
 import { useEncryptedSettings } from "@/hooks/useEncryptedSettings";
 import { useCurrentUser } from "@/hooks/useCurrentUser";
-import { useRef, useCallback } from "react";
-import { builtinThemes, buildThemeCssFromCore, resolveTheme, resolveThemeConfig } from "@/themes";
+import { resolveTheme } from "@/themes";
 
 /**
- * Hook to get and set the active theme.
+ * Hook to read and set the active theme.
  *
- * - `setTheme(theme)` switches between "light", "dark", "system", and "custom".
- * - `applyCustomTheme(config)` sets theme to "custom" and applies the given ThemeConfig.
- *    Use this for presets and externally-sourced themes.
- *    Also accepts bare CoreThemeColors for backward compatibility.
+ * Theme is one of `"light"`, `"dark"`, or `"system"`. Agora's colors are
+ * hardcoded in `src/index.css` — there is no custom-theme path, no font
+ * override, no background image, no remote-loaded palette. Switching
+ * themes only toggles the `.dark` class on `<html>`.
+ *
+ * The selected mode is persisted to localStorage via `AppContext` and
+ * (when logged in) mirrored into the user's encrypted NIP-78 settings so
+ * it follows them across devices.
  */
 export function useTheme() {
   const { config, updateConfig } = useAppContext();
   const { updateSettings } = useEncryptedSettings();
   const { user } = useCurrentUser();
-  const debounceTimer = useRef<NodeJS.Timeout | undefined>(undefined);
 
-  const syncToEncrypted = useCallback((patch: { theme?: Theme; customTheme?: ThemeConfig }) => {
-    if (!user) return;
-    if (debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
-    }
-    debounceTimer.current = setTimeout(() => {
-      updateSettings.mutateAsync(patch).catch((error) => {
-        console.error('Failed to sync theme to encrypted storage:', error);
-      });
-    }, 1000);
-  }, [user, updateSettings]);
-
-  /** Switch to a builtin theme (light, dark, system) or to "custom" (preserving existing customTheme). */
   const setTheme = useCallback((theme: Theme) => {
-    // Disable all transitions while swapping theme to prevent animated flicker
+    // Disable transitions briefly so the class flip doesn't animate.
     const noTransition = document.createElement('style');
     noTransition.textContent = '*, *::before, *::after { transition: none !important; }';
     document.head.appendChild(noTransition);
 
-    // Apply CSS vars synchronously before React re-renders to eliminate flicker
-    const resolved = resolveTheme(theme);
-    const colors = resolved === 'custom'
-      ? (config.customTheme?.colors ?? builtinThemes.dark)
-      : resolveThemeConfig(resolved, config.themes).colors;
-    const css = buildThemeCssFromCore(colors);
-    let el = document.getElementById('theme-vars') as HTMLStyleElement | null;
-    if (!el) {
-      el = document.createElement('style');
-      el.id = 'theme-vars';
-      document.head.appendChild(el);
-    }
-    el.textContent = css;
-    document.documentElement.className = resolved;
+    // Apply the class synchronously so the new colors take effect before React rerenders.
+    document.documentElement.className = resolveTheme(theme);
 
-    // Re-enable transitions after the browser has painted the new theme
     requestAnimationFrame(() => noTransition.remove());
 
-    // Update local immediately — preserve customTheme (including background) so it can be restored
-    updateConfig((currentConfig) => ({
-      ...currentConfig,
-      theme,
-    }));
-    syncToEncrypted({ theme });
-  }, [config.themes, config.customTheme?.colors, updateConfig, syncToEncrypted]);
+    updateConfig((currentConfig) => ({ ...currentConfig, theme }));
 
-  /**
-   * Set theme to "custom" and apply the given theme config.
-   * Accepts either ThemeConfig or bare CoreThemeColors (for backward compat).
-   */
-  const applyCustomTheme = useCallback((input: ThemeConfig | CoreThemeColors) => {
-    // Normalize: if it looks like bare CoreThemeColors (has 'background' but no 'colors'), wrap it
-    const themeConfig: ThemeConfig = 'colors' in input ? input : { colors: input };
-
-    // Explicitly clear background if the new theme doesn't specify one,
-    // so switching from a background preset to a non-background theme cleans up.
-    const normalizedConfig: ThemeConfig = {
-      ...themeConfig,
-      background: themeConfig.background ?? undefined,
-    };
-
-    updateConfig((currentConfig) => ({
-      ...currentConfig,
-      theme: 'custom' as Theme,
-      customTheme: normalizedConfig,
-    }));
-    syncToEncrypted({ theme: 'custom', customTheme: normalizedConfig });
-  }, [updateConfig, syncToEncrypted]);
+    if (user) {
+      updateSettings.mutateAsync({ theme }).catch((error) => {
+        console.error('Failed to sync theme to encrypted storage:', error);
+      });
+    }
+  }, [updateConfig, updateSettings, user]);
 
   return {
     theme: config.theme,
-    customTheme: config.customTheme,
-    themes: config.themes,
     setTheme,
-    applyCustomTheme,
   };
 }
diff --git a/src/index.css b/src/index.css
index 6c1180e4..cc21b74a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,16 +3,65 @@
 @tailwind utilities;
 
 @layer base {
+  /*
+   * Agora's built-in color tokens. These are hardcoded and ship with the
+   * bundle — there is no runtime injection path, no remote theme loader,
+   * no localStorage-driven CSS-variable mutation. The only thing that
+   * changes at runtime is the `.dark` class on <html>, set by
+   * AppProvider based on the resolved theme preference.
+   *
+   * If you want to recolor the app, edit these values directly.
+   */
   :root {
     --radius: 0.75rem;
-    --success: 142 72% 29%;
-    --success-foreground: 138 60% 94%;
     /* Mobile chrome dimensions — referenced by layout utility classes below */
     --top-bar-height: 2.5rem;   /* MobileTopBar h-10 = 40px */
     --bottom-nav-height: 2.75rem; /* MobileBottomNav h-11 = 44px */
+
+    /* ── Light theme tokens ───────────────────────────────────────────── */
+    --background: 0 0% 100%;
+    --foreground: 222 47% 11%;
+    --card: 0 0% 100%;
+    --card-foreground: 222 47% 11%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 24 100% 50%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 222 47% 11%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 222 17% 46%;
+    --accent: 0 0% 92%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 24 50% 82%;
+    --input: 24 50% 82%;
+    --ring: 24 100% 50%;
+    --success: 142 72% 29%;
+    --success-foreground: 138 60% 94%;
   }
 
   .dark {
+    --background: 0 0% 10%;
+    --foreground: 0 0% 95%;
+    --card: 0 0% 12%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 12%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 24 100% 50%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 18%;
+    --secondary-foreground: 0 0% 95%;
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 0 0% 24%;
+    --accent-foreground: 0 0% 95%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 95%;
+    --border: 24 40% 30%;
+    --input: 24 40% 30%;
+    --ring: 24 100% 50%;
     --success: 142 60% 22%;
     --success-foreground: 138 60% 94%;
   }
diff --git a/src/lib/colorMomentUtils.ts b/src/lib/colorMomentUtils.ts
index 9197f483..30fe4e19 100644
--- a/src/lib/colorMomentUtils.ts
+++ b/src/lib/colorMomentUtils.ts
@@ -1,5 +1,12 @@
-import { hexToHslString, hexToRgb, rgbToHsl, hslToRgb, getLuminance, getContrastRatio, parseHsl, formatHsl, hexLuminance } from '@/lib/colorUtils';
-import type { CoreThemeColors } from '@/themes';
+/**
+ * Color Moment (kind 3367) utilities.
+ *
+ * Color Moments are palette-art posts: a kind-3367 event carries a small set
+ * of hex colors as `c` tags. Agora renders them as art via
+ * `ColorMomentContent`. The previous `paletteToTheme()` helper that
+ * promoted a Color Moment to the active app theme has been removed — Agora
+ * no longer supports user-injected themes.
+ */
 
 /** Extract validated hex color values from event tags. */
 export function getColors(tags: string[][]): string[] {
@@ -8,77 +15,3 @@ export function getColors(tags: string[][]): string[] {
     .map(([, v]) => v)
     .filter((v) => /^#[0-9A-Fa-f]{6}$/.test(v));
 }
-
-function hexContrast(hex1: string, hex2: string): number {
-  return getContrastRatio(hexToRgb(hex1), hexToRgb(hex2));
-}
-
-function hexSaturation(hex: string): number {
-  return rgbToHsl(...hexToRgb(hex)).s;
-}
-
-/**
- * Adjust the lightness of an HSL string until it achieves at least `targetRatio`
- * contrast against `bgHsl`. Steps toward white or black depending on which
- * direction gives better contrast. Returns the adjusted HSL string.
- */
-function enforceContrast(hsl: string, bgHsl: string, targetRatio: number): string {
-  const bg = parseHsl(bgHsl);
-  const bgLum = getLuminance(...hslToRgb(bg.h, bg.s, bg.l));
-  const { h, s, l } = parseHsl(hsl);
-
-  // Decide direction: go lighter if bg is dark, darker if bg is light
-  const goLighter = bgLum < 0.18;
-  let current = l;
-
-  for (let i = 0; i < 50; i++) {
-    current = goLighter
-      ? Math.min(100, current + 2)
-      : Math.max(0, current - 2);
-    const rgb = hslToRgb(h, s, current);
-    const lum = getLuminance(...rgb);
-    const lighter = Math.max(bgLum, lum);
-    const darker = Math.min(bgLum, lum);
-    if ((lighter + 0.05) / (darker + 0.05) >= targetRatio) break;
-  }
-
-  return formatHsl(h, s, current);
-}
-
-/**
- * Map palette hex colors to CoreThemeColors with guaranteed readability:
- * 1. background = darkest color
- * 2. text       = lightest color; if contrast < 4.5:1, synthesize white or black
- * 3. primary    = most saturated remaining color; if contrast < 3:1 against
- *                 background, adjust its lightness until it passes
- */
-export function paletteToTheme(colors: string[]): CoreThemeColors {
-  if (colors.length === 0) {
-    return { background: '0 0% 10%', text: '0 0% 98%', primary: '258 70% 55%' };
-  }
-
-  const sorted = [...colors].sort((a, b) => hexLuminance(a) - hexLuminance(b));
-  const bgHex = sorted[0];
-  const bgHsl = hexToHslString(bgHex);
-
-  // Text: lightest palette color; override with white/black if contrast is too low
-  const textHex = sorted[sorted.length - 1];
-  let textHsl = hexToHslString(textHex);
-  if (hexContrast(textHex, bgHex) < 4.5) {
-    // Pick white or black -- whichever contrasts better
-    const whiteContrast = hexContrast('#ffffff', bgHex);
-    const blackContrast = hexContrast('#000000', bgHex);
-    textHsl = whiteContrast >= blackContrast ? '0 0% 98%' : '222 20% 8%';
-  }
-
-  // Primary: most saturated of remaining colors; nudge lightness if needed
-  const rest = colors.filter((c) => c !== bgHex && c !== textHex);
-  const pool = rest.length > 0 ? rest : [textHex];
-  const primaryHex = pool.reduce((best, c) => hexSaturation(c) > hexSaturation(best) ? c : best, pool[0]);
-  let primaryHsl = hexToHslString(primaryHex);
-  if (hexContrast(primaryHex, bgHex) < 3) {
-    primaryHsl = enforceContrast(primaryHsl, bgHsl, 3);
-  }
-
-  return { background: bgHsl, text: textHsl, primary: primaryHsl };
-}
diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
index 8ed60594..767975a8 100644
--- a/src/lib/colorUtils.ts
+++ b/src/lib/colorUtils.ts
@@ -1,6 +1,3 @@
-import type { ThemeTokens } from '@/themes';
-import type { CoreThemeColors } from '@/themes';
-
 // ─── Conversion Utilities ────────────────────────────────────────────
 
 /** Parse an HSL string like "228 20% 10%" into { h, s, l } */
@@ -138,126 +135,6 @@ export function getBackgroundHex(): string | null {
 
 // ─── Adjust HSL helpers ───────────────────────────────────────────────
 
-/** Lighten an HSL string by a given amount (0-100). */
-function lighten(hsl: string, amount: number): string {
-  const { h, s, l } = parseHsl(hsl);
-  return formatHsl(h, s, Math.min(100, l + amount));
-}
-
-/** Darken an HSL string by a given amount (0-100). */
-function darken(hsl: string, amount: number): string {
-  const { h, s, l } = parseHsl(hsl);
-  return formatHsl(h, s, Math.max(0, l - amount));
-}
-
-/** Get a contrast foreground (white or dark) for a given background.
- *
- * Picks white text when the background's relative luminance is below ~0.55
- * (covers most saturated brand colors — orange, red, blue, purple, green — at
- * mid lightness), and dark text only for genuinely light backgrounds (pale
- * pastels, white). The previous threshold (luminance < 0.2 = dark) classified
- * almost every saturated mid-lightness color as "light" and painted dark text
- * on top, which looks washed-out on the orange brand primary. */
-function contrastForeground(bgHsl: string): string {
-  const { h, s, l } = parseHsl(bgHsl);
-  const [r, g, b] = hslToRgb(h, s, l);
-  const luminance = getLuminance(r, g, b);
-  return luminance < 0.55 ? '0 0% 100%' : '222.2 84% 4.9%';
-}
-
-// ─── Auto-Derive Full Token Set from Core Colors ──────────────────────
-
-/**
- * Derive all Tailwind theme tokens from 3 core colors.
- *
- * The Tailwind "accent" token is the *hover/focus surface* used by
- * dropdown items, ghost buttons, calendar cells, command palettes,
- * etc. — it must stay a muted neutral tint, NOT the brand primary.
- * (The shadcn defaults set `accent` to a muted surface for exactly
- * this reason; using `primary` here paints every menu hover state
- * with the loud brand color.)
- *
- * @param background - Background HSL string
- * @param text       - Text/foreground HSL string
- * @param primary    - Primary accent HSL string (buttons, links, focus rings)
- */
-export function deriveTokensFromCore(
-  background: string,
-  text: string,
-  primary: string,
-): ThemeTokens {
-  const dark = isDarkTheme(background);
-
-  // Surface colors derived from background
-  const card = dark ? lighten(background, 2) : background;
-  const popover = dark ? lighten(background, 2) : background;
-  const secondarySurface = dark ? lighten(background, 8) : darken(background, 4);
-  const muted = dark ? lighten(background, 8) : darken(background, 4);
-  // Accent is the *interactive* surface (dropdown item hover, ghost
-  // button hover, calendar cells, command palettes). It sits one
-  // perceptible step beyond secondary/muted so it reads as "this is
-  // where my cursor is" without bleeding into resting-state elements
-  // that already use `bg-muted` (avatar fallbacks, badges, code chips).
-  // Without this gap, a hovered menu item containing an avatar makes
-  // the avatar disappear into the row.
-  const accent = dark ? lighten(background, 14) : darken(background, 8);
-  const border = dark ? formatHsl(parseHsl(primary).h, parseHsl(primary).s * 0.4, 30) : formatHsl(parseHsl(primary).h, parseHsl(primary).s * 0.5, 82);
-  const input = border;
-
-  // Muted foreground: a dimmer version of the main text color
-  const fgParsed = parseHsl(text);
-  const mutedFg = dark
-    ? formatHsl(fgParsed.h, Math.max(fgParsed.s - 20, 0), Math.max(fgParsed.l - 30, 40))
-    : formatHsl(fgParsed.h, Math.max(fgParsed.s - 30, 0), Math.min(fgParsed.l + 35, 55));
-
-  // Foreground variants
-  const cardFg = text;
-  const popoverFg = text;
-  const secondarySurfaceFg = text;
-
-  // Primary/accent foregrounds: auto-contrast
-  const primaryFg = contrastForeground(primary);
-
-  // Destructive: standard red
-  const destructive = dark ? '0 72% 51%' : '0 84.2% 60.2%';
-  const destructiveFg = dark ? '0 0% 95%' : '210 40% 98%';
-
-  return {
-    background,
-    foreground: text,
-    card,
-    cardForeground: cardFg,
-    popover,
-    popoverForeground: popoverFg,
-    primary,
-    primaryForeground: primaryFg,
-    secondary: secondarySurface,
-    secondaryForeground: secondarySurfaceFg,
-    muted,
-    mutedForeground: mutedFg,
-    accent,
-    accentForeground: text,
-    destructive,
-    destructiveForeground: destructiveFg,
-    border,
-    input,
-    ring: primary,
-  };
-}
-
-/**
- * Extract CoreThemeColors from a legacy ThemeTokens object.
- * Used for backward compatibility when reading old configs/events
- * that stored the full 19-token set.
- */
-export function tokensToCoreColors(tokens: ThemeTokens): CoreThemeColors {
-  return {
-    background: tokens.background,
-    text: tokens.foreground,
-    primary: tokens.primary,
-  };
-}
-
 // ─── Hex color manipulation ───────────────────────────────────────────
 
 /** Darken a hex color by a factor (0 = no change, 1 = black). */
diff --git a/src/lib/cssSanitize.ts b/src/lib/cssSanitize.ts
new file mode 100644
index 00000000..dd30e313
--- /dev/null
+++ b/src/lib/cssSanitize.ts
@@ -0,0 +1,19 @@
+/**
+ * Sanitize a string for safe interpolation into a double-quoted CSS context.
+ *
+ * Uses an allowlist approach — only Unicode letters, numbers, spaces, hyphens,
+ * underscores, apostrophes, and periods are permitted. Everything else is
+ * stripped, which is enough to prevent CSS-string breakout (`"`, `;`, `<`,
+ * `\\`, etc.).
+ *
+ * Use this whenever an event-sourced string flows into a CSS declaration
+ * value — e.g. a font-family chosen by a letter sender, where the value is
+ * interpolated into `style={{ fontFamily: ... }}`.
+ *
+ * URLs in CSS contexts (`url("...")`) must still go through `sanitizeUrl()`
+ * from `@/lib/sanitizeUrl` — this helper only protects the bare string
+ * interpolation case.
+ */
+export function sanitizeCssString(value: string): string {
+  return value.replace(/[^\p{L}\p{N} _\-'.]/gu, '');
+}
diff --git a/src/lib/fontLoader.ts b/src/lib/fontLoader.ts
deleted file mode 100644
index beaa9369..00000000
--- a/src/lib/fontLoader.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-/**
- * Font loading utilities.
- *
- * Handles loading fonts from:
- * 1. Bundled fontsource packages (via dynamic import)
- * 2. Remote URLs (via @font-face injection)
- *
- * Also manages the CSS override that applies a custom font to the document.
- */
-
-import type { ThemeFont } from '@/themes';
-import { findBundledFont, loadBundledFont, resolveCssFamily } from '@/lib/fonts';
-
-// ─── CSS string sanitisation ──────────────────────────────────────────
-
-/**
- * Sanitize a string for safe interpolation into a double-quoted CSS context.
- * Uses an allowlist approach — only Unicode letters, numbers, spaces, hyphens,
- * underscores, apostrophes, and periods are permitted. Everything else is stripped.
- *
- * Use whenever event-sourced strings flow into a CSS declaration value
- * (e.g. `font-family`) to prevent CSS-string breakout.
- */
-export function sanitizeCssString(value: string): string {
-  return value.replace(/[^\p{L}\p{N} _\-'.]/gu, '');
-}
-
-// ─── @font-face injection for remote fonts ────────────────────────────
-
-/** Style element ID for injected @font-face rules. */
-const FONT_FACE_STYLE_ID = 'theme-font-faces';
-
-/** Tracks which remote font URLs have already been injected. */
-const injectedUrls = new Set<string>();
-
-/**
- * Inject a @font-face rule for a remote font URL.
- * Idempotent — won't inject the same URL twice.
- */
-function injectFontFace(family: string, url: string): void {
-  if (injectedUrls.has(url)) return;
-
-  let style = document.getElementById(FONT_FACE_STYLE_ID) as HTMLStyleElement | null;
-  if (!style) {
-    style = document.createElement('style');
-    style.id = FONT_FACE_STYLE_ID;
-    document.head.appendChild(style);
-  }
-
-  const safeFamily = sanitizeCssString(family);
-  const rule = `
-@font-face {
-  font-family: "${safeFamily}";
-  src: url("${url}");
-  font-display: swap;
-}`;
-
-  style.textContent += rule;
-  injectedUrls.add(url);
-}
-
-// ─── Font override CSS ───────────────────────────────────────────────
-
-/** Style element ID for font-family overrides. */
-const FONT_OVERRIDE_STYLE_ID = 'theme-font-overrides';
-
-/** Default font stack when no custom font is set. */
-const DEFAULT_FONT_STACK = '"Inter Variable", Inter, system-ui, sans-serif';
-
-/**
- * Apply a font-family override to the document.
- * The font applies globally to the html element (cascades to everything).
- *
- * Pass undefined to clear the override.
- */
-export function applyFontOverride(font: ThemeFont | undefined): void {
-  let style = document.getElementById(FONT_OVERRIDE_STYLE_ID) as HTMLStyleElement | null;
-
-  if (!font) {
-    // No custom font — remove override
-    style?.remove();
-    return;
-  }
-
-  if (!style) {
-    style = document.createElement('style');
-    style.id = FONT_OVERRIDE_STYLE_ID;
-    document.head.appendChild(style);
-  }
-
-  const cssFamily = sanitizeCssString(resolveCssFamily(font.family));
-  style.textContent = `html { font-family: "${cssFamily}", ${DEFAULT_FONT_STACK} !important; }\n`;
-}
-
-// ─── High-level font loading ──────────────────────────────────────────
-
-/**
- * Load a single font by family name and optional URL.
- * Tries bundled fonts first, falls back to remote URL injection.
- */
-export async function loadFont(family: string, url?: string): Promise<void> {
-  // Try bundled font first
-  const loaded = await loadBundledFont(family);
-  if (loaded) return;
-
-  // Fall back to remote URL if provided
-  if (url) {
-    injectFontFace(family, url);
-  }
-}
-
-/**
- * Load a theme font and apply the CSS override.
- * This is the main entry point for applying a theme font.
- */
-export async function loadAndApplyFont(font: ThemeFont | undefined): Promise<void> {
-  if (!font) {
-    applyFontOverride(undefined);
-    return;
-  }
-
-  await loadFont(font.family, font.url);
-  applyFontOverride(font);
-}
-
-// ─── Title Font CSS Override ──────────────────────────────────────────
-
-/** Style element ID for title font CSS custom property. */
-const TITLE_FONT_OVERRIDE_STYLE_ID = 'theme-title-font-overrides';
-
-/**
- * Apply a CSS custom property `--title-font-family` to the document.
- * Components that render the profile display name read this variable.
- *
- * Pass undefined to clear the override.
- */
-export function applyTitleFontOverride(font: ThemeFont | undefined): void {
-  let style = document.getElementById(TITLE_FONT_OVERRIDE_STYLE_ID) as HTMLStyleElement | null;
-
-  if (!font) {
-    style?.remove();
-    return;
-  }
-
-  if (!style) {
-    style = document.createElement('style');
-    style.id = TITLE_FONT_OVERRIDE_STYLE_ID;
-    document.head.appendChild(style);
-  }
-
-  const cssFamily = sanitizeCssString(resolveCssFamily(font.family));
-  style.textContent = `:root { --title-font-family: "${cssFamily}", ${DEFAULT_FONT_STACK}; }\n`;
-}
-
-/**
- * Load a title font and apply the CSS custom property override.
- */
-export async function loadAndApplyTitleFont(font: ThemeFont | undefined): Promise<void> {
-  if (!font) {
-    applyTitleFontOverride(undefined);
-    return;
-  }
-
-  await loadFont(font.family, font.url);
-  applyTitleFontOverride(font);
-}
-
-/**
- * Resolve font URLs for publishing to Nostr.
- * For bundled fonts, returns the CDN URL. For others, preserves the existing URL.
- */
-export function resolveFontUrl(family: string, existingUrl?: string): string | undefined {
-  const bundled = findBundledFont(family);
-  if (bundled) return bundled.cdnUrl;
-  return existingUrl;
-}
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
index d67950ec..0b91e1b3 100644
--- a/src/lib/fonts.ts
+++ b/src/lib/fonts.ts
@@ -1,244 +1,75 @@
 /**
- * Bundled font registry.
+ * Bundled font registry for the Letter feature (kind 8211).
  *
- * Maps font family names to their fontsource dynamic import functions.
- * Fonts are loaded lazily — only imported when actually used.
+ * Letters let senders pick a font for the body text; the recipient's client
+ * lazy-loads the corresponding fontsource package when the letter is opened.
+ * Only the fonts in `FONT_OPTIONS` (see `src/lib/letterTypes.ts`) are
+ * ever requested, and the family name is matched against this allowlist —
+ * arbitrary font URLs are NOT loaded.
+ *
+ * The Agora app's UI uses `Inter Variable` and `Bebas Neue` (loaded eagerly
+ * in `src/main.tsx`), neither of which is configurable.
  */
 
-export type FontCategory = 'sans' | 'serif' | 'mono' | 'display' | 'handwriting';
-
-export interface BundledFont {
-  /** Canonical font-family name used in Nostr events and UI display */
+interface BundledFont {
+  /** Canonical font-family name used in letter metadata. */
   family: string;
-  /**
-   * The actual CSS font-family name registered by the @fontsource package.
-   * For variable fonts, fontsource appends " Variable" to the family name
-   * (e.g., "Comfortaa Variable"). For static fonts, this matches `family`.
-   */
-  cssFamily: string;
-  /** Font category for UI grouping */
-  category: FontCategory;
-  /** Whether this is a variable font (false = static with discrete weights) */
-  variable: boolean;
-  /** Dynamic import that loads the font CSS into the page */
+  /** Dynamic import that loads the font CSS into the page. */
   load: () => Promise<void>;
-  /** Fontsource CDN URL for .woff2 file (used when publishing to Nostr events) */
-  cdnUrl: string;
 }
 
-/**
- * The 10 curated bundled fonts.
- * Inter is already loaded globally via main.tsx, but included here for completeness.
- */
-export const bundledFonts: BundledFont[] = [
-  {
-    family: 'Inter',
-    cssFamily: 'Inter Variable',
-    category: 'sans',
-    variable: true,
-    load: () => import('@fontsource-variable/inter').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'DM Sans',
-    cssFamily: 'DM Sans Variable',
-    category: 'sans',
-    variable: true,
-    load: () => import('@fontsource-variable/dm-sans').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/dm-sans:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'Outfit',
-    cssFamily: 'Outfit Variable',
-    category: 'sans',
-    variable: true,
-    load: () => import('@fontsource-variable/outfit').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/outfit:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'Montserrat',
-    cssFamily: 'Montserrat Variable',
-    category: 'sans',
-    variable: true,
-    load: () => import('@fontsource-variable/montserrat').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'Lora',
-    cssFamily: 'Lora Variable',
-    category: 'serif',
-    variable: true,
-    load: () => import('@fontsource-variable/lora').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/lora:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'Merriweather',
-    cssFamily: 'Merriweather Variable',
-    category: 'serif',
-    variable: true,
-    load: () => import('@fontsource-variable/merriweather').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/merriweather:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'Playfair Display',
-    cssFamily: 'Playfair Display Variable',
-    category: 'serif',
-    variable: true,
-    load: () => import('@fontsource-variable/playfair-display').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/playfair-display:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'JetBrains Mono',
-    cssFamily: 'JetBrains Mono Variable',
-    category: 'mono',
-    variable: true,
-    load: () => import('@fontsource-variable/jetbrains-mono').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'Comfortaa',
-    cssFamily: 'Comfortaa Variable',
-    category: 'display',
-    variable: true,
-    load: () => import('@fontsource-variable/comfortaa').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/comfortaa:vf@latest/latin-wght-normal.woff2',
-  },
-  {
-    family: 'Comic Relief',
-    cssFamily: 'Comic Relief',
-    category: 'handwriting',
-    variable: false,
-    load: async () => {
-      await import('@fontsource/comic-relief/400.css');
-      await import('@fontsource/comic-relief/700.css');
-    },
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/comic-relief@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Permanent Marker',
-    cssFamily: 'Permanent Marker',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/permanent-marker/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/permanent-marker@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Cherry Bomb One',
-    cssFamily: 'Cherry Bomb One',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/cherry-bomb-one/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/cherry-bomb-one@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Creepster',
-    cssFamily: 'Creepster',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/creepster/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/creepster@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Silkscreen',
-    cssFamily: 'Silkscreen',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/silkscreen/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/silkscreen@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Bungee Shade',
-    cssFamily: 'Bungee Shade',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/bungee-shade/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/bungee-shade@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Luckiest Guy',
-    cssFamily: 'Luckiest Guy',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/luckiest-guy/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/luckiest-guy@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Press Start 2P',
-    cssFamily: 'Press Start 2P',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/press-start-2p/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/press-start-2p@latest/latin-400-normal.woff2',
-  },
+const bundledFonts: BundledFont[] = [
   {
     family: 'Fredoka',
-    cssFamily: 'Fredoka Variable',
-    category: 'display',
-    variable: true,
     load: () => import('@fontsource-variable/fredoka').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/fredoka:vf@latest/latin-wght-normal.woff2',
   },
   {
-    family: 'Caveat',
-    cssFamily: 'Caveat',
-    category: 'handwriting',
-    variable: false,
-    load: () => import('@fontsource/caveat/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/caveat@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Pacifico',
-    cssFamily: 'Pacifico',
-    category: 'handwriting',
-    variable: false,
-    load: () => import('@fontsource/pacifico/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/pacifico@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Pirata One',
-    cssFamily: 'Pirata One',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/pirata-one/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/pirata-one@latest/latin-400-normal.woff2',
-  },
-  {
-    family: 'Special Elite',
-    cssFamily: 'Special Elite',
-    category: 'display',
-    variable: false,
-    load: () => import('@fontsource/special-elite/400.css').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/special-elite@latest/latin-400-normal.woff2',
+    family: 'Fredoka Variable',
+    load: () => import('@fontsource-variable/fredoka').then(() => {}),
   },
   {
     family: 'Nunito',
-    cssFamily: 'Nunito Variable',
-    category: 'sans',
-    variable: true,
     load: () => import('@fontsource-variable/nunito').then(() => {}),
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/nunito:vf@latest/latin-wght-normal.woff2',
   },
   {
-    family: 'Courier Prime',
-    cssFamily: 'Courier Prime',
-    category: 'mono',
-    variable: false,
-    load: async () => {
-      await import('@fontsource/courier-prime/400.css');
-      await import('@fontsource/courier-prime/700.css');
-    },
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/courier-prime@latest/latin-400-normal.woff2',
+    family: 'Nunito Variable',
+    load: () => import('@fontsource-variable/nunito').then(() => {}),
   },
   {
-    family: 'Comic Neue',
-    cssFamily: 'Comic Neue',
-    category: 'handwriting',
-    variable: false,
-    load: async () => {
-      await import('@fontsource/comic-neue/400.css');
-      await import('@fontsource/comic-neue/700.css');
-    },
-    cdnUrl: 'https://cdn.jsdelivr.net/fontsource/fonts/comic-neue@latest/latin-400-normal.woff2',
+    family: 'Playfair Display',
+    load: () => import('@fontsource-variable/playfair-display').then(() => {}),
+  },
+  {
+    family: 'Playfair Display Variable',
+    load: () => import('@fontsource-variable/playfair-display').then(() => {}),
+  },
+  {
+    family: 'Caveat',
+    load: () => import('@fontsource/caveat/400.css').then(() => {}),
+  },
+  {
+    family: 'Pacifico',
+    load: () => import('@fontsource/pacifico/400.css').then(() => {}),
+  },
+  {
+    family: 'Pirata One',
+    load: () => import('@fontsource/pirata-one/400.css').then(() => {}),
+  },
+  {
+    family: 'Permanent Marker',
+    load: () => import('@fontsource/permanent-marker/400.css').then(() => {}),
+  },
+  {
+    family: 'Special Elite',
+    load: () => import('@fontsource/special-elite/400.css').then(() => {}),
+  },
+  {
+    family: 'Creepster',
+    load: () => import('@fontsource/creepster/400.css').then(() => {}),
+  },
+  {
+    family: 'Silkscreen',
+    load: () => import('@fontsource/silkscreen/400.css').then(() => {}),
   },
 ];
 
@@ -247,28 +78,15 @@ const bundledFontMap = new Map(
   bundledFonts.map((f) => [f.family.toLowerCase(), f]),
 );
 
-/** Find a bundled font by family name (case-insensitive). Returns undefined if not bundled. */
-export function findBundledFont(family: string): BundledFont | undefined {
-  return bundledFontMap.get(family.toLowerCase());
-}
-
-/**
- * Resolve the CSS font-family name for a given canonical family name.
- * For bundled variable fonts, this returns the fontsource-registered name
- * (e.g., "Comfortaa" → "Comfortaa Variable"). For non-bundled fonts,
- * returns the family name as-is.
- */
-export function resolveCssFamily(family: string): string {
-  const bundled = bundledFontMap.get(family.toLowerCase());
-  return bundled?.cssFamily ?? family;
-}
-
 /** Tracks which fonts have already been loaded. */
 const loadedFonts = new Set<string>();
 
 /**
  * Ensure a bundled font is loaded (idempotent).
- * Returns true if the font was found and loaded, false if not bundled.
+ *
+ * Returns `true` if the font was found in the allowlist and the CSS was
+ * loaded (or had already been loaded). Returns `false` for any unknown
+ * family — the caller's text just falls back to the default font stack.
  */
 export async function loadBundledFont(family: string): Promise<boolean> {
   const key = family.toLowerCase();
diff --git a/src/lib/letterTypes.ts b/src/lib/letterTypes.ts
index 8f7a3e12..fc7defb9 100644
--- a/src/lib/letterTypes.ts
+++ b/src/lib/letterTypes.ts
@@ -1,6 +1,6 @@
 import type { NostrEvent } from '@nostrify/nostrify';
 import { sanitizeUrl } from '@/lib/sanitizeUrl';
-import { sanitizeCssString } from '@/lib/fontLoader';
+import { sanitizeCssString } from '@/lib/cssSanitize';
 
 export const LETTER_KIND = 8211;
 export const COLOR_MOMENT_KIND = 3367;
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 622706b4..a30bc1ee 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -1,109 +1,11 @@
 import { z } from 'zod';
 
 import type { Theme, ContentWarningPolicy } from '@/contexts/AppContext';
-import type { CoreThemeColors, ThemeConfig, ThemesConfig } from '@/themes';
 
 // ─── Theme Schemas ───────────────────────────────────────────────────
 
 /** Zod schema for Theme validation */
-export const ThemeSchema = z.enum(['dark', 'light', 'system', 'custom']) satisfies z.ZodType<Theme>;
-
-
-/** HSL value string like "258 70% 55%" */
-const HslValue = z.string().regex(/^\d/);
-
-/** Zod schema for CoreThemeColors (the 3 core colors) */
-export const CoreThemeColorsSchema = z.object({
-  background: HslValue,
-  text: HslValue,
-  primary: HslValue,
-}) satisfies z.ZodType<CoreThemeColors>;
-
-/**
- * Legacy schema that accepts the old 19-token ThemeTokens format.
- * Used for backward compatibility when reading old configs/events.
- * Extracts core colors from legacy format.
- */
-export const LegacyThemeTokensSchema = z.object({
-  background: HslValue,
-  foreground: HslValue,
-  primary: HslValue,
-}).passthrough();
-
-/**
- * Legacy schema that accepts the old 4-color format (with secondary).
- * Strips the secondary field and normalizes to CoreThemeColors.
- */
-export const LegacyFourColorSchema = z.object({
-  background: HslValue,
-  text: HslValue,
-  primary: HslValue,
-  secondary: HslValue,
-}).transform(({ background, text, primary }): CoreThemeColors => ({
-  background,
-  text,
-  primary,
-}));
-
-/**
- * Schema that accepts CoreThemeColors, legacy 4-color, or legacy ThemeTokens,
- * always normalizing to CoreThemeColors.
- */
-export const ThemeColorsCompatSchema = z.union([
-  CoreThemeColorsSchema,
-  LegacyFourColorSchema,
-  LegacyThemeTokensSchema.transform((legacy): CoreThemeColors => ({
-    background: legacy.background,
-    text: legacy.foreground,
-    primary: legacy.primary,
-  })),
-]);
-
-// ─── ThemeConfig Schemas ──────────────────────────────────────────────
-
-/** Zod schema for ThemeFont */
-export const ThemeFontSchema = z.object({
-  family: z.string(),
-  // Reject non-URL strings at the schema layer. Downstream consumers still
-  // run the value through \`sanitizeUrl()\` to enforce \`https:\` and strip
-  // \`javascript:\`/\`data:\` URIs before use — this is defense-in-depth.
-  url: z.url().optional(),
-});
-
-/** Zod schema for ThemeBackground */
-export const ThemeBackgroundSchema = z.object({
-  url: z.url(),
-  mode: z.enum(['cover', 'tile']).optional(),
-  dimensions: z.string().optional(),
-  mimeType: z.string().optional(),
-  blurhash: z.string().optional(),
-});
-
-/** Zod schema for the full ThemeConfig */
-export const ThemeConfigSchema = z.object({
-  title: z.string().optional(),
-  colors: CoreThemeColorsSchema,
-  font: ThemeFontSchema.optional(),
-  titleFont: ThemeFontSchema.optional(),
-  background: ThemeBackgroundSchema.optional(),
-});
-
-/** Zod schema for ThemesConfig (light + dark theme configs) */
-export const ThemesConfigSchema = z.object({
-  light: z.lazy(() => ThemeConfigSchema),
-  dark: z.lazy(() => ThemeConfigSchema),
-}) satisfies z.ZodType<ThemesConfig>;
-
-/**
- * Compat schema that accepts either the new ThemeConfig format or the old
- * bare CoreThemeColors format (and all legacy color variants), normalizing
- * to ThemeConfig.
- */
-export const ThemeConfigCompatSchema = z.union([
-  ThemeConfigSchema,
-  // Bare CoreThemeColors (old format) → wrap in ThemeConfig
-  ThemeColorsCompatSchema.transform((colors): ThemeConfig => ({ colors })),
-]);
+export const ThemeSchema = z.enum(['dark', 'light', 'system']) satisfies z.ZodType<Theme>;
 
 /** Zod schema for ContentWarningPolicy validation */
 export const ContentWarningPolicySchema = z.enum(['blur', 'hide', 'show']) satisfies z.ZodType<ContentWarningPolicy>;
@@ -207,9 +109,6 @@ export const SavedFeedSchema = z.object({
 
 /**
  * Zod schema for the full AppConfig stored in localStorage.
- *
- * Uses ThemeConfigCompatSchema for the customTheme field so legacy
- * 19-token color objects still parse successfully.
  */
 export const AppConfigSchema = z.object({
   appName: z.string().optional(),
@@ -220,8 +119,6 @@ export const AppConfigSchema = z.object({
   /** NIP-19 naddr1 string for the kind 31990 handler event. */
   client: z.string().startsWith('naddr1').optional(),
   theme: ThemeSchema,
-  customTheme: ThemeConfigCompatSchema.optional(),
-  themes: ThemesConfigSchema.optional(),
   relayMetadata: RelayMetadataSchema,
   useAppRelays: z.boolean(),
   useUserRelays: z.boolean(),
@@ -332,7 +229,6 @@ export const ContentFilterSchema = z.object({
  */
 export const EncryptedSettingsSchema = z.looseObject({
   theme: ThemeSchema.optional(),
-  customTheme: ThemeConfigCompatSchema.optional(),
   useAppRelays: z.boolean().optional(),
   useUserRelays: z.boolean().optional(),
   feedSettings: FeedSettingsSchema.optional(),
diff --git a/src/pages/AppearanceSettingsPage.tsx b/src/pages/AppearanceSettingsPage.tsx
index e96bf04d..0a3538dd 100644
--- a/src/pages/AppearanceSettingsPage.tsx
+++ b/src/pages/AppearanceSettingsPage.tsx
@@ -38,9 +38,6 @@ export function AppearanceSettingsPage() {
   const { config } = useAppContext();
   const { theme, setTheme } = useTheme();
 
-  // Treat "custom" as "system" for display since we're simplifying to 3 options
-  const activeTheme = theme === 'custom' ? 'system' : theme;
-
   useSeoMeta({
     title: `Appearance | Settings | ${config.appName}`,
     description: 'Choose between system, light, and dark mode',
@@ -79,7 +76,7 @@ export function AppearanceSettingsPage() {
               className={cn(
                 'w-full flex items-center gap-4 px-4 py-3.5 rounded-xl border-2 transition-all duration-200',
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                activeTheme === option.value
+                theme === option.value
                   ? 'border-primary bg-primary/5 shadow-sm'
                   : 'border-border/50 hover:border-primary/40 hover:bg-muted/30',
               )}
@@ -87,7 +84,7 @@ export function AppearanceSettingsPage() {
               <div
                 className={cn(
                   'flex items-center justify-center size-10 rounded-lg transition-colors',
-                  activeTheme === option.value
+                  theme === option.value
                     ? 'bg-primary text-primary-foreground'
                     : 'bg-muted text-muted-foreground',
                 )}
@@ -97,7 +94,7 @@ export function AppearanceSettingsPage() {
               <div className="flex-1 text-left min-w-0">
                 <p className={cn(
                   'text-sm font-semibold',
-                  activeTheme === option.value ? 'text-foreground' : 'text-foreground',
+                  theme === option.value ? 'text-foreground' : 'text-foreground',
                 )}>
                   {option.label}
                 </p>
@@ -105,7 +102,7 @@ export function AppearanceSettingsPage() {
                   {option.description}
                 </p>
               </div>
-              {activeTheme === option.value && (
+              {theme === option.value && (
                 <div className="size-2.5 rounded-full bg-primary shrink-0 animate-in fade-in zoom-in duration-200" />
               )}
             </button>
diff --git a/src/pages/PostDetailPage.tsx b/src/pages/PostDetailPage.tsx
index 104453a3..dc2d01eb 100644
--- a/src/pages/PostDetailPage.tsx
+++ b/src/pages/PostDetailPage.tsx
@@ -25,10 +25,7 @@ import { BadgeAwardCard } from "@/components/BadgeAwardCard";
 import { CalendarEventDetailPage } from "@/components/CalendarEventDetailPage";
 import { CommunityDetailPage } from "@/components/CommunityDetailPage";
 
-import {
-  ColorMomentContent,
-  ColorMomentEyeButton,
-} from "@/components/ColorMomentContent";
+import { ColorMomentContent } from "@/components/ColorMomentContent";
 import {
   EmojifiedText,
   ReactionEmoji,
@@ -1840,7 +1837,6 @@ function PostDetailContent({ event }: { event: NostrEvent }) {
                     🤖
                   </span>
                 )}
-                {isColor && <ColorMomentEyeButton event={event} />}
               </>
             )}
           </div>
diff --git a/src/themes.ts b/src/themes.ts
index 91f158cd..c0370152 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -1,566 +1,23 @@
 import type { Theme } from '@/contexts/AppContext';
-import { deriveTokensFromCore } from '@/lib/colorUtils';
 
 /**
- * The 3 core colors that define a theme.
- * All other Tailwind tokens are derived automatically from these.
+ * Agora's built-in color scheme. Colors are defined statically in `src/index.css`
+ * via `:root {}` (light mode) and `.dark {}` blocks; this module exists only to
+ * resolve a `Theme` preference (`"system"` / `"light"` / `"dark"`) to the
+ * concrete class name applied on `<html>`.
+ *
+ * There is no longer any mechanism for injecting custom colors, fonts, or
+ * backgrounds at runtime. Everything that styles the app ships in the bundle.
  */
-export interface CoreThemeColors {
-  /** Background color (HSL string, e.g. "228 20% 10%") */
-  background: string;
-  /** Text/foreground color */
-  text: string;
-  /** Primary accent color (buttons, links, focus rings) */
-  primary: string;
-}
-
-// ─── Font Types ───────────────────────────────────────────────────────
-
-/** A font reference: family name + optional URL (URL required on Nostr events, optional locally for bundled fonts). */
-export interface ThemeFont {
-  /** CSS font-family name, e.g. "Playfair Display" */
-  family: string;
-  /** Direct URL to a font file (.woff2, .ttf, .otf). Required on Nostr events, optional locally. */
-  url?: string;
-}
-
-// ─── Background Types ─────────────────────────────────────────────────
-
-/** Background image/video configuration. */
-export interface ThemeBackground {
-  /** URL to an image or video file */
-  url: string;
-  /** Display mode */
-  mode?: 'cover' | 'tile';
-  /** Dimensions as "widthxheight", e.g. "1920x1080" */
-  dimensions?: string;
-  /** MIME type, e.g. "image/jpeg" */
-  mimeType?: string;
-  /** Blurhash placeholder for progressive loading */
-  blurhash?: string;
-}
-
-// ─── ThemeConfig ──────────────────────────────────────────────────────
 
 /**
- * Complete theme configuration. Wraps CoreThemeColors with optional
- * font and background settings. This is the canonical type stored in
- * AppConfig.customTheme, EncryptedSettings, and theme events.
+ * Resolves a theme preference to a concrete mode.
+ * - `"system"` → `"light"` or `"dark"` based on OS preference.
+ * - `"light"` / `"dark"` → returned as-is.
  */
-export interface ThemeConfig {
-  /** Theme name (stored locally AND on events) */
-  title?: string;
-  /** The 3 core colors */
-  colors: CoreThemeColors;
-  /** Optional custom font (applies globally to all text) */
-  font?: ThemeFont;
-  /** Optional title/header font (applies to profile display name) */
-  titleFont?: ThemeFont;
-  /** Optional background media */
-  background?: ThemeBackground;
-}
-
-/**
- * Configured light and dark themes. When set in AppConfig,
- * these override the builtin themes for "light" and "dark" modes.
- */
-export interface ThemesConfig {
-  /** Theme config applied when theme resolves to "light". */
-  light: ThemeConfig;
-  /** Theme config applied when theme resolves to "dark". */
-  dark: ThemeConfig;
-}
-
-/**
- * Full set of CSS token values used internally by Tailwind.
- * These are derived from CoreThemeColors via deriveTokensFromCore().
- */
-export interface ThemeTokens {
-  background: string;
-  foreground: string;
-  card: string;
-  cardForeground: string;
-  popover: string;
-  popoverForeground: string;
-  primary: string;
-  primaryForeground: string;
-  secondary: string;
-  secondaryForeground: string;
-  muted: string;
-  mutedForeground: string;
-  accent: string;
-  accentForeground: string;
-  destructive: string;
-  destructiveForeground: string;
-  border: string;
-  input: string;
-  ring: string;
-}
-
-/**
- * Builtin themes whose colors are defined at build time.
- * Self-hosters can customize these values before building.
- */
-export const builtinThemes: Record<'light' | 'dark', CoreThemeColors> = {
-  light: {
-    background: '0 0% 100%',
-    text: '222 47% 11%',
-    primary: '24 100% 50%',
-  },
-
-  dark: {
-    background: '0 0% 10%',
-    text: '0 0% 95%',
-    primary: '24 100% 50%',
-  },
-};
-
-/** Metadata for a theme preset. */
-export interface ThemePreset {
-  /** Display label. */
-  label: string;
-  /** Emoji shown in compact theme pickers (dropdowns, cycle buttons). */
-  emoji: string;
-  /** Whether to show in compact pickers (sidebar dropdown, mobile drawer). All presets appear in settings. */
-  featured?: boolean;
-  /** The 3 core colors. */
-  colors: CoreThemeColors;
-  /** Optional custom font for this preset. */
-  font?: ThemeFont;
-  /** Optional title/header font for this preset. */
-  titleFont?: ThemeFont;
-  /** Optional background for this preset. */
-  background?: ThemeBackground;
-}
-
-/**
- * Custom theme presets. Clicking a preset sets theme to "custom"
- * and applies the preset's core color values to customTheme.
- */
-export const themePresets: Record<string, ThemePreset> = {
-  pink: {
-    label: 'Pink',
-    emoji: '🌸',
-    featured: true,
-    colors: {
-      background: '330 100% 96%',
-      text: '330 30% 10%',
-      primary: '330 90% 60%',
-    },
-    font: { family: 'Comfortaa' },
-    background: {
-      url: 'https://blossom.ditto.pub/2c9d4fe206f39b81655eab559998a89e1dca12f4db81c10fd8f472c69fe9c68a.jpeg',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  toxic: {
-    label: 'Toxic',
-    emoji: '☢️',
-    colors: {
-      background: '130 30% 7%',
-      text: '120 40% 92%',
-      primary: '128 70% 42%',
-    },
-    font: { family: 'JetBrains Mono' },
-  },
-
-
-  sunset: {
-    label: 'Sunset',
-    emoji: '🌅',
-    colors: {
-      background: '20 40% 96%',
-      text: '15 30% 12%',
-      primary: '15 85% 55%',
-    },
-    font: { family: 'Lora' },
-  },
-
-  skater: {
-    label: 'Skater',
-    emoji: '🛹',
-    featured: true,
-    colors: {
-      background: '0 0% 42%',
-      text: '0 0% 100%',
-      primary: '80 100% 50%',
-    },
-    font: { family: 'Rubik Maps' },
-    background: {
-      url: 'https://blossom.primal.net/9c4262aaa53d8feae41b3b6206647e25c6f388d9e836fb3e8abcf9be72be493e.png',
-      mode: 'cover',
-      mimeType: 'image/png',
-    },
-  },
-
-  kawaii: {
-    label: 'Kawaii',
-    emoji: '🌸',
-    featured: true,
-    colors: {
-      background: '340 60% 95%',
-      text: '345 30% 35%',
-      primary: '340 100% 76%',
-    },
-    font: { family: 'Cherry Bomb One' },
-    background: {
-      url: 'https://blossom.ditto.pub/4e11a3ca749f9cc8989b61cb9efe78682533d2836eccaf4bccf104dd7b583e09.png',
-      mode: 'cover',
-      mimeType: 'image/png',
-    },
-  },
-
-  grunge: {
-    label: 'Grunge',
-    emoji: '🖤',
-    featured: true,
-    colors: {
-      background: '276 40% 8%',
-      text: '0 0% 75%',
-      primary: '328 100% 54%',
-    },
-    font: { family: 'Lacquer' },
-    background: {
-      url: 'https://blossom.primal.net/9fa0f1f7cd7da344f3e1db6ecfbdbeb2bb0763d3eaccbc0f5368871d0421b50b.png',
-      mode: 'cover',
-      mimeType: 'image/png',
-    },
-  },
-
-  mspaint: {
-    label: 'MS Paint',
-    emoji: '🖥️',
-    featured: true,
-    colors: {
-      background: '200 20% 95%',
-      text: '0 0% 10%',
-      primary: '240 100% 50%',
-    },
-    font: { family: 'Silkscreen' },
-    background: {
-      url: 'https://blossom.ditto.pub/946fedd46ec6b283472c0b3a102817ff414a6d640517df5c679bb63830ef21bf.png',
-      mode: 'cover',
-      mimeType: 'image/png',
-    },
-  },
-
-  retropop: {
-    label: 'Retro Pop',
-    emoji: '💿',
-    featured: true,
-    colors: {
-      background: '244 100% 92%',
-      text: '40 40% 10%',
-      primary: '260 50% 70%',
-    },
-    font: { family: 'Bungee Shade' },
-    background: {
-      url: 'https://blossom.ditto.pub/3832abebc944668c4c0bd34309b0dfe120054671e20ca8c8e9abbb24114c972e.png',
-      mode: 'cover',
-      mimeType: 'image/png',
-    },
-  },
-
-  bubblegum: {
-    label: 'Bubblegum',
-    emoji: '🍬',
-    featured: true,
-    colors: {
-      background: '0 0% 100%',
-      text: '285 25% 31%',
-      primary: '279 100% 50%',
-    },
-    font: { family: 'Barriecito' },
-    background: {
-      url: 'https://blossom.ditto.pub/edd3139e0c4d60b96dcf54edbe7410b1f58d9e5753c8d481fe9bb6812aca00d4.png',
-      mode: 'cover',
-      mimeType: 'image/png',
-    },
-  },
-
-  gamer: {
-    label: 'Gamer',
-    emoji: '⚡',
-    featured: true,
-    colors: {
-      background: '140 60% 4%',
-      text: '120 100% 50%',
-      primary: '195 100% 50%',
-    },
-    font: { family: 'Press Start 2P' },
-    background: {
-      url: 'https://blossom.ditto.pub/c5597382d7da762dcce32b5b5dbbd95a719faee5cad7c356df1956648b58be69.png',
-      mode: 'cover',
-      mimeType: 'image/png',
-    },
-  },
-
-  // ─── Themes inspired by MySpace Windows93 ──────────────────────────
-
-  cottage: {
-    label: 'Cottage',
-    emoji: '🌿',
-    featured: true,
-    colors: {
-      background: '100 25% 92%',
-      text: '100 20% 12%',
-      primary: '43 80% 55%',
-    },
-    font: { family: 'Lora' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  midnight: {
-    label: 'Midnight',
-    emoji: '🌃',
-    featured: true,
-    colors: {
-      background: '0 0% 9%',
-      text: '0 0% 95%',
-      primary: '190 100% 50%',
-    },
-    font: { family: 'Inter' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  sky: {
-    label: 'Sky',
-    emoji: '☁️',
-    featured: true,
-    colors: {
-      background: '200 60% 88%',
-      text: '220 30% 15%',
-      primary: '280 55% 65%',
-    },
-    font: { family: 'Nunito' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1517483000871-1dbf64a6e1c6?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  motherboard: {
-    label: 'Motherboard',
-    emoji: '🪟',
-    featured: true,
-    colors: {
-      background: '0 0% 75%',
-      text: '0 0% 5%',
-      primary: '240 100% 30%',
-    },
-    font: { family: 'Courier Prime' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  plush: {
-    label: 'Plush',
-    emoji: '🧸',
-    colors: {
-      background: '265 55% 72%',
-      text: '55 100% 50%',
-      primary: '210 90% 55%',
-    },
-    font: { family: 'Comic Neue' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1550684376-efcbd6e3f031?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  galaxy: {
-    label: 'Galaxy',
-    emoji: '🌌',
-    featured: true,
-    colors: {
-      background: '260 40% 8%',
-      text: '220 30% 95%',
-      primary: '270 80% 65%',
-    },
-    font: { family: 'DM Sans' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  ocean: {
-    label: 'Ocean',
-    emoji: '🌊',
-    featured: true,
-    colors: {
-      background: '195 50% 12%',
-      text: '185 30% 92%',
-      primary: '175 70% 50%',
-    },
-    font: { family: 'Nunito' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  forest: {
-    label: 'Forest',
-    emoji: '🌲',
-    featured: true,
-    colors: {
-      background: '150 30% 10%',
-      text: '120 20% 90%',
-      primary: '150 60% 45%',
-    },
-    font: { family: 'Merriweather' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  clearsky: {
-    label: 'Clear Sky Vibes',
-    emoji: '✨',
-    featured: true,
-    colors: {
-      background: '228 37% 8%',
-      text: '185 100% 72%',
-      primary: '300 100% 60%',
-    },
-    font: { family: 'Comfortaa' },
-    background: {
-      url: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  silenttorii: {
-    label: 'Silent Torii',
-    emoji: '⛩️',
-    featured: true,
-    colors: {
-      primary: '3 62% 50%',
-      text: '0 0% 100%',
-      background: '0 7% 22%',
-    },
-    font: { family: 'DM Sans' },
-    background: {
-      url: 'https://blossom.ditto.pub/7a609544b62918264b6cfd1f05ae38f9ed9a7922465a4ecc2edbb1a769f887d0.jpeg',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  quiethorizon: {
-    label: 'Quiet Horizon',
-    emoji: '🌅',
-    featured: true,
-    colors: {
-      primary: '170 15% 39%',
-      text: '0 0% 100%',
-      background: '0 7% 22%',
-    },
-    font: { family: 'Lora' },
-    background: {
-      url: 'https://blossom.ditto.pub/3fc3800e0551340c000a0ac75496e642f6dbd5bddf17c5ba7f4c4ebfc8bae55f.jpeg',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  wherepathsmeet: {
-    label: 'Where Paths Meet',
-    emoji: '🌉',
-    featured: true,
-    colors: {
-      primary: '180 11% 78%',
-      text: '120 3% 81%',
-      background: '180 19% 15%',
-    },
-    font: { family: 'DM Sans' },
-    background: {
-      url: 'https://blossom.ditto.pub/a9f38f1bda2d7d984167f3b1197d3d2c7280a650ad609d24f97e35795f7cfd17.jpeg',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-
-  once: {
-    label: 'Once',
-    emoji: '🎲',
-    featured: true,
-    colors: {
-      primary: '217 94% 72%',
-      text: '120 3% 81%',
-      background: '210 17% 7%',
-    },
-    font: { family: 'Outfit' },
-    background: {
-      url: 'https://picsum.photos/1920/1080',
-      mode: 'cover',
-      mimeType: 'image/jpeg',
-    },
-  },
-};
-
-/** Converts a camelCase key to a CSS custom property name, e.g. primaryForeground → --primary-foreground */
-export function toThemeVar(key: string): string {
-  return `--${key.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`)}`;
-}
-
-/** Builds a CSS :root block string from a ThemeTokens object */
-export function buildThemeCss(tokens: ThemeTokens): string {
-  const vars = (Object.entries(tokens) as [string, string][])
-    .map(([k, v]) => `${toThemeVar(k)}: ${v};`)
-    .join(' ');
-  return `:root { ${vars} }`;
-}
-
-/** Derive full ThemeTokens from CoreThemeColors */
-export function coreToTokens(colors: CoreThemeColors): ThemeTokens {
-  return deriveTokensFromCore(colors.background, colors.text, colors.primary);
-}
-
-/** Build CSS from CoreThemeColors (convenience) */
-export function buildThemeCssFromCore(colors: CoreThemeColors): string {
-  return buildThemeCss(coreToTokens(colors));
-}
-
-/**
- * Resolves a theme preference to the concrete builtin theme name.
- * - "system" → "light" or "dark" based on OS preference.
- * - "custom" → returns "custom" (caller must supply colors from config.customTheme).
- * - "light" / "dark" → returned as-is.
- */
-export function resolveTheme(theme: Theme): 'light' | 'dark' | 'custom' {
+export function resolveTheme(theme: Theme): 'light' | 'dark' {
   if (theme === 'system') {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
   return theme;
 }
-
-/**
- * Resolves the effective ThemeConfig for a "light" or "dark" mode.
- * Uses configured themes from AppConfig if available, otherwise falls back
- * to the builtin themes (colors only, no font/background).
- */
-export function resolveThemeConfig(mode: 'light' | 'dark', themes?: ThemesConfig): ThemeConfig {
-  return themes?.[mode] ?? { colors: builtinThemes[mode] };
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 162901a3..84c8d371 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -2,7 +2,7 @@
 
 // Fontsource packages export CSS — they have no TS declarations
 declare module '@fontsource-variable/*';
-declare module '@fontsource/comic-relief/*';
+declare module '@fontsource/*';
 
 interface ImportMetaEnv {
   /** Hex pubkey of the nostr-push server for Web Push notifications. */