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

:root {
  color: #172033;
  background: #f7faff;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container-page {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.btn-primary {
  @apply inline-flex h-11 items-center justify-center gap-2 rounded-md bg-brand-600 px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60;
}

.btn-secondary {
  @apply inline-flex h-11 items-center justify-center gap-2 rounded-md border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-brand-200 hover:text-brand-700;
}

.input-field {
  @apply h-11 w-full rounded-md border border-slate-200 bg-white px-3 text-sm outline-none transition focus:border-brand-500 focus:ring-4 focus:ring-brand-100;
}

.panel {
  @apply rounded-lg border border-slate-200 bg-white shadow-sm;
}

.stat-card {
  @apply rounded-lg border border-slate-200 bg-white p-5 shadow-sm;
}