@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Amiri:wght@400;700&display=swap');

:root {
  --background: 45 20% 97%;
  --foreground: 86 20% 15%;

  --card: 45 30% 95%;
  --card-foreground: 86 20% 15%;

  --popover: 45 30% 95%;
  --popover-foreground: 86 20% 15%;

  --primary: 86 33% 45%;
  --primary-foreground: 45 30% 98%;

  --secondary: 45 25% 90%;
  --secondary-foreground: 86 20% 25%;

  --muted: 45 15% 92%;
  --muted-foreground: 86 10% 45%;

  --accent: 35 60% 70%;
  --accent-foreground: 86 20% 15%;

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

  --border: 86 15% 80%;
  --input: 86 15% 85%;
  --ring: 86 33% 45%;

  --radius: 1rem;

  /* Custom design tokens */
  --gradient-primary: linear-gradient(135deg, hsl(86 33% 45%), hsl(86 40% 55%));
  --gradient-warm: linear-gradient(135deg, hsl(35 60% 70%), hsl(45 50% 80%));
  --gradient-hero: linear-gradient(180deg, hsl(45 20% 97%) 0%, hsl(45 30% 92%) 100%);
  --shadow-soft: 0 4px 20px -4px hsl(86 33% 45% / 0.15);
  --shadow-elevated: 0 20px 40px -12px hsl(86 33% 45% / 0.25);
  --shadow-3d: 0 25px 50px -12px hsl(86 20% 20% / 0.3);
}

.dark {
  --background: 86 15% 8%;
  --foreground: 45 30% 95%;

  --card: 86 15% 12%;
  --card-foreground: 45 30% 95%;

  --popover: 86 15% 12%;
  --popover-foreground: 45 30% 95%;

  --primary: 86 40% 50%;
  --primary-foreground: 86 15% 8%;

  --secondary: 86 15% 18%;
  --secondary-foreground: 45 30% 90%;

  --muted: 86 15% 18%;
  --muted-foreground: 45 15% 60%;

  --accent: 35 50% 55%;
  --accent-foreground: 45 30% 95%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 86 15% 22%;
  --input: 86 15% 22%;
  --ring: 86 40% 50%;
}

html {
  direction: rtl;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Noto Sans Arabic', 'Outfit', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Amiri', 'Playfair Display', serif;
}

/* Custom Utilities */
.text-gradient {
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: hsla(var(--card) / 0.95);
  border: 1px solid hsla(var(--border) / 0.5);
}

.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d-inner {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-3d:hover .card-3d-inner {
  transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

.float-animation-delayed {
  animation: float 6s ease-in-out infinite 2s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

.spin-slow {
  animation: spin-slow 20s linear infinite;
}

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

.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px hsl(86 33% 45% / 0.3);
  }
  50% {
    box-shadow: 0 0 40px hsl(86 33% 45% / 0.5);
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.5);
}