/* Color Utilities - ROA2WEB */

/* ===== Background Colors ===== */
.bg-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.bg-success {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
}

.bg-warning {
  background-color: var(--color-warning);
  color: var(--color-text-inverse);
}

.bg-error {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}

.bg-info {
  background-color: var(--color-info);
  color: var(--color-text-inverse);
}

/* ===== Light Background Colors (10% opacity) ===== */
.bg-primary-light {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--color-primary);
}

.bg-success-light {
  background-color: rgba(5, 150, 105, 0.1);
  color: var(--color-success);
}

.bg-warning-light {
  background-color: rgba(217, 119, 6, 0.1);
  color: var(--color-warning);
}

.bg-error-light {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--color-error);
}

.bg-info-light {
  background-color: rgba(8, 145, 178, 0.1);
  color: var(--color-info);
}

/* ===== Text Colors ===== */
.text-primary {
  color: var(--color-primary);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.text-info {
  color: var(--color-info);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-secondary {
  color: var(--color-text-secondary);
}

/* ===== Icon Background Utilities ===== */
.icon-bg {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.icon-bg-sm {
  width: 32px;
  height: 32px;
}

.icon-bg-lg {
  width: 48px;
  height: 48px;
}
