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

:root {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ============================================================ */
/* 🎨 CENTRAL DESIGN SYSTEM (UI/UX RULEBOOK)                    */
/* ============================================================ */

/* 1. BUTTON STYLES */
.btn-primary {
  @apply px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white font-bold rounded-2xl transition-all duration-200 shadow-sm disabled:opacity-40 cursor-pointer text-sm;
}

.btn-secondary {
  @apply px-4 py-2.5 bg-slate-100 hover:bg-slate-200 active:scale-95 text-slate-700 font-semibold rounded-2xl transition-all duration-200 cursor-pointer text-sm;
}

.btn-ai {
  @apply px-4 py-2 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 hover:opacity-95 active:scale-95 text-white font-extrabold rounded-xl shadow-md transition-all duration-200 disabled:opacity-40 cursor-pointer text-xs flex items-center gap-1.5;
}

.btn-danger {
  @apply px-3 py-1.5 bg-rose-50 hover:bg-rose-100 text-rose-600 border border-rose-200 font-bold rounded-xl transition-all duration-200 cursor-pointer text-xs;
}

.btn-success {
  @apply px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 active:scale-95 text-white font-bold rounded-2xl transition-all duration-200 shadow-md text-sm cursor-pointer;
}

/* 2. CARDS & CANVAS */
.card-canvas {
  @apply bg-white p-6 sm:p-8 rounded-3xl border border-slate-200/80 shadow-xs hover:shadow-md transition-all duration-300;
}

.card-editable {
  @apply bg-white p-6 rounded-3xl border border-slate-200 shadow-sm relative transition-all duration-200 hover:border-indigo-300;
}

/* 3. INPUTS & TEXTAREAS */
.input-modern {
  @apply w-full p-3 border border-slate-200 rounded-2xl bg-slate-50/50 focus:bg-white focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition text-sm font-medium text-slate-800;
}

/* 4. BADGES & PILLS */
.badge-indigo {
  @apply px-3 py-1 bg-indigo-50 text-indigo-700 font-extrabold text-xs rounded-full uppercase tracking-wider;
}

.badge-emerald {
  @apply px-3 py-1 bg-emerald-50 text-emerald-700 font-extrabold text-xs rounded-full uppercase tracking-wider;
}

/* 5. MODALS & BACKDROPS */
.modal-backdrop {
  @apply fixed inset-0 bg-slate-900/60 backdrop-blur-md z-50 flex items-center justify-center p-4;
}

.modal-box {
  @apply bg-white rounded-3xl max-w-lg w-full p-6 sm:p-8 space-y-6 shadow-2xl border border-slate-100;
}