/**
 * ==============================================================================
 * System Design Tokens: Color Architecture
 * ==============================================================================
 * 3-Tier Hierarchy:
 *   Tier 1: Primitives (Base Raw Palettes)
 *   Tier 2: Semantic Tokens (Meaning & Role-Based)
 *   Tier 3: Component-Scoped Tokens (UI Components)
 * ==============================================================================
 */

:root {
    /* --------------------------------------------------------------------------
     * TIER 1: PRIMITIVE COLOR PALETTES
     * -------------------------------------------------------------------------- */

    /* Neutral Gray Scale (White to Dark Slate) */
    --color-neutral-0:    #ffffff;
    --color-neutral-50:   #f8fafc;
    --color-neutral-100:  #f1f5f9;
    --color-neutral-200:  #e2e8f0;
    --color-neutral-300:  #cbd5e1;
    --color-neutral-400:  #94a3b8;
    --color-neutral-500:  #64748b;
    --color-neutral-600:  #475569;
    --color-neutral-700:  #334155;
    --color-neutral-800:  #1e293b;
    --color-neutral-900:  #0f172a;
    --color-neutral-950:  #020617;

    /* Platform Brand Teal (Default core palette calibrated around #127384) */
    --color-teal-50:      #f0fdfa;
    --color-teal-100:     #ccfbf1;
    --color-teal-200:     #99f6e4;
    --color-teal-300:     #5eead4;
    --color-teal-400:     #2dd4bf;
    --color-teal-500:     #14b8a6;
    --color-teal-600:     #127384; /* Active Core Brand */
    --color-teal-700:     #0e5e6c;
    --color-teal-800:     #115e59;
    --color-teal-900:     #134e4a;

    /* Amber / Taxi Gold (Secondary & Accent scale) */
    --color-amber-50:     #fffbeb;
    --color-amber-100:    #fef3c7;
    --color-amber-200:    #fde68a;
    --color-amber-300:    #fcd34d;
    --color-amber-400:    #fbbf24;
    --color-amber-500:    #f59e0b;
    --color-amber-600:    #d97706;
    --color-amber-700:    #b45309;

    /* Status / Feedback Colors */
    --color-green-50:     #f0fdf4;
    --color-green-500:    #1fbc2f; /* WhatsApp & Success */
    --color-green-600:    #16a34a;
    --color-green-700:    #15803d;

    --color-red-50:       #fef2f2;
    --color-red-500:      #ef4444; /* Danger & Urgent notice */
    --color-red-600:      #dc2626;
    --color-red-700:      #b91c1c;

    --color-blue-50:      #eff6ff;
    --color-blue-500:     #3b82f6; /* Informational */
    --color-blue-600:     #2563eb;

    /* --------------------------------------------------------------------------
     * TIER 2: SEMANTIC DESIGN TOKENS (ROLE-BASED)
     * -------------------------------------------------------------------------- */

    /* Brand Roles (Overridable per tenant) */
    --color-brand-primary:          var(--color-teal-600);
    --color-brand-primary-hover:    color-mix(in srgb, var(--color-brand-primary) 85%, #000000);
    --color-brand-primary-subtle:   color-mix(in srgb, var(--color-brand-primary) 10%, #ffffff);
    --color-brand-primary-contrast: var(--color-neutral-0);

    --color-brand-secondary:        var(--color-amber-500);
    --color-brand-secondary-hover:  color-mix(in srgb, var(--color-brand-secondary) 85%, #000000);
    --color-brand-secondary-subtle: color-mix(in srgb, var(--color-brand-secondary) 15%, #ffffff);
    --color-brand-secondary-contrast:#111111;

    --color-brand-accent:           var(--color-brand-secondary);

    /* Surface & Background Roles */
    --color-surface-canvas:         var(--color-neutral-100);
    --color-surface-card:           var(--color-neutral-0);
    --color-surface-muted:          var(--color-neutral-50);
    --color-surface-alt:            #fcfbfb;
    --color-surface-dark:           var(--color-neutral-900);
    --color-surface-overlay:        rgba(15, 23, 42, 0.75);

    /* Text & Content Roles */
    --color-text-primary:           #30383f; /* Standard charcoal heading/body */
    --color-text-secondary:         var(--color-neutral-600);
    --color-text-muted:             #828282;
    --color-text-inverse:           var(--color-neutral-0);
    --color-text-brand:             var(--color-brand-primary);

    /* Border & Divider Roles */
    --color-border-subtle:          var(--color-neutral-200);
    --color-border-default:         #dbdbdb;
    --color-border-strong:          var(--color-neutral-400);
    --color-border-focus:           var(--color-brand-primary);
    --color-border-brand:           var(--color-brand-primary);

    /* Status & Feedback Roles */
    --color-status-success:         var(--color-green-500);
    --color-status-success-bg:      var(--color-green-50);
    --color-status-danger:          var(--color-red-500);
    --color-status-danger-bg:       var(--color-red-50);
    --color-status-warning:         var(--color-amber-500);
    --color-status-warning-bg:      var(--color-amber-50);
    --color-status-info:            var(--color-blue-500);
    --color-status-info-bg:         var(--color-blue-50);

    /* --------------------------------------------------------------------------
     * TIER 3: COMPONENT-SCOPED TOKENS
     * -------------------------------------------------------------------------- */

    /* Buttons */
    --btn-primary-bg:               var(--color-brand-primary);
    --btn-primary-text:             var(--color-brand-primary-contrast);
    --btn-primary-border:           var(--color-brand-primary);
    --btn-primary-hover-bg:         var(--color-brand-primary-hover);
    --btn-primary-hover-text:       var(--color-brand-primary-contrast);
    --btn-primary-hover-border:     var(--color-brand-primary-hover);

    --btn-whatsapp-bg:              var(--color-status-success);
    --btn-whatsapp-text:            var(--color-neutral-0);

    /* Header & Navigation */
    --header-bg:                    var(--color-surface-card);
    --header-link-color:            var(--color-text-primary);
    --header-link-hover:            var(--color-brand-primary);
    --header-link-active:           var(--color-brand-primary);
    --header-cta-bg:                var(--color-brand-primary);
    --header-cta-text:              var(--color-brand-primary-contrast);

    /* Booking & Input Elements */
    --input-bg:                     var(--color-surface-card);
    --input-border:                 var(--color-border-default);
    --input-border-focus:           var(--color-brand-primary);
    --input-text:                   var(--color-text-primary);
    --input-placeholder:            var(--color-text-muted);

    /* Cards & Listings */
    --card-bg:                      var(--color-surface-card);
    --card-border:                  var(--color-border-subtle);
    --card-price-text:              var(--color-brand-primary);
    --card-badge-bg:                var(--color-brand-primary-subtle);
    --card-badge-text:              var(--color-brand-primary);

    /* Footer */
    --footer-bg:                    var(--color-surface-dark);
    --footer-text:                  var(--color-neutral-300);
    --footer-heading:               var(--color-neutral-0);
    --footer-link-hover:            var(--color-brand-primary);
}

/* --------------------------------------------------------------------------
 * UTILITY CLASSES POWERED BY COLOR TOKENS
 * -------------------------------------------------------------------------- */
.bg-brand-primary        { background-color: var(--color-brand-primary) !important; }
.bg-brand-secondary      { background-color: var(--color-brand-secondary) !important; }
.bg-brand-subtle         { background-color: var(--color-brand-primary-subtle) !important; }
.text-brand-primary      { color: var(--color-brand-primary) !important; }
.text-brand-secondary    { color: var(--color-brand-secondary) !important; }
.border-brand-primary    { border-color: var(--color-brand-primary) !important; }

/* --------------------------------------------------------------------------
 * GLOBAL INTEGRATION HOOKS (Ensuring key platform components adapt seamlessly)
 * -------------------------------------------------------------------------- */

/* Primary Action Buttons */
.btn-order,
.btn-primary,
.btn-view,
.view-all .btn-view,
.search-box-banner .search-btn .search-button,
.listing-item .listing-content .listing-button .btn-order,
.footer .footer-contact-info .update-form .btn {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
    transition: all 0.3s ease;
}

.btn-order:hover,
.btn-primary:hover,
.btn-view:hover,
.view-all .btn-view:hover,
.search-box-banner .search-btn .search-button:hover,
.listing-item .listing-content .listing-button .btn-order:hover,
.footer .footer-contact-info .update-form .btn:hover {
    background-color: var(--btn-primary-hover-bg) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-text) !important;
}

/* Header & Navigation Branding */
.header .main-menu-wrapper .main-nav > li.active > a,
.header .main-menu-wrapper .main-nav > li:hover > a,
.header .main-menu-wrapper .main-nav > li .submenu li a:hover {
    color: var(--color-brand-primary) !important;
}

.header .header-navbar-rht .nav-item .header-reg {
    background-color: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
    color: var(--color-brand-primary-contrast) !important;
}

.header .header-navbar-rht .nav-item .header-reg:hover {
    background-color: var(--color-brand-primary-hover) !important;
    border-color: var(--color-brand-primary-hover) !important;
}

/* Banner Brand Accent */
.home-banner h1 span {
    color: var(--color-brand-primary) !important;
}

.explore-text span {
    background-color: var(--color-brand-primary-subtle) !important;
    color: var(--color-brand-primary) !important;
}

/* Tabs & Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.search-box-banner .nav-tabs .nav-link.active {
    background-color: var(--color-brand-primary) !important;
    color: var(--color-neutral-0) !important;
    border-color: var(--color-brand-primary) !important;
}

/* Input Focus States */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(18, 115, 132, 0.25);
}

/* Breadcrumb Bar */
.breadcrumb-bar {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-hover) 100%) !important;
}

.breadcrumb-bar .breadcrumb-title,
.breadcrumb-bar .breadcrumb-item,
.breadcrumb-bar .breadcrumb-item a {
    color: var(--color-neutral-0) !important;
}

.breadcrumb-bar .breadcrumb-item.active {
    color: var(--color-brand-secondary) !important;
}

/* Floating Action Buttons */
.float {
    background-color: var(--color-status-success) !important;
    color: var(--color-neutral-0) !important;
}

.float2 {
    background-color: var(--color-brand-secondary) !important;
    color: var(--color-neutral-0) !important;
}

/* --------------------------------------------------------------------------
 * FOOTER DESIGN TOKENS (Eliminating hardcoded red)
 * -------------------------------------------------------------------------- */
.footer .footer-widget .footer-title:before {
    background: var(--color-brand-primary) !important;
}

.footer .footer-contact .footer-contact-info .footer-address span {
    background: var(--color-brand-primary) !important;
    color: var(--color-neutral-0) !important;
    transition: all 0.3s ease;
}

.footer .footer-contact .footer-contact-info .footer-address:hover span {
    background: var(--color-brand-primary-hover) !important;
    transform: scale(1.05);
}

.footer .footer-menu ul li a:hover {
    color: var(--color-brand-primary) !important;
    padding-left: 10px;
}

.btn-subscribe,
.footer .footer-contact-info .update-form .btn {
    background-color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
    transition: all 0.3s ease;
}

.btn-subscribe:hover,
.footer .footer-contact-info .update-form .btn:hover {
    background-color: var(--btn-primary-hover-bg) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-text) !important;
}

.btn-subscribe:hover i,
.btn-subscribe:hover .feather-send,
.footer .footer-contact-info .update-form .btn:hover i,
.footer .footer-contact-info .update-form .btn:hover .feather-send {
    color: var(--btn-primary-hover-text) !important;
}

.footer .footer-contact .footer-contact-info .update-form .btn:active {
    border-color: var(--color-brand-primary-hover) !important;
    background-color: var(--color-brand-primary-hover) !important;
}

.footer .footer-contact .footer-contact-info .update-form .btn:active .feather-send {
    color: var(--btn-primary-hover-text) !important;
}

.footer-social-widget .nav-social li a:hover,
.footer-social-links .nav li a:hover,
.footer-social-widget .nav-social li a:hover i,
.footer-social-links .nav li a:hover i {
    color: var(--color-brand-primary) !important;
}

/* Scroll / Progress Wrap */
.progress-wrap svg path {
    stroke: var(--color-brand-primary) !important;
}