app/globals.css
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root,
  [data-theme="neutral"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 20%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 85%;
    --input: 0 0% 85%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  [data-theme="ocean"] {
    --background: 200 30% 98%;
    --foreground: 200 50% 3.9%;
    --card: 200 30% 100%;
    --card-foreground: 200 50% 3.9%;
    --popover: 200 30% 100%;
    --popover-foreground: 200 50% 3.9%;
    --primary: 200 85% 45%;
    --primary-foreground: 200 5% 98%;
    --secondary: 200 40% 96.1%;
    --secondary-foreground: 200 50% 9%;
    --muted: 200 40% 96.1%;
    --muted-foreground: 200 40% 20%;
    --accent: 200 40% 96.1%;
    --accent-foreground: 200 50% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 200 30% 85%;
    --input: 200 30% 85%;
    --ring: 200 85% 45%;
    --chart-1: 200 76% 61%;
    --chart-2: 220 58% 39%;
    --chart-3: 240 37% 24%;
    --chart-4: 190 74% 66%;
    --chart-5: 210 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 200 30% 98%;
    --sidebar-foreground: 200 30% 26.1%;
    --sidebar-primary: 200 85% 45%;
    --sidebar-primary-foreground: 200 5% 98%;
    --sidebar-accent: 200 30% 95.9%;
    --sidebar-accent-foreground: 200 50% 10%;
    --sidebar-border: 200 30% 91%;
    --sidebar-ring: 200 91.2% 59.8%;
  }

  [data-theme="forest"] {
    --background: 150 30% 98%;
    --foreground: 150 50% 3.9%;
    --card: 150 30% 100%;
    --card-foreground: 150 50% 3.9%;
    --popover: 150 30% 100%;
    --popover-foreground: 150 50% 3.9%;
    --primary: 150 85% 45%;
    --primary-foreground: 150 5% 98%;
    --secondary: 150 40% 96.1%;
    --secondary-foreground: 150 50% 9%;
    --muted: 150 40% 96.1%;
    --muted-foreground: 150 40% 20%;
    --accent: 150 40% 96.1%;
    --accent-foreground: 150 50% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 150 30% 85%;
    --input: 150 30% 85%;
    --ring: 150 85% 45%;
    --chart-1: 150 76% 61%;
    --chart-2: 170 58% 39%;
    --chart-3: 190 37% 24%;
    --chart-4: 140 74% 66%;
    --chart-5: 160 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 150 30% 98%;
    --sidebar-foreground: 150 30% 26.1%;
    --sidebar-primary: 150 85% 45%;
    --sidebar-primary-foreground: 150 5% 98%;
    --sidebar-accent: 150 30% 95.9%;
    --sidebar-accent-foreground: 150 50% 10%;
    --sidebar-border: 150 30% 91%;
    --sidebar-ring: 150 91.2% 59.8%;
  }

  [data-theme="sunset"] {
    --background: 30 30% 98%;
    --foreground: 30 50% 3.9%;
    --card: 30 30% 100%;
    --card-foreground: 30 50% 3.9%;
    --popover: 30 30% 100%;
    --popover-foreground: 30 50% 3.9%;
    --primary: 30 85% 45%;
    --primary-foreground: 30 5% 98%;
    --secondary: 30 40% 96.1%;
    --secondary-foreground: 30 50% 9%;
    --muted: 30 40% 96.1%;
    --muted-foreground: 30 40% 20%;
    --accent: 30 40% 96.1%;
    --accent-foreground: 30 50% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 30 30% 85%;
    --input: 30 30% 85%;
    --ring: 30 85% 45%;
    --chart-1: 30 76% 61%;
    --chart-2: 50 58% 39%;
    --chart-3: 70 37% 24%;
    --chart-4: 20 74% 66%;
    --chart-5: 40 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 30 30% 98%;
    --sidebar-foreground: 30 30% 26.1%;
    --sidebar-primary: 30 85% 45%;
    --sidebar-primary-foreground: 30 5% 98%;
    --sidebar-accent: 30 30% 95.9%;
    --sidebar-accent-foreground: 30 50% 10%;
    --sidebar-border: 30 30% 91%;
    --sidebar-ring: 30 91.2% 59.8%;
  }

  [data-theme="rose"] {
    --background: 350 30% 98%;
    --foreground: 350 50% 3.9%;
    --card: 350 30% 100%;
    --card-foreground: 350 50% 3.9%;
    --popover: 350 30% 100%;
    --popover-foreground: 350 50% 3.9%;
    --primary: 350 85% 45%;
    --primary-foreground: 350 5% 98%;
    --secondary: 350 40% 96.1%;
    --secondary-foreground: 350 50% 9%;
    --muted: 350 40% 96.1%;
    --muted-foreground: 350 40% 20%;
    --accent: 350 40% 96.1%;
    --accent-foreground: 350 50% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 350 30% 85%;
    --input: 350 30% 85%;
    --ring: 350 85% 45%;
    --chart-1: 350 76% 61%;
    --chart-2: 370 58% 39%;
    --chart-3: 390 37% 24%;
    --chart-4: 340 74% 66%;
    --chart-5: 360 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 350 30% 98%;
    --sidebar-foreground: 350 30% 26.1%;
    --sidebar-primary: 350 85% 45%;
    --sidebar-primary-foreground: 350 5% 98%;
    --sidebar-accent: 350 30% 95.9%;
    --sidebar-accent-foreground: 350 50% 10%;
    --sidebar-border: 350 30% 91%;
    --sidebar-ring: 350 91.2% 59.8%;
  }

  [data-theme="slate"] {
    --background: 215 30% 98%;
    --foreground: 215 50% 3.9%;
    --card: 215 30% 100%;
    --card-foreground: 215 50% 3.9%;
    --popover: 215 30% 100%;
    --popover-foreground: 215 50% 3.9%;
    --primary: 215 85% 45%;
    --primary-foreground: 215 5% 98%;
    --secondary: 215 40% 96.1%;
    --secondary-foreground: 215 50% 9%;
    --muted: 215 40% 96.1%;
    --muted-foreground: 215 40% 20%;
    --accent: 215 40% 96.1%;
    --accent-foreground: 215 50% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 215 30% 85%;
    --input: 215 30% 85%;
    --ring: 215 85% 45%;
    --chart-1: 215 76% 61%;
    --chart-2: 235 58% 39%;
    --chart-3: 255 37% 24%;
    --chart-4: 205 74% 66%;
    --chart-5: 225 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 215 30% 98%;
    --sidebar-foreground: 215 30% 26.1%;
    --sidebar-primary: 215 85% 45%;
    --sidebar-primary-foreground: 215 5% 98%;
    --sidebar-accent: 215 30% 95.9%;
    --sidebar-accent-foreground: 215 50% 10%;
    --sidebar-border: 215 30% 91%;
    --sidebar-ring: 215 91.2% 59.8%;
  }

  .dark,
  [data-theme="neutral"].dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 20%;
    --chart-5: 340 75% 55%;
    --radius: 0.5rem;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  [data-theme="ocean"].dark {
    --background: 200 50% 3.9%;
    --foreground: 200 5% 98%;
    --card: 200 50% 3.9%;
    --card-foreground: 200 5% 98%;
    --popover: 200 50% 3.9%;
    --popover-foreground: 200 5% 98%;
    --primary: 200 90% 50%;
    --primary-foreground: 200 5% 9%;
    --secondary: 200 30% 14.9%;
    --secondary-foreground: 200 5% 98%;
    --muted: 200 30% 14.9%;
    --muted-foreground: 200 20% 63.9%;
    --accent: 200 30% 14.9%;
    --accent-foreground: 200 5% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 200 30% 14.9%;
    --input: 200 30% 14.9%;
    --ring: 200 90% 50%;
    --chart-1: 200 70% 50%;
    --chart-2: 220 60% 45%;
    --chart-3: 240 80% 55%;
    --chart-4: 190 65% 20%;
    --chart-5: 210 75% 55%;
    --radius: 0.5rem;
    --sidebar-background: 200 50% 10%;
    --sidebar-foreground: 200 30% 95.9%;
    --sidebar-primary: 200 90% 50%;
    --sidebar-primary-foreground: 200 5% 100%;
    --sidebar-accent: 200 30% 15.9%;
    --sidebar-accent-foreground: 200 30% 95.9%;
    --sidebar-border: 200 30% 15.9%;
    --sidebar-ring: 200 91.2% 59.8%;
  }

  [data-theme="forest"].dark {
    --background: 150 50% 3.9%;
    --foreground: 150 5% 98%;
    --card: 150 50% 3.9%;
    --card-foreground: 150 5% 98%;
    --popover: 150 50% 3.9%;
    --popover-foreground: 150 5% 98%;
    --primary: 150 90% 50%;
    --primary-foreground: 150 5% 9%;
    --secondary: 150 30% 14.9%;
    --secondary-foreground: 150 5% 98%;
    --muted: 150 30% 14.9%;
    --muted-foreground: 150 20% 63.9%;
    --accent: 150 30% 14.9%;
    --accent-foreground: 150 5% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 150 30% 14.9%;
    --input: 150 30% 14.9%;
    --ring: 150 90% 50%;
    --chart-1: 150 70% 50%;
    --chart-2: 170 60% 45%;
    --chart-3: 190 80% 55%;
    --chart-4: 140 65% 20%;
    --chart-5: 160 75% 55%;
    --radius: 0.5rem;
    --sidebar-background: 150 50% 10%;
    --sidebar-foreground: 150 30% 95.9%;
    --sidebar-primary: 150 90% 50%;
    --sidebar-primary-foreground: 150 5% 100%;
    --sidebar-accent: 150 30% 15.9%;
    --sidebar-accent-foreground: 150 30% 95.9%;
    --sidebar-border: 150 30% 15.9%;
    --sidebar-ring: 150 91.2% 59.8%;
  }

  [data-theme="sunset"].dark {
    --background: 30 50% 3.9%;
    --foreground: 30 5% 98%;
    --card: 30 50% 3.9%;
    --card-foreground: 30 5% 98%;
    --popover: 30 50% 3.9%;
    --popover-foreground: 30 5% 98%;
    --primary: 30 90% 50%;
    --primary-foreground: 30 5% 9%;
    --secondary: 30 30% 14.9%;
    --secondary-foreground: 30 5% 98%;
    --muted: 30 30% 14.9%;
    --muted-foreground: 30 20% 63.9%;
    --accent: 30 30% 14.9%;
    --accent-foreground: 30 5% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 30 30% 14.9%;
    --input: 30 30% 14.9%;
    --ring: 30 90% 50%;
    --chart-1: 30 70% 50%;
    --chart-2: 50 60% 45%;
    --chart-3: 70 80% 55%;
    --chart-4: 20 65% 20%;
    --chart-5: 40 75% 55%;
    --radius: 0.5rem;
    --sidebar-background: 30 50% 10%;
    --sidebar-foreground: 30 30% 95.9%;
    --sidebar-primary: 30 90% 50%;
    --sidebar-primary-foreground: 30 5% 100%;
    --sidebar-accent: 30 30% 15.9%;
    --sidebar-accent-foreground: 30 30% 95.9%;
    --sidebar-border: 30 30% 15.9%;
    --sidebar-ring: 30 91.2% 59.8%;
  }

  [data-theme="rose"].dark {
    --background: 350 50% 3.9%;
    --foreground: 350 5% 98%;
    --card: 350 50% 3.9%;
    --card-foreground: 350 5% 98%;
    --popover: 350 50% 3.9%;
    --popover-foreground: 350 5% 98%;
    --primary: 350 90% 50%;
    --primary-foreground: 350 5% 9%;
    --secondary: 350 30% 14.9%;
    --secondary-foreground: 350 5% 98%;
    --muted: 350 30% 14.9%;
    --muted-foreground: 350 20% 63.9%;
    --accent: 350 30% 14.9%;
    --accent-foreground: 350 5% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 350 30% 14.9%;
    --input: 350 30% 14.9%;
    --ring: 350 90% 50%;
    --chart-1: 350 70% 50%;
    --chart-2: 370 60% 45%;
    --chart-3: 390 80% 55%;
    --chart-4: 340 65% 20%;
    --chart-5: 360 75% 55%;
    --radius: 0.5rem;
    --sidebar-background: 350 50% 10%;
    --sidebar-foreground: 350 30% 95.9%;
    --sidebar-primary: 350 90% 50%;
    --sidebar-primary-foreground: 350 5% 100%;
    --sidebar-accent: 350 30% 15.9%;
    --sidebar-accent-foreground: 350 30% 95.9%;
    --sidebar-border: 350 30% 15.9%;
    --sidebar-ring: 350 91.2% 59.8%;
  }

  [data-theme="slate"].dark {
    --background: 215 50% 3.9%;
    --foreground: 215 5% 98%;
    --card: 215 50% 3.9%;
    --card-foreground: 215 5% 98%;
    --popover: 215 50% 3.9%;
    --popover-foreground: 215 5% 98%;
    --primary: 215 90% 50%;
    --primary-foreground: 215 5% 9%;
    --secondary: 215 30% 14.9%;
    --secondary-foreground: 215 5% 98%;
    --muted: 215 30% 14.9%;
    --muted-foreground: 215 20% 63.9%;
    --accent: 215 30% 14.9%;
    --accent-foreground: 215 5% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 215 30% 14.9%;
    --input: 215 30% 14.9%;
    --ring: 215 90% 50%;
    --chart-1: 215 70% 50%;
    --chart-2: 235 60% 45%;
    --chart-3: 255 80% 55%;
    --chart-4: 205 65% 20%;
    --chart-5: 225 75% 55%;
    --radius: 0.5rem;
    --sidebar-background: 215 50% 10%;
    --sidebar-foreground: 215 30% 95.9%;
    --sidebar-primary: 215 90% 50%;
    --sidebar-primary-foreground: 215 5% 100%;
    --sidebar-accent: 215 30% 15.9%;
    --sidebar-accent-foreground: 215 30% 95.9%;
    --sidebar-border: 215 30% 15.9%;
    --sidebar-ring: 215 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.font-eb-garamond {
  font-family: "EB Garamond", serif;
}

.font-geist {
  font-family: "Geist", sans-serif;
}

.font-inter {
  font-family: "Inter", sans-serif;
}

.font-newsreader {
  font-family: "Newsreader", serif;
}

.font-ibm-plex-sans {
  font-family: "IBM Plex Sans", sans-serif;
}

.font-alegreya {
  font-family: "Alegreya", serif;
}

.font-montserrat {
  font-family: "Montserrat", sans-serif;
}

.font-fraunces {
  font-family: "Fraunces", serif;
}

.font-work-sans {
  font-family: "Work Sans", sans-serif;
}

.font-nunito {
  font-family: "Nunito", sans-serif;
}

.font-merriweather {
  font-family: "Merriweather", serif;
}

.font-lora {
  font-family: "Lora", serif;
}