/* Dark Mode Styles */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --text-secondary: #555555;
  --primary-color: #0066cc;
  --primary-light: #e6f2ff;
  --primary-dark: #004c99;
  --border-color: #eaeaea;
  --card-bg: #ffffff;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --filter-bg: #f8f9fa;
  --tag-bg: #f1f1f1;
  --tag-text: #555555;
  --category-bg: #e6f2ff;
  --category-text: #0066cc;
  --header-bg: #ffffff;
  --footer-bg: #f8f9fa;
  --difficulty-beginner: #28a745;
  --difficulty-intermediate: #fd7e14;
  --difficulty-advanced: #dc3545;
  --stars-bg: #f1f7ff;
  --stars-text: #0066cc;
  --nav-link: #333333;
  --nav-link-hover: #0066cc;
  --nav-link-active: #0066cc;
}

body.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
  --text-secondary: #cccccc;
  --primary-color: #70a8ff;
  --primary-light: #1f364d;
  --primary-dark: #8ab4f8;
  --border-color: #2a2a2a;
  --card-bg: #2a2a2a;
  --card-shadow: rgba(0, 0, 0, 0.5);
  --filter-bg: #252525;
  --tag-bg: #3a3a3a;
  --tag-text: #e0e0e0;
  --category-bg: #444b57;
  --category-text: #ffffff;
  --header-bg: #1a1a1a;
  --footer-bg: #1a1a1a;
  --difficulty-beginner: #4bd866;
  --difficulty-intermediate: #ff9f45;
  --difficulty-advanced: #ff6b6b;
  --stars-bg: #1f364d;
  --stars-text: #b3d4ff;
  --nav-link: #ffffff;
  --nav-link-hover: #b3d4ff;
  --nav-link-active: #b3d4ff;
}

/* Apply CSS variables to elements */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

header {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
}

footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--border-color);
}

.site-logo {
  color: var(--text-color);
}

.nav-link {
  color: var(--nav-link);
}

.nav-link:hover {
  color: var(--nav-link-hover);
}

.nav-link.active {
  color: var(--nav-link-active);
}

/* Project Card Dark Mode Styles */
.project-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: 0 4px 6px var(--card-shadow);
}

.dark-mode .project-card,
.dark-mode .featured-project-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.dark-mode .featured-project-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.project-title a {
  color: var(--text-color);
}

.project-title a:hover {
  color: var(--primary-color);
}

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

.project-category,
.dark-mode .featured-project-category {
  background-color: var(--category-bg);
  color: var(--category-text);
}

/* Category styling specific fixes */
.dark-mode .project-category[data-category="gpu-marketplace"],
.dark-mode .project-category[data-category="web-development"],
.dark-mode .project-category[data-category="agentic-frameworks"] {
  background-color: var(--category-bg);
  color: var(--category-text);
}

.dark-mode [class^="GPU"],
.dark-mode [class^="Web"],
.dark-mode [class^="Agentic"] {
  background-color: var(--category-bg);
  color: var(--category-text);
}

.project-meta-info {
  border-color: var(--border-color);
}

.project-repo a, .project-website a {
  color: var(--text-secondary);
}

.project-repo a:hover, .project-website a:hover {
  color: var(--primary-color);
}

.github-stars {
  background-color: var(--stars-bg);
  color: var(--stars-text);
}

.tag,
.dark-mode .featured-tag {
  background-color: var(--tag-bg);
  color: var(--tag-text);
}

.view-project,
.dark-mode .featured-view-project {
  color: var(--primary-color);
}

/* Add specific styles for tags at the bottom of project cards */
.dark-mode .gpu,
.dark-mode .serverless,
.dark-mode .ai,
.dark-mode .machine-learning,
.dark-mode .ui,
.dark-mode .api,
.dark-mode .ml,
.dark-mode .visualization,
.dark-mode .open-source,
.dark-mode .self-hosted,
.dark-mode [class^="+"] {
  background-color: var(--tag-bg);
  color: var(--tag-text);
}

/* Featured Project Card Dark Mode */
.featured-project-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: 0 10px 30px var(--card-shadow);
}

.featured-project-title a {
  color: var(--text-color);
}

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

.featured-project-category {
  background-color: var(--category-bg);
  color: var(--category-text);
}

.featured-tag {
  background-color: var(--tag-bg);
  color: var(--tag-text);
}

/* Filter Controls Dark Mode */
.project-filters {
  background-color: var(--filter-bg);
}

.filter-select, .search-input {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

.filter-label {
  color: var(--text-color);
}

.filter-category {
  background-color: var(--tag-bg);
  color: var(--text-color);
}

.filter-category.active {
  background-color: var(--primary-color);
  color: white;
}

#no-results {
  background-color: var(--filter-bg);
  color: var(--text-color);
}

/* Additional Dark Mode Elements */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--text-color);
}

.dark-mode .featured-title,
.dark-mode .category-title,
.dark-mode .suggested-title {
  color: var(--text-color);
}

.dark-mode .featured-projects-section {
  background-color: var(--bg-color);
}

.dark-mode .content-description,
.dark-mode .suggested-description {
  color: var(--text-secondary);
}

/* Fix for home page heading */
.dark-mode .hero h1,
.dark-mode .hero h2 {
  color: var(--text-color);
}

/* Home page hero section */
.dark-mode .hero {
  background-color: var(--bg-color);
}

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

/* Project grid dark mode tweaks */
.dark-mode .project-grid {
  background-color: var(--bg-color);
}

/* Theme toggle styles moved to theme-toggle.css */

/* Button styles in dark mode */
.dark-mode .btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}

.dark-mode .btn-secondary {
  background-color: var(--tag-bg);
  color: var(--text-color);
}

.dark-mode .btn-primary:hover {
  background-color: var(--primary-dark);
}

.dark-mode .btn-secondary:hover {
  background-color: #3a3a3a;
}

/* Ensure good contrast for links */
.dark-mode a {
  color: var(--primary-color);
}

.dark-mode a:hover {
  color: var(--primary-dark);
}