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

html {
  background: #f6f8f7;
  color: #17211f;
}

body {
  margin: 0;
  min-height: 100vh;
  font-feature-settings: "tnum";
  overflow-x: hidden;
}

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

@layer components {
  .field {
    @apply w-full rounded-md border border-line bg-white px-4 py-2.5 text-sm outline-none transition focus:border-brand-600 focus:ring-2 focus:ring-brand-100;
  }

  .label {
    @apply mb-1 block text-xs font-medium text-muted;
  }

  .btn-primary {
    @apply inline-flex min-h-11 items-center justify-center rounded-md bg-brand-700 px-4 py-2.5 text-sm font-semibold text-white shadow-soft transition active:scale-[0.99];
  }

  .btn-secondary {
    @apply inline-flex min-h-10 items-center justify-center rounded-md border border-line bg-white px-3 py-2 text-xs font-semibold text-ink transition active:scale-[0.99];
  }

  .segmented {
    @apply grid grid-cols-2 rounded-md border border-line bg-white p-1;
  }

  .segmented-button {
    @apply rounded px-3 py-2 text-xs font-semibold text-muted transition;
  }

  .segmented-button-active {
    @apply bg-ink text-white;
  }
}