/* ========== Themes ========== */
/* Подключается после variables.css для переопределения переменных */

/* Тема по умолчанию (светлая) — уже в :root, но оставляем для явности */
:root {
    --color-bg: #fcfcfc;
    --color-bg-alt: #f8f8f8;
    --color-white: #ffffff;
    --color-text: #1a1a1a;
    --color-text-light: #5a5a5a;
    --color-muted: #a4a4a4;
    --color-border: #f1f1f1;
    --color-black: #000000;
    --color-accent: #f2994b;
    --color-accent-dark: #e07c2c;
    --color-star: #ffc107;
    --sidebar-bg: var(--color-white);
}

/* ========== Тёмная тема ========== */
[data-theme="dark"] {
    --color-bg: #1a1a1a;
    --color-bg-alt: #2a2a2a;
    --color-white: #2a2a2a;
    --color-text: #f0f0f0;
    --color-text-light: #b0b0b0;
    --color-muted: #8a8a8a;
    --color-border: #3a3a3a;
    --color-black: #f0f0f0;
    --color-accent: #f2994b;
    --color-accent-dark: #e07c2c;
    --color-star: #ffc107;
    --sidebar-bg: #2a2a2a;
    
    /* Скелетон для тёмной темы */
    --color-skeleton-start: #3a3a3a;
    --color-skeleton-end: #2a2a2a;
    
    /* Тени для тёмной темы (более мягкие) */
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ========== Тема "Сухостойная сосна" ========== */
[data-theme="wood"] {
    --color-bg: #f5ede4;  /* светлая доска */
    --color-bg-alt: #efe3d6;
    --color-white: #fff9f0;
    --color-text: #3a2a1f;
    --color-text-light: #6b5a4a;
    --color-muted: #9b8a78;
    --color-border: #e0d4c8;
    --color-black: #3a2a1f;
    --color-accent: #b87c4a;
    --color-accent-dark: #9b6238;
    --color-star: #d4a017;
    
    /* Фон сайдбара — текстура бревна */
    --sidebar-bg: url('../img/textures/wood-texture.jpg');
    
    /* Скелетон для деревянной темы */
    --color-skeleton-start: #e0d4c8;
    --color-skeleton-end: #d0c0b0;
    
    /* Тени для деревянной темы */
    --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ========== Стили для сайдбара с текстурой (только для деревянной темы) ========== */
[data-theme="wood"] .sidebar {
    background: var(--sidebar-bg);
    background-size: cover;
    background-position: center;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="wood"] .sidebar__icon-btn {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="wood"] .sidebar__icon-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="wood"] .sidebar__social--vk {
    background-color: #0077FF;
}

[data-theme="wood"] .sidebar__social--wa {
    background-color: #25D366;
}

/* ========== Стили для карточек в тёмной теме ========== */
[data-theme="dark"] .card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .reviews,
[data-theme="dark"] .video-section__container,
[data-theme="dark"] .stories__container,
[data-theme="dark"] .estimate__visual,
[data-theme="dark"] .hero__media,
[data-theme="dark"] .services__item {
    background: var(--color-white);
    border-color: var(--color-border);
}

[data-theme="dark"] .image-placeholder.image-error {
    background: #3a3a3a;
}

/* ========== Стили для деревянной темы ========== */
[data-theme="wood"] .card,
[data-theme="wood"] .project-card,
[data-theme="wood"] .reviews,
[data-theme="wood"] .video-section__container,
[data-theme="wood"] .stories__container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
}

[data-theme="wood"] .project-card__scheme {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="wood"] .hero__media {
    background: var(--color-bg-alt);
}

/* ========== Адаптация кнопки переключения темы ========== */
.theme-switcher {
    display: flex;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--color-bg-alt);
    border-radius: var(--radius-pill);
    margin-top: var(--spacing-4);
}

.theme-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
    color: var(--color-text);
    font-family: var(--font-body);
}

.theme-btn:hover {
    border-color: var(--color-accent);
    transform: scale(1.02);
}

.theme-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.theme-btn__icon {
    font-size: 1rem;
}

/* Адаптив для переключателя */
@media (max-width: 768px) {
    .theme-switcher {
        gap: var(--spacing-1);
        padding: var(--spacing-1);
    }
    
    .theme-btn {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 0.75rem;
    }
    
    .theme-btn__icon {
        font-size: 0.875rem;
    }
}