Apply Chabad Blue theme with inverted dark mode.

Site uses navy/white/quiet-gold tokens and Heebo + Rubik; dark mode is the inverted Chabad Blue canvas.

viewer-frontend/app/globals.css

@@ -6,7 +6,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-rubik), var(--font-heebo), ui-sans-serif, system-ui, sans-serif;
+  --font-display: var(--font-heebo), var(--font-rubik), ui-sans-serif, system-ui, sans-serif;
   --font-mono: var(--font-geist-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
@@ -37,85 +38,93 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-gold: var(--gold);
+  --color-gold-foreground: var(--gold-foreground);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 }
 
+/*
+  Chabad Blue — light
+  Navy #0038A8 / deep text #0B1F4B / soft bg #F5F7FB / quiet gold #C4A35A
+*/
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  /* Blue as primary color (from logo) */
-  --primary: #1e40af;
-  --primary-foreground: oklch(0.985 0 0);
-  /* Blue for secondary/interactive elements - standard blue */
-  --secondary: #2563eb;
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  /* Blue accent */
-  --accent: #1e40af;
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: #1e40af;
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: #1e40af;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: #2563eb;
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: #1e40af;
+  --background: #f5f7fb;
+  --foreground: #0b1f4b;
+  --card: #ffffff;
+  --card-foreground: #0b1f4b;
+  --popover: #ffffff;
+  --popover-foreground: #0b1f4b;
+  --primary: #0038a8;
+  --primary-foreground: #ffffff;
+  --secondary: #e8eef8;
+  --secondary-foreground: #0b1f4b;
+  --muted: #e8eef8;
+  --muted-foreground: #5b6b8c;
+  --accent: #0038a8;
+  --accent-foreground: #ffffff;
+  --gold: #c4a35a;
+  --gold-foreground: #1c1508;
+  --destructive: #b91c1c;
+  --border: rgba(11, 31, 75, 0.12);
+  --input: rgba(11, 31, 75, 0.14);
+  --ring: #0038a8;
+  --chart-1: #0038a8;
+  --chart-2: #5b6b8c;
+  --chart-3: #c4a35a;
+  --chart-4: #8fa3c9;
+  --chart-5: #0b1f4b;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #0b1f4b;
+  --sidebar-primary: #0038a8;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #e8eef8;
+  --sidebar-accent-foreground: #0b1f4b;
+  --sidebar-border: rgba(11, 31, 75, 0.12);
+  --sidebar-ring: #0038a8;
 }
 
+/*
+  Chabad Blue — inverted (dark)
+  Deep navy canvas, soft blue text, brighter blue + quiet gold accents
+*/
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  /* Dark blue for cards in dark mode */
-  --card: oklch(0.25 0.08 250);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.25 0.08 250);
-  --popover-foreground: oklch(0.985 0 0);
-  /* Blue primary in dark mode (from logo) */
-  --primary: #3b82f6;
-  --primary-foreground: oklch(0.145 0 0);
-  /* Blue secondary in dark mode - standard blue */
-  --secondary: #3b82f6;
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: #3b82f6;
-  --accent-foreground: oklch(0.145 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: #3b82f6;
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.25 0.08 250);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: #3b82f6;
-  --sidebar-primary-foreground: oklch(0.145 0 0);
-  --sidebar-accent: #3b82f6;
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: #3b82f6;
+  --background: #071428;
+  --foreground: #f5f7fb;
+  --card: #0b1f4b;
+  --card-foreground: #f5f7fb;
+  --popover: #0b1f4b;
+  --popover-foreground: #f5f7fb;
+  --primary: #5b8def;
+  --primary-foreground: #071428;
+  --secondary: #132a5c;
+  --secondary-foreground: #f5f7fb;
+  --muted: #132a5c;
+  --muted-foreground: #93a4c4;
+  --accent: #5b8def;
+  --accent-foreground: #071428;
+  --gold: #d4b86a;
+  --gold-foreground: #1c1508;
+  --destructive: #f87171;
+  --border: rgba(245, 247, 251, 0.12);
+  --input: rgba(245, 247, 251, 0.16);
+  --ring: #5b8def;
+  --chart-1: #5b8def;
+  --chart-2: #93a4c4;
+  --chart-3: #d4b86a;
+  --chart-4: #8fa3c9;
+  --chart-5: #f5f7fb;
+  --sidebar: #0b1f4b;
+  --sidebar-foreground: #f5f7fb;
+  --sidebar-primary: #5b8def;
+  --sidebar-primary-foreground: #071428;
+  --sidebar-accent: #132a5c;
+  --sidebar-accent-foreground: #f5f7fb;
+  --sidebar-border: rgba(245, 247, 251, 0.12);
+  --sidebar-ring: #5b8def;
 }
 
 @layer base {

viewer-frontend/app/layout.tsx

@@ -1,12 +1,19 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Heebo, Rubik } from "next/font/google";
 import { SessionProviderWrapper } from "@/components/SessionProviderWrapper";
 import { ThemeProviderWrapper } from "@/components/ThemeProviderWrapper";
 import "./globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
+const heebo = Heebo({
+  subsets: ["latin", "hebrew"],
+  variable: "--font-heebo",
+  display: "swap",
+});
+
+const rubik = Rubik({
+  subsets: ["latin", "hebrew"],
+  variable: "--font-rubik",
+  display: "swap",
 });
 
 export const metadata: Metadata = {
@@ -21,7 +28,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.variable} font-sans antialiased`}>
+      <body className={`${heebo.variable} ${rubik.variable} font-sans antialiased`}>
         <a
           href="#main-content"
           className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[200] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"

viewer-frontend/components/PageHeader.tsx

@@ -45,7 +45,7 @@ export function PageHeader({
         </div>
       </div>
       <div className="flex items-center justify-between gap-4">
-        <h1 className="text-sm font-medium text-orange-600 dark:text-orange-500 tracking-wide">
+        <h1 className="text-sm font-medium text-primary tracking-wide">
           Browse our photo collection
         </h1>
         <ActionButtons

viewer-frontend/components/SimpleHeader.tsx

@@ -17,7 +17,7 @@ export function SimpleHeader() {
           <UserMenu />
         </div>
       </div>
-      <p className="text-sm font-medium text-orange-600 dark:text-orange-500 tracking-wide">
+      <p className="text-sm font-medium text-primary tracking-wide">
         Browse our photo collection
       </p>
     </div>