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

@layer base {
  body {
    /* Setting the global background to a clean Slate 50 */
    @apply bg-[#F9FAFB] text-slate-900 antialiased;
    letter-spacing: -0.02em;
  }
}

@layer components {
  /* Define the new input style for better visibility */
  .input-field {
    /* bg-slate-100/50 provides the 'shade' so users can see the field */
    @apply w-full p-4 rounded-2xl bg-slate-100/50 border-2 border-white 
               text-slate-900 placeholder:text-slate-400
               outline-none transition-all duration-300
               shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]
               focus:bg-white focus:border-blue-600 focus:shadow-lg focus:shadow-blue-600/5;
  }

  .btn-primary {
    @apply bg-slate-900 text-white px-10 py-4 rounded-full font-bold 
           flex items-center justify-center leading-none
           hover:bg-blue-600 transition shadow-xl shadow-blue-200/20;
  }

  .project-card {
    @apply bg-white aspect-video rounded-3xl mb-8 overflow-hidden 
               border border-slate-100 flex items-center justify-center 
               shadow-sm hover:shadow-md transition-shadow duration-300;
  }
}
@layer components {
  .skill-badge {
    @apply px-4 py-1.5 rounded-full text-xs font-bold border transition-all duration-300 hover:scale-105;
  }
}
@layer components {
  .skill-tag {
    @apply px-4 py-1.5 rounded-full text-xs font-bold border 
               transition-all duration-300 hover:scale-105 cursor-default;
  }
}
@layer components {
  .skill-card {
    @apply p-8 rounded-3xl bg-slate-50 border border-slate-100 transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
  }

  .icon-box {
    @apply w-10 h-10 rounded-xl flex items-center justify-center text-white mb-6;
  }

  .tag {
    @apply px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border transition-all;
  }

  /* Color Variants */
  .tag-blue {
    @apply bg-blue-50 text-blue-700 border-blue-100;
  }
  .tag-emerald {
    @apply bg-emerald-50 text-emerald-700 border-emerald-100;
  }
  .tag-purple {
    @apply bg-purple-50 text-purple-700 border-purple-100;
  }
  .tag-orange {
    @apply bg-orange-50 text-orange-700 border-orange-100;
  }
  .tag-slate {
    @apply bg-white text-slate-500 border-slate-200;
  }
}
@layer components {
  .project-image {
    /* Ensures the logo fits perfectly within the card header */
    @apply aspect-video w-full flex items-center justify-center relative overflow-hidden bg-slate-50;
  }
}