/**
 * Category Background Gradients
 * Custom CSS for category background gradients
 */

/* Base gradient classes */
.category-gradient {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Preset gradients with proper color definitions */
.gradient-sunset {
    background: linear-gradient(to bottom right, #fb923c, #ec4899) !important;
}

.gradient-ocean {
    background: linear-gradient(to bottom right, #3b82f6, #0891b2) !important;
}

.gradient-nature {
    background: linear-gradient(to bottom right, #22c55e, #059669) !important;
}

.gradient-magic {
    background: linear-gradient(to bottom right, #8b5cf6, #7c3aed) !important;
}

.gradient-fire {
    background: linear-gradient(to bottom right, #f97316, #b91c1c) !important;
}

.gradient-ice {
    background: linear-gradient(to bottom right, #22d3ee, #2563eb) !important;
}

.gradient-gold {
    background: linear-gradient(to bottom right, #facc15, #f97316) !important;
}

.gradient-royal {
    background: linear-gradient(to bottom right, #6366f1, #9333ea) !important;
}

/* Dynamic gradient utility */
.bg-category-gradient {
    background-image: var(--category-gradient);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}