:root {
/* Переменные для светлой темы (по умолчанию) */
--logo: url("../images/logo_dark.png") no-repeat;
--primary-color: #007bff;
--font-color: #111;
--font-header-color: #111;
--font-footer-color: #111;
--hover-color: #3d85c6;
--construction-color: var(--font-color);
--bg-color: #edf1f8;
--bg-header-color: #fff;
--bg-footer-color: #fff;
--secondary-bg: #f8f9fa;
--border-color: #dee2e6;
}

/* Переменные для темной темы */
[data-theme="dark"] {
--logo: url("../images/logo_light.png") no-repeat;
--primary-color: #0d6efd;
--font-color: #e1e1e1;
--font-header-color: rgba(255, 255, 255, .7);
--font-footer-color: rgba(255, 255, 255, .7);
--hover-color: white;
--construction-color: #111;
--bg-color: #0a1828;
--bg-header-color: #121d2d;
--bg-footer-color: #121d2d;
--secondary-bg: ##121d2d;
--border-color: #444444;
}

body {
background-color: var(--bg-color);
transition: all 0.2s ease;
}

/* Стили для переключателя */
.theme-switch-wrapper {
font-size: 12px;
display: flex;
align-items: center;
}

.theme-switch {
display: inline-block;
position: relative;
width: 30px;
height: 16px;
margin: 0 4px;
}

.theme-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
}

input:checked + .slider {
background-color: var(--primary-color);
}

input:checked + .slider:before {
transform: translateX(14px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}