/**
 * 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 - full ultra black (same as About page) */
.renovations-page-wrapper[data-theme="dark"] {
    background: #000000;
    color: var(--color-dark-text, #ffffff);
}

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

.renovations-page-wrapper[data-theme="dark"] .renovation-section--secondary {
    background: #000000;
}

/* 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 - subtle elevation on ultra black, single border token */
.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(--renovation-dark-bg-surface, #0a0a0a);
    border-color: var(--renovation-dark-border-light, rgba(255, 255, 255, 0.1));
    color: var(--color-dark-text, #ffffff);
}

/* Form elements in dark mode - consistent elevated surface */
.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(--renovation-dark-bg-elevated, #121212);
    color: var(--color-dark-text, #ffffff);
    border-color: var(--renovation-dark-border-light, rgba(255, 255, 255, 0.1));
}

.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(--renovation-dark-bg-elevated, #121212);
    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);
}