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

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

/* Custom base styles */
@layer base {
  body {
    @apply antialiased text-gray-900 bg-gradient-to-br from-gray-50 to-gray-100;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1 {
    @apply text-4xl font-bold tracking-tight;
  }

  h2 {
    @apply text-2xl font-semibold tracking-tight;
  }

  h3 {
    @apply text-lg font-semibold;
  }
}

/* Custom components */
@layer components {
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 transition-all duration-200;
  }

  .card-hover {
    @apply hover:shadow-lg hover:border-gray-300 hover:-translate-y-0.5;
  }

  .section-header {
    @apply text-2xl font-bold text-gray-900 mb-6;
  }

  .tab-button {
    @apply px-6 py-3 font-medium text-gray-600 border-b-2 border-transparent
           hover:text-gray-900 hover:border-gray-300 transition-colors cursor-pointer;
  }

  .tab-button-active {
    @apply text-primary-600 border-primary-600;
  }

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

  .board-card {
    @apply card card-hover;
  }

  .trello-card-item {
    @apply bg-white border border-gray-200 rounded-lg p-4
           hover:shadow-md hover:border-trello/30 transition-all;
  }

  .task-item {
    @apply flex items-start gap-3 p-4 rounded-lg
           hover:bg-gray-50 transition-colors;
  }

  .note-card {
    @apply card card-hover border-l-4 border-l-obsidian;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Custom utilities */
@layer utilities {
  .section-spacing {
    @apply mb-10;
  }

  .content-max-width {
    @apply max-w-7xl mx-auto px-6 lg:px-8;
  }

  .card-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) rgb(241 245 249);
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: rgb(241 245 249);
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgb(203 213 225);
    border-radius: 4px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgb(148 163 184);
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}