/* Smooth transition for all theme-related changes */
body,
nav,
footer,
div,
section,
li,
h1,
h2,
h3,
h4,
p,
a {
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Custom glowing effect for the profile picture */
.profile-glow {
	box-shadow: 0 0 35px rgba(167, 139, 250, 0.4);
}

/* Ensures the layout doesn't jump when text length changes */
.typing-container {
	min-height: 100px;
}

@media (min-width: 768px) {
	.typing-container {
		min-height: 60px;
	}
}

/* Light theme (default) */
body {
	background-color: white;
	color: black;
}

/* Example overrides for sections */
.dark nav {
	background-color: #222;
}

.dark .card {
	background-color: #333;
	color: white;
}

.dark .bordered {
	border-color: #666;
}

/* === GLOBAL === */
.dark body {
	background-color: #2a004a;
	color: #f5f5f5;
}

/* Links */
.dark a {
	color: #f5f5f5;
}

.dark a:hover {
	color: #a78bfa;
	/* violet hover */
}

/* Borders */
.dark .border-gray-400,
.dark .border-gray-500,
.dark .border-gray-700 {
	border-color: #666 !important;
}

/* Inputs & Textareas */
.dark input,
.dark textarea {
	background-color: #1e1e1e;
	color: #f5f5f5;
	border-color: #666;
}

/* === NAVBAR === */
.dark nav {
	background-color: #2a004a !important;
}

.dark nav h1,
.dark nav ul li a {
	color: #f5f5f5 !important;
}

/* === HERO SECTION === */
.dark .typing-container {
	color: #a78bfa;
	/* keep accent */
}

/* === ABOUT SECTION === */
.dark #about {
	background-color: #2a004a;
}

.dark #about p {
	color: #ddd;
}

.dark #about h2,
.dark #about h3,
.dark #about h4 {
	color: #fff;
}

.dark #about li {
	background-color: #222;
	color: #f5f5f5;
}

/* === SERVICES SECTION === */
.dark #services {
	background-color: #2a004a;
}

.dark #services h2,
.dark #services h3,
.dark #services h4,
.dark #services p {
	color: #f5f5f5;
}

.dark #services .border-gray-400 {
	background-color: #222;
}

/* === PROJECTS SECTION === */
.dark #projects {
	background-color: #2a004a;
}

.dark #projects h2,
.dark #projects h4,
.dark #projects p {
	color: #f5f5f5;
}

.dark #projects .bg-white {
	background-color: #222 !important;
	color: #f5f5f5 !important;
}

.dark #projects .border-black {
	border-color: #ccc !important;
}

/* === CONTACT SECTION === */
.dark #contact {
	background-color: #2a004a;
}

.dark #contact h2,
.dark #contact h4,
.dark #contact p {
	color: #f5f5f5;
}

.dark #contact input,
.dark #contact textarea {
	background-color: #1e1e1e;
	color: #f5f5f5;
	border-color: #666;
}

/* === FOOTER === */
.dark footer,
.dark .footer {
	background-color: #1c1c1c;
	color: #f5f5f5;
}

.dark footer a {
	color: #f5f5f5;
}