/* Custom Color Palette for Thumba */

:root {
  --primary-dark: #22516c;
  --primary-light: #e4e7e8;
  --primary-accent: #2fbebe;
  --text-dark: #22516c;
  --text-light: #e4e7e8;
  --bg-dark: #22516c;
  --bg-light: #e4e7e8;
  --bg-accent: #2fbebe;
}

/* Dark backgrounds (replaces bg-gray-900, bg-gray-800) */
.bg-dark,
.bg-primary-dark {
  background-color: var(--primary-dark);
}

/* Light backgrounds (replaces bg-white) */
.bg-light,
.bg-primary-light {
  background-color: var(--primary-light);
}

/* Accent backgrounds (replaces lighter colors like bg-gray-50, bg-gray-100) */
.bg-accent,
.bg-primary-accent {
  background-color: var(--primary-accent);
}

/* Dark text (replaces text-gray-900) */
.text-dark,
.text-primary-dark {
  color: var(--primary-dark);
}

/* Light text (replaces text-white) */
.text-light,
.text-primary-light {
  color: var(--primary-light);
}

/* Accent text */
.text-accent,
.text-primary-accent {
  color: var(--primary-accent);
}

/* Border colors */
.border-dark,
.border-primary-dark {
  border-color: var(--primary-dark);
}

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

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

/* Gradient utilities */
.from-dark {
  --tw-gradient-from: var(--primary-dark);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 81, 108, 0));
}

.to-dark {
  --tw-gradient-to: var(--primary-dark);
}

.from-light {
  --tw-gradient-from: var(--primary-light);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(228, 231, 232, 0));
}

.to-light {
  --tw-gradient-to: var(--primary-light);
}

.from-accent {
  --tw-gradient-from: var(--primary-accent);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(47, 190, 190, 0));
}

.to-accent {
  --tw-gradient-to: var(--primary-accent);
}

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

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

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

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

/* Placeholder colors */
.placeholder-text-dark::placeholder {
  color: var(--primary-dark);
}

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