@import 'tailwindcss';

@theme {
  --color-brand-950: #071a1f;
  --color-brand-900: #0c2a32;
  --color-brand-800: #0f3d3a;
  --color-brand-700: #115e59;
  --color-brand-600: #0d9488;
  --color-brand-500: #14b8a6;
  --color-brand-100: #ccfbf1;
  --color-brand-50: #f0fdfa;
  --color-surface: #f4f8f7;
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@layer base {
  body {
    @apply bg-surface text-slate-800 font-sans antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply bg-brand-700 text-white text-sm font-medium px-4 py-2 rounded-md
      hover:bg-brand-800 disabled:opacity-50 transition-colors;
  }

  .btn-secondary {
    @apply text-sm font-medium text-brand-800 border border-brand-700/30 rounded-md
      px-3 py-2 hover:bg-brand-50 transition-colors;
  }

  .btn-ghost {
    @apply text-sm font-medium text-brand-600 hover:text-brand-800 transition-colors;
  }

  .btn-danger {
    @apply text-sm font-medium text-red-600 hover:text-red-700 transition-colors;
  }

  .input {
    @apply w-full border border-slate-200 rounded-md px-3 py-2 text-sm
      focus:outline-none focus:ring-2 focus:ring-brand-500/40 focus:border-brand-600;
  }

  .card {
    @apply bg-white border border-slate-200/80 rounded-lg shadow-sm;
  }

  .alert-success {
    @apply text-sm text-brand-800 bg-brand-50 border border-brand-100 rounded-md px-3 py-2;
  }

  .alert-error {
    @apply text-sm text-red-700 bg-red-50 border border-red-100 rounded-md px-3 py-2;
  }
}
