:root {
  /* Primary Colors */
  --primary-50: #f2fde8;
  --primary-100: #e4fbd1;
  --primary-200: #c9f7a3;
  --primary-300: #aef375;
  --primary-400: #93ef47;
  --primary-500: #58cc02;
  --primary-600: #46a302;
  --primary-700: #357a01;
  --primary-800: #245201;
  --primary-900: #122900;
  --primary-950: #091400;
  --primary: #58cc02;

  /* Secondary Colors */
  --secondary-50: #e7f7fe;
  --secondary-100: #d0effd;
  --secondary-200: #a1dffb;
  --secondary-300: #72cff9;
  --secondary-400: #43bff7;
  --secondary-500: #21b1f6;
  --secondary-600: #0d8ecc;
  --secondary-700: #096a99;
  --secondary-800: #064766;
  --secondary-900: #032333;
  --secondary-950: #011119;
  --secondary: #21b1f6;
}

/* Tailwind CSS Custom Color Classes */
.bg-primary {
  background-color: var(--primary);
}

.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);
}

.bg-primary-950 {
  background-color: var(--primary-950);
}

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

.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);
}

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

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

.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);
}

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

/* Secondary Colors */
.bg-secondary {
  background-color: var(--secondary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hover\:bg-primary-700:hover {
  background-color: var(--primary-700);
}

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

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

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

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

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

/* Focus states for primary */
.focus\:ring-primary:focus {
  --tw-ring-color: var(--primary);
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--primary-500);
}

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

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

/* Focus states for secondary */
.focus\:ring-secondary:focus {
  --tw-ring-color: var(--secondary);
}

.focus\:ring-secondary-500:focus {
  --tw-ring-color: var(--secondary-500);
}

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

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