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

@layer base {
  * {
    @apply border-dark-border;
  }
  body {
    @apply bg-dark-bg text-gray-100;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }
}

@layer components {
  .card {
    @apply bg-dark-surface border border-dark-border rounded-lg p-4;
  }

  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply btn bg-blue-600 hover:bg-blue-700 text-white;
  }

  .btn-success {
    @apply btn bg-green-500 hover:bg-green-600 text-white;
  }

  .btn-danger {
    @apply btn bg-red-500 hover:bg-red-600 text-white;
  }

  .input {
    @apply bg-dark-bg border border-dark-border rounded-md px-3 py-2 text-gray-100
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}
