/* ============================================================
   NextUg — Custom Color Scheme
   Colors: Purple, Orange, Blue, Green, Red, Apple Green, Yellow
   ============================================================ */

:root {
    /* Primary Colors */
    --color-purple: #7c3aed;
    --color-orange: #f97316;
    --color-blue: #3b82f6;
    --color-green: #10b981;
    --color-red: #ef4444;
    --color-apple-green: #a3e635;
    --color-yellow: #eab308;
    
    /* Accent Gradients */
    --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
    --gradient-warm: linear-gradient(135deg, #f97316 0%, #eab308 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #a3e635 100%);
    --gradient-alert: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f97316;
    --danger: #ef4444;
    --info: #3b82f6;
}

/* ========== BUTTON VARIANTS ========== */
.btn-purple {
    background: var(--color-purple);
    color: #fff;
    border-color: var(--color-purple);
}
.btn-purple:hover {
    background: #6d28d9;
    border-color: #6d28d9;
}

.btn-orange {
    background: var(--color-orange);
    color: #fff;
    border-color: var(--color-orange);
}
.btn-orange:hover {
    background: #ea580c;
    border-color: #ea580c;
}

.btn-blue {
    background: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}
.btn-blue:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.btn-green {
    background: var(--color-green);
    color: #fff;
    border-color: var(--color-green);
}
.btn-green:hover {
    background: #059669;
    border-color: #059669;
}

.btn-red {
    background: var(--color-red);
    color: #fff;
    border-color: var(--color-red);
}
.btn-red:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* ========== BADGE VARIANTS ========== */
.badge-purple {
    background: rgba(124, 58, 237, .15);
    color: #d8b4fe;
    border: 1px solid rgba(124, 58, 237, .3);
}

.badge-orange {
    background: rgba(249, 115, 22, .15);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, .3);
}

.badge-green {
    background: rgba(16, 185, 129, .15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, .3);
}

.badge-red {
    background: rgba(239, 68, 68, .15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, .3);
}

.badge-yellow {
    background: rgba(234, 179, 8, .15);
    color: #fde047;
    border: 1px solid rgba(234, 179, 8, .3);
}

.badge-apple-green {
    background: rgba(163, 230, 53, .15);
    color: #d4fc79;
    border: 1px solid rgba(163, 230, 53, .3);
}

/* ========== ACCENT ELEMENTS ========== */
.accent-purple { color: var(--color-purple); }
.accent-orange { color: var(--color-orange); }
.accent-blue { color: var(--color-blue); }
.accent-green { color: var(--color-green); }
.accent-red { color: var(--color-red); }
.accent-yellow { color: var(--color-yellow); }
.accent-apple-green { color: var(--color-apple-green); }

/* ========== BACKGROUND ACCENTS ========== */
.bg-purple { background: rgba(124, 58, 237, .1); }
.bg-orange { background: rgba(249, 115, 22, .1); }
.bg-blue { background: rgba(59, 130, 246, .1); }
.bg-green { background: rgba(16, 185, 129, .1); }
.bg-red { background: rgba(239, 68, 68, .1); }
.bg-yellow { background: rgba(234, 179, 8, .1); }
.bg-apple-green { background: rgba(163, 230, 53, .1); }

/* ========== BORDER ACCENTS ========== */
.border-purple { border-left: 4px solid var(--color-purple); }
.border-orange { border-left: 4px solid var(--color-orange); }
.border-blue { border-left: 4px solid var(--color-blue); }
.border-green { border-left: 4px solid var(--color-green); }
.border-red { border-left: 4px solid var(--color-red); }
.border-yellow { border-left: 4px solid var(--color-yellow); }
.border-apple-green { border-left: 4px solid var(--color-apple-green); }

/* ========== PRODUCT CATEGORY COLORS ========== */
.category-electronics { border-color: var(--color-blue); }
.category-fashion { border-color: var(--color-purple); }
.category-home { border-color: var(--color-green); }
.category-food { border-color: var(--color-orange); }
.category-health { border-color: var(--color-red); }
.category-books { border-color: var(--color-yellow); }
.category-sports { border-color: var(--color-apple-green); }

/* ========== PRICE TAGS ========== */
.price-discount {
    background: var(--color-red);
    color: #fff;
    padding: .3rem .6rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .8rem;
}

.price-hot-deal {
    background: linear-gradient(135deg, #f97316 0%, #eab308 100%);
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: .75rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .8; }
}

/* ========== GRADIENT ACCENTS ========== */
.gradient-purple { background: linear-gradient(135deg, #7c3aed 0%, #d8b4fe 100%); }
.gradient-orange { background: linear-gradient(135deg, #f97316 0%, #fed7aa 100%); }
.gradient-blue { background: linear-gradient(135deg, #3b82f6 0%, #93c5fd 100%); }
.gradient-green { background: linear-gradient(135deg, #10b981 0%, #a7f3d0 100%); }
.gradient-red { background: linear-gradient(135deg, #ef4444 0%, #fca5a5 100%); }

/* ========== SEASONAL/PROMOTIONAL ========== */
.promotional-banner {
    background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow) 100%);
    color: #fff;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 700;
}

.flash-sale {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: #fff;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    animation: pulse 1s infinite;
}

.limited-stock {
    background: var(--color-red);
    color: #fff;
    padding: .3rem .6rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .75rem;
}

.bestseller {
    background: var(--color-green);
    color: #fff;
    padding: .3rem .6rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .75rem;
}

.new-arrival {
    background: var(--color-blue);
    color: #fff;
    padding: .3rem .6rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .75rem;
}

.eco-friendly {
    background: var(--color-apple-green);
    color: #000;
    padding: .3rem .6rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .75rem;
}

/* ========== RATING COLORS ========== */
.rating-5star { color: var(--color-green); }
.rating-4star { color: var(--color-apple-green); }
.rating-3star { color: var(--color-yellow); }
.rating-2star { color: var(--color-orange); }
.rating-1star { color: var(--color-red); }

/* ========== ALERT/STATUS COLORS ========== */
.status-active { color: var(--color-green); }
.status-inactive { color: var(--color-red); }
.status-pending { color: var(--color-yellow); }
.status-processing { color: var(--color-blue); }
.status-error { color: var(--color-red); }
.status-warning { color: var(--color-orange); }
.status-success { color: var(--color-green); }