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

@layer base {
  :root {
    --brand: #E63946;
  }

  body {
    @apply bg-gray-50 text-gray-900 antialiased;
    font-family: system-ui, -apple-system, sans-serif;
  }

  * {
    @apply border-gray-200;
  }

  h1, h2, h3, h4 {
    font-family: 'Syne', system-ui, sans-serif;
  }
}

@layer components {
  .sidebar-link {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900;
  }

  .sidebar-link-active {
    @apply bg-brand-50 text-brand-600 border-l-[3px] border-brand-500 rounded-l-none;
  }

  .stat-card {
    @apply rounded-lg border bg-white p-6;
  }

  .data-table th {
    @apply bg-gray-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 border-b-2 border-gray-200;
  }

  .data-table td {
    @apply px-4 py-3 text-sm text-gray-700;
  }

  .data-table tr {
    @apply border-b border-gray-100 last:border-0;
  }

  .data-table tr:hover td {
    @apply bg-gray-50/70;
  }
}