/**
 * Renovation Design System - Unified Color & Theme System
 * 
 * Provides consistent ultra-dark and white theme support
 * Simple, modern, minimalistic design approach
 * 
 * @package TwinsRealEstate
 * @version 2.0.0
 */

/* ==========================================================================
   Unified Color System
   ========================================================================== */

.renovations-page-wrapper {
    /* === LIGHT THEME (White) === */
    --renovation-bg-primary: #ffffff;
    --renovation-bg-secondary: #f8f9fa;
    --renovation-bg-surface: #ffffff;
    --renovation-bg-elevated: #ffffff;
    
    --renovation-text-primary: #1a1a1a;
    --renovation-text-secondary: #6b7280;
    --renovation-text-muted: #9ca3af;
    
    --renovation-border-light: #e5e7eb;
    --renovation-border-medium: #d1d5db;
    --renovation-border-strong: #9ca3af;
    
    /* === DARK THEME (Ultra-Dark) === */
    --renovation-dark-bg-primary: #0a0a0a;
    --renovation-dark-bg-secondary: #111111;
    --renovation-dark-bg-surface: #1a1a1a;
    --renovation-dark-bg-elevated: #1f1f1f;
    
    --renovation-dark-text-primary: #ffffff;
    --renovation-dark-text-secondary: #d1d5db;
    --renovation-dark-text-muted: #9ca3af;
    
    --renovation-dark-border-light: rgba(255, 255, 255, 0.1);
    --renovation-dark-border-medium: rgba(255, 255, 255, 0.2);
    --renovation-dark-border-strong: rgba(255, 255, 255, 0.3);
    
    /* === ACCENT COLORS (Theme-agnostic) === */
    --renovation-accent-primary: #e63946;
    --renovation-accent-secondary: #457b9d;
    --renovation-accent-gradient: linear-gradient(135deg, #e63946 0%, #457b9d 100%);
    
    /* === SHADOWS === */
    --renovation-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --renovation-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --renovation-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --renovation-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    --renovation-dark-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --renovation-dark-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --renovation-dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --renovation-dark-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */

.renovations-page-wrapper {
    background: var(--renovation-bg-primary);
    color: var(--renovation-text-primary);
}

.renovations-page-wrapper [class*="section"] {
    background: var(--renovation-bg-primary);
    color: var(--renovation-text-primary);
}

.renovations-page-wrapper [class*="section"][class*="secondary"] {
    background: var(--renovation-bg-secondary);
}

.renovations-page-wrapper [class*="card"],
.renovations-page-wrapper [class*="surface"] {
    background: var(--renovation-bg-surface);
    color: var(--renovation-text-primary);
    border-color: var(--renovation-border-light);
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

[data-theme="dark"] .renovations-page-wrapper {
    background: var(--renovation-dark-bg-primary);
    color: var(--renovation-dark-text-primary);
}

[data-theme="dark"] .renovations-page-wrapper [class*="section"] {
    background: var(--renovation-dark-bg-primary);
    color: var(--renovation-dark-text-primary);
}

[data-theme="dark"] .renovations-page-wrapper [class*="section"][class*="secondary"] {
    background: var(--renovation-dark-bg-secondary);
}

[data-theme="dark"] .renovations-page-wrapper [class*="card"],
[data-theme="dark"] .renovations-page-wrapper [class*="surface"] {
    background: var(--renovation-dark-bg-surface);
    color: var(--renovation-dark-text-primary);
    border-color: var(--renovation-dark-border-light);
}

/* ==========================================================================
   Form Specific Fixes
   ========================================================================== */

/* Ensure form body has proper contrast */
.quote-section__body,
.quote-section__card {
    background: var(--renovation-bg-surface) !important;
    color: var(--renovation-text-primary) !important;
}

[data-theme="dark"] .quote-section__body,
[data-theme="dark"] .quote-section__card {
    background: var(--renovation-dark-bg-surface) !important;
    color: var(--renovation-dark-text-primary) !important;
}

/* Form inputs - ensure visibility */
.quote-section__body input,
.quote-section__body select,
.quote-section__body textarea,
.quote-section__body .form-control,
.quote-section__body .form-input {
    background: var(--renovation-bg-surface) !important;
    color: var(--renovation-text-primary) !important;
    border-color: var(--renovation-border-medium) !important;
}

[data-theme="dark"] .quote-section__body input,
[data-theme="dark"] .quote-section__body select,
[data-theme="dark"] .quote-section__body textarea,
[data-theme="dark"] .quote-section__body .form-control,
[data-theme="dark"] .quote-section__body .form-input {
    background: var(--renovation-dark-bg-elevated) !important;
    color: var(--renovation-dark-text-primary) !important;
    border-color: var(--renovation-dark-border-medium) !important;
}

/* Form labels - ensure visibility */
.quote-section__body label,
.quote-section__body .form-label {
    color: var(--renovation-text-primary) !important;
}

[data-theme="dark"] .quote-section__body label,
[data-theme="dark"] .quote-section__body .form-label {
    color: var(--renovation-dark-text-primary) !important;
}

/* Form text - ensure visibility */
.quote-section__body p,
.quote-section__body span,
.quote-section__body div,
.quote-section__body .form-text,
.quote-section__body .form-help-text {
    color: var(--renovation-text-secondary) !important;
}

[data-theme="dark"] .quote-section__body p,
[data-theme="dark"] .quote-section__body span,
[data-theme="dark"] .quote-section__body div,
[data-theme="dark"] .quote-section__body .form-text,
[data-theme="dark"] .quote-section__body .form-help-text {
    color: var(--renovation-dark-text-secondary) !important;
}

/* Dynamic form container fixes */
.quote-section__body .dynamic-form-container,
.quote-section__body .form-container,
.quote-section__body .form-body {
    background: var(--renovation-bg-surface) !important;
    color: var(--renovation-text-primary) !important;
}

[data-theme="dark"] .quote-section__body .dynamic-form-container,
[data-theme="dark"] .quote-section__body .form-container,
[data-theme="dark"] .quote-section__body .form-body {
    background: var(--renovation-dark-bg-surface) !important;
    color: var(--renovation-dark-text-primary) !important;
}

/* ==========================================================================
   Consistent Section Backgrounds
   ========================================================================== */

/* All sections use consistent backgrounds */
.renovation-section {
    background: var(--renovation-bg-primary);
}

.renovation-section[class*="secondary"] {
    background: var(--renovation-bg-secondary);
}

[data-theme="dark"] .renovation-section {
    background: var(--renovation-dark-bg-primary);
}

[data-theme="dark"] .renovation-section[class*="secondary"] {
    background: var(--renovation-dark-bg-secondary);
}

/* Specific section overrides for consistency */
.stats-section,
.testimonials-section,
.partnership-section {
    background: var(--renovation-bg-secondary);
}

[data-theme="dark"] .stats-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .partnership-section {
    background: var(--renovation-dark-bg-secondary);
}

.trust-section,
.quote-section {
    background: var(--renovation-bg-primary);
}

[data-theme="dark"] .trust-section,
[data-theme="dark"] .quote-section {
    background: var(--renovation-dark-bg-primary);
}

/* CTA section uses gradient (accent) */
.cta-section {
    background: var(--renovation-accent-gradient);
    color: #ffffff;
}

/* ==========================================================================
   Card & Surface Consistency
   ========================================================================== */

.renovations-page-wrapper [class*="card"],
.renovations-page-wrapper [class*="item"],
.renovations-page-wrapper [class*="banner"] {
    background: var(--renovation-bg-surface);
    color: var(--renovation-text-primary);
    border-color: var(--renovation-border-light);
}

[data-theme="dark"] .renovations-page-wrapper [class*="card"],
[data-theme="dark"] .renovations-page-wrapper [class*="item"],
[data-theme="dark"] .renovations-page-wrapper [class*="banner"] {
    background: var(--renovation-dark-bg-surface);
    color: var(--renovation-dark-text-primary);
    border-color: var(--renovation-dark-border-light);
}

/* ==========================================================================
   Text Color Consistency
   ========================================================================== */

.renovations-page-wrapper h1,
.renovations-page-wrapper h2,
.renovations-page-wrapper h3,
.renovations-page-wrapper h4,
.renovations-page-wrapper h5,
.renovations-page-wrapper h6 {
    color: var(--renovation-text-primary);
}

[data-theme="dark"] .renovations-page-wrapper h1,
[data-theme="dark"] .renovations-page-wrapper h2,
[data-theme="dark"] .renovations-page-wrapper h3,
[data-theme="dark"] .renovations-page-wrapper h4,
[data-theme="dark"] .renovations-page-wrapper h5,
[data-theme="dark"] .renovations-page-wrapper h6 {
    color: var(--renovation-dark-text-primary);
}

.renovations-page-wrapper p,
.renovations-page-wrapper span,
.renovations-page-wrapper div {
    color: var(--renovation-text-primary);
}

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

/* Muted text */
.renovations-page-wrapper [class*="muted"],
.renovations-page-wrapper [class*="secondary"] {
    color: var(--renovation-text-secondary);
}

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