@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');

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

/* ================= BASE TYPO ================= */
@layer base {
  body {
    font-family: 'Inter', system-ui, sans-serif;
    @apply bg-background text-textPrimary antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
  }
}

/* ================= BUTTON SYSTEM ================= */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary text-white rounded-btn hover:bg-primaryHover transition font-medium shadow-sm hover:shadow-hover;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-white text-textPrimary rounded-btn hover:bg-gray-50 border border-border transition font-medium;
  }
  
  .btn-danger {
    @apply px-4 py-2 bg-danger text-white rounded-btn hover:bg-red-700 transition shadow-sm hover:shadow-hover;
  }

  .btn-success {
    @apply px-4 py-2 bg-success text-white rounded-btn hover:bg-green-600 shadow-sm hover:shadow-hover transition font-medium;
  }

  .btn-ghost {
    @apply px-4 py-2 bg-transparent text-primary hover:bg-primary/10 rounded-btn transition font-medium;
  }
}

/* ================= CARD ================= */
.card {
  @apply bg-card rounded-card shadow-card border border-border p-6 hover:-translate-y-1 transition-transform duration-300;
}

/* ================= BADGE ================= */
.badge-success { @apply bg-success/10 text-success px-2.5 py-1 text-xs rounded-badge font-medium border border-success/20; }
.badge-warning { @apply bg-warning/10 text-warning px-2.5 py-1 text-xs rounded-badge font-medium border border-warning/20; }
.badge-danger  { @apply bg-danger/10  text-danger  px-2.5 py-1 text-xs rounded-badge font-medium border border-danger/20; }
.badge-info    { @apply bg-primary/10 text-primary px-2.5 py-1 text-xs rounded-badge font-medium border border-primary/20; }

/* ================= FORM ================= */
.input {
  @apply w-full border border-border rounded-input px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary outline-none bg-white text-textPrimary transition-all duration-200;
}
.label {
  @apply text-sm font-medium text-textPrimary mb-1.5 block;
}

/* ================= TABLE ================= */
.table {
  @apply w-full text-sm border-collapse bg-white rounded-card overflow-hidden;
}
.table th {
  @apply bg-background text-textSecondary font-semibold text-left px-4 py-3 sticky top-0 uppercase tracking-wider text-xs;
}
.table td {
  @apply border-b border-border px-4 py-3 text-textPrimary;
}
.table tr:hover {
  @apply bg-gray-50/50;
}

/* ================= SIDEBAR ================= */
.sidebar-link {
  @apply flex items-center gap-3 px-4 py-3 rounded-btn text-sm font-medium text-textSecondary hover:bg-primary/5 hover:text-primary transition-all duration-200;
}
.sidebar-link.active {
  @apply bg-primary/10 text-primary font-semibold border-r-4 border-primary;
}
.sidebar-section {
  @apply text-xs uppercase font-bold tracking-wider text-muted px-4 mt-6 mb-3;
}

/* ================= ANIMATIONS ================= */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.995); }
}
.animate-pulse-subtle {
  animation: pulse-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

