ci-electrical/web/app/globals.css

@import "../styles/fonts.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* Screen reader only utility - hidden unless focused */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Ensure focus indicators are visible */
*:focus {
  outline: 2px solid #16A34A;
  outline-offset: 2px;
}

/* Hide focus outline when using mouse */
:focus:not(:focus-visible) {
  outline: none;
}

/* Visible focus for keyboard navigation */
:focus-visible {
  outline: 2px solid #16A34A;
  outline-offset: 2px;
}

/* Enhanced Button System */
.btn-primary {
  @apply bg-gradient-to-r from-brand-green to-green-600 text-white font-semibold px-8 py-4 rounded-button 
         hover:from-green-600 hover:to-green-700 hover:shadow-lg hover:-translate-y-0.5 
         focus:ring-4 focus:ring-green-200 focus:shadow-lg
         active:from-green-700 active:to-green-800 active:translate-y-0
         transition-all duration-300 ease-out;
}

.btn-secondary {
  @apply bg-white border-2 border-brand-orange text-brand-orange font-semibold px-8 py-4 rounded-button
         hover:bg-gradient-to-r hover:from-brand-orange hover:to-orange-600 hover:text-white hover:border-transparent
         hover:shadow-lg hover:-translate-y-0.5
         focus:ring-4 focus:ring-orange-200 focus:shadow-lg
         active:from-orange-600 active:to-orange-700 active:translate-y-0
         transition-all duration-300 ease-out;
}

.btn-outline {
  @apply bg-transparent border-2 border-brand-green text-brand-green font-semibold px-8 py-4 rounded-button
         hover:bg-brand-green hover:text-white hover:shadow-lg hover:-translate-y-0.5
         focus:ring-4 focus:ring-green-200 focus:shadow-lg
         active:bg-green-700 active:translate-y-0
         transition-all duration-300 ease-out;
}

.btn-ghost {
  @apply bg-transparent text-brand-green font-semibold px-8 py-4 rounded-button
         hover:bg-green-50 hover:text-green-700 hover:shadow-md
         focus:ring-4 focus:ring-green-200
         active:bg-green-100
         transition-all duration-200 ease-out;
}

.btn-danger {
  @apply bg-gradient-to-r from-brand-danger to-red-600 text-white font-semibold px-8 py-4 rounded-button
         hover:from-red-600 hover:to-red-700 hover:shadow-lg hover:-translate-y-0.5
         focus:ring-4 focus:ring-red-200 focus:shadow-lg
         active:from-red-700 active:to-red-800 active:translate-y-0
         transition-all duration-300 ease-out;
}

.btn-sm {
  @apply px-6 py-3 text-sm;
}

.btn-lg {
  @apply px-10 py-5 text-lg;
}

/* Enhanced Card System */
.card {
  @apply bg-white rounded-card shadow-card p-6 border border-gray-100
         hover:shadow-xl hover:-translate-y-1 hover:border-gray-200
         transition-all duration-300 ease-out;
}

.card-elevated {
  @apply bg-white rounded-card shadow-lg p-8 border border-gray-100
         hover:shadow-2xl hover:-translate-y-2 hover:border-gray-200
         transition-all duration-300 ease-out;
}

.card-gradient {
  @apply bg-gradient-to-br from-white to-gray-50 rounded-card shadow-card p-6 border border-gray-100
         hover:shadow-xl hover:-translate-y-1 hover:from-gray-50 hover:to-gray-100
         transition-all duration-300 ease-out;
}

.card-dark {
  @apply bg-gradient-to-br from-brand-dark to-slate-800 text-white rounded-card shadow-lg p-6
         hover:shadow-xl hover:-translate-y-1 hover:from-slate-800 hover:to-brand-dark
         transition-all duration-300 ease-out;
}

/* Gradient Utilities */
.gradient-primary {
  @apply bg-gradient-to-r from-brand-green to-green-600;
}

.gradient-secondary {
  @apply bg-gradient-to-r from-brand-orange to-orange-600;
}

.gradient-dark {
  @apply bg-gradient-to-br from-brand-dark to-slate-800;
}

.gradient-light {
  @apply bg-gradient-to-br from-gray-50 to-white;
}

.gradient-text {
  @apply bg-gradient-to-r from-brand-green to-green-600 bg-clip-text text-transparent;
}

.gradient-text-orange {
  @apply bg-gradient-to-r from-brand-orange to-orange-600 bg-clip-text text-transparent;
}

/* Enhanced Typography */
.text-gradient {
  @apply bg-gradient-to-r from-brand-green to-green-600 bg-clip-text text-transparent;
}

.text-gradient-orange {
  @apply bg-gradient-to-r from-brand-orange to-orange-600 bg-clip-text text-transparent;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

/* Container */
.container-custom {
  @apply max-w-container mx-auto px-6 md:px-8;
}

/* Animation Utilities */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

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

.animate-scale-in {
  animation: scaleIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}