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

:root {
  --brand-dark:   #0A0F1E;
  --brand-mid:    #1A2340;
  --accent:       #3B6FE8;
  --accent-dark:  #2451C4;
  --accent-light: #EBF0FD;
  --success:      #12B76A;
  --warning:      #F59E0B;
  --danger:       #EF4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: #F8F9FC; color: #1E2A47; }

@layer components {
  .btn-primary {
    @apply bg-accent text-white font-medium px-5 py-2.5 rounded-lg hover:bg-accent-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-outline {
    @apply bg-transparent text-accent border border-accent font-medium px-5 py-2.5 rounded-lg hover:bg-accent-light transition-colors;
  }
  .btn-dark {
    @apply bg-brand-dark text-white font-medium px-5 py-2.5 rounded-lg hover:bg-brand-mid transition-colors;
  }
  .btn-ghost {
    @apply bg-neutral-100 text-neutral-600 border border-neutral-200 px-5 py-2.5 rounded-lg hover:bg-neutral-200 transition-colors;
  }
  .card {
    @apply bg-white rounded-xl border border-neutral-200 shadow-sm;
  }
  .input {
    @apply w-full border border-neutral-200 rounded-lg px-4 py-2.5 text-sm text-neutral-800 focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition;
  }
  .label {
    @apply block text-sm font-medium text-neutral-600 mb-1.5;
  }
  .badge-verified { @apply inline-flex items-center gap-1 bg-accent-light text-accent text-xs font-medium px-2.5 py-0.5 rounded-full; }
  .badge-skilled  { @apply inline-flex items-center gap-1 bg-amber-100 text-amber-700 text-xs font-medium px-2.5 py-0.5 rounded-full; }
  .badge-trusted  { @apply inline-flex items-center gap-1 bg-green-100 text-green-700 text-xs font-medium px-2.5 py-0.5 rounded-full; }
  .badge-elite    { @apply inline-flex items-center gap-1 bg-brand-dark text-white text-xs font-medium px-2.5 py-0.5 rounded-full; }
  .status-pending    { @apply text-xs font-medium bg-amber-100 text-amber-700 px-2.5 py-0.5 rounded-full; }
  .status-confirmed  { @apply text-xs font-medium bg-accent-light text-accent px-2.5 py-0.5 rounded-full; }
  .status-in_progress{ @apply text-xs font-medium bg-blue-100 text-blue-700 px-2.5 py-0.5 rounded-full; }
  .status-completed  { @apply text-xs font-medium bg-green-100 text-green-700 px-2.5 py-0.5 rounded-full; }
  .status-disputed   { @apply text-xs font-medium bg-red-100 text-red-700 px-2.5 py-0.5 rounded-full; }
  .status-cancelled  { @apply text-xs font-medium bg-neutral-100 text-neutral-500 px-2.5 py-0.5 rounded-full; }
}