/**
 * Renovation Page - Dark Theme
 * 
 * Dark mode styling for renovation pages
 * Uses design system variables for consistency
 * 
 * @package TwinsRealEstate
 * @version 2.0.0
 */

/* Dark theme overrides */
.renovations-page-wrapper[data-theme="dark"] {
    background: var(--color-dark-bg, #1a1a1a);
    color: var(--color-dark-text, #ffffff);
}

.renovations-page-wrapper[data-theme="dark"] .renovation-section {
    background: var(--color-dark-bg, #1a1a1a);
    color: var(--color-dark-text, #ffffff);
}

.renovations-page-wrapper[data-theme="dark"] .renovation-section--secondary {
    background: var(--color-dark-bg-light, #0a0a0a);
}

/* Ensure text is always visible in dark mode */
.renovations-page-wrapper[data-theme="dark"] h1,
.renovations-page-wrapper[data-theme="dark"] h2,
.renovations-page-wrapper[data-theme="dark"] h3,
.renovations-page-wrapper[data-theme="dark"] h4,
.renovations-page-wrapper[data-theme="dark"] h5,
.renovations-page-wrapper[data-theme="dark"] h6 {
    color: var(--color-dark-text, #ffffff);
}

.renovations-page-wrapper[data-theme="dark"] p,
.renovations-page-wrapper[data-theme="dark"] span,
.renovations-page-wrapper[data-theme="dark"] div {
    color: var(--color-dark-text, #ffffff);
}

.renovations-page-wrapper[data-theme="dark"] [class*="muted"],
.renovations-page-wrapper[data-theme="dark"] [class*="secondary"] {
    color: var(--color-dark-text-secondary, #e0e0e0);
}

/* Cards and surfaces */
.renovations-page-wrapper[data-theme="dark"] [class*="card"],
.renovations-page-wrapper[data-theme="dark"] [class*="item"],
.renovations-page-wrapper[data-theme="dark"] [class*="banner"] {
    background: var(--color-dark-bg-lightest, #1a1a1a);
    border-color: var(--color-dark-border, #2a2a2a);
    color: var(--color-dark-text, #ffffff);
}

/* Form elements in dark mode */
.renovations-page-wrapper[data-theme="dark"] input,
.renovations-page-wrapper[data-theme="dark"] select,
.renovations-page-wrapper[data-theme="dark"] textarea,
.renovations-page-wrapper[data-theme="dark"] .form-control {
    background: var(--color-dark-bg-lightest, #1a1a1a);
    color: var(--color-dark-text, #ffffff);
    border-color: var(--color-dark-border, #2a2a2a);
}

.renovations-page-wrapper[data-theme="dark"] input:focus,
.renovations-page-wrapper[data-theme="dark"] select:focus,
.renovations-page-wrapper[data-theme="dark"] textarea:focus,
.renovations-page-wrapper[data-theme="dark"] .form-control:focus {
    background: var(--color-dark-bg-lightest, #1a1a1a);
    color: var(--color-dark-text, #ffffff);
    border-color: var(--accent-color, #d4af37);
}

.renovations-page-wrapper[data-theme="dark"] label {
    color: var(--color-dark-text, #ffffff);
}