/**
 * BRAND COLORS SYSTEM - CENTRALIZED COLOR MANAGEMENT
 * 
 * This file contains all brand colors used throughout the theme.
 * To rebrand the theme, simply update the values in the :root section below.
 * 
 * Current Brand: Based on ORA Egypt
 * 
 * Usage: Use CSS variables like var(--primary-color) throughout the theme
 * 
 * @author: WordPress Theme Refactoring Assistant
 * @version: 1.0
 */

/* ==========================================================================
   BRAND COLOR VARIABLES - UPDATE THESE TO REBRAND THE ENTIRE THEME
   ========================================================================== */

:root {
    /* PRIMARY BRAND COLORS */
    --primary-color: #1a365d;           /* Main brand color - buttons, links, highlights */
    --secondary-color: #2d3748;       /* Secondary brand color - accents, hover states */
    --accent-color: #ed8936;             /* Accent color - special elements, CTAs */
    
    /* TEXT COLORS */
    --text-color: #1a202c;                 /* Main text color */
    --text-light: rgba(26, 32, 44, 0.7);     /* Light text color */
    --text-muted: rgba(26, 32, 44, 0.5);     /* Muted text color */
    --button-text-color: #ffffff;  /* Text color for buttons */
    
    /* BACKGROUND COLORS */
    --background-color: #ffffff;     /* Main background color */
    --background-light: #f8f9fa;                  /* Light background sections */
    --background-dark: #1a1a1a;                   /* Dark background sections */
    
    /* UTILITY COLORS */
    --white: #ffffff;
    --black: #000000;
    --success: #28a745;
    --warning: #ffc107;
    --error: #dc3545;
    --info: #17a2b8;
    
    /* SHADOW COLORS */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    
    /* BORDER COLORS */
    --border-light: rgba(0, 0, 0, 0.1);
    --border-medium: rgba(0, 0, 0, 0.2);
    --border-dark: rgba(0, 0, 0, 0.3);
    
    /* GRADIENTS */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
    --gradient-overlay: linear-gradient(45deg, var(--primary-color) 0%, rgba(var(--primary-color), 0.8) 100%);
}

/* ==========================================================================
   CURRENT EMAAR BRAND COLORS (FOR REFERENCE)
   ========================================================================== */

:root {
    /* CURRENT EMAAR COLORS - WILL BE REPLACED */
    --emaar-gold: #C9A96E;      /* Current primary - Emaar gold */
    --emaar-black: #000000;     /* Current secondary - Black */
    --emaar-gray: #666666;      /* Current text gray */
    --emaar-light-gray: #F8F9FA; /* Current light background */
}

/* ==========================================================================
   BRAND COLOR APPLICATIONS
   ========================================================================== */

/* PRIMARY COLOR APPLICATIONS */
.btn-primary,
.cta-button.primary,
.nav-cta,
.unit-button,
.form-submit,
.submit-btn,
.floating-ctas .cta-button-float.contact,
.export-button,
.full-info-button:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* PRIMARY COLOR - HOVER STATES */
.btn-primary:hover,
.cta-button.primary:hover,
.nav-cta:hover,
.unit-button:hover,
.form-submit:hover,
.submit-btn:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* PRIMARY COLOR - TEXT AND BORDERS */
.section-title,
.feature-icon,
.unit-spec svg,
.unit-price,
.editable,
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color) !important;
}

.full-info-button {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* SECONDARY COLOR APPLICATIONS */
.cta-button-float.call,
.mobile-menu,
.mobilemenu .menu-item-has-children>a:after {
    background-color: var(--secondary-color) !important;
}

/* ACCENT COLOR APPLICATIONS */
.cta-button.secondary {
    background-color: var(--accent-color) !important;
    color: var(--button-text-color) !important;
}

/* TEXT COLOR APPLICATIONS */
body,
.feature-title,
.unit-title,
.modal-header h2,
.form-label,
.form-cancel {
    color: var(--text-color) !important;
}

/* BACKGROUND COLOR APPLICATIONS */
body,
.modal-content {
    background-color: var(--background-color) !important;
}

/* FOOTER COLORS */
.footer {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* GRADIENT APPLICATIONS */
.hero {
    background: var(--gradient-primary);
}

.cta-overlay {
    background: var(--gradient-overlay);
}

.flx-thx,
.flx-thx2 {
    background: var(--gradient-primary) !important;
}

/* ==========================================================================
   RESPONSIVE BRAND COLORS
   ========================================================================== */

/* Ensure brand colors work on all screen sizes */
@media (max-width: 768px) {
    .btn-primary,
    .cta-button,
    .unit-button {
        background-color: var(--primary-color) !important;
    }
}

@media (max-width: 480px) {
    .section-title {
        color: var(--primary-color) !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY & HIGH CONTRAST
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --primary-color: #000000;
        --secondary-color: #ffffff;
        --text-color: #000000;
        --background-color: #ffffff;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    * {
        color: var(--black) !important;
        background: var(--white) !important;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT (FUTURE-READY)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1a1a1a;
        --text-color: #ffffff;
        --background-light: #2d2d2d;
    }
}

/* ==========================================================================
   BRAND COLOR UTILITIES
   ========================================================================== */

/* Utility classes for quick brand color application */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* ==========================================================================
   BRAND CONSISTENCY CHECKS
   ========================================================================== */

/* Override any hardcoded colors that might conflict */
.home-box {
    border-color: var(--border-light) !important;
}

.gallery-item {
    box-shadow: 0 4px 15px var(--shadow-light) !important;
}

.gallery-item:hover {
    box-shadow: 0 8px 25px var(--shadow-medium) !important;
}

/* ==========================================================================
   END OF BRAND COLORS SYSTEM
   ========================================================================== */