From dfbf24ae1de4e07e1532070a2cadfdb3424472e5 Mon Sep 17 00:00:00 2001
From: William <248649537+stupidgiraffe@users.noreply.github.com>
Date: Fri, 2 Oct 2026 04:06:40 -0400
Subject: [PATCH 1/7] Add designer card themes

---
 src/lib/types.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/lib/types.ts b/src/lib/types.ts
index a6f65ba..322818c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -127,6 +127,14 @@ export type CardTheme =
   | 'playful-pop'
   | 'teacher-pro'
   | 'calm-study'
+  | 'dreamy-classroom'
+  | 'storybook'
+  | 'notebook-doodle'
+  | 'retro-schoolhouse'
+  | 'botanical-study'
+  | 'candy-pop'
+  | 'space-explorer'
+  | 'modern-editorial'
 
 export interface PrintSettings {
   cardsPerPage: CardsPerPage

From 10fbf3021989b2d13aac01b87c237164ca2c7c49 Mon Sep 17 00:00:00 2001
From: William <248649537+stupidgiraffe@users.noreply.github.com>
Date: Fri, 2 Oct 2026 04:06:43 -0400
Subject: [PATCH 2/7] Add designer card themes

---
 src/index.css | 257 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 257 insertions(+)

diff --git a/src/index.css b/src/index.css
index 767b23c..bf3af80 100644
--- a/src/index.css
+++ b/src/index.css
@@ -109,6 +109,263 @@
   --radius-full: 9999px;
 }
 
+
+
+.flash-card-surface {
+    --card-main: #1e293b;
+    --card-accent: #0ea5e9;
+    --card-theme-gold: #c6a252;
+    --card-theme-soft: #fff7ed;
+    --card-theme-tape: #f0d79b;
+    --card-theme-pink: #f7a8c8;
+    --card-theme-cyan: #8fdde7;
+    --card-theme-yellow: #f7d56a;
+    --card-theme-planet: #a78bfa;
+    isolation: isolate;
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  }
+
+  .flash-card-surface[data-card-theme='minimal'] {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  }
+
+  .flash-card-surface[data-card-theme='classroom-cute'] {
+    background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
+  }
+
+  .flash-card-surface[data-card-theme='bold-vocabulary'] {
+    background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
+  }
+
+  .flash-card-surface[data-card-theme='picture-focus'] {
+    background: linear-gradient(135deg, #f9fafb 0%, #f1f5f9 100%);
+  }
+
+  .flash-card-surface[data-card-theme='ink-saver'] {
+    background: #ffffff;
+  }
+
+  .flash-card-surface[data-card-theme='quiz-card'] {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  }
+
+  .flash-card-surface[data-card-theme='playful-pop'] {
+    background:
+      radial-gradient(circle at 15% 15%, rgba(244, 114, 182, 0.12), transparent 28%),
+      radial-gradient(circle at 85% 82%, rgba(34, 211, 238, 0.12), transparent 30%),
+      #ffffff;
+  }
+
+  .flash-card-surface[data-card-theme='teacher-pro'] {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 54%, #eff6ff 100%);
+  }
+
+  .flash-card-surface[data-card-theme='calm-study'] {
+    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
+  }
+
+  .flash-card-surface[data-card-theme='dreamy-classroom'] {
+    --card-theme-gold: #c6a252;
+    --card-theme-soft: #fff7ed;
+    background:
+      radial-gradient(circle at 20% 10%, rgba(199, 174, 230, 0.22), transparent 30%),
+      radial-gradient(circle at 83% 83%, rgba(244, 199, 221, 0.18), transparent 32%),
+      linear-gradient(145deg, #fffdf8 0%, #fffaf2 48%, #fbf7ff 100%);
+  }
+
+  .flash-card-surface[data-card-theme='storybook'] {
+    --card-theme-soft: #fff1e8;
+    background:
+      radial-gradient(circle at 15% 18%, rgba(240, 176, 153, 0.18), transparent 28%),
+      radial-gradient(circle at 87% 78%, rgba(172, 199, 159, 0.17), transparent 34%),
+      linear-gradient(145deg, #fffdf7 0%, #fff8f1 58%, #f7fbf2 100%);
+  }
+
+  .flash-card-surface[data-card-theme='notebook-doodle'] {
+    --card-theme-tape: #f2d28c;
+    background-color: #fffdf7;
+    background-image:
+      linear-gradient(90deg, transparent 0 12%, rgba(231, 111, 81, 0.16) 12% 12.4%, transparent 12.4% 100%),
+      repeating-linear-gradient(0deg, transparent 0 20px, rgba(81, 126, 164, 0.13) 20px 21px);
+  }
+
+  .flash-card-surface[data-card-theme='retro-schoolhouse'] {
+    background:
+      repeating-linear-gradient(0deg, rgba(108, 75, 48, 0.025) 0 1px, transparent 1px 4px),
+      linear-gradient(145deg, #fffaf0 0%, #f8efd9 100%);
+  }
+
+  .flash-card-surface[data-card-theme='botanical-study'] {
+    background:
+      radial-gradient(circle at 18% 82%, rgba(123, 155, 121, 0.13), transparent 32%),
+      radial-gradient(circle at 84% 12%, rgba(84, 116, 94, 0.12), transparent 30%),
+      linear-gradient(145deg, #fbfcf7 0%, #f3f7ef 100%);
+  }
+
+  .flash-card-surface[data-card-theme='candy-pop'] {
+    --card-theme-pink: #f7a8c8;
+    --card-theme-cyan: #8fdde7;
+    --card-theme-yellow: #f7d56a;
+    background:
+      radial-gradient(circle at 10% 12%, rgba(247, 168, 200, 0.28), transparent 24%),
+      radial-gradient(circle at 88% 20%, rgba(143, 221, 231, 0.24), transparent 25%),
+      radial-gradient(circle at 78% 88%, rgba(247, 213, 106, 0.22), transparent 28%),
+      linear-gradient(145deg, #fffaff 0%, #fffdf8 100%);
+  }
+
+  .flash-card-surface[data-card-theme='space-explorer'] {
+    --card-theme-planet: #a78bfa;
+    background:
+      radial-gradient(circle at 78% 18%, rgba(99, 102, 241, 0.44), transparent 26%),
+      radial-gradient(circle at 18% 84%, rgba(8, 145, 178, 0.24), transparent 32%),
+      linear-gradient(145deg, #111936 0%, #18214a 45%, #0f172a 100%);
+  }
+
+  .flash-card-surface[data-card-theme='modern-editorial'] {
+    background:
+      linear-gradient(118deg, rgba(232, 93, 63, 0.08) 0 18%, transparent 18% 100%),
+      linear-gradient(145deg, #ffffff 0%, #f7f7f5 100%);
+  }
+
+  .flash-card-surface[data-card-theme='dreamy-classroom'] .flash-card-content,
+  .flash-card-surface[data-card-theme='storybook'] .flash-card-content,
+  .flash-card-surface[data-card-theme='retro-schoolhouse'] .flash-card-content,
+  .flash-card-surface[data-card-theme='botanical-study'] .flash-card-content {
+    padding: 1.75rem;
+  }
+
+  .flash-card-surface[data-card-theme='notebook-doodle'] .flash-card-content {
+    padding-left: 2rem;
+  }
+
+  .flash-card-surface[data-card-theme='modern-editorial'] .flash-card-content {
+    padding-left: 2.25rem;
+    padding-right: 1.75rem;
+  }
+
+  .flash-card-surface[data-card-theme='dreamy-classroom'] .flash-card-primary,
+  .flash-card-surface[data-card-theme='storybook'] .flash-card-primary {
+    letter-spacing: 0.015em;
+  }
+
+  .flash-card-surface[data-card-theme='retro-schoolhouse'] .flash-card-primary {
+    letter-spacing: 0.025em;
+    text-transform: none;
+  }
+
+  .flash-card-surface[data-card-theme='modern-editorial'] .flash-card-primary {
+    letter-spacing: -0.025em;
+  }
+
+  .flash-card-surface[data-card-theme='space-explorer'] .flash-card-secondary {
+    color: var(--card-accent) !important;
+  }
+
+  .flash-card-surface[data-card-theme='dreamy-classroom'] .flash-card-image-frame {
+    border: 1px solid rgba(198, 162, 82, 0.7);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.72);
+    padding: 4px;
+  }
+
+  .flash-card-surface[data-card-theme='storybook'] .flash-card-image-frame {
+    border: 2px solid var(--card-accent);
+    border-radius: 18px 18px 12px 12px;
+    background: #fffdf7;
+    padding: 4px;
+  }
+
+  .flash-card-surface[data-card-theme='notebook-doodle'] .flash-card-image-frame {
+    border: 2px solid var(--card-main);
+    border-radius: 4px;
+    background: #ffffff;
+    padding: 5px;
+    transform: rotate(-0.7deg);
+  }
+
+  .flash-card-surface[data-card-theme='retro-schoolhouse'] .flash-card-image-frame {
+    border: 2px solid var(--card-main);
+    border-radius: 2px;
+    background: #fffaf0;
+    padding: 4px;
+  }
+
+  .flash-card-surface[data-card-theme='botanical-study'] .flash-card-image-frame {
+    border: 1px solid var(--card-accent);
+    border-radius: 14px;
+    background: #ffffff;
+    padding: 5px;
+  }
+
+  .flash-card-surface[data-card-theme='candy-pop'] .flash-card-image-frame {
+    border: 3px solid rgba(255, 255, 255, 0.86);
+    border-radius: 20px;
+    background: #ffffff;
+    padding: 4px;
+    box-shadow: 0 5px 0 rgba(91, 58, 122, 0.08);
+  }
+
+  .flash-card-surface[data-card-theme='space-explorer'] .flash-card-image-frame {
+    border: 1px solid var(--card-accent);
+    border-radius: 14px;
+    background: rgba(15, 23, 42, 0.78);
+    padding: 4px;
+  }
+
+  .flash-card-surface[data-card-theme='modern-editorial'] .flash-card-image-frame {
+    border: 0;
+    border-radius: 2px;
+    background: #ffffff;
+    padding: 0;
+  }
+
+  .flash-card-surface[data-card-theme='dreamy-classroom'] .flash-card-set-title,
+  .flash-card-surface[data-card-theme='storybook'] .flash-card-set-title,
+  .flash-card-surface[data-card-theme='retro-schoolhouse'] .flash-card-set-title {
+    opacity: 0.92;
+    border-radius: 999px;
+    background: var(--card-accent);
+    color: #ffffff !important;
+    padding: 0.18rem 0.5rem;
+  }
+
+  .flash-card-surface[data-card-theme='notebook-doodle'] .flash-card-set-title {
+    opacity: 0.86;
+    background: #fff4cf;
+    border: 1px solid var(--card-accent);
+    color: var(--card-main) !important;
+    padding: 0.15rem 0.45rem;
+    transform: rotate(1deg);
+  }
+
+  .flash-card-surface[data-card-theme='space-explorer'] .flash-card-set-title {
+    opacity: 0.9;
+    color: var(--card-main) !important;
+    border: 1px solid var(--card-accent);
+    border-radius: 999px;
+    padding: 0.16rem 0.45rem;
+    background: rgba(15, 23, 42, 0.55);
+  }
+
+  .flash-card-surface[data-card-theme='modern-editorial'] .flash-card-set-title {
+    opacity: 1;
+    color: var(--card-accent) !important;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .flash-card-surface[data-card-theme='dreamy-classroom'] .flash-card-footer,
+  .flash-card-surface[data-card-theme='storybook'] .flash-card-footer,
+  .flash-card-surface[data-card-theme='botanical-study'] .flash-card-footer {
+    margin-inline: 1.5rem;
+  }
+
+.theme-preview-card {
+  min-height: 7.5rem;
+}
+
+
 /*
  * Keep the print portal laid out off-screen instead of display:none.
  * PlacedImage measures its frame with ResizeObserver; display:none gives it

From 4bda46b7780f6162aad881df2d3830518094baaf Mon Sep 17 00:00:00 2001
From: William <248649537+stupidgiraffe@users.noreply.github.com>
Date: Fri, 2 Oct 2026 04:06:46 -0400
Subject: [PATCH 3/7] Add designer card themes

---
 src/components/FlashCardDisplay.tsx | 52 ++++++++++++-----------------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/components/FlashCardDisplay.tsx b/src/components/FlashCardDisplay.tsx
index 0dd62d4..8de067d 100644
--- a/src/components/FlashCardDisplay.tsx
+++ b/src/components/FlashCardDisplay.tsx
@@ -1,8 +1,11 @@
+import type { CSSProperties } from 'react'
 import type { FlashCard, PrintSettings } from '@/lib/types'
 import { PlacedImage } from '@/components/PlacedImage'
 import { getCardSideImage } from '@/lib/image-placement'
 import { calculateFontSize } from '@/lib/print-utils'
 import { cn } from '@/lib/utils'
+import { CardThemeDecorations } from '@/components/CardThemeDecorations'
+import { isDesignerCardTheme } from '@/lib/card-themes'
 
 interface FlashCardDisplayProps {
   card: FlashCard | null
@@ -63,7 +66,7 @@ export function FlashCardDisplay({
     ? settings.fontSize
     : calculateFontSize(settings.fontSize, settings.cardsPerPage, textLength, !!imageUrl && hasText)
   const secondaryFontSize = fontSize * 0.72
-  const themeClasses = getThemeClasses(settings.theme)
+  const isDesignerTheme = isDesignerCardTheme(settings.theme)
   const borderClass = settings.showBorder ? 'border-2' : 'border-0'
   const roundedClass = settings.showRoundedCorners ? 'rounded-xl' : 'rounded-none'
 
@@ -80,20 +83,24 @@ export function FlashCardDisplay({
   return (
     <div
       className={cn(
-        'relative flex flex-col shadow-md overflow-hidden',
-        themeClasses,
+        'flash-card-surface relative flex flex-col shadow-md overflow-hidden',
         borderClass,
         roundedClass,
       )}
+      data-card-theme={settings.theme}
       style={{
+        '--card-main': settings.mainColor,
+        '--card-accent': settings.accentColor,
         width: printMode ? '100%' : `${cardWidth}px`,
         height: printMode ? '100%' : `${cardHeight}px`,
         borderColor: settings.mainColor,
         borderWidth: settings.showBorder ? `${settings.borderThickness}px` : 0,
         borderRadius: settings.showRoundedCorners ? `${settings.cornerRadius}px` : 0,
-      }}
+      } as CSSProperties}
     >
-        {!isBackgroundMode && (
+      <CardThemeDecorations theme={settings.theme} />
+
+        {!isBackgroundMode && !isDesignerTheme && (
           <div
             className="absolute top-0 left-0 right-0 h-1"
             style={{
@@ -128,7 +135,7 @@ export function FlashCardDisplay({
 
       {settings.showNumbering && cardNumber !== undefined && (
         <div
-          className="absolute top-3 left-3 text-xs font-semibold opacity-40 z-10"
+          className="flash-card-number absolute top-3 left-3 text-xs font-semibold opacity-40 z-[3]"
           style={{ color: isBackgroundMode && imageUrl ? '#ffffff' : settings.mainColor }}
         >
           #{cardNumber}
@@ -137,7 +144,7 @@ export function FlashCardDisplay({
 
       {showSetTitle && settings.showSetTitle && (
         <div
-          className="absolute top-3 right-3 text-xs font-semibold opacity-40 max-w-[60%] truncate z-10"
+          className="flash-card-set-title absolute top-3 right-3 text-xs font-semibold opacity-40 max-w-[60%] truncate z-[3]"
           style={{ color: isBackgroundMode && imageUrl ? '#ffffff' : settings.mainColor }}
         >
           {showSetTitle}
@@ -147,13 +154,13 @@ export function FlashCardDisplay({
       {isBackgroundMode ? (
         /* Background mode: text sits at the bottom over the gradient scrim */
         <div
-          className="relative flex-1 flex flex-col items-center justify-end p-6 gap-1 min-h-0"
+          className="flash-card-content relative flex-1 flex flex-col items-center justify-end p-6 gap-1 min-h-0"
           style={{ zIndex: 2 }}
         >
           {text && (
             <div
               className={cn(
-                'font-bold break-words hyphens-auto w-full text-balance',
+                'flash-card-primary font-bold break-words hyphens-auto w-full text-balance',
                 settings.textAlignment === 'left' && 'text-left',
                 settings.textAlignment === 'center' && 'text-center',
                 settings.textAlignment === 'right' && 'text-right',
@@ -173,7 +180,7 @@ export function FlashCardDisplay({
           {secondary && (
             <div
               className={cn(
-                'mt-3 break-words w-full text-pretty',
+                'flash-card-secondary mt-3 break-words w-full text-pretty',
                 settings.textAlignment === 'left' && 'text-left',
                 settings.textAlignment === 'center' && 'text-center',
                 settings.textAlignment === 'right' && 'text-right',
@@ -191,10 +198,10 @@ export function FlashCardDisplay({
           )}
         </div>
       ) : (
-        <div className="flex-1 flex flex-col items-center justify-center p-6 gap-1 min-h-0">
+        <div className="flash-card-content relative z-[2] flex-1 flex flex-col items-center justify-center p-6 gap-1 min-h-0">
           {imageUrl && (
             <div
-              className="relative mb-4 overflow-hidden rounded-lg bg-white/70"
+              className="flash-card-image-frame relative z-[2] mb-4 overflow-hidden rounded-lg bg-white/70"
               style={{
                 width: '100%',
                 height: `${imageHeight}px`,
@@ -214,7 +221,7 @@ export function FlashCardDisplay({
           {text && (
             <div
               className={cn(
-                'font-bold break-words hyphens-auto w-full text-balance',
+                'flash-card-primary font-bold break-words hyphens-auto w-full text-balance',
                 settings.textAlignment === 'left' && 'text-left',
                 settings.textAlignment === 'center' && 'text-center',
                 settings.textAlignment === 'right' && 'text-right',
@@ -233,7 +240,7 @@ export function FlashCardDisplay({
           {secondary && (
             <div
               className={cn(
-                'mt-3 break-words w-full text-pretty',
+                'flash-card-secondary mt-3 break-words w-full text-pretty',
                 settings.textAlignment === 'left' && 'text-left',
                 settings.textAlignment === 'center' && 'text-center',
                 settings.textAlignment === 'right' && 'text-right',
@@ -253,7 +260,7 @@ export function FlashCardDisplay({
 
       {settings.footerText && (
         <div
-          className="text-xs text-center py-2 border-t opacity-40"
+          className="flash-card-footer relative z-[3] text-xs text-center py-2 border-t opacity-40"
           style={{ borderColor: settings.mainColor, color: settings.mainColor }}
         >
           {settings.footerText}
@@ -262,18 +269,3 @@ export function FlashCardDisplay({
     </div>
   )
 }
-
-function getThemeClasses(theme: string): string {
-  const themes: Record<string, string> = {
-    minimal: 'bg-gradient-to-br from-white to-slate-50',
-    'classroom-cute': 'bg-gradient-to-br from-amber-50 to-orange-50',
-    'bold-vocabulary': 'bg-gradient-to-br from-blue-50 to-purple-50',
-    'picture-focus': 'bg-gradient-to-br from-gray-50 to-slate-100',
-    'ink-saver': 'bg-white',
-    'quiz-card': 'bg-gradient-to-br from-slate-50 to-slate-100',
-    'playful-pop': 'bg-gradient-to-br from-pink-50 via-white to-cyan-50',
-    'teacher-pro': 'bg-gradient-to-br from-white via-slate-50 to-blue-50',
-    'calm-study': 'bg-gradient-to-br from-emerald-50 to-teal-50',
-  }
-  return themes[theme] || 'bg-gradient-to-br from-white to-slate-50'
-}

From 0f582f41a24988688ff59081d25952c8c17483fd Mon Sep 17 00:00:00 2001
From: William <248649537+stupidgiraffe@users.noreply.github.com>
Date: Fri, 2 Oct 2026 04:06:49 -0400
Subject: [PATCH 4/7] Add designer card themes

---
 src/components/DesignPanel.tsx | 112 ++++++++++++++++++++++++++++++++-
 1 file changed, 111 insertions(+), 1 deletion(-)

diff --git a/src/components/DesignPanel.tsx b/src/components/DesignPanel.tsx
index 5831e69..8440bee 100644
--- a/src/components/DesignPanel.tsx
+++ b/src/components/DesignPanel.tsx
@@ -1,12 +1,15 @@
+import type { CSSProperties } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Slider } from '@/components/ui/slider'
 import { Switch } from '@/components/ui/switch'
 import { Input } from '@/components/ui/input'
-import type { PrintSettings, DuplexMode, CardType, CardsPerPage, Orientation, PaperSize } from '@/lib/types'
+import type { PrintSettings, CardTheme, DuplexMode, CardType, CardsPerPage, Orientation, PaperSize } from '@/lib/types'
 import { DESIGN_PRESETS, getActiveDesignPreset } from '@/lib/design-presets'
 import type { DesignPreset } from '@/lib/design-presets'
+import { CLASSIC_CARD_THEMES, DESIGNER_CARD_THEMES, getCardThemeDefinition, getThemeRecommendedUpdates } from '@/lib/card-themes'
+import { CardThemeDecorations } from '@/components/CardThemeDecorations'
 import { Palette, TextAlignCenter, TextAlignLeft, TextAlignRight, ArrowsCounterClockwise, Cards, Check } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 
@@ -46,6 +49,37 @@ const PREVIEW_BACKGROUNDS: Record<string, string> = {
   'ink-saver': '#ffffff',
 }
 
+function ThemePreview({ theme }: { theme: CardTheme }) {
+  const item = getCardThemeDefinition(theme)
+
+  return (
+    <div
+      aria-hidden="true"
+      className="theme-preview-card flash-card-surface relative flex aspect-[5/3] w-full items-center justify-center overflow-hidden"
+      data-card-theme={theme}
+      style={{
+        '--card-main': item.mainColor,
+        '--card-accent': item.accentColor,
+        color: item.mainColor,
+        border: `1px solid ${item.mainColor}33`,
+        borderRadius: '10px',
+      } as CSSProperties}
+    >
+      <CardThemeDecorations theme={theme} />
+      <div className="relative z-[2] flex w-[72%] flex-col items-center gap-1 text-center">
+        <div
+          className="max-w-full truncate text-[11px] font-extrabold tracking-wide"
+          style={{ color: item.mainColor }}
+        >
+          {item.previewLabel}
+        </div>
+        <div className="h-1.5 w-4/5 rounded-full opacity-70" style={{ backgroundColor: item.mainColor }} />
+        <div className="h-1 w-3/5 rounded-full opacity-70" style={{ backgroundColor: item.accentColor }} />
+      </div>
+    </div>
+  )
+}
+
 function StylePreview({ item }: { item: DesignPreset }) {
   const style = item.updates
   const imageHeight = `${Math.round(Math.min(style.imageHeightRatio, 0.72) * 100)}%`
@@ -96,6 +130,12 @@ export function DesignPanel({ settings, cardType, onUpdate, onUpdateCardType, on
     toast.success(`${item.name} applied`)
   }
 
+  function applyTheme(theme: CardTheme) {
+    const definition = getCardThemeDefinition(theme)
+    onUpdate(getThemeRecommendedUpdates(theme))
+    toast.success(`${definition.name} theme applied`)
+  }
+
   return (
     <div className="space-y-6">
       <Card className="border-2">
@@ -224,6 +264,76 @@ export function DesignPanel({ settings, cardType, onUpdate, onUpdateCardType, on
         </CardContent>
       </Card>
 
+      <Card className="border-2">
+        <CardHeader className="bg-muted/30">
+          <CardTitle className="flex items-center gap-2">
+            <Palette className="w-5 h-5" weight="duotone" />
+            Theme Gallery
+          </CardTitle>
+          <CardDescription>Choose the card's visual world. Designer themes add real framing, illustration, texture, and composition—not just a different gradient.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6 pt-6">
+          <div className="space-y-3">
+            <div>
+              <Label>Designer collection</Label>
+              <p className="mt-1 text-xs text-muted-foreground">Print-safe CSS and vector artwork. No external image packs or licensing dependencies.</p>
+            </div>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+              {DESIGNER_CARD_THEMES.map((theme) => (
+                <button
+                  key={theme.id}
+                  type="button"
+                  onClick={() => applyTheme(theme.id)}
+                  aria-pressed={settings.theme === theme.id}
+                  className={`relative rounded-lg border-2 p-2 text-left transition-all hover:-translate-y-0.5 hover:shadow-md ${
+                    settings.theme === theme.id ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'
+                  }`}
+                >
+                  <ThemePreview theme={theme.id} />
+                  <div className="mt-2 px-1 pb-1">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="text-sm font-semibold">{theme.name}</div>
+                      {settings.theme === theme.id && (
+                        <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground" title="Selected theme">
+                          <Check aria-hidden="true" weight="bold" />
+                          <span className="sr-only">Selected</span>
+                        </span>
+                      )}
+                    </div>
+                    <div className="mt-1 text-xs leading-relaxed text-muted-foreground">{theme.description}</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <div>
+              <Label>Classic themes</Label>
+              <p className="mt-1 text-xs text-muted-foreground">Everything FlashForge already had remains available.</p>
+            </div>
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+              {CLASSIC_CARD_THEMES.map((theme) => (
+                <button
+                  key={theme.id}
+                  type="button"
+                  onClick={() => applyTheme(theme.id)}
+                  aria-pressed={settings.theme === theme.id}
+                  className={`rounded-lg border-2 p-2 text-left transition-colors ${
+                    settings.theme === theme.id ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'
+                  }`}
+                >
+                  <ThemePreview theme={theme.id} />
+                  <div className="mt-2 truncate text-xs font-semibold">{theme.name}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground">Choosing a theme applies its starting palette but does not change paper size, cards per page, duplex alignment, offsets, or your card content. You can customize colors and typography below.</p>
+        </CardContent>
+      </Card>
+
       <div>
         <h3 className="text-base font-semibold">Customize selected style</h3>
         <p className="text-sm text-muted-foreground">Fine-tune colors, typography, borders, alignment, and image balance. Any change shows the style as Customized.</p>

From bae52cff0a1f75d42ad86dad17b693628d57effa Mon Sep 17 00:00:00 2001
From: William <248649537+stupidgiraffe@users.noreply.github.com>
Date: Fri, 2 Oct 2026 04:06:51 -0400
Subject: [PATCH 5/7] Add designer card themes

---
 src/lib/card-themes.ts | 121 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/lib/card-themes.ts

diff --git a/src/lib/card-themes.ts b/src/lib/card-themes.ts
new file mode 100644
index 0000000..d245a99
--- /dev/null
+++ b/src/lib/card-themes.ts
@@ -0,0 +1,121 @@
+import type { CardTheme, PrintSettings } from './types'
+
+export type CardThemeFamily = 'classic' | 'designer'
+
+export interface CardThemeDefinition {
+  id: CardTheme
+  name: string
+  description: string
+  family: CardThemeFamily
+  mainColor: string
+  accentColor: string
+  previewLabel: string
+}
+
+export const CLASSIC_CARD_THEMES: CardThemeDefinition[] = [
+  { id: 'teacher-pro', name: 'Teacher Pro', description: 'Clean blue editorial styling', family: 'classic', mainColor: '#183153', accentColor: '#0891b2', previewLabel: 'ABC' },
+  { id: 'minimal', name: 'Minimal', description: 'Quiet modern neutral', family: 'classic', mainColor: '#1e293b', accentColor: '#64748b', previewLabel: 'Aa' },
+  { id: 'classroom-cute', name: 'Classroom Cute', description: 'Warm and friendly', family: 'classic', mainColor: '#7c2d12', accentColor: '#0f766e', previewLabel: 'Hi!' },
+  { id: 'bold-vocabulary', name: 'Bold Vocabulary', description: 'High-energy contrast', family: 'classic', mainColor: '#111827', accentColor: '#dc2626', previewLabel: 'WORD' },
+  { id: 'picture-focus', name: 'Picture Focus', description: 'Let visuals lead', family: 'classic', mainColor: '#111827', accentColor: '#38bdf8', previewLabel: 'Photo' },
+  { id: 'quiz-card', name: 'Quiz Card', description: 'Structured assessment look', family: 'classic', mainColor: '#172554', accentColor: '#ca8a04', previewLabel: 'Q?' },
+  { id: 'playful-pop', name: 'Playful Pop', description: 'Bright kid-friendly palette', family: 'classic', mainColor: '#7c3aed', accentColor: '#ec4899', previewLabel: 'POP' },
+  { id: 'calm-study', name: 'Calm Study', description: 'Soft green focus mode', family: 'classic', mainColor: '#14532d', accentColor: '#0d9488', previewLabel: 'Study' },
+  { id: 'ink-saver', name: 'Ink Saver', description: 'Economical for classroom printing', family: 'classic', mainColor: '#111111', accentColor: '#555555', previewLabel: 'Aa' },
+]
+
+export const DESIGNER_CARD_THEMES: CardThemeDefinition[] = [
+  {
+    id: 'dreamy-classroom',
+    name: 'Dreamy Classroom',
+    description: 'Ornamental gold frame, lavender accents, clouds, sparkles, and ribbon details',
+    family: 'designer',
+    mainColor: '#342a4f',
+    accentColor: '#8b6bbd',
+    previewLabel: 'DREAM',
+  },
+  {
+    id: 'storybook',
+    name: 'Storybook',
+    description: 'Soft illustrated framing with warm paper, scallops, stars, and gentle curves',
+    family: 'designer',
+    mainColor: '#4d3d43',
+    accentColor: '#d98273',
+    previewLabel: 'Story',
+  },
+  {
+    id: 'notebook-doodle',
+    name: 'Notebook Doodle',
+    description: 'Ruled-paper energy with tape, hand-drawn stars, arrows, and classroom doodles',
+    family: 'designer',
+    mainColor: '#1f3b5b',
+    accentColor: '#e76f51',
+    previewLabel: 'NOTE',
+  },
+  {
+    id: 'retro-schoolhouse',
+    name: 'Retro Schoolhouse',
+    description: 'Warm vintage textbook styling with cream stock, burgundy, mustard, and badges',
+    family: 'designer',
+    mainColor: '#6b2737',
+    accentColor: '#d89b31',
+    previewLabel: 'LESSON',
+  },
+  {
+    id: 'botanical-study',
+    name: 'Botanical Study',
+    description: 'Elegant sage paper with fine botanical corners and calm study-room typography',
+    family: 'designer',
+    mainColor: '#29483a',
+    accentColor: '#7b9b79',
+    previewLabel: 'Study',
+  },
+  {
+    id: 'candy-pop',
+    name: 'Candy Pop',
+    description: 'Polished pastel bubbles, stickers, and playful shapes without looking chaotic',
+    family: 'designer',
+    mainColor: '#5b3a7a',
+    accentColor: '#ef6fa8',
+    previewLabel: 'YAY!',
+  },
+  {
+    id: 'space-explorer',
+    name: 'Space Explorer',
+    description: 'Deep indigo card stock with constellations, planets, and bright classroom-safe contrast',
+    family: 'designer',
+    mainColor: '#eef2ff',
+    accentColor: '#67e8f9',
+    previewLabel: 'SPACE',
+  },
+  {
+    id: 'modern-editorial',
+    name: 'Modern Editorial',
+    description: 'Strong typography, offset geometry, and premium magazine-style composition',
+    family: 'designer',
+    mainColor: '#1f2937',
+    accentColor: '#e85d3f',
+    previewLabel: 'TYPE',
+  },
+]
+
+export const CARD_THEMES: CardThemeDefinition[] = [...DESIGNER_CARD_THEMES, ...CLASSIC_CARD_THEMES]
+
+const THEME_BY_ID = new Map<CardTheme, CardThemeDefinition>(CARD_THEMES.map((theme) => [theme.id, theme]))
+
+export function getCardThemeDefinition(theme: CardTheme): CardThemeDefinition {
+  return THEME_BY_ID.get(theme) ?? CLASSIC_CARD_THEMES[0]
+}
+
+export function getThemeRecommendedUpdates(theme: CardTheme): Pick<PrintSettings, 'theme' | 'mainColor' | 'accentColor'> {
+  const definition = getCardThemeDefinition(theme)
+  return {
+    theme,
+    mainColor: definition.mainColor,
+    accentColor: definition.accentColor,
+  }
+}
+
+export function isDesignerCardTheme(theme: CardTheme): boolean {
+  return getCardThemeDefinition(theme).family === 'designer'
+}

From 4d889282a2df80e421abcf3ec4998464cc67eeae Mon Sep 17 00:00:00 2001
From: William <248649537+stupidgiraffe@users.noreply.github.com>
Date: Fri, 2 Oct 2026 04:06:53 -0400
Subject: [PATCH 6/7] Add designer card themes

---
 src/components/CardThemeDecorations.tsx | 175 ++++++++++++++++++++++++
 1 file changed, 175 insertions(+)
 create mode 100644 src/components/CardThemeDecorations.tsx

diff --git a/src/components/CardThemeDecorations.tsx b/src/components/CardThemeDecorations.tsx
new file mode 100644
index 0000000..f8c3851
--- /dev/null
+++ b/src/components/CardThemeDecorations.tsx
@@ -0,0 +1,175 @@
+import type { CardTheme } from '@/lib/types'
+import { isDesignerCardTheme } from '@/lib/card-themes'
+
+interface CardThemeDecorationsProps {
+  theme: CardTheme
+}
+
+const commonSvgProps = {
+  viewBox: '0 0 100 100',
+  preserveAspectRatio: 'none' as const,
+  'aria-hidden': true,
+  focusable: false,
+}
+
+export function CardThemeDecorations({ theme }: CardThemeDecorationsProps) {
+  if (!isDesignerCardTheme(theme)) return null
+
+  return (
+    <div className="card-theme-decorations pointer-events-none absolute inset-0 z-[1] overflow-hidden" aria-hidden="true">
+      {theme === 'dreamy-classroom' && <DreamyClassroom />}
+      {theme === 'storybook' && <Storybook />}
+      {theme === 'notebook-doodle' && <NotebookDoodle />}
+      {theme === 'retro-schoolhouse' && <RetroSchoolhouse />}
+      {theme === 'botanical-study' && <BotanicalStudy />}
+      {theme === 'candy-pop' && <CandyPop />}
+      {theme === 'space-explorer' && <SpaceExplorer />}
+      {theme === 'modern-editorial' && <ModernEditorial />}
+    </div>
+  )
+}
+
+function DreamyClassroom() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <rect x="3.5" y="3.5" width="93" height="93" rx="5" fill="none" stroke="var(--card-theme-gold)" strokeWidth="1.2" opacity=".88" />
+      <rect x="6.2" y="6.2" width="87.6" height="87.6" rx="4" fill="none" stroke="var(--card-theme-gold)" strokeWidth=".55" opacity=".65" />
+      <path d="M5 18c5 0 8-3 8-8M5 12c3 0 5-2 5-5M95 18c-5 0-8-3-8-8M95 12c-3 0-5-2-5-5M5 82c5 0 8 3 8 8M95 82c-5 0-8 3-8 8" fill="none" stroke="var(--card-theme-gold)" strokeWidth="1" strokeLinecap="round" opacity=".9" />
+      <path d="M18 20c2.2-4.5 8-4.3 9.2.2 4.7-.6 6.2 5.7 1.7 7.3H19c-5.2-1.1-5.4-5.8-1-7.5Z" fill="var(--card-theme-soft)" stroke="var(--card-accent)" strokeWidth=".7" opacity=".92" />
+      <path d="M77 78c1.9-3.7 6.8-3.6 7.9.1 4-.4 5.2 4.8 1.4 6.1h-8.4c-4.3-.9-4.5-4.7-.9-6.2Z" fill="var(--card-theme-soft)" stroke="var(--card-accent)" strokeWidth=".65" opacity=".8" />
+      <g fill="var(--card-accent)" opacity=".65">
+        <path d="M66 16l1.1 2.8 2.9 1.1-2.9 1.1-1.1 2.8-1.1-2.8-2.9-1.1 2.9-1.1Z" />
+        <path d="M23 72l.8 2.1 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z" />
+        <path d="M83 35l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7Z" />
+      </g>
+      <g transform="translate(69 7)">
+        <path d="M0 3h21l-3 5 3 5H0Z" fill="var(--card-accent)" opacity=".83" />
+        <path d="M2 5h15v6H2Z" fill="rgba(255,255,255,.12)" />
+      </g>
+    </svg>
+  )
+}
+
+function Storybook() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <path d="M4 13Q4 4 13 4h74q9 0 9 9v74q0 9-9 9H13q-9 0-9-9Z" fill="none" stroke="var(--card-accent)" strokeWidth="1.2" opacity=".55" />
+      <path d="M9 14c4-7 10-9 17-8M91 14c-4-7-10-9-17-8M9 86c4 7 10 9 17 8M91 86c-4 7-10 9-17 8" fill="none" stroke="var(--card-main)" strokeWidth=".75" strokeLinecap="round" opacity=".38" />
+      <g fill="var(--card-theme-soft)" stroke="var(--card-accent)" strokeWidth=".55" opacity=".85">
+        <circle cx="14" cy="19" r="3.5" />
+        <circle cx="19" cy="15" r="2.4" />
+        <circle cx="85" cy="80" r="3.1" />
+      </g>
+      <g fill="var(--card-accent)" opacity=".45">
+        <path d="M77 18l1.2 2.5 2.6.4-1.9 1.9.5 2.6-2.4-1.2-2.3 1.2.4-2.6-1.8-1.9 2.6-.4Z" />
+        <path d="M25 82l.9 1.9 2 .3-1.4 1.4.3 2-1.8-.9-1.8.9.4-2-1.5-1.4 2-.3Z" />
+      </g>
+      <path d="M38 6c7 3 17 3 24 0" fill="none" stroke="var(--card-accent)" strokeWidth=".6" strokeLinecap="round" opacity=".45" />
+    </svg>
+  )
+}
+
+function NotebookDoodle() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <path d="M13 0v100" stroke="var(--card-accent)" strokeWidth=".65" opacity=".3" />
+      <path d="M82 14l2.2 4.5 4.8.7-3.5 3.4.8 4.8-4.3-2.2-4.3 2.2.8-4.8-3.5-3.4 4.8-.7Z" fill="none" stroke="var(--card-accent)" strokeWidth="1.05" strokeLinejoin="round" opacity=".75" />
+      <path d="M19 78c7-7 14 7 22 0s14 5 20-1" fill="none" stroke="var(--card-main)" strokeWidth="1" strokeLinecap="round" opacity=".38" />
+      <path d="M72 74h13M80 69l5 5-5 5" fill="none" stroke="var(--card-accent)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" opacity=".72" />
+      <g transform="translate(8 5) rotate(-5 15 4)">
+        <rect x="0" y="0" width="30" height="8" rx="1" fill="var(--card-theme-tape)" opacity=".75" />
+        <path d="M3 2h24M5 5h20" stroke="rgba(255,255,255,.38)" strokeWidth=".55" />
+      </g>
+      <circle cx="88" cy="84" r="1.2" fill="var(--card-accent)" opacity=".7" />
+      <circle cx="92" cy="79" r=".8" fill="var(--card-main)" opacity=".45" />
+    </svg>
+  )
+}
+
+function RetroSchoolhouse() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <rect x="4" y="4" width="92" height="92" rx="2" fill="none" stroke="var(--card-main)" strokeWidth="1.2" opacity=".75" />
+      <rect x="7" y="7" width="86" height="86" rx="1" fill="none" stroke="var(--card-accent)" strokeWidth=".55" opacity=".75" />
+      <path d="M4 19h18V4M96 19H78V4M4 81h18v15M96 81H78v15" fill="none" stroke="var(--card-accent)" strokeWidth="2" opacity=".6" />
+      <circle cx="84" cy="17" r="7" fill="var(--card-accent)" opacity=".18" />
+      <circle cx="84" cy="17" r="5.2" fill="none" stroke="var(--card-accent)" strokeWidth=".8" opacity=".8" />
+      <path d="M81 17h6M84 14v6" stroke="var(--card-accent)" strokeWidth=".8" opacity=".75" />
+      <path d="M15 84h22" stroke="var(--card-main)" strokeWidth="1.4" opacity=".55" />
+      <path d="M15 88h14" stroke="var(--card-accent)" strokeWidth=".8" opacity=".7" />
+    </svg>
+  )
+}
+
+function BotanicalStudy() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <rect x="4.5" y="4.5" width="91" height="91" rx="5" fill="none" stroke="var(--card-accent)" strokeWidth=".7" opacity=".55" />
+      <path d="M8 31c8-3 13-10 14-21M14 24c-5-1-7-4-7-8M18 19c4-2 6-5 7-9M92 69c-8 3-13 10-14 21M86 76c5 1 7 4 7 8M82 81c-4 2-6 5-7 9" fill="none" stroke="var(--card-main)" strokeWidth=".9" strokeLinecap="round" opacity=".55" />
+      <g fill="var(--card-accent)" opacity=".28">
+        <ellipse cx="12" cy="17" rx="3.4" ry="1.5" transform="rotate(35 12 17)" />
+        <ellipse cx="19" cy="13" rx="3.2" ry="1.4" transform="rotate(-35 19 13)" />
+        <ellipse cx="88" cy="83" rx="3.4" ry="1.5" transform="rotate(35 88 83)" />
+        <ellipse cx="81" cy="87" rx="3.2" ry="1.4" transform="rotate(-35 81 87)" />
+      </g>
+      <circle cx="88" cy="15" r="1" fill="var(--card-accent)" opacity=".55" />
+      <circle cx="84" cy="18" r=".6" fill="var(--card-main)" opacity=".45" />
+    </svg>
+  )
+}
+
+function CandyPop() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <circle cx="10" cy="17" r="9" fill="var(--card-theme-pink)" opacity=".34" />
+      <circle cx="91" cy="24" r="13" fill="var(--card-theme-cyan)" opacity=".28" />
+      <circle cx="86" cy="88" r="10" fill="var(--card-theme-yellow)" opacity=".36" />
+      <circle cx="17" cy="83" r="6" fill="var(--card-accent)" opacity=".18" />
+      <path d="M73 9l1.4 3.4 3.6 1.4-3.6 1.4-1.4 3.5-1.4-3.5-3.6-1.4 3.6-1.4Z" fill="var(--card-accent)" opacity=".7" />
+      <path d="M18 36c4-5 9 5 13 0s9 5 13 0" fill="none" stroke="var(--card-accent)" strokeWidth="1.3" strokeLinecap="round" opacity=".52" />
+      <g transform="translate(69 70) rotate(8 11 6)">
+        <rect width="22" height="12" rx="5" fill="var(--card-accent)" opacity=".16" stroke="var(--card-accent)" strokeWidth=".8" />
+        <circle cx="6" cy="6" r="1.2" fill="var(--card-accent)" opacity=".62" />
+        <path d="M10 6h7" stroke="var(--card-accent)" strokeWidth="1" strokeLinecap="round" opacity=".62" />
+      </g>
+    </svg>
+  )
+}
+
+function SpaceExplorer() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <g fill="var(--card-accent)">
+        <circle cx="13" cy="15" r=".7" opacity=".8" />
+        <circle cx="24" cy="8" r=".45" opacity=".6" />
+        <circle cx="69" cy="14" r=".55" opacity=".8" />
+        <circle cx="90" cy="10" r=".4" opacity=".7" />
+        <circle cx="86" cy="48" r=".7" opacity=".65" />
+        <circle cx="15" cy="63" r=".5" opacity=".8" />
+        <circle cx="72" cy="87" r=".45" opacity=".7" />
+        <circle cx="91" cy="78" r=".55" opacity=".8" />
+      </g>
+      <g transform="translate(74 20)">
+        <circle cx="9" cy="9" r="5.8" fill="var(--card-theme-planet)" opacity=".78" />
+        <ellipse cx="9" cy="9" rx="10" ry="3.1" fill="none" stroke="var(--card-accent)" strokeWidth="1" opacity=".75" transform="rotate(-12 9 9)" />
+      </g>
+      <path d="M15 82l1.1 2.8 2.9 1.1-2.9 1.1-1.1 2.8-1.1-2.8-2.9-1.1 2.9-1.1Z" fill="var(--card-accent)" opacity=".85" />
+      <path d="M30 16l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8Z" fill="var(--card-main)" opacity=".58" />
+      <path d="M20 48c8-5 17-7 27-5" fill="none" stroke="var(--card-accent)" strokeWidth=".6" strokeDasharray="2.5 2.5" opacity=".36" />
+    </svg>
+  )
+}
+
+function ModernEditorial() {
+  return (
+    <svg {...commonSvgProps} className="h-full w-full">
+      <rect x="0" y="0" width="5" height="100" fill="var(--card-accent)" opacity=".88" />
+      <rect x="74" y="0" width="26" height="8" fill="var(--card-main)" opacity=".12" />
+      <rect x="82" y="8" width="18" height="5" fill="var(--card-accent)" opacity=".2" />
+      <path d="M71 87h29v13H63Z" fill="var(--card-accent)" opacity=".12" />
+      <path d="M8 10h21M8 14h12" stroke="var(--card-main)" strokeWidth="1.1" opacity=".48" />
+      <circle cx="91" cy="25" r="2.2" fill="var(--card-accent)" opacity=".85" />
+      <path d="M84 25h4M94 25h4" stroke="var(--card-main)" strokeWidth=".8" opacity=".45" />
+    </svg>
+  )
+}

From 80fa0a985872274a5395e601bb26850bfb0dfbda Mon Sep 17 00:00:00 2001
From: William <248649537+stupidgiraffe@users.noreply.github.com>
Date: Fri, 2 Oct 2026 04:06:56 -0400
Subject: [PATCH 7/7] Add designer card themes

---
 src/__tests__/card-themes.test.ts | 76 +++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/__tests__/card-themes.test.ts

diff --git a/src/__tests__/card-themes.test.ts b/src/__tests__/card-themes.test.ts
new file mode 100644
index 0000000..5f9e203
--- /dev/null
+++ b/src/__tests__/card-themes.test.ts
@@ -0,0 +1,76 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+import {
+  CARD_THEMES,
+  CLASSIC_CARD_THEMES,
+  DESIGNER_CARD_THEMES,
+  getCardThemeDefinition,
+  getThemeRecommendedUpdates,
+  isDesignerCardTheme,
+} from '@/lib/card-themes'
+
+const css = readFileSync(new URL('../index.css', import.meta.url), 'utf8')
+
+describe('card themes', () => {
+  it('keeps the existing classic themes and adds eight designer themes', () => {
+    expect(CLASSIC_CARD_THEMES.map((theme) => theme.id)).toEqual([
+      'teacher-pro',
+      'minimal',
+      'classroom-cute',
+      'bold-vocabulary',
+      'picture-focus',
+      'quiz-card',
+      'playful-pop',
+      'calm-study',
+      'ink-saver',
+    ])
+
+    expect(DESIGNER_CARD_THEMES.map((theme) => theme.id)).toEqual([
+      'dreamy-classroom',
+      'storybook',
+      'notebook-doodle',
+      'retro-schoolhouse',
+      'botanical-study',
+      'candy-pop',
+      'space-explorer',
+      'modern-editorial',
+    ])
+  })
+
+  it('has unique ids and valid starting palettes', () => {
+    expect(new Set(CARD_THEMES.map((theme) => theme.id)).size).toBe(CARD_THEMES.length)
+
+    for (const theme of CARD_THEMES) {
+      expect(theme.name.length).toBeGreaterThan(0)
+      expect(theme.description.length).toBeGreaterThan(10)
+      expect(theme.mainColor).toMatch(/^#[0-9a-f]{6}$/i)
+      expect(theme.accentColor).toMatch(/^#[0-9a-f]{6}$/i)
+      expect(getCardThemeDefinition(theme.id)).toEqual(theme)
+    }
+  })
+
+  it('marks only the designer collection as designer themes', () => {
+    for (const theme of DESIGNER_CARD_THEMES) {
+      expect(isDesignerCardTheme(theme.id)).toBe(true)
+    }
+    for (const theme of CLASSIC_CARD_THEMES) {
+      expect(isDesignerCardTheme(theme.id)).toBe(false)
+    }
+  })
+
+  it('theme application only changes theme and its starting palette', () => {
+    const updates = getThemeRecommendedUpdates('dreamy-classroom')
+    expect(Object.keys(updates).sort()).toEqual(['accentColor', 'mainColor', 'theme'])
+    expect(updates).toEqual({
+      theme: 'dreamy-classroom',
+      mainColor: '#342a4f',
+      accentColor: '#8b6bbd',
+    })
+  })
+
+  it('ships print-safe CSS surfaces for every designer theme', () => {
+    for (const theme of DESIGNER_CARD_THEMES) {
+      expect(css).toContain(`[data-card-theme='${theme.id}']`)
+    }
+  })
+})