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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 215 25% 27%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 27%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 27%;
    --primary: 201 100% 36%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 215 25% 27%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215 20% 65%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 215 25% 27%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 201 100% 36%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 215 28% 17%;
    --foreground: 210 40% 98%;
    --card: 215 28% 17%;
    --card-foreground: 210 40% 98%;
    --popover: 215 28% 17%;
    --popover-foreground: 210 40% 98%;
    --primary: 201 100% 36%;
    --primary-foreground: 210 40% 98%;
    --secondary: 215 25% 27%;
    --secondary-foreground: 210 40% 98%;
    --muted: 215 25% 27%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 25% 27%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 215 28% 17%;
    --input: 215 28% 17%;
    --ring: 201 100% 36%;
  }
}

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

body {
  font-feature-settings: "rlig" 1, "calt" 1;
}

[lang="en"] body {
  font-family: var(--font-inter), sans-serif;
  font-size: 1rem; /* Adjusted font size */
  line-height: 1.5; /* Adjusted line height */
}

[lang="ar"] body,
[lang="ku"] body {
  font-family: var(--font-NNA), sans-serif;
  font-size: 1rem; /* Adjusted font size */
  line-height: 1.5; /* Adjusted line height */
}

[lang="en"] h1, [lang="en"] h2, [lang="en"] h3, [lang="en"] h4, [lang="en"] h5, [lang="en"] h6 {
  font-family: var(--font-Montserrat), serif;
  line-height: 1.2; /* Adjusted line height */
}

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5, [lang="ar"] h6,
[lang="ku"] h1, [lang="ku"] h2, [lang="ku"] h3, [lang="ku"] h4, [lang="ku"] h5, [lang="ku"] h6 {
  font-family: var(--font-NNA), sans-serif;
  line-height: 1.2; /* Adjusted line height */
}
span {
  font-family: var(--font-MontserratR), sans-serif;
}

/* Apply Montserrat-Regular to span elements with a specific class */
.font-regular {
  font-weight: 400; /* Regular */
}
/* Adjusted font sizes for headings */
h1 {
  font-size: 2.5rem; /* Adjusted font size */
}

h2 {
  font-size: 2rem; /* Adjusted font size */
}

h3 {
  font-size: 1.75rem; /* Adjusted font size */
}

h4 {
  font-size: 1.5rem; /* Adjusted font size */
}

h5 {
  font-size: 1.25rem; /* Adjusted font size */
}

h6 {
  font-size: 1rem; /* Adjusted font size */
}

/* Adjusted font size for paragraphs */
p {
  font-size: 1rem; /* Adjusted font size */
  line-height: 1.6; /* Adjusted line height */
}


@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
  }

  .animation-delay-100 {
    animation-delay: 100ms;
  }

  .animation-delay-200 {
    animation-delay: 200ms;
  }

  .animation-delay-300 {
    animation-delay: 300ms;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.elegant-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.elegant-transition {
  transition: all 0.3s ease;
}

.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .lg\:flex-row-reverse {
  flex-direction: row-reverse;
}
.ripple-effect {
  @apply relative overflow-hidden transition-all duration-200;
}

.animate-ripple {
  animation: ripple 0.5s linear;
  @apply pointer-events-none absolute h-20 w-20;
}

@keyframes ripple {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
  }}