frontend/src/components/react/ThemeSwitcher.tsx

@@ -3,15 +3,14 @@ import { useState, useEffect, useRef } from 'react';
 const THEMES = [
   { value: 'salon', label: 'Salon' },
   { value: 'salon-noir', label: 'Salon Noir' },
-  { value: 'latte', label: 'Latte' },
+  { value: 'gothic', label: 'Gothic' },
-  { value: 'mocha', label: 'Mocha' },
 ];
 
 interface Props {
   defaultTheme?: string;
 }
 
-export default function ThemeSwitcher({ defaultTheme = 'mocha' }: Props) {
+export default function ThemeSwitcher({ defaultTheme = 'salon' }: Props) {
   const [theme, setTheme] = useState(() => {
     if (typeof window !== 'undefined') {
       return localStorage.getItem('user-theme') || defaultTheme;

frontend/src/components/react/admin/Settings.tsx

@@ -68,10 +68,9 @@ export default function Settings() {
           >
             <option value="salon">Salon (parchment, default)</option>
             <option value="salon-noir">Salon Noir (black gallery wall)</option>
-            <option value="latte">Latte (light)</option>
+            <option value="gothic">Gothic (cathedral nightfall)</option>
-            <option value="mocha">Mocha (dark)</option>
           </select>
-          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon and Salon Noir are tuned for the gallery aesthetic.</p>
+          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">All three are tuned for the gallery aesthetic. Gothic leans into deep violet-black with cathedral indigo and blood-crimson accents.</p>
         </div>
         <div>
           <label className="field-label">Custom CSS</label>

frontend/src/styles/global.css

@@ -101,29 +101,36 @@
   --rosewater: #F4E5C9;
 }
 
-/* Legacy Catppuccin themes — kept for users that already opted in. */
+/* GOTHIC — cathedral nightfall. Midnight violet ground, blood crimson,
-.mocha {
+ * tarnished candle gold, stained-glass indigo. Catholic-gothic + Sisters of
-  --crust: #11111b; --mantle: #181825; --base: #1e1e2e;
+ * Mercy + Bauhaus stark. Primary accent: cathedral velvet mauve. */
-  --surface0: #313244; --surface1: #45475a; --surface2: #585b70;
+.gothic {
-  --overlay0: #6c7086; --overlay1: #7f849c; --overlay2: #9399b2;
+  --crust: #030104;
-  --text: #cdd6f4; --subtext0: #a6adc8; --subtext1: #bac2de;
+  --mantle: #0A0710;
-  --blue: #89b4fa; --lavender: #b4befe; --sapphire: #74c7ec;
+  --base: #110B18;
-  --sky: #89dceb; --teal: #94e2d5; --green: #a6e3a1;
+  --surface0: #1A1224;
-  --yellow: #f9e2af; --peach: #fab387; --maroon: #eba0ac;
+  --surface1: #261A36;
-  --red: #f38ba8; --mauve: #cba6f7; --pink: #f5c2e7;
+  --surface2: #382550;
-  --flamingo: #f2cdcd; --rosewater: #f5e0dc;
+  --overlay0: #4F3970;
-}
+  --overlay1: #6E5293;
-
+  --overlay2: #8D72B1;
-.latte {
+  --text: #EDE3F2;        /* bone, violet wash */
-  --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
+  --subtext0: #9B8AB0;
-  --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
+  --subtext1: #C0AED2;
-  --overlay0: #7c7f93; --overlay1: #6c6f85; --overlay2: #5c5f77;
+  --blue: #4239A4;        /* stained-glass deep */
-  --text: #1e1e2e; --subtext0: #3c3f59; --subtext1: #4c4f69;
+  --lavender: #9B7BD4;    /* candlelight through purple glass */
-  --blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5;
+  --sapphire: #5947B2;
-  --sky: #04a5e5; --teal: #179299; --green: #40a02b;
+  --sky: #7C68C9;
-  --yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553;
+  --teal: #487B8A;        /* verdigris on bronze */
-  --red: #d20f39; --mauve: #8839ef; --pink: #ea76cb;
+  --green: #5E7842;       /* cemetery moss */
-  --flamingo: #dd7878; --rosewater: #dc8a78;
+  --yellow: #D4A82B;      /* taper / tarnished brass */
+  --peach: #B45A38;       /* rust */
+  --maroon: #5B1A24;
+  --red: #A41827;         /* arterial */
+  --mauve: #8B2C9E;       /* cathedral velvet — primary accent */
+  --pink: #B25288;        /* dried rose */
+  --flamingo: #C57B96;
+  --rosewater: #F0DDE8;
 }
 
 html {
@@ -168,6 +175,13 @@ body::after {
 html.salon-noir body::after {
   opacity: 0.5;
 }
+.gothic body::after,
+html.gothic body::after {
+  opacity: 0.55;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.10 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+  mix-blend-mode: screen;
+}
 
 /* Floating motes of pigment — far background, very subtle. */
 .salon-atmosphere {
@@ -437,7 +451,9 @@ code, pre, kbd, samp {
   border-radius: 2px;
 }
 .salon-noir .prose figure img,
-.salon-noir .prose img {
+.salon-noir .prose img,
+.gothic .prose figure img,
+.gothic .prose img {
   background:
     linear-gradient(var(--surface0), var(--surface0)) padding-box,
     linear-gradient(135deg, var(--surface2), var(--surface1)) border-box;
@@ -445,6 +461,13 @@ code, pre, kbd, samp {
     0 18px 38px -22px rgba(0, 0, 0, 0.7),
     0 2px 6px -2px rgba(0, 0, 0, 0.5);
 }
+.gothic .prose figure img,
+.gothic .prose img {
+  box-shadow:
+    0 18px 38px -22px rgba(0, 0, 0, 0.85),
+    0 2px 6px -2px rgba(0, 0, 0, 0.6),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 22%, transparent);
+}
 .prose figure figcaption {
   font-family: var(--font-display);
   font-style: italic;
@@ -500,7 +523,8 @@ code, pre, kbd, samp {
   transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
               box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
 }
-.salon-noir .plate {
+.salon-noir .plate,
+.gothic .plate {
   background: var(--surface0);
 }
 .plate:hover {
@@ -690,9 +714,16 @@ code, pre, kbd, samp {
     0 10px 30px -20px rgba(20, 16, 12, 0.45);
   border-radius: 2px;
 }
-.salon-noir .glass {
+.salon-noir .glass,
+.gothic .glass {
   background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
 }
+.gothic .glass {
+  border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 18%, transparent),
+    0 14px 40px -24px rgba(0, 0, 0, 0.85);
+}
 
 /* ───── Buttons ───── */
 .btn-stamp {
@@ -848,6 +879,7 @@ code, pre, kbd, samp {
 input[type="checkbox"] { accent-color: var(--mauve); }
 input[type="date"] { color-scheme: light; }
 .salon-noir input[type="date"] { color-scheme: dark; }
+.gothic input[type="date"] { color-scheme: dark; }
 
 /* Reading progress bar - thin terracotta line */
 .reading-progress {