@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600;700&family=Syne:wght@700;800&display=swap');

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {
  :root {
    --pink:     #FF3D7F;
    --orange:   #FF8500;
    --gradient: linear-gradient(135deg, #FF3D7F, #FF8500);
    --sidebar-w: 240px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { @apply bg-surface text-gray-900 font-sans antialiased; }
}

@layer components {
  /* ── Brand gradient text ── */
  .text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Brand gradient bg ── */
  .bg-gradient-brand { background: var(--gradient); }

  /* ── Card ── */
  .card {
    @apply bg-white border border-border rounded-2xl shadow-card;
  }
  .card-md {
    @apply bg-white border border-border rounded-3xl shadow-card-md;
  }

  /* ── Btn primary ── */
  .btn-primary {
    @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-full
           font-bold text-sm text-white bg-gradient-brand
           shadow-brand-sm hover:shadow-brand-md hover:-translate-y-px
           transition-all duration-150 cursor-pointer border-0;
  }

  /* ── Btn secondary ── */
  .btn-secondary {
    @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-full
           font-bold text-sm text-gray-800 bg-white
           border border-border hover:border-pink hover:text-pink
           transition-all duration-150 cursor-pointer;
  }

  /* ── Input ── */
  .input {
    @apply w-full px-4 py-2.5 border border-border rounded-xl
           text-sm bg-white text-gray-900
           focus:outline-none focus:border-pink transition-colors;
  }

  /* ── Badge ── */
  .badge        { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold; }
  .badge-green  { @apply badge bg-green-50 text-green-800; }
  .badge-red    { @apply badge bg-red-50 text-red-700; }
  .badge-yellow { @apply badge bg-yellow-50 text-yellow-800; }
  .badge-blue   { @apply badge bg-blue-50 text-blue-800; }
  .badge-grey   { @apply badge bg-gray-100 text-gray-600; }
  .badge-pink   { @apply badge bg-pink-light text-pink; }

  /* ── Table ── */
  .table-base { @apply w-full border-collapse; }
  .table-base th {
    @apply px-4 py-2.5 text-left text-xs font-bold text-muted uppercase tracking-wide
           bg-surface border-b border-border;
  }
  .table-base td {
    @apply px-4 py-3 text-sm border-b border-border;
  }
  .table-base tr:last-child td { @apply border-b-0; }
  .table-base tr:hover td { @apply bg-gray-50; }

  /* ── Sidebar nav item ── */
  .nav-item {
    @apply flex items-center gap-2.5 px-4 py-2 mx-2 rounded-xl
           text-sm font-medium text-muted no-underline
           hover:bg-pink-light hover:text-pink transition-all duration-150;
  }
  .nav-item.active { @apply bg-pink-light text-pink font-bold; }
  .nav-section {
    @apply px-4 pt-4 pb-1 text-[10px] font-bold text-muted uppercase tracking-widest;
  }
}