:root {
	--background-color: #f5f5f7;
	--text-color: #0a0a14;
	--card-bg: rgba(245, 245, 250, 0.8);
	--nav-bg: rgba(245, 245, 250, 0.95);
	--error-color: #e60040;
	--success-color: #00c853;
}
body {
	color: var(--text-color);
	background-color: var(--background-color);
}
body::before {
	background: radial-gradient(circle at 75% 50%, rgba(76, 0, 255, 0.1), transparent 70%);
}
nav {
	background-color: var(--nav-bg);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
nav ul li a {
	color: var(--text-color);
}
@media (max-width: 767.98px) {
	nav ul li a.active {
		background: rgba(235, 235, 245, 0.9);
        color: var(--text-color);
	}
    nav ul li a:hover {
        background: rgba(235, 235, 245, 0.9);
    }    
}
.language-dropdown select {
	background: rgba(235, 235, 245, 0.8);
	color: var(--text-color);
	border: 1px solid rgba(0, 0, 0, 0.1);
}
.language-dropdown select:hover {
	border-color: rgba(0, 234, 255, 0.5);
	box-shadow: 0 0 8px rgba(0, 234, 255, 0.3);
}
.card {
	background: var(--card-bg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.05);
}
.card-header .day-name-bg {
	opacity: 0.25;
	color: #000;
}
.form-control {
	color: var(--text-color);
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.1);
}
.form-control:focus {
	border-color: rgba(0, 234, 255, 0.7);
	box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.2);
}
footer {
	background: rgba(235, 235, 245, 0.9);
	color: var(--text-color);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.auth-card {
	background: var(--card-bg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.auth-subtitle {
	color: rgba(10, 10, 20, 0.7);
}
.password-requirements {
	background-color: rgba(0, 0, 0, 0.05);
}
.modal-content {
	background-color: var(--card-bg);
	color: var(--text-color);
}
.modal-header, .modal-footer {
	border-color: rgba(0, 0, 0, 0.1);
}
.btn-close {
	color: var(--text-color);
	opacity: 0.8;
}
.theme-toggle {
	background: rgba(235, 235, 245, 0.8);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--text-color);
}
.theme-toggle:hover {
	border-color: rgba(0, 234, 255, 0.5);
	box-shadow: 0 0 8px rgba(0, 234, 255, 0.3);
}
.theme-toggle svg {
	width: 20px;
	height: 20px;
}
label {
	color: var(--text-color);
}
.form-group label {
	color: var(--text-color);
	font-weight: 500;
}
.form-check-label {
	color: var(--text-color);
}
.divider span {
	color: rgba(10, 10, 20, 0.7);
}
.auth-links a {
	color: rgba(10, 10, 20, 0.7);
}
.auth-links a:hover {
	color: var(--text-color);
}
.rating-btn {
	color: var(--text-color);
	border-color: rgba(0, 0, 0, 0.2);
}
.btn-outline-secondary,
.action-buttons .btn-outline-secondary {
	color: rgb(0,0,0);
	background-color: transparent;
	border-color: #6c757d;
}
.btn-outline-secondary:hover {
	color:  rgb(0,0,0);
}
.onboarding-tile-step {
	opacity: 0.1;
	color: #000;
}
.meal-day-card .card-header {
    border-bottom: 1px solid rgba(49, 49, 49, 0.5);
}

.gradient-text {
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}