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

@layer base {
  body {
    @apply bg-white text-notion-text antialiased;
  }
}

@layer components {
  /* Notion-style Primary Button */
  .btn-primary {
    @apply inline-flex items-center gap-2 px-3 py-1.5 bg-notion-blue text-white rounded-notion text-small font-medium hover:bg-opacity-90 transition-all duration-150;
  }
  
  /* Notion-style Secondary Button */
  .btn-secondary {
    @apply inline-flex items-center gap-2 px-3 py-1.5 bg-notion-blue-bg text-notion-blue rounded-notion text-small font-medium hover:bg-opacity-80 transition-all duration-150;
  }
  
  /* Notion-style Danger Button */
  .btn-danger {
    @apply inline-flex items-center gap-2 px-3 py-1.5 bg-notion-red text-white rounded-notion text-small font-medium hover:bg-opacity-90 transition-all duration-150;
  }
  
  /* Notion-style Ghost Button */
  .btn-ghost {
    @apply inline-flex items-center gap-2 px-3 py-1.5 text-notion-text rounded-notion text-small font-medium hover:bg-notion-bg-hover transition-all duration-150;
  }
  
  /* Notion-style Card */
  .card {
    @apply bg-white rounded-notion border border-notion-border p-4 transition-all duration-150;
  }
  
  .card:hover {
    @apply bg-notion-bg-hover shadow-notion-sm;
  }
  
  .card-lg {
    @apply bg-white rounded-notion border border-notion-border p-6 transition-all duration-150;
  }
  
  /* Notion-style Input Fields */
  .input {
    @apply w-full px-2.5 py-1.5 rounded-notion border border-notion-border text-body focus:border-notion-blue focus:ring-1 focus:ring-notion-blue transition-all duration-150 bg-white;
  }
  
  .input:hover {
    @apply border-notion-border-hover;
  }
  
  /* Notion-style Textarea */
  .textarea {
    @apply w-full px-2.5 py-1.5 rounded-notion border border-notion-border text-body focus:border-notion-blue focus:ring-1 focus:ring-notion-blue transition-all duration-150 resize-y min-h-32 bg-white;
  }
  
  .textarea:hover {
    @apply border-notion-border-hover;
  }
  
  /* Notion-style Label */
  .label {
    @apply block text-small font-medium text-notion-text mb-1;
  }
  
  /* Notion-style Badge - For status indicators */
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-notion text-tiny font-medium;
  }
  
  .badge-primary {
    @apply bg-notion-blue-bg text-notion-blue;
  }
  
  .badge-success {
    @apply bg-notion-green-bg text-notion-green;
  }
  
  .badge-warning {
    @apply bg-notion-yellow-bg text-notion-yellow;
  }
  
  .badge-danger {
    @apply bg-notion-red-bg text-notion-red;
  }
  
  .badge-neutral {
    @apply bg-notion-gray-bg text-notion-gray;
  }
  
  /* Notion-style Link */
  .link {
    @apply text-notion-blue hover:opacity-80 underline-offset-2 transition-opacity duration-150;
  }
  
  /* Container */
  .container-app {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}