@layer utility {
  .brand-info {
    --brand-bg: var(--info-bg);
    --brand-bg-hover: var(--info-bg-hover);
    --brand-bg-active: var(--info-bg-active);
    --brand-bg-low: var(--info-bg-low);
    --brand-bg-low-hover: var(--info-bg-low-hover);
    --brand-bg-low-active: var(--info-bg-low-active);
  }
  .brand-danger {
    --brand-bg: var(--danger-bg);
    --brand-bg-hover: var(--danger-bg-hover);
    --brand-bg-active: var(--danger-bg-active);
    --brand-bg-low: var(--danger-bg-low);
    --brand-bg-low-hover: var(--danger-bg-low-hover);
    --brand-bg-low-active: var(--danger-bg-low-active);
  }
  .brand-success {
    --brand-bg: var(--success-bg);
    --brand-bg-hover: var(--success-bg-hover);
    --brand-bg-active: var(--success-bg-active);
    --brand-bg-low: var(--success-bg-low);
    --brand-bg-low-hover: var(--success-bg-low-hover);
    --brand-bg-low-active: var(--success-bg-low-active);
  }
  .brand-warning {
    --brand-bg: var(--warning-bg);
    --brand-bg-hover: var(--warning-bg-hover);
    --brand-bg-active: var(--warning-bg-active);
    --brand-bg-low: var(--warning-bg-low);
    --brand-bg-low-hover: var(--warning-bg-low-hover);
    --brand-bg-low-active: var(--warning-bg-low-active);
  }
  .brand-default {
    --brand-bg: var(--default-bg);
    --brand-bg-hover: var(--default-bg-hover);
    --brand-bg-active: var(--default-bg-active);
    --brand-bg-low: var(--default-bg-low);
    --brand-bg-low-hover: var(--default-bg-low-hover);
    --brand-bg-low-active: var(--default-bg-low-active);
  }
}