/**
 * Background Utility Classes
 * Theme-aware background colors and gradients
 */

/* Solid Backgrounds - Theme Colors */
.bg-primary {
    background-color: var(--theme-primary) !important;
}

.bg-primary-light {
    background-color: var(--theme-primary-light) !important;
}

.bg-primary-dark {
    background-color: var(--theme-primary-dark) !important;
}

.bg-secondary {
    background-color: var(--theme-secondary) !important;
}

.bg-secondary-light {
    background-color: var(--theme-secondary-light) !important;
}

.bg-secondary-dark {
    background-color: var(--theme-secondary-dark) !important;
}

.bg-accent {
    background-color: var(--theme-accent) !important;
}

.bg-accent-light {
    background-color: var(--theme-accent-light) !important;
}

.bg-accent-dark {
    background-color: var(--theme-accent-dark) !important;
}

/* Background Layers */
.bg-base {
    background-color: var(--theme-bg-primary) !important;
}

.bg-secondary-layer {
    background-color: var(--theme-bg-secondary) !important;
}

.bg-tertiary-layer {
    background-color: var(--theme-bg-tertiary) !important;
}

/* Semantic Backgrounds */
.bg-success {
    background-color: var(--theme-success) !important;
    color: white !important;
}

.bg-success-light {
    background-color: rgba(var(--theme-success-rgb), 0.1) !important;
    color: var(--theme-success) !important;
}

.bg-warning {
    background-color: var(--theme-warning) !important;
    color: white !important;
}

.bg-warning-light {
    background-color: rgba(var(--theme-warning-rgb), 0.1) !important;
    color: var(--theme-warning) !important;
}

.bg-danger {
    background-color: var(--theme-danger) !important;
    color: white !important;
}

.bg-danger-light {
    background-color: rgba(var(--theme-danger-rgb), 0.1) !important;
    color: var(--theme-danger) !important;
}

.bg-info {
    background-color: var(--theme-info) !important;
    color: white !important;
}

.bg-info-light {
    background-color: rgba(var(--theme-info-rgb), 0.1) !important;
    color: var(--theme-info) !important;
}

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: var(--theme-gradient-primary) !important;
    color: white !important;
}

.bg-gradient-accent {
    background: var(--theme-gradient-accent) !important;
    color: white !important;
}

.bg-gradient-success {
    background: var(--theme-gradient-success) !important;
    color: white !important;
}

.bg-gradient-warning {
    background: var(--theme-gradient-warning) !important;
    color: white !important;
}

.bg-gradient-info {
    background: var(--theme-gradient-info) !important;
    color: white !important;
}

.bg-gradient-danger {
    background: var(--theme-gradient-danger) !important;
    color: white !important;
}

/* Opacity Variants */
.bg-primary-10 {
    background-color: rgba(var(--theme-primary-rgb), 0.1) !important;
}

.bg-primary-20 {
    background-color: rgba(var(--theme-primary-rgb), 0.2) !important;
}

.bg-primary-30 {
    background-color: rgba(var(--theme-primary-rgb), 0.3) !important;
}

.bg-primary-50 {
    background-color: rgba(var(--theme-primary-rgb), 0.5) !important;
}

.bg-accent-10 {
    background-color: rgba(var(--theme-accent-rgb), 0.1) !important;
}

.bg-accent-20 {
    background-color: rgba(var(--theme-accent-rgb), 0.2) !important;
}

/* Success Opacity Variants */
.bg-success-10 {
    background-color: rgba(var(--theme-success-rgb), 0.1) !important;
}

.bg-success-20 {
    background-color: rgba(var(--theme-success-rgb), 0.2) !important;
}

.bg-success-30 {
    background-color: rgba(var(--theme-success-rgb), 0.3) !important;
}

/* White Opacity Variants (for gradient overlays) */
.bg-white-10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-white-15 {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.bg-white-20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.bg-white-25 {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.bg-white-30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Hover Effects */
.hover\:bg-primary:hover {
    background-color: var(--theme-primary) !important;
}

.hover\:bg-primary-light:hover {
    background-color: var(--theme-primary-light) !important;
}

.hover\:bg-accent:hover {
    background-color: var(--theme-accent) !important;
}

.hover\:bg-primary-10:hover {
    background-color: rgba(var(--theme-primary-rgb), 0.1) !important;
}