/* ============================================================
   DIGITAL SAMAAJ — COLOR HIERARCHY SYSTEM (colors.css)
   ============================================================ */

:root {
  /* Global Color Hierarchy Definitions */
  --primary: #5B4CFF; /* Reserved strictly for primary CTAs and critical active states */
  --primary-rgb: 91, 76, 255;
  --primary-hover: #4032e6;
  
  /* Complementary Accent Colors */
  --accent-ai: #0284c7; /* Clear energetic sky blue for AI Tools & generative prompt cards */
  --accent-ai-rgb: 2, 132, 199;
  --accent-ai-hover: #0369a1;

  --accent-learn: #0d9488; /* Focused deep teal/emerald for learning, courses & tracker bars */
  --accent-learn-rgb: 13, 148, 136;
  --accent-learn-hover: #0f766e;

  --accent-alert: #ea580c; /* Vivid amber/orange for alerts, hot news, notifications & live timers */
  --accent-alert-rgb: 234, 88, 12;
  --accent-alert-hover: #c2410c;
}

/* 1. PRIMARY PURPLE: Reserved strictly for High-Value Key Actions and Active Menu States */
.btn-primary,
.desktop-nav-item.active,
.bottom-nav .nav-item.active,
.learn-tab.active,
.prompt-type-btn.active {
  background: linear-gradient(135deg, var(--primary), #7c3aed) !important;
  color: #ffffff !important;
  border: none !important;
}

/* 2. AI TOOLS: Refined sky blue/cyan visual theme */
.tool-card:hover {
  border-color: var(--accent-ai) !important;
  box-shadow: 0 12px 30px rgba(var(--accent-ai-rgb), 0.12) !important;
}
.tool-card-icon,
.tool-icon-wrapper {
  background-color: rgba(var(--accent-ai-rgb), 0.1) !important;
  color: var(--accent-ai) !important;
  border-radius: 12px;
}
.img-prompt-tool-badge {
  background: rgba(var(--accent-ai-rgb), 0.85) !important;
  backdrop-filter: blur(8px);
  color: #ffffff !important;
}
.img-prompt-copy-btn {
  background: linear-gradient(135deg, var(--accent-ai), #0369a1) !important;
  border: none !important;
}
/* Update tool action button inside modal overlay */
.tool-lang-row .btn-primary {
  background: linear-gradient(135deg, var(--accent-ai), var(--accent-ai-hover)) !important;
}

/* 3. PROGRESS & LEARNING SECTIONS: Emerald/Teal focused theme */
.progress-bar-fill,
.course-progress-fill {
  background: linear-gradient(90deg, var(--accent-learn), #10b981) !important;
}
.continue-card .percent-text,
.my-learning-card .percent-text {
  color: var(--accent-learn) !important;
}
.eco-step.free {
  border-color: rgba(var(--accent-learn-rgb), 0.3) !important;
}
.eco-step.free .eco-tag {
  background-color: rgba(var(--accent-learn-rgb), 0.1) !important;
  color: var(--accent-learn) !important;
}
.course-badge.free {
  background-color: rgba(var(--accent-learn-rgb), 0.1) !important;
  color: var(--accent-learn) !important;
}
.unlocked-badge {
  background-color: rgba(var(--accent-learn-rgb), 0.1) !important;
  color: var(--accent-learn) !important;
  border: 1px solid rgba(var(--accent-learn-rgb), 0.25) !important;
}
.profile-stat-card:nth-child(1) .ps-num {
  color: var(--accent-learn) !important;
}

/* 4. NOTIFICATIONS, WEB TIMERS & HOT LIVE ALERTS: Vibrant sunset orange/amber */
.notif-badge,
.notif-dot {
  background-color: var(--accent-alert) !important;
  box-shadow: 0 0 10px rgba(var(--accent-alert-rgb), 0.6) !important;
}
.slide-badge,
.webinar-label,
.mcf-badge.gold {
  background: linear-gradient(135deg, var(--accent-alert), #f59e0b) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.countdown-mini,
.countdown-big {
  color: var(--accent-alert) !important;
  font-weight: 700 !important;
  background-color: rgba(var(--accent-alert-rgb), 0.08) !important;
  border: 1px solid rgba(var(--accent-alert-rgb), 0.15) !important;
  border-radius: 8px;
  padding: 4px 10px;
}
.webinar-banner {
  border-left: 5px solid var(--accent-alert) !important;
  background: linear-gradient(95deg, rgba(var(--accent-alert-rgb), 0.03) 0%, rgba(255,255,255,1) 100%) !important;
}
.dark-theme .webinar-banner {
  background: linear-gradient(95deg, rgba(var(--accent-alert-rgb), 0.08) 0%, #1e293b 100%) !important;
}

/* Improved scanning through customized colored labels for sidebar */
.cat-tab.active,
.prompt-sidebar-item.active {
  border-left: 3.5px solid var(--primary) !important;
}