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

:root {
  --accent: 99 102 241; /* overridden per project */
  --surface: 248 250 252;
  --panel: 255 255 255;
  --line: 226 232 240;
  --ink: 15 23 42;
  --muted: 100 116 139;
}

.dark {
  --surface: 10 14 24;
  --panel: 17 23 38;
  --line: 38 48 70;
  --ink: 236 242 250;
  --muted: 138 152 176;
}

html {
  scroll-behavior: smooth;
}

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

/* ---------- reusable primitives ---------- */
.card {
  @apply bg-panel border border-line rounded-2xl shadow-card;
}

.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-all duration-150 cursor-pointer select-none disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-primary {
  @apply btn text-white shadow-card;
  background: rgb(var(--accent));
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-ghost {
  @apply btn border border-line bg-panel hover:bg-surface;
}
.btn-danger {
  @apply btn bg-red-500 text-white hover:bg-red-600;
}

.input {
  @apply w-full rounded-xl border border-line bg-panel px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted;
}
.input:focus {
  box-shadow: 0 0 0 3px rgb(var(--accent) / 0.25);
  border-color: rgb(var(--accent));
}

.label {
  @apply block text-xs font-semibold uppercase tracking-wide text-muted mb-1.5;
}

.chip {
  @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold;
}

.table-base {
  @apply w-full text-sm;
}
.table-base th {
  @apply text-left text-xs font-semibold uppercase tracking-wide text-muted px-4 py-3 border-b border-line whitespace-nowrap;
}
.table-base td {
  @apply px-4 py-3.5 border-b border-line align-middle;
}
.table-base tbody tr {
  @apply transition-colors;
}
.table-base tbody tr:hover {
  background: rgb(var(--accent) / 0.045);
}
.row-click {
  @apply cursor-pointer;
}

/* markdown-ish rendering for KB + chat */
.prose-lite h1, .prose-lite h2, .prose-lite h3 {
  @apply font-bold mt-5 mb-2;
}
.prose-lite h1 { @apply text-2xl; }
.prose-lite h2 { @apply text-xl; }
.prose-lite h3 { @apply text-lg; }
.prose-lite p { @apply my-2.5 leading-relaxed; }
.prose-lite ul { @apply list-disc pl-5 my-2 space-y-1; }
.prose-lite ol { @apply list-decimal pl-5 my-2 space-y-1; }
.prose-lite strong { @apply font-semibold; }
.prose-lite code {
  @apply px-1.5 py-0.5 rounded-md text-[0.85em];
  background: rgb(var(--accent) / 0.1);
  color: rgb(var(--accent));
}
.prose-lite a { color: rgb(var(--accent)); text-decoration: underline; }

/* gradient hero text */
.gradient-text {
  background: linear-gradient(120deg, rgb(var(--accent)), rgb(var(--accent) / 0.55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* thin scrollbars for chat */
.thin-scroll::-webkit-scrollbar { width: 6px; }
.thin-scroll::-webkit-scrollbar-thumb {
  background: rgb(var(--muted) / 0.35);
  border-radius: 99px;
}

/* typing dots */
.typing-dot {
  @apply inline-block w-1.5 h-1.5 rounded-full mx-[1.5px] animate-pulseDot;
  background: rgb(var(--muted));
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }