/* ========================================
   POSHPEARL BRAND IDENTITY SYSTEM
   Burgundy + Gold Premium Theme
   ======================================== */

/* Tokens live in tokens.css (loaded first in base.html). */

/* ===================
   GLOBAL BRAND BASE
   =================== */
html[data-theme="dark"] body {
    background: var(--pp-charcoal) !important;
    color: var(--pp-off-white) !important;
}

a {
    color: var(--pp-gold);
}

a:hover,
a:focus-visible {
    color: var(--pp-gold-light);
}

/* Bootstrap global tokens for full-site theme consistency */
html[data-theme="dark"] body {
    --bs-body-bg: var(--pp-charcoal);
    --bs-body-color: var(--pp-off-white);
    --bs-body-color-rgb: 249, 250, 251;
    --bs-body-bg-rgb: 26, 26, 26;
    --bs-secondary-color: var(--pp-gray-light);
    --bs-secondary-color-rgb: 156, 163, 175;
    --bs-tertiary-color: var(--pp-gray);
    --bs-border-color: var(--pp-gray-dark);
    --bs-link-color: var(--pp-gold);
    --bs-link-hover-color: var(--pp-gold-light);
}

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

.text-muted {
    color: var(--pp-gray) !important;
}

/* ===================
   BOOTSTRAP OVERRIDES
   =================== */

/* Primary Color Override (Blue → Gold) */
.btn-primary,
.bg-primary {
    background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-light)) !important;
    border-color: var(--pp-gold) !important;
    color: var(--pp-charcoal) !important;
}

.btn-primary {
    box-shadow: 0 6px 18px rgba(245, 166, 35, 0.35);
    transition: transform var(--pp-transition-base), box-shadow var(--pp-transition-base);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--pp-gold-dark), var(--pp-gold)) !important;
    border-color: var(--pp-gold-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.5);
}

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

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

/* Secondary Color Override (Gray → Burgundy) */
.btn-secondary,
.bg-secondary {
    background-color: var(--pp-burgundy) !important;
    border-color: var(--pp-burgundy) !important;
    color: var(--pp-white) !important;
}

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

/* Outline Buttons */
.btn-outline-primary {
    color: var(--pp-gold) !important;
    border-color: var(--pp-gold) !important;
}

.btn-outline-primary {
    padding: 0.875rem 2.25rem !important;
    border-width: 2.5px !important;
    border-radius: var(--pp-radius-md) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.875rem !important;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.15);
    transition: transform var(--pp-transition-base), box-shadow var(--pp-transition-base),
                background var(--pp-transition-base), color var(--pp-transition-base);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-light)) !important;
    color: var(--pp-charcoal) !important;
    box-shadow: 0 8px 25px rgba(245, 166, 35, 0.5);
    transform: translateY(-3px);
    outline: none;
}

.btn-outline-secondary {
    color: var(--pp-burgundy-light) !important;
    border-color: var(--pp-burgundy-light) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--pp-burgundy) !important;
    color: var(--pp-white) !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--pp-gold) !important;
    color: var(--pp-charcoal) !important;
}

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

/* Semantic utilities mapped to brand palette */
.text-success,
.text-info {
    color: var(--pp-gold) !important;
}

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

.bg-success,
.bg-info {
    background-color: rgba(245, 166, 35, 0.2) !important;
    color: var(--pp-gold) !important;
}

.bg-warning {
    background-color: rgba(245, 166, 35, 0.3) !important;
    color: var(--pp-charcoal) !important;
}

.border-success,
.border-info,
.border-warning {
    border-color: var(--pp-gold) !important;
}

/* ===================
   GLASS EFFECT CARDS
   =================== */
.glass-effect {
    background: var(--pp-glass-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pp-glass-border) !important;
    box-shadow: var(--pp-glass-shadow);
}

.card {
    background: var(--pp-glass-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pp-glass-border) !important;
    box-shadow: var(--pp-glass-shadow);
}

.card-solid {
    background: var(--pp-off-white) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: var(--pp-shadow-md);
}

.glass-burgundy {
    background: rgba(92, 46, 46, 0.25) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 166, 35, 0.2) !important;
}

/* ===================
   GRADIENT TEXT
   =================== */
.text-gradient-gold {
    background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-burgundy {
    background: linear-gradient(135deg, var(--pp-burgundy-light), var(--pp-burgundy-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================
   CUSTOM COMPONENTS
   =================== */

/* Gold CTA Button (Primary Action) */
.btn-gold,
a.btn-gold,
button.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-light));
    color: var(--pp-charcoal);
    font-weight: 700;
    padding: 0.875rem 2.25rem;
    border-radius: var(--pp-radius-md);
    border: none;
    transition: transform var(--pp-transition-base), box-shadow var(--pp-transition-base),
                background var(--pp-transition-base), color var(--pp-transition-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.35);
    cursor: pointer;
}

.btn-gold:hover,
.btn-gold:focus-visible,
a.btn-gold:hover,
button.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(245, 166, 35, 0.6);
    background: linear-gradient(135deg, var(--pp-gold-dark), var(--pp-gold));
    color: var(--pp-white);
    outline: none;
}

.btn-gold:active {
    transform: translateY(-1px);
}

.btn-gold:focus-visible {
    outline: 2px solid var(--pp-gold);
    outline-offset: 3px;
}

/* Burgundy Card */
.card-burgundy {
    background: linear-gradient(145deg, var(--pp-burgundy-dark), var(--pp-burgundy));
    border: 1px solid rgba(245, 166, 35, 0.3);
    border-radius: var(--pp-radius-lg);
    padding: var(--pp-space-lg);
    color: var(--pp-white);
}

/* Icon Badge (Gold Circle) */
.icon-badge {
    width: 60px;
    height: 60px;
    background: var(--pp-gold);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-charcoal);
    font-size: 1.5rem;
}

.icon-badge-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

/* Gold Accent Border */
.border-gold {
    border-color: var(--pp-gold) !important;
}

.border-gold-thick {
    border: 3px solid var(--pp-gold) !important;
}

/* Burgundy Backgrounds */
.bg-burgundy {
    background-color: var(--pp-burgundy) !important;
}

.bg-burgundy-dark {
    background-color: var(--pp-burgundy-dark) !important;
}

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

/* ===================
   HOVER EFFECTS
   =================== */
.hover-lift {
    transition: transform var(--pp-transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-gold {
    transition: all var(--pp-transition-base);
}

.hover-gold:hover {
    color: var(--pp-gold) !important;
    border-color: var(--pp-gold) !important;
}

/* ===================
   FORMS & INPUTS
   =================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--pp-gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 166, 35, 0.25) !important;
}

/* ===================
   NAVIGATION
   =================== */
.nav-link.active {
    color: var(--pp-gold) !important;
    border-bottom: 2px solid var(--pp-gold);
}

.breadcrumb-item.active {
    color: var(--pp-gold);
}

.breadcrumb-item a {
    color: var(--pp-gray-light);
    text-decoration: none;
    transition: color var(--pp-transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--pp-gold);
}

/* ===================
   TABLES
   =================== */
.table-dark {
    --bs-table-bg: var(--pp-charcoal-light);
    --bs-table-border-color: var(--pp-gray-dark);
}

.table-dark thead {
    border-bottom: 2px solid var(--pp-gold);
}

.table-hover tbody tr:hover {
    background-color: rgba(92, 46, 46, 0.1);
}

/* ===================
   MODALS
   =================== */
.modal-content {
    background-color: var(--pp-charcoal-light);
    border: 1px solid var(--pp-gold);
}

.modal-header {
    border-bottom: 1px solid var(--pp-burgundy);
}

.modal-footer {
    border-top: 1px solid var(--pp-burgundy);
}

.btn-close-white {
    filter: brightness(0) invert(1);
}

/* ===================
   ALERTS
   =================== */
.alert-primary {
    background-color: rgba(245, 166, 35, 0.15);
    border-color: var(--pp-gold);
    color: var(--pp-gold-light);
}

.alert-secondary {
    background-color: rgba(92, 46, 46, 0.15);
    border-color: var(--pp-burgundy);
    color: var(--pp-burgundy-light);
}

/* ===================
   ANIMATIONS
   =================== */
@keyframes pulse-gold {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.pulse-gold {
    animation: pulse-gold 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(90deg,
            var(--pp-burgundy-dark) 0%,
            var(--pp-gold) 50%,
            var(--pp-burgundy-dark) 100%);
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

/* ===================
   RESPONSIVE UTILITIES
   =================== */
@media (max-width: 768px) {
    .btn-gold {
        padding: 0.625rem 1.5rem;
        font-size: 0.8125rem;
    }

    .icon-badge-lg {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* ===================
   ACCESSIBILITY
   (reduced-motion lives in tokens.css)
   =================== */

/* High Contrast Focus States */
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--pp-gold);
    outline-offset: 2px;
}

/* ===================
   LEGACY OVERRIDES
   =================== */
.text-primary,
.btn-primary-soft {
    color: var(--pp-gold) !important;
}

.bg-primary,
.btn-primary {
    background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-light)) !important;
    border-color: var(--pp-gold) !important;
}

.bg-primary-soft,
.btn-primary-soft {
    background-color: rgba(var(--primary_rgb), 0.2) !important;
}