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

html, body {
  background: #FAFAFA;
  color: #09090B;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
}

.btn {
  @apply inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl text-sm font-medium transition-all;
}
.btn-primary {
  @apply bg-zinc-900 text-white hover:bg-zinc-800 active:scale-[0.98] shadow-sm;
}
.btn-ghost {
  @apply bg-zinc-100 text-zinc-700 hover:bg-zinc-200 active:scale-[0.98];
}
.btn-outline {
  @apply bg-white text-zinc-700 border border-zinc-200 hover:border-zinc-300 hover:bg-zinc-50 active:scale-[0.98];
}

.card {
  @apply bg-white border border-zinc-200/70 rounded-2xl shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_rgba(0,0,0,0.04)];
}
.card-hover {
  @apply transition-shadow hover:shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_24px_rgba(0,0,0,0.06)];
}

.chip {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium;
}
.chip-mock {
  @apply bg-amber-50 text-amber-700 border border-amber-200;
}
.chip-live {
  @apply bg-emerald-50 text-emerald-700 border border-emerald-200;
}

.seg {
  @apply inline-flex p-1 bg-zinc-100 rounded-xl gap-1;
}
.seg-item {
  @apply px-3 py-1.5 rounded-lg text-xs font-medium text-zinc-600 transition-all cursor-pointer;
}
.seg-item-active {
  @apply bg-white text-zinc-900 shadow-sm;
}

.tile {
  @apply relative aspect-square overflow-hidden rounded-2xl bg-zinc-100 border-2 border-transparent ring-1 ring-zinc-200/70 transition-all cursor-pointer;
}
.tile-selected {
  @apply border-zinc-900 ring-0 shadow-[0_4px_16px_rgba(0,0,0,0.12)];
}
.tile-rejected {
  @apply opacity-30 grayscale;
}
.tile-keynum {
  @apply absolute top-2 left-2 w-7 h-7 rounded-lg bg-white/95 backdrop-blur text-[11px] font-semibold text-zinc-700 flex items-center justify-center shadow-sm;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.tile-badge {
  @apply absolute top-2 right-2 w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shadow-sm;
}
.tile-badge-selected {
  @apply bg-zinc-900 text-white;
}
.tile-badge-rejected {
  @apply bg-red-500 text-white;
}

input, textarea {
  font-family: inherit;
}
.field {
  @apply w-full bg-white border border-zinc-200 rounded-xl px-3.5 py-3 text-sm text-zinc-900 placeholder:text-zinc-400 transition-colors focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/5 outline-none resize-none;
}

.kbd {
  @apply inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded bg-white border border-zinc-200 text-[10px] font-medium text-zinc-600 shadow-sm;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
