@import url("katex/dist/katex.min.css");

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

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    @apply bg-background text-textPrimary font-sans;
    font-feature-settings: "ss01", "cv02", "cv11";
  }

  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-thumb {
    @apply bg-border rounded;
  }
}

@layer components {
  .panel {
    @apply rounded-xl border border-border bg-surface p-5 shadow-sm;
  }
  .panel-muted {
    @apply rounded-xl border border-border bg-surfaceMuted p-5;
  }
  .badge {
    @apply inline-flex items-center gap-1 rounded-full border border-border bg-surfaceMuted px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-textMuted;
  }
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-background transition hover:bg-primaryMuted disabled:cursor-not-allowed disabled:opacity-40;
  }
  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-lg border border-border bg-surfaceMuted px-4 py-2 text-sm font-medium text-textPrimary transition hover:border-textMuted disabled:cursor-not-allowed disabled:opacity-40;
  }
  .heading-eyebrow {
    @apply text-xs font-semibold uppercase tracking-[0.2em] text-textMuted;
  }
}