@import "tailwindcss";

/* Source paths (relative to this CSS file's location) */
/* Only scan user-ui sources - admin-ui CSS is lazy-loaded from /admin.css */
@source "../src/**/*.rs";
@source "../public/**/*.html";
@source "../../../crates/chattyness-user-ui/src/**/*.rs";
@source not "../../../target";

/* Custom theme extensions */
@theme {
  --color-realm-50: #f0f9ff;
  --color-realm-100: #e0f2fe;
  --color-realm-200: #bae6fd;
  --color-realm-300: #7dd3fc;
  --color-realm-400: #38bdf8;
  --color-realm-500: #0ea5e9;
  --color-realm-600: #0284c7;
  --color-realm-700: #0369a1;
  --color-realm-800: #075985;
  --color-realm-900: #0c4a6e;
  --color-realm-950: #082f49;
}

/* User-specific styles only */
@import "./user.css";

/* Base styles for accessibility */
@layer base {
  /* Focus visible for keyboard navigation */
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-blue-500;
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* Component styles used by user-ui */
@layer components {
  /* Form input base styles */
  .input-base {
    @apply w-full px-4 py-3 bg-gray-700 border border-gray-600
           rounded-lg text-white placeholder-gray-400
           focus:ring-2 focus:ring-blue-500 focus:border-transparent
           transition-colors duration-200;
  }

  /* Button base styles */
  .btn-primary {
    @apply px-6 py-3 bg-blue-600 hover:bg-blue-700
           disabled:bg-gray-600 disabled:cursor-not-allowed
           text-white font-semibold rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800
           transition-colors duration-200;
  }

  .btn-secondary {
    @apply px-6 py-3 bg-gray-600 hover:bg-gray-500
           disabled:bg-gray-700 disabled:cursor-not-allowed
           text-white font-semibold rounded-lg
           focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-800
           transition-colors duration-200;
  }

  /* Error message styles */
  .error-message {
    @apply p-4 bg-red-900/50 border border-red-500 rounded-lg text-red-200;
  }
}