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

:root {
  color-scheme: light dark;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

html, body, #__next {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(11, 140, 255, 0.08), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(124, 92, 255, 0.08), transparent 55%),
    #f8fafc;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}

@layer components {
  .asf-card {
    @apply bg-white/90 backdrop-blur border border-slate-200/80 rounded-xl shadow-card;
  }
  .asf-card-header {
    @apply flex items-center justify-between px-5 py-4 border-b border-slate-100;
  }
  .asf-card-title {
    @apply font-semibold text-slate-800 text-sm tracking-tight;
  }
  .asf-card-body {
    @apply p-5;
  }
  .asf-btn {
    @apply inline-flex items-center justify-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium
           transition-colors border border-transparent;
  }
  .asf-btn-primary {
    @apply asf-btn bg-brand-600 text-white hover:bg-brand-700 focus:ring-2 focus:ring-brand-300;
  }
  .asf-btn-secondary {
    @apply asf-btn bg-white text-slate-700 border-slate-200 hover:bg-slate-50;
  }
  .asf-btn-ghost {
    @apply asf-btn text-slate-600 hover:bg-slate-100;
  }
  .asf-input {
    @apply w-full px-3 py-2 rounded-lg text-sm bg-white border border-slate-200
           focus:border-brand-400 focus:ring-2 focus:ring-brand-200 outline-none;
  }
  .asf-nav-item {
    @apply flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium
           text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-colors;
  }
  .asf-nav-item-active {
    @apply bg-brand-50 text-brand-700 hover:bg-brand-50 hover:text-brand-800
           ring-1 ring-inset ring-brand-100;
  }
  .asf-chip {
    @apply inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5
           rounded-full border border-slate-200 bg-slate-50 text-slate-600;
  }
  .asf-monospace {
    font-family: "JetBrains Mono", Menlo, ui-monospace, monospace;
  }
}

/* React Flow theme tweaks */
.react-flow__attribution {
  display: none;
}
.react-flow__node {
  font-size: 12px;
  padding: 0;
}
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 20px -8px rgba(15,23,42,0.10);
}

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }