@layer base {
  :root {
    color-scheme: dark;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  body {
    font-size: 16px;
  }
}

@layer components {
  .navlink {
    @apply rounded-xl px-3 py-2 text-sm font-semibold text-slate-200 transition hover:bg-white/5 hover:text-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-300;
  }
  .mobilelink {
    @apply w-full rounded-2xl px-4 py-3 text-center text-2xl font-semibold text-slate-50 transition hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-brand-300;
  }
  .footerlink {
    @apply rounded-lg text-slate-200 transition hover:text-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-300;
  }
  .card {
    @apply group rounded-3xl border border-white/10 bg-white/5 p-5 shadow-lg shadow-black/20 transition duration-300 hover:-translate-y-1 hover:bg-white/7 hover:shadow-xl hover:shadow-black/30 focus-within:-translate-y-1;
  }
  .iconpill {
    @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-400/30 to-emerald-400/20 text-brand-200 ring-1 ring-white/10 transition group-hover:scale-[1.03];
  }
}

@layer utilities {
  .bg-white\/7 {
    background-color: rgb(255 255 255 / 0.07);
  }
  .shadow-soft {
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}