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

@layer base {
  * {
    @apply box-border;
  }

  html,
  body,
  #root {
    @apply m-0 min-h-full w-full min-w-80;
  }

  body {
    @apply bg-canvas font-sans text-ink;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }
}

@layer components {
  .section-card {
    @apply rounded-lg;
  }

  .page-stack {
    @apply flex flex-col gap-4;
  }

  .modal-actions {
    @apply mt-6 flex justify-end gap-3;
  }

  .form-label {
    @apply mb-2 text-sm font-medium text-[#4e5969];
  }

  .form-help {
    @apply -mt-3 mb-[18px] text-[13px] leading-[1.6] text-muted;
  }
}