/* ===============================================
   COLOR UTILITY CLASSES
   ===============================================
   Classes personnalisées pour remplacer les
   Tailwind color classes et utiliser les
   variables centralisées.
   =============================================== */

/* ===== TEXT COLORS ===== */
.text-white-primary {
  color: var(--text-white);
}

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

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

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

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

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

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

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

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

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

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

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

/* ===== BACKGROUND COLORS ===== */
.bg-black {
  background-color: var(--bg-dark-0);
}

.bg-dark-1 {
  background-color: var(--bg-dark-1);
}

.bg-dark-menu {
  background-color: var(--bg-menu);
}

/* ===== BACKGROUND WITH TRANSPARENCY ===== */
.bg-dark-1-50 {
  background-color: var(--bg-rgba-dark-1-50);
}

.bg-dark-gray-60 {
  background-color: var(--bg-rgba-dark-gray-60);
}

/* ===== GRADIENTS ===== */
.bg-gradient-cyan-blue-10 {
  background: linear-gradient(135deg, var(--cyan-500-10), var(--blue-500-10));
}

.bg-gradient-blue-cyan-10 {
  background: linear-gradient(135deg, var(--blue-500-10), var(--cyan-500-10));
}

.bg-gradient-purple-blue-10 {
  background: linear-gradient(135deg, var(--purple-500-10), var(--blue-500-10));
}

.bg-gradient-pink-purple-10 {
  background: linear-gradient(135deg, var(--pink-500-10), var(--purple-500-10));
}

.bg-gradient-cyan-to-blue {
  background: linear-gradient(to right, var(--gradient-cyan-500), var(--gradient-blue-500));
}

.bg-gradient-cyan-to-blue-hover {
  background: linear-gradient(to right, rgb(34, 211, 238), rgb(96, 165, 250));
}

/* ===== BORDER COLORS ===== */
.border-cyan-20 {
  border-color: var(--border-cyan-20);
}

.border-cyan-40 {
  border-color: var(--border-cyan-40);
}

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

.border-blue-20 {
  border-color: var(--border-blue-20);
}

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

.border-purple-20 {
  border-color: var(--border-purple-20);
}

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

.border-pink-20 {
  border-color: var(--border-pink-20);
}

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

/* ===== SHADOW COLORS ===== */
.shadow-cyan-30 {
  box-shadow: 0 10px 15px -3px var(--shadow-cyan);
}

.shadow-cyan-50-hover:hover {
  box-shadow: 0 10px 15px -3px var(--shadow-cyan-hover);
}

/* ===== STATUS COLORS ===== */
.text-error {
  color: var(--color-error);
}

.bg-error-10 {
  background-color: var(--color-error-bg-10);
}

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

.bg-error-text {
  color: var(--color-error-text);
}