/* Harmoni Color Palette - Based on Design Image */
/* Using Cairo font as primary font family */

* {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

:root {
  /* Primary Colors */
  --primary-green: #2d5a3d;      /* Dark Forest Green */
  --primary-green-light: #4a7c59; /* Medium Green */
  --primary-green-lighter: #6b9b7f; /* Light Green */
  
  /* Secondary Colors */
  --secondary-gold: #b8860b;      /* Dark Gold */
  --secondary-gold-light: #daa520; /* Gold */
  --secondary-gold-lighter: #f4d03f; /* Light Gold */
  
  /* Accent Colors */
  --accent-cream: #f5f0e8;        /* Cream Background */
  --accent-beige: #e8dcc6;        /* Light Beige */
  --accent-brown: #8b6914;        /* Brown Accent */
  
  /* Neutral Colors */
  --neutral-white: #ffffff;
  --neutral-light: #f8f9fa;
  --neutral-gray: #6c757d;
  --neutral-dark: #343a40;
  
  /* Status Colors */
  --success: var(--primary-green);
  --warning: var(--secondary-gold);
  --error: #dc3545;
  --info: var(--primary-green-light);
}

/* Apply color scheme to existing elements */
.bg-blue-600 { background-color: var(--primary-green) !important; }
.bg-blue-700 { background-color: var(--primary-green-light) !important; }
.bg-blue-50 { background-color: var(--accent-cream) !important; }
.bg-blue-100 { background-color: var(--accent-beige) !important; }

.text-blue-600 { color: var(--primary-green) !important; }
.text-blue-700 { color: var(--primary-green-light) !important; }
.text-blue-500 { color: var(--primary-green-lighter) !important; }

.border-blue-500 { border-color: var(--primary-green) !important; }
.border-blue-600 { border-color: var(--primary-green) !important; }

.hover\:bg-blue-700:hover { background-color: var(--primary-green-light) !important; }
.hover\:bg-blue-100:hover { background-color: var(--accent-beige) !important; }
.hover\:text-blue-700:hover { color: var(--primary-green-light) !important; }
.hover\:text-blue-500:hover { color: var(--primary-green-lighter) !important; }

.focus\:ring-blue-500:focus { --tw-ring-color: var(--primary-green) !important; }
.focus\:ring-blue-200:focus { --tw-ring-color: var(--accent-beige) !important; }

/* Gradient Updates */
.bg-gradient-to-l { 
  background: linear-gradient(to left, var(--primary-green), var(--primary-green-light)) !important; 
}

.bg-gradient-to-br { 
  background: linear-gradient(to bottom right, var(--accent-cream), var(--accent-beige)) !important; 
}

/* Button Styles */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light)) !important;
}

.auth-button {
  background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light)) !important;
}

/* Card Accent Colors */
.bg-green-100 { background-color: var(--accent-beige) !important; }
.bg-green-600 { background-color: var(--primary-green) !important; }
.text-green-600 { color: var(--primary-green) !important; }
.text-green-800 { color: var(--primary-green) !important; }

.bg-orange-100 { background-color: var(--secondary-gold-lighter) !important; }
.bg-orange-600 { background-color: var(--secondary-gold) !important; }
.text-orange-600 { color: var(--secondary-gold) !important; }

.bg-purple-100 { background-color: var(--accent-beige) !important; }
.bg-purple-600 { background-color: var(--accent-brown) !important; }
.text-purple-600 { color: var(--accent-brown) !important; }

/* Status Colors */
.bg-red-500 { background-color: var(--error) !important; }
.text-red-600 { color: var(--error) !important; }
.hover\:bg-red-50:hover { background-color: #fef2f2 !important; }

/* Notification Badge */
.notification-badge {
  background-color: var(--secondary-gold) !important;
  animation: pulse 2s infinite;
}

/* Override Tailwind's default blue colors completely */
.text-blue-400 { color: var(--primary-green-lighter) !important; }
.bg-blue-500 { background-color: var(--primary-green) !important; }
.border-blue-400 { border-color: var(--primary-green-lighter) !important; }

/* Custom Gradients */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-light) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--secondary-gold-light) 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, var(--accent-cream) 0%, var(--accent-beige) 100%);
}

/* Additional Color Mappings */
.bg-yellow-100 { background-color: var(--secondary-gold-lighter) !important; }
.bg-yellow-500 { background-color: var(--secondary-gold) !important; }
.text-yellow-600 { color: var(--secondary-gold) !important; }
.text-yellow-800 { color: var(--accent-brown) !important; }

/* Form Elements */
.border-gray-300:focus { border-color: var(--primary-green) !important; }
.focus\:border-transparent:focus { border-color: var(--primary-green) !important; }

/* Navigation Active States */
.nav-item::before { background: var(--primary-green) !important; }
.nav-item.bg-blue-50 { background-color: var(--accent-cream) !important; }
.nav-item.text-blue-600 { color: var(--primary-green) !important; }

/* Sidebar Enhancements */
#sidebar { background: linear-gradient(180deg, var(--neutral-white) 0%, var(--accent-cream) 100%); }

/* Card Shadows with Brand Colors */
.shadow-brand {
  box-shadow: 0 10px 25px -5px rgba(45, 90, 61, 0.1), 0 10px 10px -5px rgba(45, 90, 61, 0.04);
}

/* Hover Effects */
.hover\:shadow-brand:hover {
  box-shadow: 0 20px 25px -5px rgba(45, 90, 61, 0.15), 0 10px 10px -5px rgba(45, 90, 61, 0.08);
}

/* Text Colors */
.text-brand-primary { color: var(--primary-green); }
.text-brand-secondary { color: var(--secondary-gold); }
.text-brand-accent { color: var(--accent-brown); }

/* Background Colors */
.bg-brand-primary { background-color: var(--primary-green); }
.bg-brand-secondary { background-color: var(--secondary-gold); }
.bg-brand-light { background-color: var(--accent-cream); }

/* Border Colors */
.border-brand-primary { border-color: var(--primary-green); }
.border-brand-secondary { border-color: var(--secondary-gold); }

/* Ring Colors for Focus States */
.ring-brand-primary { --tw-ring-color: var(--primary-green); }
.ring-brand-secondary { --tw-ring-color: var(--secondary-gold); }

/* Custom Components */
.btn-brand-primary {
  background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
  color: var(--neutral-white);
  border: none;
  transition: all 0.3s ease;
}

.btn-brand-primary:hover {
  background: linear-gradient(135deg, var(--primary-green-light), var(--primary-green));
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(45, 90, 61, 0.4);
}

.btn-brand-secondary {
  background: linear-gradient(135deg, var(--secondary-gold), var(--secondary-gold-light));
  color: var(--neutral-white);
  border: none;
  transition: all 0.3s ease;
}

.btn-brand-secondary:hover {
  background: linear-gradient(135deg, var(--secondary-gold-light), var(--secondary-gold));
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(184, 134, 11, 0.4);
}

/* Card Variants */
.card-brand {
  background: var(--neutral-white);
  border: 1px solid var(--accent-beige);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(45, 90, 61, 0.1);
}

/* Alert Variants */
.alert-success {
  background-color: var(--accent-cream);
  border: 1px solid var(--primary-green-lighter);
  color: var(--primary-green);
}

.alert-warning {
  background-color: var(--secondary-gold-lighter);
  border: 1px solid var(--secondary-gold);
  color: var(--accent-brown);
}

/* Loading States */
.loading-brand {
  border: 3px solid var(--accent-beige);
  border-top: 3px solid var(--primary-green);
}

/* Progress Bars */
.progress-brand {
  background-color: var(--accent-beige);
}

.progress-brand-fill {
  background: linear-gradient(90deg, var(--primary-green), var(--primary-green-light));
}

/* Badges */
.badge-success {
  background-color: var(--primary-green);
  color: var(--neutral-white);
}

.badge-warning {
  background-color: var(--secondary-gold);
  color: var(--neutral-white);
}

.badge-info {
  background-color: var(--primary-green-light);
  color: var(--neutral-white);
}

/* Checkbox Styling */
input[type="checkbox"] {
  accent-color: var(--primary-green) !important;
}

input[type="checkbox"]:checked {
  background-color: var(--primary-green) !important;
  border-color: var(--primary-green) !important;
}

input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.1) !important;
  border-color: var(--primary-green) !important;
}

input[type="checkbox"]:hover {
  border-color: var(--primary-green-light) !important;
}

/* Radio Button Styling */
input[type="radio"] {
  accent-color: var(--primary-green) !important;
}

input[type="radio"]:checked {
  background-color: var(--primary-green) !important;
  border-color: var(--primary-green) !important;
}

input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.1) !important;
  border-color: var(--primary-green) !important;
}

input[type="radio"]:hover {
  border-color: var(--primary-green-light) !important;
}