/* LIGHT THEME (Default) */
:root {
	--color-primary: #0071bc;
	--color-primary-rgb: 0 113 188;
	--color-accent: #8dc63f;
	--color-text: #212529;
	--color-muted: #6c757d;
	--color-bg: #ffffff;
	--color-link: var(--color-primary);
	--color-light-bg: #f8f9fa;
	/* Very light gray background */
	--color-border: #dee2e6;
	/* Light gray border */
	--color-dark-bg: #343a40;
	/* Darker background or footer */
	--color-hover: #e2e6ea;
	/* Light hover for buttons */
	--color-secondary: #6f42c1;
	/* Deep purple for contrast (secondary CTAs) */
	--color-warning: #ffc107;
	/* Bright yellow for alerts or highlights */
	--color-error: #dc3545;
	/* Strong red for errors */
	--color-success: #28a745;
	/* Deep green for success, harmonizes with accent */
	--color-info: #17a2b8;
	/* Teal/blue for info messages */
	--color-primary-light: #3393d1;
	/* Lighter version of primary */
	--color-primary-dark: #005b99;
	/* Darker version of primary */
	--color-accent-light: #aee96d;
	/* Lighter version of accent */
	--color-accent-dark: #6da530;
	/* Darker version of accent */
	--color-background: rgb(244, 244, 244);
	/* light gray */
}

/* CSS */
body {
	font-family: 'Inter', sans-serif;
}

.text-primary {
	color: var(--color-primary) !important;
}

.body {
	margin: 0;
	/* background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); */
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* background-size: 100% 100vh;   */

}

.body {
	background-image: url("/images/background.png");
	background-size: cover;
	background-position: center;
}

.body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("/images/background.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: blur(1px) brightness(0.7);
	/* controls the softness and brightness */
	z-index: -500;
	pointer-events: none;
	/* so user can still click on buttons above */
}


a {
	color: var(--color-link);
}

.btn-primary {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.btn-primary.active {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
}

.btn-primary:hover {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
}

.form-check-input {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	accent-color: var(--color-accent) !important;
}

.form-check-input:checked {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	accent-color: var(--color-accent) !important;
}

.btn-outline-primary {
	border-color: var(--bs-primary) !important;
	color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
	border-color: var(--color-accent) !important;
	background-color: var(--color-accent) !important;
	color: var(--color-primary) !important;
}

.btn-outline-primary.active {
	background-color: var(--color-accent) !important;
	color: white !important;
	border-color: var(--color-accent) !important;
}

.bg-primary {
	background-color: var(--color-primary) !important;
}

/* Scalable for Dark Theme */
[data-theme="dark"] {
	--color-primary: #0dcaf0;
	--color-accent: #6cbf3f;
	--color-text: #f8f9fa;
	--color-muted: #adb5bd;
	--color-bg: #121212;
	--color-link: var(--color-primary);

	--bs-primary: var(--color-primary);
	--bs-success: var(--color-accent);
	--bs-body-bg: var(--color-bg);
	--bs-body-color: var(--color-text);
	--bs-link-color: var(--color-link);
}

.nav-item .nav-link:hover {
	background: rgba(0, 255, 242, 0.2);
	border-radius: 5px;
	transition: all 0.5s;
}