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

/* ===================
   COLOR VARIABLES
   =================== */
:root {
    /* Primary Brand Colors */
    --pp-burgundy-dark: #3d1f1f;
    --pp-burgundy: #5C2E2E;
    --pp-burgundy-light: #7a4545;
    --pp-gold: #F5A623;
    --pp-gold-light: #ffb84d;
    --pp-gold-dark: #d99419;

    /* Neutral Palette */
    --pp-charcoal: #1a1a1a;
    --pp-charcoal-light: #2a2a2a;
    --pp-gray-dark: #404040;
    --pp-gray: #6b6b6b;
    --pp-gray-light: #9ca3af;
    --pp-white: #ffffff;
    --pp-off-white: #f9fafb;

    /* Semantic Colors */
    --pp-success: #10b981;
    --pp-warning: #f59e0b;
    --pp-danger: #ef4444;
    --pp-info: #3b82f6;

    /* Glass Effect */
    --pp-glass-bg: rgba(92, 46, 46, 0.15);
    --pp-glass-border: rgba(255, 255, 255, 0.1);
    --pp-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Spacing System (8px base) */
    --pp-space-xs: 0.25rem;
    /* 4px */
    --pp-space-sm: 0.5rem;
    /* 8px */
    --pp-space-md: 1rem;
    /* 16px */
    --pp-space-lg: 1.5rem;
    /* 24px */
    --pp-space-xl: 2rem;
    /* 32px */
    --pp-space-2xl: 3rem;
    /* 48px */

    /* Border Radius */
    --pp-radius-sm: 0.375rem;
    /* 6px */
    --pp-radius-md: 0.5rem;
    /* 8px */
    --pp-radius-lg: 0.75rem;
    /* 12px */
    --pp-radius-xl: 1rem;
    /* 16px */

    /* Shadows */
    --pp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --pp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --pp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --pp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --pp-transition-fast: 150ms ease-in-out;
    --pp-transition-base: 200ms ease-in-out;
    --pp-transition-slow: 300ms ease-in-out;

    /* Legacy token bridge (deprecated) */
    --primary: var(--pp-gold);
    --primary_rgb: 245, 166, 35;
    --primary-200: #ffe3ba;
    --primary-300: #ffc057;
    --primary-400: #f5a623;
    --primary-600: #d48c1b;
}

/* ===================
   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;
}

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

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

/* ===================
   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:hover {
    background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-light)) !important;
    color: var(--pp-charcoal) !important;
    box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35);
    transform: translateY(-2px);
}

.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 {
    background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-light));
    color: var(--pp-charcoal);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: var(--pp-radius-lg);
    border: none;
    transition: all var(--pp-transition-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 166, 35, 0.5);
    background: linear-gradient(135deg, var(--pp-gold-dark), var(--pp-gold));
    color: var(--pp-white);
}

/* 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
   =================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 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;
}