@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-arabic: "Cairo", sans-serif;
  --font-display: "Playfair Display", serif;
  
  --color-tavoc-blue: #3b82f6;
  --color-tavoc-dark: #0f172a;
  --color-tavoc-slate: #1e293b;
}

@layer base {
  body {
    @apply bg-slate-950 text-slate-200 antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  .arabic-text {
    font-family: var(--font-arabic);
    direction: rtl;
  }
}

@layer components {
  .glass-card {
    @apply bg-white/5 backdrop-blur-lg border border-white/10 rounded-3xl;
  }
  
  .glass-panel {
    @apply bg-slate-900/50 backdrop-blur-xl border border-slate-800/50;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-slate-800 rounded-full hover:bg-slate-700 transition-colors;
  }
}

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

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

.yasmine-glow {
  box-shadow: 0 0 40px -10px rgba(59, 130, 246, 0.5);
}

.studio-grid {
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 24px 24px;
}