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

/* ── Base layer overrides ─────────────────────────────────────────── */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    @apply bg-brand-dark text-slate-200 font-sans leading-relaxed overflow-x-hidden;
  }
  a {
    @apply text-accent transition-colors duration-200;
  }
  a:hover {
    @apply text-amber-300;
  }
}

/* ── Component layer ──────────────────────────────────────────────── */
@layer components {
  /* Primary CTA button */
  .btn-primary {
    @apply inline-flex items-center gap-2 px-8 py-3.5 rounded-xl border-none
           text-sm font-bold cursor-pointer no-underline
           bg-gradient-accent text-gray-900
           shadow-[0_4px_24px_rgba(245,158,11,0.25)]
           transition-all duration-200
           hover:-translate-y-0.5 hover:shadow-[0_10px_40px_rgba(245,158,11,0.3)]
           hover:text-gray-900;
  }

  /* Secondary / ghost button */
  .btn-secondary {
    @apply inline-flex items-center gap-2 px-8 py-3.5 rounded-xl
           text-sm font-semibold cursor-pointer no-underline
           bg-white/[.04] border border-subtle text-slate-200
           transition-all duration-200
           hover:bg-white/[.08] hover:border-white/[.15] hover:text-white;
  }

  /* Nav CTA (compact) */
  .btn-nav {
    @apply inline-flex items-center gap-1.5 px-5 py-2 rounded-[10px] border-none
           text-[13px] font-bold cursor-pointer no-underline
           bg-gradient-accent text-gray-900
           shadow-[0_4px_20px_rgba(245,158,11,0.25)]
           transition-all duration-200
           hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(245,158,11,0.25)]
           hover:text-gray-900;
  }

  /* Glass card used by payment / error pages */
  .card-glass {
    @apply max-w-xl mx-auto mt-28 mb-16
           bg-brand-card backdrop-blur-2xl
           border border-subtle rounded-2xl
           p-10 shadow-[0_20px_60px_rgba(0,0,0,0.3)];
  }

  /* Alert boxes */
  .alert {
    @apply p-5 rounded-[14px] mb-5 border-l-4;
  }
  .alert-success {
    @apply bg-emerald-500/[.08] border-ok text-emerald-300;
  }
  .alert-warning {
    @apply bg-amber-500/[.08] border-accent text-amber-200;
  }
  .alert-error {
    @apply bg-red-500/[.08] border-red-500 text-red-300;
  }
  .alert-info {
    @apply bg-indigo-500/[.08] border-accent2 text-indigo-300;
  }

  /* Section label (eyebrow) */
  .section-label {
    @apply inline-flex items-center gap-1.5
           text-xs font-bold uppercase tracking-[2px]
           text-accent mb-3;
  }

  /* Service / feature card */
  .feature-card {
    @apply bg-brand-card backdrop-blur-lg
           border border-subtle rounded-2xl p-9
           transition-all duration-300
           hover:-translate-y-1.5 hover:border-amber-500/[.15]
           hover:shadow-[0_20px_60px_rgba(0,0,0,0.3)];
  }

  /* Step number circle */
  .step-circle {
    @apply w-[72px] h-[72px] rounded-full
           flex items-center justify-center
           bg-brand-card border-2 border-subtle
           text-2xl font-extrabold text-accent
           mx-auto mb-4 relative z-10
           transition-all duration-300;
  }

  /* Contact info item */
  .contact-item {
    @apply flex items-start gap-4 p-5 rounded-[14px]
           bg-brand-card border border-subtle;
  }

  /* Form input (dark) */
  .input-dark {
    @apply w-full px-4 py-3 rounded-[10px]
           bg-white/[.04] border border-subtle
           text-slate-200 text-sm font-sans
           transition-colors duration-200
           focus:outline-none focus:border-accent;
  }
}