@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        font-feature-settings: "cv11", "ss01";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    h1, h2, h3 { letter-spacing: -0.015em; }
}

@layer components {
    .card { @apply bg-white rounded-xl border border-slate-200/80 shadow-sm; }
    .card-header { @apply px-5 py-4 border-b border-slate-100 flex items-center justify-between; }

    .data-table { @apply min-w-full divide-y divide-slate-100; }
    .data-table thead tr { @apply bg-slate-50/70; }
    .data-table thead th { @apply px-4 py-3 text-left text-[11px] font-semibold text-slate-500 uppercase tracking-[0.06em]; }
    .data-table tbody { @apply divide-y divide-slate-50; }
    .data-table tbody tr { @apply hover:bg-slate-50/60 transition-colors; }
    .data-table tbody td { @apply px-4 py-3 text-sm text-slate-700; }

    .badge { @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium; }
    .badge-green  { @apply bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200/60; }
    .badge-yellow { @apply bg-amber-50 text-amber-700 ring-1 ring-amber-200/60; }
    .badge-red    { @apply bg-red-50 text-red-700 ring-1 ring-red-200/60; }
    .badge-blue   { @apply bg-blue-50 text-blue-700 ring-1 ring-blue-200/60; }
    .badge-gray   { @apply bg-slate-100 text-slate-600 ring-1 ring-slate-200/60; }
    .badge-orange { @apply bg-orange-50 text-orange-700 ring-1 ring-orange-200/60; }

    .btn-primary {
        @apply inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg
               hover:bg-emerald-700 active:bg-emerald-800 transition-colors shadow-sm;
    }
    .btn-secondary {
        @apply inline-flex items-center gap-2 px-4 py-2 bg-white text-slate-700 text-sm font-medium rounded-lg
               border border-slate-200 hover:bg-slate-50 hover:border-slate-300 transition-colors shadow-sm;
    }
    .btn-danger {
        @apply inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg
               hover:bg-red-700 active:bg-red-800 transition-colors shadow-sm;
    }
    .form-input {
        @apply w-full rounded-lg border-slate-300 bg-white text-sm text-slate-900
               focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-400 transition-all;
    }
    .form-label { @apply block text-sm font-medium text-slate-700 mb-1.5; }
    .stat-card { @apply bg-white rounded-xl border border-slate-200/80 shadow-sm p-5 overflow-hidden; }
    .stat-card-value { @apply text-2xl font-bold tracking-tight text-slate-900 mt-1; }
    .stat-card-label { @apply text-[13px] font-medium text-slate-500; }
    .page-header-title { @apply text-[22px] font-bold text-slate-900 tracking-tight; }
    .page-header-subtitle { @apply text-sm text-slate-500 mt-1; }
}