/**
 * Color Variables Application - تطبيق متغيرات الألوان
 * ملف CSS لاستخدام متغيرات الألوان في جميع عناصر القالب
 */

/* =================================================================
   Primary Color Applications
   ================================================================= */

/* Buttons */
.btn-primary,
button[type="submit"],
.wp-block-button__link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Links */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Badges & Tags */
.badge-primary,
.tag-primary {
    background-color: var(--color-primary);
}

/* Progress & Loading */
.progress-bar {
    background-color: var(--color-primary);
}

/* =================================================================
   Secondary Color Applications
   ================================================================= */

/* Header & Footer */
.site-header,
.site-footer {
    background-color: var(--color-secondary);
}

/* Navigation */
.nav-link:hover,
.nav-link.active {
    color: var(--color-secondary);
}

/* Buttons */
.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark) !important;
    border-color: var(--color-secondary-dark) !important;
}

/* Section Backgrounds */
.section-dark,
.hero-section {
    background-color: var(--color-secondary);
}

/* =================================================================
   Semantic Colors (Success, Warning, Danger)
   ================================================================= */

/* Success */
.alert-success,
.badge-success,
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.text-success {
    color: var(--color-success) !important;
}

/* Warning */
.alert-warning,
.badge-warning,
.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

/* Danger */
.alert-danger,
.badge-danger,
.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

/* =================================================================
   Text Colors
   ================================================================= */

body {
    color: var(--color-text-dark);
}

.text-muted,
.description,
small {
    color: var(--color-text-light);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-dark);
}

/* =================================================================
   Background Colors
   ================================================================= */

body,
.bg-white {
    background-color: var(--color-bg-white);
}

.bg-light,
.section-light {
    background-color: var(--color-bg-light);
}

/* =================================================================
   Borders
   ================================================================= */

.border,
hr,
.card,
input,
textarea,
select {
    border-color: var(--color-border);
}

/* =================================================================
   Special Components
   ================================================================= */

/* Cards */
.card:hover {
    border-color: var(--color-primary-light);
}

.card-header {
    background-color: var(--color-bg-light);
    border-bottom-color: var(--color-border);
}

/* Forms */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

/* =================================================================
   Project-Specific Elements
   ================================================================= */

/* Quick Info Bar */
.quick-info-item i {
    color: var(--color-primary);
}

/* Pricing Highlight */
.pricing-highlight {
    border-left-color: var(--color-primary);
}

.price-amount {
    color: var(--color-primary);
}

/* Download CTA */
.download-brochure-cta {
    background: linear-gradient(135deg, var(--color-primary-lighter) 0%, var(--color-primary-light) 100%);
    border-left-color: var(--color-primary);
}

.btn-download-brochure:hover {
    background-color: var(--color-primary);
}

/* Developer Card */
.developer-card-enhanced {
    border-top-color: var(--color-primary);
}

/* Features Grid */
.feature-icon {
    color: var(--color-primary);
}

.feature-item-enhanced:hover .feature-icon {
    background-color: var(--color-primary);
    color: #fff;
}

/* Floating CTA */
.floating-cta-whatsapp {
    background-color: #25D366 !important;
    /* Keep WhatsApp green */
}

.floating-cta-call {
    background-color: var(--color-primary) !important;
}

/* Hero Section */
.hero-content h1 {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-badges .badge {
    background-color: var(--color-primary);
}

/* Navigation Tabs */
.nav-tabs .nav-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Project Cards */
.project-card:hover {
    border-color: var(--color-primary);
}

.project-card .card-title a:hover {
    color: var(--color-primary);
}

.project-meta i {
    color: var(--color-primary);
}

/* Sidebar */
.sidebar-card {
    border-top-color: var(--color-primary);
}

.contact-card .btn-primary {
    background: var(--gradient-primary);
}

/* Social Share */
.share-btn:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* Breadcrumbs */
.breadcrumb-item.active {
    color: var(--color-primary);
}

.breadcrumb-item a:hover {
    color: var(--color-primary-dark);
}

/* Footer */
.site-footer a:hover {
    color: var(--color-primary-light);
}

/* Author Box */
.author-box {
    border-left-color: var(--color-primary);
}

/* Pagination */
.pagination .page-link {
    color: var(--color-primary);
}

.pagination .page-link:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Search Form */
.search-form button[type="submit"] {
    background-color: var(--color-primary);
}

/* =================================================================
   Utility Classes
   ================================================================= */

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-primary-light {
    background-color: var(--color-primary-light) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

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

.border-secondary {
    border-color: var(--color-secondary) !important;
}

/* =================================================================
   Gradients
   ================================================================= */

.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-secondary {
    background: var(--gradient-secondary);
}

.gradient-hero {
    background: var(--gradient-hero);
}

/* =================================================================
   Dark Mode Support (Optional - جاهز للمستقبل)
   ================================================================= */

@media (prefers-color-scheme: dark) {
    /* يمكن إضافة دعم Dark Mode هنا في المستقبل */
}