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

@layer base {
  html {
    @apply font-body text-neutral-900 bg-page antialiased;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply text-base leading-relaxed;
  }

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

  /* Focus visible — accessibility */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary-600 rounded-sm;
  }

  /* Selection color */
  ::selection {
    @apply bg-primary-100 text-primary-900;
  }
}

@layer components {
  /* Butoane */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl
           font-heading font-semibold text-sm
           px-6 py-3
           transition-all duration-200 ease-out
           focus-visible:outline-2 focus-visible:outline-offset-2;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white
           hover:bg-primary-700
           focus-visible:outline-primary-600
           shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply btn bg-secondary-500 text-white
           hover:bg-secondary-600
           focus-visible:outline-secondary-500;
  }

  .btn-outline {
    @apply btn border-2 border-white/30 text-white
           hover:bg-white/10
           focus-visible:outline-white;
  }

  .btn-ghost {
    @apply btn text-primary-600
           hover:bg-primary-50
           focus-visible:outline-primary-600;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white
           hover:bg-red-700
           focus-visible:outline-red-600
           shadow-sm hover:shadow-md;
  }

  .btn-sm {
    @apply text-xs px-4 py-2 rounded-lg;
  }

  /* Card produs */
  .product-card {
    @apply bg-white rounded-xl border border-neutral-200
           overflow-hidden
           shadow-card
           transition-all duration-200 ease-out
           hover:shadow-card-hover hover:-translate-y-1
           hover:border-primary-200;
  }

  /* Category pill */
  .category-pill {
    @apply inline-flex items-center gap-1.5
           px-3 py-1 rounded-full
           text-xs font-medium
           bg-primary-50 text-primary-700
           transition-colors duration-150
           hover:bg-primary-100;
  }

  .category-pill-active {
    @apply bg-primary-600 text-white hover:bg-primary-700;
  }

  /* Badge status */
  .badge {
    @apply inline-flex items-center gap-1
           px-2 py-0.5 rounded-full
           text-xs font-semibold uppercase tracking-wider;
  }

  .badge-demo {
    @apply badge bg-emerald-50 text-emerald-700
           border border-emerald-200;
  }

  .badge-listed {
    @apply badge bg-primary-50 text-primary-700
           border border-primary-200;
  }

  /* Threshold badge — 25+ votes, product requested */
  .threshold-badge {
    @apply inline-flex items-center gap-1
           px-2.5 py-0.5 rounded-full
           text-xs font-semibold
           bg-orange-50 text-orange-700
           border border-orange-200;
  }

  /* Priority badge — 50+ votes, high priority */
  .priority-badge {
    @apply inline-flex items-center gap-1
           px-2.5 py-0.5 rounded-full
           text-xs font-semibold
           bg-red-50 text-red-700
           border border-red-200;
  }

  /* Stat card */
  .stat-card {
    @apply bg-white rounded-xl border border-neutral-200
           p-6 text-center
           shadow-card;
  }

  .stat-card .stat-value {
    @apply text-3xl font-heading font-bold text-neutral-900 mb-1;
  }

  .stat-card .stat-label {
    @apply text-sm text-neutral-500;
  }

  /* Input field */
  .input-field {
    @apply w-full rounded-xl border border-neutral-300
           bg-white px-4 py-3
           text-sm text-neutral-900 placeholder:text-neutral-400
           transition-all duration-150
           focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20
           focus:outline-none;
  }

  /* Textarea field */
  .textarea-field {
    @apply w-full rounded-xl border border-neutral-300
           bg-white px-4 py-3
           text-sm text-neutral-900 placeholder:text-neutral-400
           transition-all duration-150
           focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20
           focus:outline-none
           resize-y min-h-[120px];
  }

  /* Progress bar */
  .progress-bar {
    @apply w-full h-2 bg-neutral-100 rounded-full overflow-hidden;
  }

  .progress-bar .progress-fill {
    @apply h-full bg-primary-600 rounded-full transition-all duration-300 ease-out;
  }

  /* Section wrapper */
  .section {
    @apply px-4 sm:px-6 lg:px-8 py-20 lg:py-32;
  }

  .section-content {
    @apply max-w-content mx-auto;
  }

  /* Hero gradient mesh background */
  .hero-mesh {
    @apply relative overflow-hidden bg-gradient-hero;
  }

  .hero-mesh::before {
    content: '';
    @apply absolute inset-0;
    background:
      radial-gradient(ellipse 80% 50% at 20% 80%, rgba(59, 130, 246, 0.3) 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(37, 99, 235, 0.4) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 50% 50%, rgba(30, 58, 95, 0.2) 0%, transparent 80%);
    animation: meshFloat 20s ease-in-out infinite alternate;
  }

  @keyframes meshFloat {
    0% { background-position: 0% 0%, 100% 0%, 50% 50%; }
    100% { background-position: 20% 20%, 80% 30%, 40% 60%; }
  }
}

/* View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}
