packages/web/src/app/globals.css

/* ============================================================================
 * agent verf - Global Styles
 * Version: 0.1.0
 * Last Updated: 2026-01-13
 *
 * Global CSS including Tailwind directives and custom utilities.
 * ============================================================================ */

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

/* ============================================================================
 * Base Styles
 * ============================================================================ */

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }

  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }
}

/* ============================================================================
 * Component Utilities
 * ============================================================================ */

@layer components {
  /* Card component */
  .card {
    @apply bg-white rounded-lg shadow-md border border-gray-200 p-6;
  }

  /* Button variants */
  .btn-primary {
    @apply bg-brand-primary hover:bg-brand-secondary text-white font-medium py-2 px-4 rounded-lg transition-colors;
  }

  .btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors;
  }

  /* Input styling */
  .input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition-all;
  }

  /* Verdict badges */
  .verdict-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full font-semibold text-sm;
  }

  .verdict-true {
    @apply bg-verdict-true/10 text-verdict-true;
  }

  .verdict-false {
    @apply bg-verdict-false/10 text-verdict-false;
  }

  .verdict-misleading {
    @apply bg-verdict-misleading/10 text-verdict-misleading;
  }

  .verdict-satire {
    @apply bg-verdict-satire/10 text-verdict-satire;
  }

  .verdict-unverified {
    @apply bg-verdict-unverified/10 text-verdict-unverified;
  }

  .verdict-disputed {
    @apply bg-verdict-disputed/10 text-verdict-disputed;
  }
}

/* ============================================================================
 * Animations
 * ============================================================================ */

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Loading spinner */
.spinner {
  @apply animate-spin rounded-full border-2 border-gray-300 border-t-brand-primary;
}