/*
  Projects Showcase - Dark Mode
  © 2025 Miloš Sarić. All rights reserved.
  Uses existing dark mode variables from darkmode-optimized.css
*/

/* No need to redefine dark mode variables - they're already in darkmode-optimized.css */

/* Projects Section */
.dark-mode .projects-section {
  background: var(--primary-bg);
}

/* Header */
.dark-mode .projects-header h1 {
  color: var(--text-primary);
}

.dark-mode .projects-subtitle {
  color: var(--text-secondary);
}

/* Random Button */
.dark-mode .random-btn {
  background: linear-gradient(135deg, var(--accent), #0070f3);
  box-shadow: 0 4px 20px rgba(10, 132, 255, 0.3);
}

.dark-mode .random-btn:hover {
  box-shadow: 0 8px 40px rgba(10, 132, 255, 0.5);
}

/* Project Cards */
.dark-mode .project-card {
  background: var(--card-bg);
  border-color: var(--border-light);
  box-shadow: 0 8px 32px var(--shadow-medium);
}

.dark-mode .project-card:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 60px var(--shadow-strong),
              0 0 0 1px rgba(10, 132, 255, 0.2),
              0 0 60px rgba(10, 132, 255, 0.15);
}

.dark-mode .project-title {
  color: var(--text-primary);
}

.dark-mode .project-description {
  color: var(--text-secondary);
}

.dark-mode .project-tag {
  background: rgba(25, 195, 125, 0.15);
  color: var(--accent);
  border-color: rgba(25, 195, 125, 0.3);
}

.dark-mode .project-link {
  color: var(--accent);
}

.dark-mode .project-card:hover .project-link {
  color: var(--accent-hover);
}

/* Coming Soon Card - Dark Mode */
.dark-mode .project-card.coming-soon {
  border-color: var(--accent);
  opacity: 0.85;
}

.dark-mode .project-card.coming-soon:hover {
  opacity: 1;
  box-shadow: 0 12px 40px var(--shadow-strong);
}

.dark-mode .project-card.coming-soon .project-icon {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.dark-mode .project-card.coming-soon .project-tag {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

/* Loading State */
.dark-mode .loading-spinner {
  border-color: var(--border-light);
  border-top-color: var(--accent);
}

.dark-mode .loading-state p {
  color: var(--text-secondary);
}

/* Highlight Animation */
@keyframes highlightPulseDark {
  0%, 100% {
    box-shadow: 0 20px 60px var(--shadow-strong);
    border-color: var(--accent);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(25, 195, 125, 0.2), 
                0 20px 60px var(--shadow-strong);
    border-color: var(--accent);
    transform: scale(1.02);
  }
}

.dark-mode .project-card.highlight {
  animation: highlightPulseDark 1.5s ease-in-out 3;
}/*
  Projects Showcase - Dark Mode
  © 2025 Miloš Sarić. All rights reserved.
  Uses existing dark mode variables from darkmode-optimized.css
*/

/* No need to redefine dark mode variables - they're already in darkmode-optimized.css */

/* Projects Section */
.dark-mode .projects-section {
  background: var(--bg-primary);
}

/* Header */
.dark-mode .projects-header h1 {
  color: var(--text-primary);
}

.dark-mode .projects-subtitle {
  color: var(--text-secondary);
}

/* Random Button */
.dark-mode .random-btn {
  background: var(--gradient);
  box-shadow: var(--shadow-md);
}

.dark-mode .random-btn:hover {
  box-shadow: var(--shadow-lg);
}

/* Project Cards */
.dark-mode .project-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--shadow-sm);
}

.dark-mode .project-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

.dark-mode .project-title {
  color: var(--text-primary);
}

.dark-mode .project-description {
  color: var(--text-secondary);
}

.dark-mode .project-tag {
  background: rgba(25, 195, 125, 0.15);
  color: var(--accent);
  border-color: rgba(25, 195, 125, 0.3);
}

.dark-mode .project-link {
  color: var(--accent);
}

/* Loading State */
.dark-mode .loading-spinner {
  border-color: var(--border-color);
  border-top-color: var(--accent);
}

.dark-mode .loading-state p {
  color: var(--text-secondary);
}

/* Highlight Animation */
@keyframes highlightPulseDark {
  0%, 100% {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(25, 195, 125, 0.2), var(--shadow-lg);
    border-color: var(--accent);
    transform: scale(1.02);
  }
}

.dark-mode .project-card.highlight {
  animation: highlightPulseDark 1.5s ease-in-out 3;
}