/* Mattering Platform - White Background Theme */

/* Global Styles */
body {
  font-family: 'Inter', 'Arial', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #000000;
  line-height: 1.6;
  background-color: #FFFFFF;
}

/* Custom utility classes for Django templates */
.d-flex {
  display: flex;
}

.gap-3 {
  gap: 0.75rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-content-center {
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.sm\:flex-row {
  flex-direction: row;
}

@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row;
  }
}

/* Button hover effects */
a:hover {
  text-decoration: none;
}

/* Smooth transitions */
* {
  transition: all 0.2s ease;
}

/* Custom scrollbar - using brand blue */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #333333;
}

::-webkit-scrollbar-thumb {
  background: #00BFFF;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00BFFF;
  opacity: 0.8;
}

/* Focus styles for accessibility - using brand blue */
a:focus,
button:focus {
  outline: 2px solid #00BFFF;
  outline-offset: 2px;
}

/* Animation classes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out;
}

/* Brand-specific styles */
.text-mattering-blue {
  color: #00BFFF !important;
}

.bg-mattering-blue {
  background-color: #00BFFF !important;
}

.border-mattering-blue {
  border-color: #00BFFF !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .text-5xl {
    font-size: 2.5rem;
  }
  
  .text-7xl {
    font-size: 3rem;
  }
  
  .text-xl {
    font-size: 1.125rem;
  }
  
  .text-2xl {
    font-size: 1.25rem;
  }
}