/* Custom color variables for the application */
:root {
  --primary-50: #f0f1f7;
  --primary-100: #e1e3ef;
  --primary-200: #c3c7df;
  --primary-300: #a5abcf;
  --primary-400: #878fbf;
  --primary-500: #191b4e;
  --primary-600: #14163e;
  --primary-700: #0f112e;
  --primary-800: #0a0c1e;
  --primary-900: #05070e;
  
  --secondary-50: #fef9e7;
  --secondary-100: #fdf3cf;
  --secondary-200: #fbe79f;
  --secondary-300: #f9db6f;
  --secondary-400: #f7cf3f;
  --secondary-500: #e4a926;
  --secondary-600: #b6871e;
  --secondary-700: #886517;
  --secondary-800: #5a430f;
  --secondary-900: #2c2107;
}

/* Utility classes for custom colors */
.bg-primary {
  background-color: var(--primary-500);
}

.text-primary {
  color: var(--primary-500);
}

.border-primary {
  border-color: var(--primary-500);
}

.bg-secondary {
  background-color: var(--secondary-500);
}

.text-secondary {
  color: var(--secondary-500);
}

.border-secondary {
  border-color: var(--secondary-500);
}

/* Hover effects */
.hover\:bg-primary:hover {
  background-color: var(--primary-600);
}

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

.hover\:bg-secondary:hover {
  background-color: var(--secondary-600);
}

.hover\:text-secondary:hover {
  color: var(--secondary-600);
}