@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap");
@layer base {
  :root {
    /* Warm, playful Ramadan-inspired palette */
    --background: 40 33% 97%;
    --foreground: 220 25% 20%;

    --card: 0 0% 100%;
    --card-foreground: 220 25% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 25% 20%;

    /* Golden lantern color */
    --primary: 35 92% 55%;
    --primary-foreground: 0 0% 100%;

    /* Soft teal for playfulness */
    --secondary: 175 45% 55%;
    --secondary-foreground: 0 0% 100%;

    /* Coral accent for fun pops */
    --accent: 350 80% 65%;
    --accent-foreground: 0 0% 100%;

    --muted: 40 20% 92%;
    --muted-foreground: 220 15% 45%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 35 30% 85%;
    --input: 35 30% 85%;
    --ring: 35 92% 55%;

    --radius: 1rem;

    /* Custom colors for the theme */
    --gold: 35 92% 55%;
    --gold-light: 40 90% 70%;
    --gold-dark: 30 85% 45%;

    --teal: 175 45% 55%;
    --teal-light: 175 50% 70%;
    --teal-dark: 175 40% 40%;

    --coral: 350 80% 65%;
    --coral-light: 350 85% 80%;

    --sky: 200 80% 60%;
    --sky-light: 200 85% 80%;

    --mint: 150 50% 60%;
    --purple: 270 60% 65%;

    --cream: 40 33% 97%;
    --cream-dark: 40 25% 90%;

    /* Gradients */
    --gradient-sunset: linear-gradient(
      135deg,
      hsl(35 92% 55%),
      hsl(350 80% 65%)
    );
    --gradient-ocean: linear-gradient(
      135deg,
      hsl(175 45% 55%),
      hsl(200 80% 60%)
    );
    --gradient-hero: linear-gradient(
      180deg,
      hsl(35 92% 55% / 0.1) 0%,
      transparent 50%
    );
  }

  .dark {
    --background: 220 25% 12%;
    --foreground: 40 33% 97%;

    --card: 220 25% 16%;
    --card-foreground: 40 33% 97%;

    --popover: 220 25% 16%;
    --popover-foreground: 40 33% 97%;

    --primary: 35 92% 55%;
    --primary-foreground: 220 25% 12%;

    --secondary: 175 45% 45%;
    --secondary-foreground: 0 0% 100%;

    --accent: 350 80% 60%;
    --accent-foreground: 0 0% 100%;

    --muted: 220 20% 20%;
    --muted-foreground: 220 15% 65%;

    --border: 220 20% 25%;
    --input: 220 20% 25%;
    --ring: 35 92% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    direction: rtl;
  }

  body {
    @apply bg-background text-foreground font-arabic antialiased;
  }
}

@layer utilities {
  .text-gradient-gold {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-gold to-gold-light;
  }

  .text-gradient-sunset {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-sunset);
  }

  .bg-gradient-hero {
    background-image: var(--gradient-hero);
  }

  .shadow-glow-gold {
    box-shadow: 0 0 30px hsl(35 92% 55% / 0.3);
  }

  .shadow-glow-teal {
    box-shadow: 0 0 30px hsl(175 45% 55% / 0.3);
  }

  .card-shadow {
    box-shadow: 0 10px 40px -10px hsl(220 25% 20% / 0.15);
  }

  .card-shadow-hover {
    box-shadow: 0 20px 50px -10px hsl(220 25% 20% / 0.25);
  }
}

/* Floating animation for decorative elements */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes bounce-gentle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px hsl(35 92% 55% / 0.3);
  }
  50% {
    box-shadow: 0 0 40px hsl(35 92% 55% / 0.6);
  }
}

/* Lantern glow effect */
.lantern-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Pattern overlay */
.pattern-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5a33c' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#root {
  /* max-width: 1280px; */
  margin: 0 auto;
  /* padding: 0.1rem; */
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}