/* ==========================================================================
   TownConnect Suite V1.0 - Custom CSS Overrides & Additions
   ========================================================================== */

/* ==========================================================================
   1. Global Custom Variables (extend Tailwind / main.css tokens)
   ========================================================================== */
:root {
  /* Override or extend primary/accent colors if needed */
  --tc-primary: #007bff;
  --tc-primary-dark: #0056b3;
  --tc-accent: #6f42c1;
  --tc-success: #28a745;
  --tc-danger: #dc3545;
  --tc-warning: #ffc107;

  /* Gamification colors */
  --tc-points-gold: #f59e0b;
  --tc-badge-bg: #4f46e5;
  --tc-badge-text: #ffffff;

  /* Age verification states */
  --tc-age-verified: #22c55e;
  --tc-age-pending: #f59e0b;
  --tc-age-rejected: #ef4444;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --tc-primary: #60a5fa;
    --tc-primary-dark: #3b82f6;
    --tc-accent: #a78bfa;
  }
}

/* ==========================================================================
   2. Custom Utility Classes (use in HTML with Tailwind-style naming)
   ========================================================================== */

/* Button variants (extend Tailwind btn) */
.btn-tc {
  @apply px-6 py-3 font-medium rounded-lg transition-all duration-200 shadow-sm;
}
.btn-tc-primary {
  @apply bg-[var(--tc-primary)] text-white hover:bg-[var(--tc-primary-dark)] focus:ring-2 focus:ring-[var(--tc-primary)] focus:ring-offset-2;
}
.btn-tc-outline {
  @apply border-2 border-[var(--tc-primary)] text-[var(--tc-primary)] hover:bg-[var(--tc-primary)] hover:text-white;
}
.btn-tc-gamification {
  @apply bg-[var(--tc-points-gold)] text-black font-bold hover:bg-yellow-500;
}

/* Gamification badge */
.gamification-badge {
  @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold;
  background: var(--tc-badge-bg);
  color: var(--tc-badge-text);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Points display animation (on earn) */
.points-earned {
  animation: pointsPop 0.6s ease-out;
}
@keyframes pointsPop {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); opacity: 0.9; }
}

/* Age verification status pill */
.age-status {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}
.age-verified    { @apply bg-[var(--tc-age-verified)] text-white; }
.age-pending     { @apply bg-[var(--tc-age-pending)] text-black; }
.age-rejected    { @apply bg-[var(--tc-age-rejected)] text-white; }

/* Promo highlight box (used on splash, AnySmallTown landing, etc.) */
.promo-highlight {
  @apply bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 border border-purple-200 dark:border-purple-800 rounded-xl p-6 shadow-inner;
}

/* Module card hover effect (for LocalScope, TownCircle, etc.) */
.module-card {
  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
}

/* ==========================================================================
   3. Responsive Adjustments & Fixes
   ========================================================================== */

/* Mobile-first tweaks */
@media (max-width: 640px) {
  .mobile-stack {
    @apply flex flex-col space-y-4;
  }
  .promo-highlight {
    @apply p-4 text-center;
  }
}

/* Tablet & up */
@media (min-width: 768px) {
  .module-grid {
    @apply grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }
}

/* ==========================================================================
   4. Accessibility Enhancements
   ========================================================================== */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.4);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   5. Print Styles (for reports, invoices, admin print views)
   ========================================================================== */
@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; font-size: 12pt; }
  .promo-highlight, .gamification-badge { border: 1px solid #000; background: #fff; }
}