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

@layer base {
  html {
    color-scheme: dark;
    scroll-behavior: smooth;
  }
  body {
    @apply bg-ink-950 text-slate-100 antialiased;
  }
  ::selection {
    @apply bg-accent/30;
  }
}

@layer components {
  .card {
    @apply rounded-xl border border-ink-700/60 bg-ink-900/70 p-6 shadow-sm;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold text-ink-950 transition hover:bg-accent-muted disabled:opacity-50;
  }
  .btn-ghost {
    @apply inline-flex items-center justify-center rounded-md border border-ink-700 bg-transparent px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-ink-800;
  }
  .field-label {
    @apply mb-1 block text-xs font-medium uppercase tracking-wide text-slate-400;
  }
  .field-input {
    @apply w-full rounded-md border border-ink-700 bg-ink-800 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30;
  }
  .stat-num {
    @apply font-mono text-xl tabular-nums text-accent;
  }
  .prose-soft {
    @apply text-slate-300 leading-relaxed;
  }
  .prose-soft h2 {
    @apply mt-10 mb-3 text-2xl font-semibold text-slate-100;
  }
  .prose-soft h3 {
    @apply mt-6 mb-2 text-lg font-semibold text-slate-100;
  }
  .prose-soft a {
    @apply text-accent underline-offset-2 hover:underline;
  }
  .prose-soft p {
    @apply mb-4;
  }
}
