@import 'tailwindcss';

@theme {
  --color-brand-50: #f0f9f8;
  --color-brand-100: #d5eeec;
  --color-brand-600: #1a7a75;
  --color-brand-700: #156560;
  --color-brand-800: #124f4c;
  --color-brand-900: #0f3d3b;
  --color-brand-950: #0a2a2e;
  --color-accent: #1e5f7a;
  --color-surface: #f3f7f6;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-surface);
  color: #1e293b;
}

@layer components {
  .input-field {
    @apply w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:border-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-600/25;
  }

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

  .btn-secondary {
    @apply rounded-md border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-brand-600/40 hover:text-brand-800;
  }

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

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

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