@import "tailwindcss";

/* Brand fonts */
@theme {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Brand colors */
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #b9e6fe;
  --color-brand-300: #7cd4fd;
  --color-brand-400: #36bffa;
  --color-brand-500: #0ba5ec;
  --color-brand-600: #0077cc;
  --color-brand-700: #005fa3;
  --color-brand-800: #054985;
  --color-brand-900: #0a3d6e;

  --color-accent-50: #ecfdf5;
  --color-accent-100: #d1fae5;
  --color-accent-200: #a7f3d0;
  --color-accent-300: #6ee7b7;
  --color-accent-400: #34d399;
  --color-accent-500: #10b981;
  --color-accent-600: #059669;
  --color-accent-700: #047857;
  --color-accent-800: #065f46;
  --color-accent-900: #064e3b;

  /* Dark surfaces */
  --color-surface: #0a0f1a;
  --color-surface-alt: #111827;
  --color-surface-elevated: #1e293b;

  /* Light surfaces — brand-tinted whites instead of stock grays */
  --color-surface-light: #fafbfe;
  --color-surface-light-alt: #f4f6fb;
  --color-surface-light-elevated: #edf1f8;
  --color-border-light: #dfe4ef;
}

/* Status badges */
.status-badge {
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
}
.status-done {
  @apply bg-emerald-50 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400;
}
.status-in_progress {
  @apply bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400;
}
.status-blocked {
  @apply bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-400;
}
.status-draft {
  @apply bg-surface-light-elevated text-gray-600 dark:bg-gray-800/50 dark:text-gray-400;
}
.status-todo {
  @apply bg-amber-50 text-amber-700 dark:bg-amber-900/50 dark:text-amber-400;
}
.status-deprecated {
  @apply bg-surface-light-elevated text-gray-500 dark:bg-gray-800/50 dark:text-gray-500 line-through;
}

/* Gradient text utility */
.gradient-text {
  @apply bg-gradient-to-r from-accent-500 to-cyan-400 bg-clip-text text-transparent;
}

/* Spec rendered content prose */
.spec-prose :where(p) {
  @apply my-3 text-sm leading-relaxed;
}
.spec-prose :where(code) {
  @apply px-1.5 py-0.5 rounded text-xs font-mono bg-surface-light-elevated dark:bg-slate-800;
}
.spec-prose :where(pre) {
  @apply my-4 p-4 rounded-lg bg-surface-light-elevated dark:bg-slate-800 overflow-x-auto;
}
.spec-prose :where(pre code) {
  @apply bg-transparent p-0;
}
.spec-prose :where(h1, h2, h3, h4) {
  @apply font-semibold mt-6 mb-3;
}
.spec-prose :where(ul, ol) {
  @apply my-3 pl-5;
}
.spec-prose :where(ul) {
  @apply list-disc;
}
.spec-prose :where(ol) {
  @apply list-decimal;
}
.spec-prose :where(li) {
  @apply my-1 text-sm;
}
.spec-prose :where(a) {
  @apply text-brand-600 dark:text-brand-400 hover:underline;
}
.spec-prose :where(blockquote) {
  @apply border-l-4 border-border-light dark:border-slate-600 pl-4 italic text-gray-600 dark:text-gray-400 my-3;
}
.spec-prose :where(table) {
  @apply w-full border-collapse my-4 text-sm;
}
.spec-prose :where(th) {
  @apply text-left font-semibold p-2 border-b-2 border-border-light dark:border-slate-700;
}
.spec-prose :where(td) {
  @apply p-2 border-b border-border-light/60 dark:border-slate-800;
}

/* Section transition animations */
.section-move {
  transition: transform 0.3s ease;
}
.section-enter-active {
  transition: all 0.3s ease;
}
.section-leave-active {
  transition: all 0.2s ease;
}
.section-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}
.section-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* Drag ghost overlays */
.section-ghost {
  @apply bg-brand-100/40 border-2 border-dashed border-brand-300 rounded-lg;
}
.dark .section-ghost {
  @apply bg-brand-900/20 border-brand-700;
}
.ac-ghost {
  @apply bg-brand-100/30 rounded;
}
.dark .ac-ghost {
  @apply bg-brand-900/15;
}

/* Section body collapse animation */
.collapse-enter-active,
.collapse-leave-active {
  transition: max-height 0.25s ease, opacity 0.25s ease;
  overflow: hidden;
}
.collapse-enter-from,
.collapse-leave-to {
  max-height: 0;
  opacity: 0;
}
.collapse-enter-to,
.collapse-leave-from {
  max-height: 2000px;
  opacity: 1;
}

/* Focused section card ring */
.section-card-focused {
  @apply ring-2 ring-accent-500/30;
}

/* Search highlight */
mark {
  @apply bg-yellow-200 dark:bg-yellow-700/50 text-inherit rounded-sm px-0.5;
}
