/* Dynamic CSS generated from ui-config.json */

/* Gradient backgrounds with brand colors */
.gradient-bg {
    background: linear-gradient(135deg, #6246FF 0%, #00E6E6 100%) !important;
}

.gradient-text {
    background: linear-gradient(135deg, #6246FF 0%, #00E6E6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
}

/* Gradient overlays */
.gradient-overlay {
    background: linear-gradient(135deg, #6246FF 0%, #00E6E6 100%) !important;
    opacity: 0.9;
}

/* Button gradients */
.btn-gradient {
    background: linear-gradient(135deg, #6246FF 0%, #00E6E6 100%) !important;
    color: white !important;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #6246FF 0%, #00E6E6 100%) !important;
    opacity: 0.9;
}

/* Card gradients */
.card-gradient {
    background: linear-gradient(135deg, #6246FF 0%, #00E6E6 100%) !important;
}

/* Border gradients */
.border-gradient {
    border-image: linear-gradient(135deg, #6246FF 0%, #00E6E6 100%) 1 !important;
}

/* Shadow with brand colors */
.shadow-brand {
    box-shadow: 0 10px 30px -10px #6246FF40 !important;
}

/* Hover effects with brand colors */
.hover-brand:hover {
    background-color: #6246FF10 !important;
    border-color: #6246FF !important;
}

/* Focus effects with brand colors */
.focus-brand:focus {
    border-color: #6246FF !important;
    box-shadow: 0 0 0 3px #6246FF20 !important;
}

/* Text colors */
.text-primary-brand {
    color: #6246FF !important;
}

.text-secondary-brand {
    color: #00E6E6 !important;
}

/* Background colors */
.bg-primary-brand {
    background-color: #6246FF !important;
}

.bg-secondary-brand {
    background-color: #00E6E6 !important;
}

/* Gradient animations */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animated {
    background: linear-gradient(-45deg, #6246FF, #00E6E6, #6246FF, #00E6E6);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
}

/* Progress bar gradients */
.progress-gradient {
    background: linear-gradient(90deg, #6246FF 0%, #00E6E6 100%) !important;
}

/* Additional utility classes */
.opacity-90 { opacity: 0.9 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-70 { opacity: 0.7 !important; }