/* Custom Color Palette based on Logo Color #3064a1 */

:root {
  /* Primary Colors - Based on Logo #3064a1 with better contrast */
  --primary-50: #f0f4ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #3064a1; /* Main logo color */
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  
  /* Secondary Colors - Complementary */
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
  
  /* Accent Colors */
  --accent-50: #f0f9ff;
  --accent-100: #e0f2fe;
  --accent-200: #bae6fd;
  --accent-300: #7dd3fc;
  --accent-400: #38bdf8;
  --accent-500: #0ea5e9;
  --accent-600: #0284c7;
  --accent-700: #0369a1;
  --accent-800: #075985;
  --accent-900: #0c4a6e;
}

/* Custom Tailwind-like classes */
.text-primary-50 { color: var(--primary-50); }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }

.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }

.border-primary-50 { border-color: var(--primary-50); }
.border-primary-100 { border-color: var(--primary-100); }
.border-primary-200 { border-color: var(--primary-200); }
.border-primary-300 { border-color: var(--primary-300); }
.border-primary-400 { border-color: var(--primary-400); }
.border-primary-500 { border-color: var(--primary-500); }
.border-primary-600 { border-color: var(--primary-600); }
.border-primary-700 { border-color: var(--primary-700); }
.border-primary-800 { border-color: var(--primary-800); }
.border-primary-900 { border-color: var(--primary-900); }

.hover\:bg-primary-50:hover { background-color: var(--primary-50); }
.hover\:bg-primary-100:hover { background-color: var(--primary-100); }
.hover\:bg-primary-200:hover { background-color: var(--primary-200); }
.hover\:bg-primary-300:hover { background-color: var(--primary-300); }
.hover\:bg-primary-400:hover { background-color: var(--primary-400); }
.hover\:bg-primary-500:hover { background-color: var(--primary-500); }
.hover\:bg-primary-600:hover { background-color: var(--primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
.hover\:bg-primary-800:hover { background-color: var(--primary-800); }
.hover\:bg-primary-900:hover { background-color: var(--primary-900); }

.hover\:text-primary-50:hover { color: var(--primary-50); }
.hover\:text-primary-100:hover { color: var(--primary-100); }
.hover\:text-primary-200:hover { color: var(--primary-200); }
.hover\:text-primary-300:hover { color: var(--primary-300); }
.hover\:text-primary-400:hover { color: var(--primary-400); }
.hover\:text-primary-500:hover { color: var(--primary-500); }
.hover\:text-primary-600:hover { color: var(--primary-600); }
.hover\:text-primary-700:hover { color: var(--primary-700); }
.hover\:text-primary-800:hover { color: var(--primary-800); }
.hover\:text-primary-900:hover { color: var(--primary-900); }

/* Focus states */
.focus\:ring-primary-500:focus { 
  --tw-ring-color: var(--primary-500);
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

/* Button styles */
.btn-primary {
  background-color: var(--primary-500);
  color: white;
  border: 1px solid var(--primary-500);
}

.btn-primary:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(48, 100, 161, 0.1);
}

/* Link styles */
.link-primary {
  color: var(--primary-500);
}

.link-primary:hover {
  color: var(--primary-600);
}

/* Card styles */
.card-primary {
  border: 1px solid var(--primary-200);
  background-color: white;
}

.card-primary:hover {
  border-color: var(--primary-300);
  box-shadow: 0 4px 6px -1px rgba(48, 100, 161, 0.1);
}

/* Additional visibility fixes */
.text-primary-700 {
  color: var(--primary-700) !important;
}

.text-primary-800 {
  color: var(--primary-800) !important;
}

/* Ensure buttons are visible */
.bg-primary-600 {
  background-color: var(--primary-600) !important;
  color: white !important;
}

.bg-primary-700 {
  background-color: var(--primary-700) !important;
  color: white !important;
}

/* Fix text visibility on light backgrounds */
.text-primary-600 {
  color: var(--primary-600) !important;
}

/* Ensure form elements are visible */
input[type="email"], input[type="password"], input[type="text"], textarea, select {
  border-color: #d1d5db !important;
  background-color: white !important;
  color: #374151 !important;
}

input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, textarea:focus, select:focus {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px rgba(48, 100, 161, 0.1) !important;
}

/* Fix label visibility */
label {
  color: #374151 !important;
}

/* Ensure links are visible */
a {
  color: var(--primary-600) !important;
}

a:hover {
  color: var(--primary-700) !important;
}

/* Fix button text visibility */
button, .btn {
  color: white !important;
}

button.bg-primary-600, .btn.bg-primary-600 {
  background-color: var(--primary-600) !important;
  color: white !important;
}

button.bg-primary-700, .btn.bg-primary-700 {
  background-color: var(--primary-700) !important;
  color: white !important;
}

/* Override any conflicting styles */
* {
  box-sizing: border-box;
}

/* Ensure all primary color classes work properly */
.text-primary-500 {
  color: var(--primary-500) !important;
}

.text-primary-600 {
  color: var(--primary-600) !important;
}

.text-primary-700 {
  color: var(--primary-700) !important;
}

.text-primary-800 {
  color: var(--primary-800) !important;
}

/* Fix any white text on white background issues */
.bg-primary-600, .bg-primary-700 {
  color: white !important;
}

/* Ensure form elements have proper contrast */
input, textarea, select {
  background-color: white !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
}

/* Fix any invisible text issues */
h1, h2, h3, h4, h5, h6 {
  color: inherit !important;
}

/* Ensure buttons are always visible */
button[type="submit"], .btn, input[type="submit"] {
  background-color: var(--primary-600) !important;
  color: white !important;
  border: 1px solid var(--primary-600) !important;
}

button[type="submit"]:hover, .btn:hover, input[type="submit"]:hover {
  background-color: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
}

/* Additional button visibility fixes */
a.bg-primary-600, button.bg-primary-600 {
  background-color: var(--primary-600) !important;
  color: white !important;
  border: 1px solid var(--primary-600) !important;
}

a.bg-primary-600:hover, button.bg-primary-600:hover {
  background-color: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
  color: white !important;
}

/* Ensure all primary color text is visible */
.text-primary-600, .text-primary-700, .text-primary-800 {
  color: var(--primary-600) !important;
}

/* Force button text to be white */
.bg-primary-600, .bg-primary-700 {
  color: white !important;
}

/* Override any conflicting text colors on buttons */
.bg-primary-600 *, .bg-primary-700 * {
  color: white !important;
}