/* ===========================
   Dark Mode Styles
   =========================== */

:root {
    /* Light theme (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;
}

[data-theme="dark"] {
    /* Dark theme */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
    --card-bg: #2a2a2a;
    --input-bg: #333333;
    --input-border: #505050;
}

/* Плавный переход между темами */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *:before,
html.theme-transitioning *:after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease !important;
    transition-delay: 0 !important;
}

/* Применение переменных */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.card, .service-card, .social-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

input, textarea, select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

/* Темная тема для модальных окон */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Темная тема для header */
[data-theme="dark"] .header {
    background-color: #1a1a1a !important;
}

/* Кнопка переключения темы */
#theme-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
    margin-left: 10px;
    transition: transform 0.2s ease;
}

#theme-toggle:hover {
    transform: scale(1.2);
}