@import "tailwindcss";

@layer base {
  :root {
    color-scheme: light dark;
  }

  body {
    @apply bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium shadow-sm transition;
    @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900/40;
    @apply dark:focus-visible:outline-slate-100/40;
    @apply bg-slate-900 text-white hover:bg-slate-800;
    @apply dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-white;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium shadow-sm transition;
    @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900/40;
    @apply dark:focus-visible:outline-slate-100/40;
    @apply bg-slate-100 text-slate-900 hover:bg-slate-200;
    @apply dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800;
  }

  .btn-success {
    @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium shadow-sm transition;
    @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-700/40;
    @apply dark:focus-visible:outline-emerald-300/40;
    @apply bg-emerald-600 text-white hover:bg-emerald-700;
    @apply dark:bg-emerald-500 dark:text-slate-950 dark:hover:bg-emerald-400;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium shadow-sm transition;
    @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900/40;
    @apply dark:focus-visible:outline-slate-100/40;
    @apply bg-transparent text-slate-700 shadow-none hover:bg-slate-100;
    @apply dark:text-slate-300 dark:hover:bg-slate-900;
  }

  .card {
    @apply rounded-xl border border-slate-200 bg-white p-6 shadow-sm;
    @apply dark:border-slate-800 dark:bg-slate-950;
  }

  .input {
    @apply block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm;
    @apply placeholder:text-slate-400 focus:border-slate-400 focus:outline-none focus:ring-4 focus:ring-slate-900/10;
    @apply dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:ring-slate-100/10;
  }
}