@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
  --ts-bg:      #0D0F14;
  --ts-surface: #13161E;
  --ts-border:  #1E2330;
  --ts-accent:  #5B6EF5;
  --ts-text:    #E8EAF0;
  --ts-muted:   #6B7280;
}

* { box-sizing: border-box; }

html, body {
  background: var(--ts-bg);
  color: var(--ts-text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ts-bg); }
::-webkit-scrollbar-thumb { background: var(--ts-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ts-muted); }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--ts-accent);
  outline-offset: 2px;
}

@layer components {
  .ts-card {
    @apply bg-ts-surface border border-ts-border rounded-lg shadow-card;
  }
  .ts-btn-primary {
    @apply bg-ts-accent hover:bg-ts-accent-hover text-white font-medium px-4 py-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .ts-btn-ghost {
    @apply hover:bg-ts-border text-ts-text-secondary hover:text-ts-text px-3 py-2 rounded transition-colors;
  }
  .ts-input {
    @apply w-full bg-ts-bg border border-ts-border rounded px-3 py-2 text-ts-text placeholder:text-ts-muted focus:outline-none focus:border-ts-accent transition-colors;
  }
  .ts-label {
    @apply text-sm font-medium text-ts-text-secondary mb-1 block;
  }
  .ts-badge-active {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-400;
  }
  .ts-badge-disabled {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-500/10 text-red-400;
  }
  .ts-badge-role {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
  }
}