@import "tailwindcss";

@theme {
  --color-surface-950: #070a0f;
  --color-surface-900: #0f1117;
  --color-surface-800: #161b27;
  --color-surface-700: #1e2535;
  --color-surface-600: #28334a;
  --color-surface-500: #334155;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

html {
  background-color: #0f1117;
  color: #e2e8f0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #161b27; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Glass card */
.glass {
  background: rgba(22, 27, 39, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Route badge colors */
.badge-auto   { background: rgba(34,197,94,0.15);  color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.badge-ask    { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.badge-verify { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.badge-ignore { background: rgba(107,114,128,0.15);color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }

/* Animations */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in-up 0.18s ease-out; }

@keyframes slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-slide-in { animation: slide-in 0.2s ease-out; }

@keyframes row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-row-in {
  animation: row-in 0.25s ease-out both;
}