/**
 * WaitN Design System - Color Utilities
 * Background and text color classes
 */

/* ========================================
   BACKGROUND COLORS - SOLID
   ======================================== */
.bg-primary { background-color: var(--wn-primary) !important; }
.bg-primary-light { background-color: var(--wn-primary-light) !important; }
.bg-primary-dark { background-color: var(--wn-primary-dark) !important; }

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

.bg-success { background-color: var(--wn-success) !important; }
.bg-success-light { background-color: var(--wn-success-light) !important; }
.bg-success-dark { background-color: var(--wn-success-dark) !important; }

.bg-warning { background-color: var(--wn-warning) !important; }
.bg-warning-light { background-color: var(--wn-warning-light) !important; }
.bg-warning-dark { background-color: var(--wn-warning-dark) !important; }

.bg-error { background-color: var(--wn-error) !important; }
.bg-error-light { background-color: var(--wn-error-light) !important; }
.bg-error-dark { background-color: var(--wn-error-dark) !important; }

.bg-info { background-color: var(--wn-info) !important; }
.bg-info-light { background-color: var(--wn-info-light) !important; }
.bg-info-dark { background-color: var(--wn-info-dark) !important; }

/* ========================================
   BACKGROUND COLORS - GRAYS
   ======================================== */
.bg-white { background-color: var(--wn-white) !important; }
.bg-black { background-color: var(--wn-black) !important; }
.bg-gray-50 { background-color: var(--wn-gray-50) !important; }
.bg-gray-100 { background-color: var(--wn-gray-100) !important; }
.bg-gray-200 { background-color: var(--wn-gray-200) !important; }
.bg-gray-300 { background-color: var(--wn-gray-300) !important; }
.bg-gray-400 { background-color: var(--wn-gray-400) !important; }
.bg-gray-500 { background-color: var(--wn-gray-500) !important; }
.bg-gray-600 { background-color: var(--wn-gray-600) !important; }
.bg-gray-700 { background-color: var(--wn-gray-700) !important; }
.bg-gray-800 { background-color: var(--wn-gray-800) !important; }
.bg-gray-900 { background-color: var(--wn-gray-900) !important; }

/* ========================================
   BACKGROUND COLORS - TRANSPARENT
   ======================================== */
.bg-transparent { background-color: transparent !important; }

.bg-primary-10 { background-color: rgba(var(--wn-primary-rgb, 79, 70, 229), 0.1) !important; }
.bg-success-10 { background-color: rgba(16, 185, 129, 0.1) !important; }
.bg-warning-10 { background-color: rgba(245, 158, 11, 0.1) !important; }
.bg-error-10 { background-color: rgba(239, 68, 68, 0.1) !important; }
.bg-info-10 { background-color: rgba(59, 130, 246, 0.1) !important; }

/* ========================================
   GRADIENTS
   ======================================== */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--wn-primary) 0%, var(--wn-primary-dark) 100%) !important;
}

.bg-gradient-accent {
    background: linear-gradient(135deg, var(--wn-accent) 0%, var(--wn-accent-dark) 100%) !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, var(--wn-success) 0%, var(--wn-success-dark) 100%) !important;
}

.bg-gradient-warning {
    background: linear-gradient(135deg, var(--wn-warning) 0%, var(--wn-warning-dark) 100%) !important;
}

.bg-gradient-error {
    background: linear-gradient(135deg, var(--wn-error) 0%, var(--wn-error-dark) 100%) !important;
}

.bg-gradient-info {
    background: linear-gradient(135deg, var(--wn-info) 0%, var(--wn-info-dark) 100%) !important;
}

.bg-gradient-dark {
    background: linear-gradient(135deg, var(--wn-gray-800) 0%, var(--wn-gray-900) 100%) !important;
}

/* ========================================
   ICON BACKGROUNDS (Circular with white icon)
   ======================================== */
.wn-icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--wn-rounded-lg);
    color: var(--wn-white);
}

.wn-icon-bg-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--wn-rounded-md);
}

.wn-icon-bg-lg {
    width: 48px;
    height: 48px;
    border-radius: var(--wn-rounded-xl);
}

.wn-icon-bg-xl {
    width: 64px;
    height: 64px;
    border-radius: var(--wn-rounded-2xl);
}

.wn-icon-bg-circle {
    border-radius: var(--wn-rounded-full);
}

/* ========================================
   BORDER COLORS
   ======================================== */
.border-primary { border-color: var(--wn-primary) !important; }
.border-accent { border-color: var(--wn-accent) !important; }
.border-success { border-color: var(--wn-success) !important; }
.border-warning { border-color: var(--wn-warning) !important; }
.border-error { border-color: var(--wn-error) !important; }
.border-info { border-color: var(--wn-info) !important; }
.border-gray-200 { border-color: var(--wn-gray-200) !important; }
.border-gray-300 { border-color: var(--wn-gray-300) !important; }
.border-transparent { border-color: transparent !important; }

/* ========================================
   OPACITY UTILITIES
   ======================================== */
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }