@import 'tailwindcss';

@theme {
  --color-brand-950: #0a1628;
  --color-brand-900: #0f2035;
  --color-brand-800: #152d45;
  --color-brand-700: #1a4558;
  --color-brand-600: #1f6b6b;
  --color-brand-500: #2a8585;
  --color-brand-400: #4a9e9e;
  --color-brand-100: #e8f2f2;
  --color-brand-50: #f4f9f9;
  --color-surface: #fafbfc;
  --color-muted: #64748b;
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  @apply bg-surface text-brand-900 antialiased;
  font-family: var(--font-sans);
}

/* Auth pages */
.auth-page {
  @apply min-h-screen flex items-center justify-center px-4 bg-brand-50;
}

.auth-card {
  @apply w-full max-w-md bg-white rounded-xl border border-brand-100 shadow-sm p-8;
}

/* Forms */
.input {
  @apply w-full border border-slate-200 rounded-lg px-3 py-2 text-sm
         text-brand-900 placeholder:text-slate-400
         focus:outline-none focus:ring-2 focus:ring-brand-600/30 focus:border-brand-600
         transition-colors;
}

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

.btn-primary-full {
  @apply bg-brand-700 text-white text-sm font-medium w-full py-2.5 rounded-lg
         hover:bg-brand-800 disabled:opacity-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;
}

/* Layout */
.page-content {
  @apply max-w-4xl mx-auto;
}

.page-title {
  @apply text-xl font-semibold text-brand-900 mb-1;
}

.page-subtitle {
  @apply text-sm text-muted mb-6;
}

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

.card-body {
  @apply p-5;
}

.form-card {
  @apply bg-white rounded-xl border border-slate-200/80 shadow-sm p-5 space-y-3 mb-6;
}

.list-card {
  @apply bg-white rounded-xl border border-slate-200/80 shadow-sm p-5 space-y-1;
}

.stat-card {
  @apply bg-white rounded-xl border border-slate-200/80 shadow-sm p-5;
}

.stat-card h2 {
  @apply text-sm font-semibold text-brand-700 mb-3;
}

.stat-card p {
  @apply text-sm text-slate-600;
}

.alert-success {
  @apply mb-4 text-sm text-brand-700 bg-brand-50 border border-brand-100 rounded-lg px-3 py-2;
}

.alert-error {
  @apply mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2;
}

.nav-link {
  @apply block rounded-lg px-3 py-2 text-sm font-medium text-slate-400
         hover:bg-brand-800/60 hover:text-white transition-colors;
}

.nav-link-active {
  @apply bg-brand-700 text-white;
}
