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

/* ===============================
   BASE (LIGHT THEME)
================================ */
@layer base {
  body {
    @apply bg-white text-slate-800 antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-heading text-slate-900;
  }
}

/* ===============================
   COMPONENTS
================================ */
@layer components {

  /* Gradient Text */
  .text-gradient-orange {
    @apply bg-gradient-to-r from-orange-500 to-amber-500
           bg-clip-text text-transparent;
  }

  /* Primary Button */
  .btn-primary {
    @apply inline-flex items-center justify-center
           bg-gradient-to-r from-orange-500 to-amber-500
           text-white font-semibold
           px-6 py-3 rounded-lg
           shadow-md
           hover:from-orange-600 hover:to-amber-600
           transition-all duration-300;
  }

  /* Outline Button */
  .btn-outline {
    @apply inline-flex items-center justify-center
           border border-orange-500
           text-orange-500
           px-6 py-3 rounded-lg
           hover:bg-orange-500 hover:text-white
           transition-all duration-300;
  }

  /* Cards */
  .card {
    @apply bg-white border border-slate-200
           rounded-xl p-6
           shadow-sm
           hover:shadow-md
           transition-all duration-300;
  }

  /* Badge */
  .badge {
    @apply text-xs font-medium
           px-3 py-1 rounded-full
           bg-orange-100 text-orange-600
           border border-orange-200;
  }

  /* Nav Links */
  .nav-link {
    @apply text-slate-600
           hover:text-orange-500
           transition-colors duration-200;
  }

  /* Section wrapper */
  .section {
    @apply max-w-6xl mx-auto px-6 py-20;
  }
}
html {
  scroll-behavior: smooth;
}
.section-glow {
  position: relative;
}

.section-glow::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,115,0,0.15) 0%, transparent 70%);
  top: -50px;
  right: -50px;
  z-index: 0;
}
.active-nav {
  color: #ffffff;
  font-weight: 600;
  position: relative;
}

.active-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: white;
}
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: white;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}
.mobile-link {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-link:hover {
  transform: translateX(4px);
}