/* ============================================
   Theme Definitions
   ============================================ */

/* Comic/Neon Theme (Default) */
body[data-theme="comic"],
body:not([data-theme]) {
  --primary: #00ff00; /* Neon Green */
  --secondary: #ff1493; /* Hot Pink */
  --accent: #00ffff; /* Cyan */
  --bg-main: #0a0a0a; /* Near Black */
  --bg-card: #1a1a1a; /* Dark Gray */
  --text-primary: #ffffff;
  --text-secondary: #00ff00; /* Neon Green */
  --shadow: rgba(0, 255, 0, 0.4);
}

/* Dark Mode Theme */
body[data-theme="dark"] {
  --primary: #6067b0; /* Soft Blue (from noBrainer) */
  --secondary: #7a5bae; /* Purple */
  --accent: #5186a2; /* Teal */
  --bg-main: #12163b; /* Dark Navy (from noBrainer) */
  --bg-card: #323875; /* Navy Blue */
  --text-primary: #ffffff;
  --text-secondary: #a9b1ff;
  --shadow: rgba(96, 103, 176, 0.3);
}

/* ============================================
   Theme-Specific Adjustments
   ============================================ */

/* Comic Theme - Extra Vibrant */
body[data-theme="comic"] .hero-main,
body:not([data-theme]) .hero-main {
  animation: gradient-shift 3s ease infinite, pulse 2s ease-in-out infinite;
}

body[data-theme="comic"] .project-card:hover,
body:not([data-theme]) .project-card:hover {
  box-shadow: 0 10px 40px var(--shadow), 0 0 30px var(--primary);
}

/* Dark Theme - Subtle & Professional */
body[data-theme="dark"] .hero-subtitle {
  animation: none;
  text-shadow: none;
}

body[data-theme="dark"] .floating-element {
  opacity: 0.2;
}

body[data-theme="dark"] .project-card {
  border-width: 2px;
}

/* ============================================
   Additional Animations for Comic Theme
   ============================================ */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* ============================================
   Theme Transition
   ============================================ */
body {
  transition: background 0.5s ease, color 0.5s ease;
}

.project-card,
.theme-btn,
.btn {
  transition: all 0.3s ease;
}
