/**
 * Theme Utility Classes
 * 
 * هذه الكلاسات تساعد في استخدام ألوان النظام بشكل مباشر في HTML/CSS
 * بدون الحاجة لكتابة inline styles
 */

/* ===== Text Colors ===== */
.text-theme-primary {
  color: var(--theme-primary, #16787F) !important;
}

.text-theme-secondary {
  color: var(--theme-secondary, #05487A) !important;
}

.text-theme-fonts {
  color: var(--theme-fonts, #5D5A68) !important;
}

.text-theme-sidebar-font {
  color: var(--theme-sidebar-font, #FFFFFF) !important;
}

/* ===== Background Colors ===== */
.bg-theme-primary {
  background-color: var(--theme-primary, #16787F) !important;
}

.bg-theme-secondary {
  background-color: var(--theme-secondary, #05487A) !important;
}

.bg-theme-container {
  background-color: var(--theme-container, #F7F6F9) !important;
}

.bg-theme-cards {
  background-color: var(--theme-cards-dropdowns, #FFFFFF) !important;
}

.bg-theme-sidebar {
  background-color: var(--theme-sidebar, #2F3349) !important;
}

/* ===== Border Colors ===== */
.border-theme-primary {
  border-color: var(--theme-primary, #16787F) !important;
}

.border-theme-secondary {
  border-color: var(--theme-secondary, #05487A) !important;
}

/* ===== Title Text (with background-clip) ===== */
.title-text-theme {
  background-color: var(--theme-title-text-color, var(--theme-fonts, #ffffff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Gradient Backgrounds ===== */
.bg-gradient-theme-primary {
  background: linear-gradient(135deg, var(--theme-primary, #16787F), var(--theme-secondary, #05487A)) !important;
}

/* ===== Box Shadow with Theme Colors ===== */
.shadow-theme-primary {
  box-shadow: 0 4px 6px rgba(var(--theme-primary-rgb, 22, 120, 127), 0.3) !important;
}

.shadow-theme-secondary {
  box-shadow: 0 4px 6px rgba(var(--theme-secondary-rgb, 5, 72, 122), 0.3) !important;
}

/* ===== Hover Effects ===== */
.hover-theme-primary:hover {
  color: var(--theme-primary, #16787F) !important;
}

.hover-bg-theme-primary:hover {
  background-color: var(--theme-primary, #16787F) !important;
}

/* ===== Transitions ===== */
.transition-theme {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}