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

@layer base {
  h1, h2, h3, h4 { @apply font-serif font-medium tracking-tight; }
  h1 { @apply text-3xl; }
  h2 { @apply text-xl; }
  h3 { @apply text-base font-semibold; }
  code { @apply font-mono text-[0.85em]; }
}

@layer components {
  .card {
    @apply bg-surface border border-border rounded-xl p-5;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2
           bg-accent hover:bg-accent-dark text-white font-semibold text-sm
           rounded-lg px-4 py-2 transition-colors
           shadow-[0_1px_2px_rgba(201,100,66,0.15)];
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2
           bg-surface border border-border hover:border-accent text-ink
           font-medium text-sm rounded-lg px-4 py-2 transition-colors;
  }
  .input {
    @apply w-full bg-elevated border border-border text-ink rounded-lg
           px-3 py-2 text-sm placeholder:text-subtle
           focus:border-accent focus:outline-none focus:ring-[3px]
           focus:ring-accent/20 transition;
  }
  .label {
    @apply text-xs font-medium text-muted tracking-wide mb-1.5 block;
  }
  .chip {
    @apply inline-block px-2 py-0.5 rounded border font-mono text-[0.78rem]
           font-medium;
  }
  .kbd {
    @apply inline-block px-1.5 py-0.5 rounded border border-border bg-elevated
           font-mono text-xs text-muted;
  }
}