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

@layer base {
  html { @apply bg-bg text-ink; }
  body { @apply font-sans antialiased; }
  ::selection { @apply bg-accent/30; }
}

@layer components {
  .btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed; }
  .btn-primary { @apply btn bg-accent text-black hover:bg-accent2; }
  .btn-ghost { @apply btn text-mute hover:bg-surface hover:text-white; }
  .container-narrow { @apply max-w-3xl mx-auto px-4; }
  .container-wide { @apply max-w-6xl mx-auto px-4; }
  .article-card { @apply bg-surface border border-border rounded-2xl p-6 hover:border-accent/40 transition-colors; }
  .tag { @apply inline-block text-xs px-2.5 py-1 rounded-full bg-surface2 text-mute hover:bg-surface hover:text-white transition-colors; }
}