/* Early theme detection styles - Critical for preventing FOUC */
.dark {
  background-color: #111827;
  color: #ffffff;
}

.light {
  background-color: #f9fafb;
  color: #1f2937;
}

/* Ensure proper icon alignment */
.fab, .fas, .far, .fal, .fad, .fa {
  display: inline-block;
  line-height: 1;
}

/* Remove default anchor styling for logo */
.no-underline {
  text-decoration: none !important;
}

.no-underline:hover {
  text-decoration: none !important;
}

/* Optional: Add smooth transition for hover effect */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Blog post title hover effect */
.hover\:text-cyan-400:hover {
  color: #22d3ee;
}

/* Remove underline from blog post titles */
.no-underline {
  text-decoration: none;
}

/* Preserve colorful icon colors - don't override brand colors */
.light .fab:not(.fa-html5):not(.fa-css3-alt):not(.fa-js):not(.fa-react):not(.fa-node-js):not(.fa-git-alt):not(.fa-bootstrap),
.light .fas:not(.fa-server):not(.fa-database):not(.fa-paint-brush):not(.fa-envelope):not(.fa-moon):not(.fa-sun),
.light .far, .light .fal, .light .fad {
  /* Don't override colored icons in light mode */
}

/* Override only specific elements for light theme */
.light .bg-gray-800 {
  background-color: #e5e7eb !important;
  color: #1f2937 !important;
}

.light .bg-gray-900 {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
}

.light .text-gray-400 {
  color: #6b7280 !important;
}

.light .bg-gray-700 {
  background-color: #d1d5db !important;
  color: #1f2937 !important;
}

.light .text-white {
  color: #1f2937 !important;
}

.light .text-gray-500 {
  color: #6b7280 !important;
}

/* Light mode specific styles for sections */
.light #about,
.light #experience,
.light #blog {
  background-color: #e5e7eb !important;
}

.light #skills,
.light #contact,
.light #projects {
  background-color: #f9fafb !important;
}

/* Light mode form inputs */
.light input,
.light textarea {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* Light mode buttons */
.light .border.border-cyan-400 {
  border-color: #06b6d4 !important;
  color: #06b6d4 !important;
}

.light .border.border-cyan-400:hover {
  background-color: #06b6d4 !important;
  color: #1f2937 !important;
}

/* Ensure theme transitions are smooth */
* {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Preserve brand colors for icons in both themes */
.fab.fa-html5 { color: #e34f26 !important; }
.fab.fa-css3-alt { color: #1572b6 !important; }
.fab.fa-js { color: #f7df1e !important; }
.fab.fa-react { color: #61dafb !important; }
.fab.fa-node-js { color: #339933 !important; }
.fab.fa-git-alt { color: #f05032 !important; }
.fab.fa-bootstrap { color: #7952b3 !important; }
.fas.fa-server { color: #6b7280 !important; }
.fas.fa-database { color: #4338ca !important; }
.fas.fa-paint-brush { color: #ec4899 !important; }

/* Explicitly preserve icon colors in light mode */
.light .fab.fa-html5 { color: #e34f26 !important; }
.light .fab.fa-css3-alt { color: #1572b6 !important; }
.light .fab.fa-js { color: #f7df1e !important; }
.light .fab.fa-react { color: #61dafb !important; }
.light .fab.fa-node-js { color: #339933 !important; }
.light .fab.fa-git-alt { color: #f05032 !important; }
.light .fab.fa-bootstrap { color: #7952b3 !important; }
.light .fas.fa-server { color: #6b7280 !important; }
.light .fas.fa-database { color: #4338ca !important; }
.light .fas.fa-paint-brush { color: #ec4899 !important; }

/* Add to the end of your CSS file */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

/* Form message animations */
#form-message-success,
#form-message-error {
  transition: all 0.3s ease;
}