src/index.css

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%; 
    --foreground: 25 15% 15%; 

    --card: 30 10% 96%; 
    --card-foreground: 25 15% 15%;
 
    --popover: 30 10% 96%;
    --popover-foreground: 25 15% 15%;
 
    --primary: 30 70% 50%; 
    --primary-foreground: 20 10% 98%; 
 
    --secondary: 15 60% 45%; 
    --secondary-foreground: 20 10% 98%;
 
    --muted: 30 10% 90%;
    --muted-foreground: 25 5% 45%;
 
    --accent: 30 10% 90%;
    --accent-foreground: 25 15% 15%;
 
    --destructive: 0 85% 60%;
    --destructive-foreground: 20 10% 98%;

    --border: 30 15% 85%;
    --input: 30 15% 85%;
    --ring: 30 70% 50%;
 
    --radius: 0.5rem;
  }

  /* Desktop zoom ratio */
  @media screen and (min-width: 1024px) {
    html {
      zoom: 80%;
    }
  }

  * {
    @apply border-border;
    box-sizing: border-box;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Merriweather', serif; 
    @apply antialiased;
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

  html {
    overflow-x: hidden; /* Prevent horizontal scroll on html too */
    scroll-behavior: smooth;
  }

  @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&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Great+Vibes&display=swap');
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif; 
  }
}

.app-background-theme {
  background-color: #FFF8DC; 
  background-image: 
    linear-gradient(to bottom, rgba(210, 180, 140, 0.1), rgba(139, 69, 19, 0.05)),
    url('https://www.transparenttextures.com/patterns/worn-dots.png'); 
  background-repeat: repeat, repeat;
  background-position: center, center;
  background-attachment: fixed;
  color: var(--foreground); 
}

.text-shadow {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.text-shadow-md {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}
.text-shadow-lg {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #E0C9A6; 
}
::-webkit-scrollbar-thumb {
  background: #8B4513; 
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A0522D; 
}

/* Toast Success Theme */
.toast-success-theme {
  @apply bg-green-600 border-green-700 text-white;
}
.toast-success-theme [data-radix-toast-title] {
  @apply text-white font-bold;
}
.toast-success-theme [data-radix-toast-description] {
  @apply text-green-100;
}
.toast-success-theme [data-radix-toast-close] {
  @apply text-green-200 hover:text-white;
}

/* Toast Info Theme */
.toast-info-theme {
  @apply bg-sky-600 border-sky-700 text-white;
}
.toast-info-theme [data-radix-toast-title] {
  @apply text-white font-bold;
}
.toast-info-theme [data-radix-toast-description] {
  @apply text-sky-100;
}
.toast-info-theme [data-radix-toast-close] {
  @apply text-sky-200 hover:text-white;
}

/* Toast Destructive Theme */
.toast-destructive-theme {
  @apply bg-red-600 border-red-700 text-white;
}
.toast-destructive-theme [data-radix-toast-title] {
  @apply text-white font-bold;
}
.toast-destructive-theme [data-radix-toast-description] {
  @apply text-red-100;
}
.toast-destructive-theme [data-radix-toast-close] {
  @apply text-red-200 hover:text-white;
}

/* Add this at the end of the file */
.text-underline-scribble {
  position: relative;
  display: inline-block;
}

.text-underline-scribble::after {
  content: "";
  position: absolute;
  left: -5%;
  bottom: -5px;
  width: 110%;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' width='100%25' height='100%25'%3E%3Cpath fill='none' stroke='%23f97316' stroke-width='5' stroke-linecap='round' d='M0,10 c30,-18 70,18 100,0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}
/* Add this at the end of the file */
.text-underline-scribble {
  position: relative;
  display: inline-block;
}

.text-underline-scribble::after {
  content: "";
  position: absolute;
  left: -5%;
  bottom: -5px;
  width: 110%;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' width='100%25' height='100%25'%3E%3Cpath fill='none' stroke='%23f97316' stroke-width='5' stroke-linecap='round' d='M0,10 c30,-18 70,18 100,0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}
/* Desktop zoom ratio */
@media screen and (min-width: 1024px) {
  html {
    zoom: 80%;
  }
}