@import "tailwindcss";
@source "../**/*.html";

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

/* ===============================
   🌌 GLOBAL THEME
=============================== */
@layer base {
  :root {
    --primary: #3b82f6;
    --secondary: #8b5cf6;
  }

  body {
    @apply font-sans text-white bg-slate-950;
    background: radial-gradient(circle at top, #0f172a, #020617);
  }

  h1, h2, h3 {
    @apply font-semibold tracking-tight;
  }
}

/* ===============================
   📦 LAYOUT
=============================== */
@layer components {
  .container-main {
    @apply max-w-7xl mx-auto px-4 sm:px-6 md:px-10 lg:px-16 py-8 md:py-10;
  }

  .section {
    @apply mb-8 md:mb-12;
  }

  /* ===============================
     🧊 CARD (MODERN GLASS)
  =============================== */
  .card {
    @apply bg-white/5 backdrop-blur-xl border border-white/10 
           rounded-2xl p-5 md:p-6 
           shadow-lg shadow-black/20
           transition-all duration-300 
           hover:scale-[1.02] hover:border-white/20;
  }

  /* ===============================
     🔘 BUTTON
  =============================== */
  .btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 
           text-white font-semibold 
           px-4 py-2.5 rounded-xl 
           shadow-md shadow-blue-500/20
           hover:scale-105 hover:shadow-lg 
           transition-all duration-300;
  }

  .btn-secondary {
    @apply bg-white/10 text-white 
           px-4 py-2 rounded-xl 
           border border-white/10
           hover:bg-white/20 transition;
  }

  /* ===============================
     🏷️ TEXT & TITLE
  =============================== */
  .title {
    @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl 
           font-bold 
           bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-500 
           bg-clip-text text-transparent;
  }

  .subtitle {
    @apply text-sm sm:text-base text-slate-400;
  }

  .text-desc {
    @apply text-slate-400 text-sm sm:text-base md:text-lg leading-relaxed;
  }

  /* ===============================
     📊 GRID SYSTEM (RESPONSIVE)
  =============================== */
  .grid-auto {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  /* ===============================
     🧭 NAVBAR
  =============================== */
  .navbar {
    @apply sticky top-0 z-50 
           bg-slate-900/70 backdrop-blur-xl 
           border-b border-white/10;
  }

  .nav-link {
    @apply text-slate-300 hover:text-white transition font-medium;
  }

  /* ===============================
     📱 SIDEBAR (RESPONSIVE READY)
  =============================== */
  .sidebar {
    @apply hidden md:flex flex-col w-64 
           bg-slate-900/60 backdrop-blur-xl 
           border-r border-white/10 p-5;
  }

  .sidebar-link {
    @apply text-slate-400 hover:text-white 
           px-3 py-2 rounded-lg 
           hover:bg-white/10 transition;
  }

  /* ===============================
     ✨ ANIMATION
  =============================== */
  .fade-in {
    @apply opacity-0 translate-y-4 animate-[fadeIn_0.6s_ease-out_forwards];
  }
}

/* ===============================
   🎬 KEYFRAMES
=============================== */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}