/* styles.css */

/* 1. CSS Variables for Themes */
:root {
	--bg: #ffffff;
	--text: #333333;
	--primary: #673ab7;
	--secondary: #4caf50;
	--card-bg: #ffffff;
	--shadow: rgba(0, 0, 0, 0.1);
}
body.dark-mode {
	--bg: #121212;
	--text: #e0e0e0;
	--card-bg: #1e1e1e;
	--shadow: rgba(0, 0, 0, 0.5);
}

/* 2. Base Styles */
body {
	background-color: var(--bg);
	color: var(--text);
	transition: background-color 0.3s, color 0.3s;
}

/* 3. Navbar */
.navbar {
	background-color: var(--card-bg) !important;
	transition: background-color 0.3s, box-shadow 0.3s;
}
.navbar.shadow-sm {
	box-shadow: 0 0.25rem 0.5rem var(--shadow) !important;
}

/* 4. Cards */
.card {
	background-color: var(--card-bg) !important;
	border: none;
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1rem var(--shadow) !important;
	transition: box-shadow 0.3s;
}
.card:hover {
	box-shadow: 0 1rem 2rem var(--shadow) !important;
}

/* 5. Buttons */
.btn-primary {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	transition: transform 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 0.5rem 1rem var(--shadow);
}
.btn-outline-secondary {
	color: var(--text) !important;
	border-color: var(--text) !important;
	transition: background-color 0.3s, color 0.3s;
}
.btn-outline-secondary:hover {
	background-color: var(--secondary) !important;
	color: #ffffff !important;
	border-color: var(--secondary) !important;
}

/* 6. Progress Bars */
.progress {
	background-color: #ddd;
	border-radius: 0.25rem;
}
.progress-bar {
	background-color: var(--primary) !important;
	transition: width 0.5s ease-in-out;
}

/* 7. Contact Icons */
.btn-lg.rounded-circle {
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, box-shadow 0.3s;
}
.btn-lg.rounded-circle:hover {
	transform: translateY(-3px);
	box-shadow: 0 0.5rem 1rem var(--shadow);
}

/* 8. Footer */
footer {
	background-color: var(--card-bg) !important;
	transition: background-color 0.3s;
}