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

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-gray-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 transition hover:border-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2;
  }

  .btn-accent {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-accent px-6 py-3 text-sm font-medium text-white transition hover:bg-accent-dark focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-red-200 bg-white px-5 py-2.5 text-sm font-medium text-red-600 transition hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-offset-2;
  }

  .field-label {
    @apply block text-sm font-medium text-gray-900 mb-1.5;
  }

  .field-input {
    @apply block w-full rounded-lg border-gray-300 text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-accent focus:ring-accent sm:text-sm;
  }

  .field-hint {
    @apply mt-1.5 text-xs text-gray-500;
  }

  .admin-card {
    @apply rounded-xl border border-gray-200 bg-white shadow-sm;
  }

  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  /* Public careers pages, matched to simplebundles.com */
  .sb-btn {
    @apply inline-flex min-h-[2.75rem] items-center justify-center gap-2 whitespace-nowrap rounded-lg px-5 py-2 text-base font-medium transition duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
  }

  .sb-btn-black {
    @apply sb-btn bg-black text-white hover:bg-charcoal-soft focus-visible:ring-black;
  }

  .sb-btn-white {
    @apply sb-btn bg-white text-black hover:bg-mist focus-visible:ring-white focus-visible:ring-offset-charcoal;
  }

  .sb-btn-outline {
    @apply sb-btn border-[1.5px] border-black text-black hover:bg-black hover:text-white focus-visible:ring-black;
  }

  .sb-btn-outline-white {
    @apply sb-btn border-[1.5px] border-white/80 text-white hover:bg-white hover:text-black focus-visible:ring-white focus-visible:ring-offset-charcoal;
  }

  .sb-eyebrow {
    @apply text-sm font-medium uppercase tracking-[0.08em] text-sb-red;
  }

  .sb-h1 {
    @apply text-[clamp(2.5rem,5vw+1rem,4.5rem)] font-medium leading-[1] tracking-[-0.03em];
  }

  .sb-h2 {
    @apply text-[clamp(2rem,2.5vw+1rem,3rem)] font-medium leading-[1.1] tracking-[-0.02em];
  }

  .sb-chip {
    @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium;
  }

  .sb-label {
    @apply mb-2 block text-base font-medium text-black;
  }

  .sb-input {
    @apply block w-full rounded-lg border-neutral-300 bg-white px-4 py-3 text-base text-black shadow-none transition placeholder:text-neutral-400 hover:border-neutral-400 focus:border-black focus:ring-1 focus:ring-black;
  }

  .sb-hint {
    @apply mt-2 text-sm text-neutral-500;
  }

  .no-scrollbar {
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
}