/* =================== */
/* Light Mode		   */
/* =================== */

body.light-mode {
	--primary: #0a4d8f;
	--primary-light: #1e6bb8;
	--primary-dark: #063056;
	--accent: #0099cc;
	--accent-glow: rgba(0, 153, 204, 0.2);
	--dark: #ffffff;
	--dark-blue: #f5f7fa;
	--text: #1a1a1a;
	--text-muted: #4a5568;
	--card-bg: rgba(255, 255, 255, 0.95);
	--card-border: rgba(30, 107, 184, 0.2);
	--error: #dc2626;
	--backgnd-trans: rgba(255, 255, 255, 0.7);
	--success: #16a34a;
	--box-shadow-dark: rgba(0, 0, 0, 0.1);
	--box-shadow: rgba(10, 77, 143, 0.4);
	--transparent10-blue: rgba(10, 77, 143, 0.1);

	background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 50%, #cbd5e1 100%);
}

body.light-mode .nav-link,
body.light-mode .footer h3,
body.light-mode .footer h4 {
	color: var(--text);
}

body.light-mode .container,
body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder,
body.light-mode .last-updated,
body.light-mode .footer p,
body.light-mode .footer-link {
	color: var(--text-muted);
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active,
body.light-mode .footer-link:hover {
	color: var(--primary);
}

body.light-mode .theme-icon.moon {
	opacity: 0;
	transform: rotate(-90deg) scale(0);
	-webkit-transform: rotate(-90deg) scale(0);
	-moz-transform: rotate(-90deg) scale(0);
	-ms-transform: rotate(-90deg) scale(0);
	-o-transform: rotate(-90deg) scale(0);
}

body.light-mode .theme-icon.sun {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	-o-transform: rotate(0deg) scale(1);
}

body.light-mode a:focus,
body.light-mode button:focus {
	outline: 3px solid var(--primary);
}

body.light-mode #bg-layer-1,
body.light-mode #bg-layer-2 {
	opacity: 0.15;
}

body.light-mode .navbar {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px var(--box-shadow-dark);
}

body.light-mode .navbar.scrolled {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 4px 20px var(--box-shadow-dark);
}

body.light-mode .skill-card,
body.light-mode .cert-card,
body.light-mode .education-card,
body.light-mode .course-card,
body.light-mode .principle-card,
body.light-mode .interest-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: 0 4px 12px var(--box-shadow-dark);
}

body.light-mode .skill-card:hover,
body.light-mode .cert-card:hover,
body.light-mode .education-card:hover,
body.light-mode .course-card:hover,
body.light-mode .principle-card:hover,
body.light-mode .interest-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	border-color: var(--primary);
}


body.light-mode .timeline-line,
body.light-mode .skill-bar {
	background: rgba(10, 77, 143, 0.2);
}

body.light-mode .timeline-dot {
	background: var(--primary);
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 4px var(--box-shadow);
}

body.light-mode .form-group input,
body.light-mode .form-group textarea,
body.light-mode .form-group #passwordDisplay {
	background: rgba(10, 77, 143, 0.05);
	border: 1px solid var(--card-border);
	color: var(--text);
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
	background: rgba(10, 77, 143, 0.08);
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--box-shadow);
}

body.light-mode .btn {
	box-shadow: 0 4px 12px var(--box-shadow);
}

body.light-mode .btn:hover {
	box-shadow: 0 6px 20px var(--box-shadow);
}

body.light-mode .btn-primary,
body.light-mode #submitbtn,
body.light-mode #decryptBtn,
body.light-mode #encryptBtn {
	background: linear-gradient(135deg, rgba(10, 77, 143, 0.3), var(--accent));
	color: var(--text);
	box-shadow: 0 4px 12px var(--box-shadow);
}

body.light-mode .btn-primary:hover,
body.light-mode #submitbtn:hover,
body.light-mode #decryptBtn:hover,
body.light-mode #encryptBtn:hover {
	background: linear-gradient(135deg, rgba(10, 77, 143, 0.6), var(--accent));
	box-shadow: 0 6px 20px var(--box-shadow);
}

body.light-mode .btn-secondary {
	background: linear-gradient(135deg, rgba(10, 77, 143, 0.1), var(--transparent10-blue));
	color: var(--text);
	box-shadow: 0 4px 12px var(--box-shadow);
}

body.light-mode .btn-secondary:hover {
	background: linear-gradient(135deg, rgba(10, 77, 143, 0.3), var(--transparent10-blue));
	box-shadow: 0 6px 20px var(--box-shadow);
}

body.light-mode .footer {
	background: rgba(255, 255, 255, 0.95);
	border-top: 1px solid var(--card-border);
}