@import "tailwindcss";

/* Custom styles */
@layer base {
  body {
    @apply antialiased;
  }
}

@layer components {
  /* Button styles */
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition font-medium;
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow;
  }

  /* Mood Banner Component */
  .mood-banner {
    --mood-text-primary: theme(colors.gray.900);
    --mood-text-secondary: theme(colors.gray.600);
  }

  /* Mood-specific text colors for contrast */
  [data-mood="thriving"] .mood-banner,
  .mood-banner[data-mood="thriving"] {
    --mood-text-primary: theme(colors.amber.900);
    --mood-text-secondary: theme(colors.amber.700);
  }

  [data-mood="happy"] .mood-banner,
  .mood-banner[data-mood="happy"] {
    --mood-text-primary: theme(colors.sky.900);
    --mood-text-secondary: theme(colors.sky.700);
  }

  [data-mood="neutral"] .mood-banner,
  .mood-banner[data-mood="neutral"] {
    --mood-text-primary: theme(colors.slate.900);
    --mood-text-secondary: theme(colors.slate.600);
  }

  [data-mood="concerned"] .mood-banner,
  .mood-banner[data-mood="concerned"] {
    --mood-text-primary: theme(colors.orange.900);
    --mood-text-secondary: theme(colors.orange.700);
  }

  [data-mood="critical"] .mood-banner,
  .mood-banner[data-mood="critical"] {
    --mood-text-primary: theme(colors.rose.900);
    --mood-text-secondary: theme(colors.rose.700);
  }

  /* Loading spinner component */
  .loading-spinner-container {
    @apply inline-flex items-center justify-center;
  }

  .loading-spinner {
    @apply w-5 h-5 text-current;
    animation: loading-spin 0.8s linear infinite;
  }

  @keyframes loading-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Screen reader only text */
  .sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
  }
}

@layer utilities {
  /* Custom utility classes */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Reduced motion accessibility */
  @media (prefers-reduced-motion: reduce) {
    .mood-banner {
      transition: none !important;
    }

    /* Disable spinner animation for reduced motion */
    .loading-spinner {
      animation: none !important;
    }
  }
}