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

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

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f5f5f5;
    color: #171717;
    line-height: 1.5;
  }

  * {
    border-color: #e5e5e5;
  }

  :focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
  }

  ::selection {
    background-color: #bae6fd;
    color: #0c4a6e;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm;
  }

  .btn-secondary {
    @apply btn bg-white text-surface-700 border border-surface-300 hover:bg-surface-50 active:bg-surface-100;
  }

  .btn-ghost {
    @apply btn text-surface-600 hover:bg-surface-100 active:bg-surface-200;
  }

  .btn-danger {
    @apply btn bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800;
  }

  .card {
    @apply bg-white rounded-xl shadow-sm border border-surface-200 overflow-hidden;
  }

  .input {
    @apply w-full px-3 py-2.5 rounded-lg border border-surface-300 bg-white text-sm text-surface-900 placeholder:text-surface-400 transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .label {
    @apply block text-sm font-medium text-surface-700 mb-1.5;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .skeleton {
    @apply animate-shimmer bg-gradient-to-r from-surface-200 via-surface-300 to-surface-200 bg-[length:200%_100%] rounded-md;
  }
}