/* ================================================================================================
    RIOICHI COLOR SYSTEM - Centralized Color Management
    All colors controlled by CSS variables that can be set from site config
================================================================================================ */

/* Colors akan diambil dari template.php yang inject dari site config */

/* Text with gradient gold */
.text-gold-gradient {
    background: var(--gradient-gold-shine);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Button styles using config colors */
.btn-gold-primary {
    background: var(--gradient-gold-shine) !important;
    color: #0A0E1A !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--gold-border) !important;
}

.btn-gold-primary:hover {
    background: linear-gradient(135deg, var(--light-yellow) 0%, var(--yellow-primary) 100%) !important;
    box-shadow: 0 6px 25px var(--gold-border) !important;
    transform: translateY(-2px) !important;
}

.btn-gold-outline {
    background: transparent !important;
    border: 2px solid var(--yellow-primary) !important;
    color: var(--yellow-primary) !important;
}

.btn-gold-outline:hover {
    background: var(--gradient-gold) !important;
    color: #0A0E1A !important;
}

/* Background colors */
.bg-gold-light {
    background: var(--gold-bg-10) !important;
}

.bg-gold-gradient {
    background: var(--gradient-gold-shine) !important;
}

.bg-gold-dark {
    background: var(--gradient-gold-dark) !important;
}

/* Border colors */
.border-gold {
    border-color: var(--yellow-primary) !important;
}

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

/* Text colors */
.text-gold {
    color: var(--yellow-primary) !important;
}

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

/* Active/Selected states */
.active-gold,
.selected-gold {
    background: var(--gradient-gold-shine) !important;
    color: #0A0E1A !important;
    border-color: var(--yellow-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px var(--gold-border) !important;
}

/* Hover states */
.hover-gold:hover {
    background: var(--gold-bg-15) !important;
    color: var(--yellow-primary) !important;
    border-color: var(--gold-border) !important;
}

/* Focus states */
.focus-gold:focus {
    border-color: var(--yellow-primary) !important;
    box-shadow: 0 0 0 3px var(--gold-bg-15) !important;
    background: var(--gold-bg-10) !important;
}

/* Icon colors */
.icon-gold {
    color: var(--yellow-primary) !important;
}

.icon-gold-bg {
    background: var(--gold-bg-15) !important;
    color: var(--yellow-primary) !important;
    border: 1px solid var(--gold-border) !important;
}

/* Badge colors */
.badge-gold {
    background: var(--gradient-gold) !important;
    color: #0A0E1A !important;
    border: 1px solid var(--gold-border) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px var(--gold-border) !important;
}

/* Shadow effects */
.shadow-gold {
    box-shadow: 0 4px 20px var(--gold-border) !important;
}

.shadow-gold-lg {
    box-shadow: 0 8px 32px var(--gold-border) !important;
}

/* Glow animation */
@keyframes goldGlow {
    0%, 100% {
        box-shadow: 0 0 20px var(--gold-border);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }
}

.animate-gold-glow {
    animation: goldGlow 2s ease-in-out infinite;
}