@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

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

@layer base {
  body {
    @apply bg-bg-light text-slate-800 font-sans transition-colors duration-300;
    font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

.dark body {
  @apply bg-bg-dark text-slate-100;
}

.premium-card {
  @apply bg-white dark:bg-bg-darkCard border border-slate-200/50 dark:border-slate-800 shadow-premium rounded-3xl transition-all duration-300;
}

.premium-card:hover {
  @apply shadow-premium-deep border-primary/20 dark:border-primary/20;
}

.glass-card {
  @apply bg-white/70 dark:bg-bg-darkCard/70 backdrop-blur-xl border border-white/20 dark:border-slate-800 shadow-premium rounded-3xl;
}

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-slate-200 dark:bg-slate-800 rounded-full hover:bg-slate-300 dark:hover:bg-slate-700;
}

.btn-primary {
  @apply bg-primary hover:bg-primary-dark text-white font-semibold py-2.5 px-6 rounded-2xl transition-all duration-300 shadow-lg shadow-primary/20 hover:shadow-primary/40 transform hover:-translate-y-0.5 active:scale-95;
}

.btn-secondary {
  @apply bg-secondary hover:bg-emerald-600 text-white font-semibold py-2.5 px-6 rounded-2xl transition-all duration-300 shadow-lg shadow-secondary/20 hover:shadow-secondary/30 transform hover:-translate-y-0.5 active:scale-95;
}

/* Form Styles for Premium Look */
input,
select,
textarea {
  @apply bg-white dark:bg-slate-900/50 border-none ring-1 ring-slate-200 dark:ring-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary transition-all placeholder:text-slate-400 dark:text-slate-200 outline-none;
}

input:hover,
select:hover,
textarea:hover {
  @apply ring-slate-300 dark:ring-slate-700;
}

label {
  @apply text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 block pl-1;
}

/* Premium Input and Label Classes */
.premium-input {
  @apply bg-white dark:bg-slate-900/50 border-none ring-1 ring-slate-200 dark:ring-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary transition-all placeholder:text-slate-400 dark:text-slate-200 outline-none;
}

.premium-input:hover {
  @apply ring-slate-300 dark:ring-slate-700;
}

.premium-label {
  @apply text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 block pl-1;
}

/* Scrollbar tweaks */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-slate-200 dark:bg-slate-800 rounded-full hover:bg-primary/50 transition-colors;
}

/* Animations */
@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.5s ease forwards;
}

/* Dark Mode Glow Effects */
.dark .active-nav svg {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.dark .active-nav span {
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.dark .shadow-premium-deep {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}